Skip to content

Commit

Permalink
Merge pull request #1939 from gluestack/fix/ui-issues-minor-themed
Browse files Browse the repository at this point in the history
fix: minor ui color & theme issues
  • Loading branch information
surajahmed authored Mar 14, 2024
2 parents ac22a02 + 9c3b45f commit 694a5cf
Show file tree
Hide file tree
Showing 19 changed files with 111 additions and 118 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,11 @@ import {
AccordionContentText,
ChevronDownIcon,
ChevronUpIcon,
} from '../../core-components/themed';
import {
PlusIcon,
MinusIcon,
} from '../../core-components/themed';
} from 'lucide-react-native';
import {
AppProvider,
CodePreview,
Expand Down Expand Up @@ -240,7 +242,7 @@ The borderRadius prop can be used to create rounded corners for both the Accordi
code: `
function App(){
return (
<Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent">
<Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent" bg="$white" $dark-bg="$black" borderRadius='$lg'>
<AccordionItem value="item-1" borderRadius="$lg">
<AccordionHeader>
<AccordionTrigger sx={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ This section provides a comprehensive reference list for the component props, de

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<Wrapper>
<>
<TableContainer>
<Table>
<Table.THead>
Expand Down Expand Up @@ -414,7 +414,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
</Table.TBody>
</Table>
</TableContainer>
</Wrapper>
</>

#### ActionsheetBackdrop

Expand All @@ -427,7 +427,7 @@ It inherits all the properties of [@legendapp/motion's](https://legendapp.com/op
**Descendants Styling Props**
Props to style child components.

<Wrapper>
<>
<TableContainer>
<Table>
<Table.THead>
Expand All @@ -454,7 +454,7 @@ Props to style child components.
</Table.TBody>
</Table>
</TableContainer>
</Wrapper>
</>

#### ActionsheetDragIndicatorWrapper

Expand All @@ -471,7 +471,7 @@ It inherits all the properties of React Native's [Pressable](https://reactnative
**Descendants Styling Props**
Props to style child components.

<Wrapper>
<>
<TableContainer>
<Table>
<Table.THead>
Expand Down Expand Up @@ -508,7 +508,7 @@ Props to style child components.
</Table.TBody>
</Table>
</TableContainer>
</Wrapper>
</>

#### ActionsheetItemText

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,13 @@ import {
ButtonGroup,
Center,
HStack,
AlertTriangleIcon,
Text, CheckCircleIcon,Heading, Icon, AlertCircleIcon
Text,
CheckCircleIcon,
Heading,
Icon,
AlertCircleIcon
} from '../../core-components/themed';
import {AlertTriangleIcon} from 'lucide-react-native';
import { transformedCode } from '../../utils';
import {
AppProvider,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import {
Text,
Icon,
Heading,
User,
} from '../../core-components/themed';
import { transformedCode } from '../../utils';
import {
Expand All @@ -38,6 +37,7 @@ import {
InlineCode,
CollapsibleCode
} from '@gluestack/design-system';
import { User } from 'lucide-react-native';
import Wrapper from '../../core-components/themed/Wrapper';

This is an illustration of **Avatar** component.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import {
Button,
ButtonText,
Badge,
Text,
} from '../../core-components/themed';
import {
PaintBucket,
Expand All @@ -48,7 +49,6 @@ import {
import {
AppProvider,
CodePreview,
Text,
Table,
TableContainer,
InlineCode,
Expand Down Expand Up @@ -336,7 +336,6 @@ A Badge component used with a menu adds a visual indicator, such as a badge, to
</Button>
);
}}
bg='$white'
>
<MenuItem key="Community" textValue="Community">
<HStack space="sm" alignItems="center">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import {
CheckboxIcon,
CheckboxLabel,
Text,
RemoveIcon,
FormControl,
Icon,
CheckIcon,
Expand All @@ -34,7 +33,6 @@ import {
} from '../../core-components/themed';
import { useState, useRef } from 'react';
import { transformedCode } from '../../utils';

import {
AppProvider,
CodePreview,
Expand All @@ -54,7 +52,7 @@ This is an illustration of **Checkbox** component.
metaData={{
code: `
<Checkbox {...props} >
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Label</CheckboxLabel>
Expand Down Expand Up @@ -144,7 +142,7 @@ This section provides a comprehensive reference list for the component props, de

Contains all Checkbox related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<Wrapper>
<>
<TableContainer>
<Table>
<Table.THead>
Expand Down Expand Up @@ -331,12 +329,12 @@ Contains all Checkbox related layout style props and actions. It inherits all th
</Table.TBody>
</Table>
</TableContainer>
</Wrapper>
</>

**Descendants Styling Props**
Props to style child components.

<Wrapper>
<>
<TableContainer>
<Table>
<Table.THead>
Expand Down Expand Up @@ -383,7 +381,7 @@ Props to style child components.
</Table.TBody>
</Table>
</TableContainer>
</Wrapper>
</>

#### CheckboxIndicator

Expand All @@ -401,7 +399,7 @@ Contains all Label related layout style props and actions. It inherits all the p

Contains all Group related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<Wrapper>
<>
<TableContainer>
<Table>
<Table.THead>
Expand Down Expand Up @@ -504,7 +502,7 @@ Contains all Group related layout style props and actions. It inherits all the p
</Table.TBody>
</Table>
</TableContainer>
</Wrapper>
</>

### Features

Expand Down Expand Up @@ -541,7 +539,7 @@ Checkbox component is created using Pressable component from react-native. It ex

#### Checkbox

<Wrapper>
<>
<TableContainer>
<Table>
<Table.THead>
Expand Down Expand Up @@ -574,7 +572,7 @@ Checkbox component is created using Pressable component from react-native. It ex
</Table.TBody>
</Table>
</TableContainer>
</Wrapper>
</>

### Examples

Expand All @@ -598,19 +596,19 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho
}}>
<VStack space="3xl">
<Checkbox value="Eng">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Framer</CheckboxLabel>
</Checkbox>
<Checkbox value="invison">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Invision Studio</CheckboxLabel>
</Checkbox>
<Checkbox value="adobe">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Adobe XD</CheckboxLabel>
Expand Down Expand Up @@ -659,19 +657,19 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e
}}>
<HStack space="2xl">
<Checkbox value="Illustration">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Illustration</CheckboxLabel>
</Checkbox>
<Checkbox value="Animation">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Animation</CheckboxLabel>
</Checkbox>
<Checkbox value="Typography">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Typography</CheckboxLabel>
Expand Down Expand Up @@ -720,7 +718,7 @@ A checkbox component with help text provides informative guidance alongside sele
<VStack space="2xl">
<Box>
<Checkbox value="Design">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel >Design</CheckboxLabel>
Expand All @@ -729,7 +727,7 @@ A checkbox component with help text provides informative guidance alongside sele
</Box>
<Box>
<Checkbox value="Marketing">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Marketing</CheckboxLabel>
Expand Down Expand Up @@ -778,19 +776,19 @@ A checkbox component integrated with form control enhances the user experience b
<VStack space="sm">
<Heading size="sm" >Sign up for newsletters</Heading>
<Checkbox >
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Daily Bits</CheckboxLabel>
</Checkbox>
<Checkbox >
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Event Updates</CheckboxLabel>
</Checkbox>
<Checkbox >
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Sponsorship</CheckboxLabel>
Expand Down Expand Up @@ -901,13 +899,13 @@ A controlled component architecture incorporates a checkbox component, allowing
}}>
<VStack space="md">
<Checkbox value="UX Research">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>UX Research</CheckboxLabel>
</Checkbox>
<Checkbox value="Software">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Software Development</CheckboxLabel>
Expand Down Expand Up @@ -958,13 +956,13 @@ function App() {
<CheckboxGroup ref={radioRef} >
<VStack space="md">
<Checkbox onChange={handleCheckboxChange} value="Apartments">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Apartments</CheckboxLabel>
</Checkbox>
<Checkbox onChange={handleCheckboxChange} value="Residents">
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Residents</CheckboxLabel>
Expand Down Expand Up @@ -1018,15 +1016,15 @@ function CheckboxExample(){
isDisabled={true}
value="Label 1"
>
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Label 1</CheckboxLabel>
</Checkbox>
<Checkbox
value="Label 2"
>
<CheckboxIndicator mr="$2">
<CheckboxIndicator >
<CheckboxIcon as={CheckIcon}/>
</CheckboxIndicator>
<CheckboxLabel>Label 2</CheckboxLabel>
Expand Down
Loading

0 comments on commit 694a5cf

Please sign in to comment.