Skip to content

Commit

Permalink
fix: updated docs for checkbox and radio component
Browse files Browse the repository at this point in the history
  • Loading branch information
@rajat693
rajat693 committed Sep 3, 2024
1 parent bc3b8f3 commit 1a75c4d
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 61 deletions.
42 changes: 42 additions & 0 deletions example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,6 +365,48 @@ Contains all indicators related layout style props and actions. It inherits all
Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Prop</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Type</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Default</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Description</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>forceMount</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>boolean</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>false</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>Forces mounting when more control is needed, useful for animations with React libraries.</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>
#### CheckboxLabel
Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
Expand Down
102 changes: 41 additions & 61 deletions example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,47 @@ Contains all Indicator related layout style props and actions. It inherits all t
Contains all Icon related layout style props and actions. It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component.
<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>Prop</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Type</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Default</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Description</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>forceMount</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>boolean</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>false</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>Forces mounting when more control is needed, useful for animations with React libraries.</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>
#### RadioLabel
Contains all Label related layout style props and actions. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.
Expand Down Expand Up @@ -423,67 +464,6 @@ We have outlined the various features that ensure the Radio component is accessi
Radio component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props).
<!--
## Spec Doc
Explore the comprehensive details of the Radio in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
<iframe
style={{
borderRadius: '8px',
border: ' 1px solid rgba(0, 0, 0, 0.1)',
aspectRatio: 736 / 585,
}}
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5464%253A26252%26type%3Ddesign%26node-id%3D5464-27904%26viewport%3D598%252C259%252C0.03%26t%3DcgUlx0uIsFj3bgLZ-1%26scaling%3Dcontain%26starting-point-node-id%3D5464%253A27904%26mode%3Ddesign"
allowFullScreen
/> -->
<!--
### Customizing the Radio
We have a function called `createRadio` which can be used to create a custom radio component. This function takes in a configuration object which contains the styled components that you want to use for the radio. You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.
#### Usage
Default styling of all these components can be found in the `components/core/radio` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Radio) of the styled `Radio` components.
```jsx
// import the styles
import {
Root,
Indicator,
Icon,
Label,
Group,
} from 'components/core/radio/styled-components';
// import the createRadio function
import { createRadio } from '@gluestack-ui/radio';
// Understanding the API
const Radio = createRadio({
Root,
Indicator,
Icon,
Label,
Group,
});
// Using the radio component
export default () => (
<RadioGroup>
<Radio>
<RadioIndicator>
<RadioIcon />
</RadioIndicator>
<RadioLabel />
</Radio>
</RadioGroup>
);
```
-->
### Examples
The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
Expand Down

0 comments on commit 1a75c4d

Please sign in to comment.