From 4dcaa98419b85fb8ffae8518b9fa89df2db83a1f Mon Sep 17 00:00:00 2001 From: rajat693 Date: Mon, 2 Sep 2024 19:05:29 +0530 Subject: [PATCH 01/11] feat: added data attributes table for button component --- .../components/Button/index.nw.stories.mdx | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx index 37d36b5ef..ae03c3cd1 100644 --- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx @@ -477,6 +477,95 @@ Button component is created using Pressable component from react-native. It exte > Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. + +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + active + + + + data-active + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focusVisible + + + + data-focus-visible + + + + true | false + + + + +
+ + + + ### 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. From fdd2948f96dc32103bafad6c851c395c427bd727 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 12:14:57 +0530 Subject: [PATCH 02/11] fix: updated docs of accordian --- .../components/Accordion/index.nw.stories.mdx | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index 29672e017..ecf1c8753 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -240,6 +240,7 @@ export default () => ( ); ``` + ### Component Props This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. @@ -479,12 +480,11 @@ We have outlined the various features that ensure the Accordion component is acc - VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed). - -## Examples +### 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. -### Customized Component +#### Customized Component The following example demonstrates how easily you can customize the Accordion component to suit your needs. @@ -627,7 +627,7 @@ Wrapper, -### Rounded corners +#### Rounded corners The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components. @@ -723,7 +723,7 @@ function App(){ /> -### Disabled item +#### Disabled item You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component. @@ -821,7 +821,7 @@ function App(){ /> -### Default value +#### Default value Use the defaultValue prop to define the open item by default. @@ -943,7 +943,7 @@ function App(){ /> -### Nested Components +#### Nested Components You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region. @@ -1064,7 +1064,7 @@ function App(){ /> -### Controlled Accordion +#### Controlled Accordion A component is controlled when it's managed by its parent using props. You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion. @@ -1189,13 +1189,3 @@ function App(){ }} /> - - - - - - - - - - From 46b0fee49e6218303f7749ce4545bbfd40f1a96a Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 12:26:39 +0530 Subject: [PATCH 03/11] fix: updated docs of checkbox data-attributes --- .../components/Checkbox/index.nw.stories.mdx | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx index 59284e127..fa1b3b840 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx @@ -592,6 +592,124 @@ Checkbox component is created using Pressable component from react-native. It ex > Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. + +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + active + + + + data-active + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focusVisible + + + + data-focus-visible + + + + true | false + + + + + + + invalid + + + + data-invalid + + + + true | false + + + + + + + checked + + + + data-checked + + + + true | false + + + + +
+ + + ### 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. From 4128c1ad37528c24a4b6e5c4baa1e7f7b8b41044 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:17:12 +0530 Subject: [PATCH 04/11] fix: updated docs of input data-attributes --- .../src/components/Fab/index.nw.stories.mdx | 55 ++++++++++++ .../src/components/Input/index.nw.stories.mdx | 87 +++++++++++++++++++ 2 files changed, 142 insertions(+) diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index 38bcfa1d0..ee033b5cb 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -333,6 +333,61 @@ The following are the lists of all the libraries and packages the component reli Fab 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). +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + focus + + + + data-focus + + + + true | false + + + + + + + focusVisible + + + + data-focus-visible + + + + true | false + + + + +
+ + + #### Fab <> diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx index 5a0f462e9..fcbd1bab1 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -452,6 +452,93 @@ We have outlined the various features that ensure the Input component is accessi Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below. +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focus + + + + data-focus + + + + true | false + + + + + + + invalid + + + + data-invalid + + + + true | false + + + + +
+ + + #### Input <> From 1fe89658e3c6e120c4b28b331cbbad267bdea2a4 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:21:43 +0530 Subject: [PATCH 05/11] fix: updated docs of link data-attributes --- .../src/components/Link/index.nw.stories.mdx | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx index 28c703229..a1b8bf15c 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -253,6 +253,95 @@ We have outlined the various features that ensure the Link component is accessib Link 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). +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + active + + + + data-active + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focusVisible + + + + data-focus-visible + + + + true | false + + + + +
+ + + +### Examples + #### Link <> From a74395af4e998453e7d63155bd82dfcfd29b7718 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:24:27 +0530 Subject: [PATCH 06/11] fix: updated docs of pressable data-attributes --- .../components/Pressable/index.nw.stories.mdx | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx index 0dfaf4032..acc3d0a6f 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx @@ -118,6 +118,61 @@ This section provides a comprehensive reference list for the component props, de It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focusVisible + + + + data-focus-visible + + + + true | false + + + + +
+ + + ### 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. From 77007700460d29e4b73d1e27f00b6bd42b95fbeb Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:29:47 +0530 Subject: [PATCH 07/11] fix: updated docs of radio data-attributes --- .../src/components/Radio/index.nw.stories.mdx | 103 ++++++++++++++++++ 1 file changed, 103 insertions(+) diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx index 5b9904d49..3fa8b9d6e 100644 --- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx @@ -464,6 +464,109 @@ 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). + +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + active + + + + data-active + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focusVisible + + + + data-focus-visible + + + + true | false + + + + + + + invalid + + + + data-invalid + + + + true | false + + + + +
+ + + ### 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. From 9a0b75e96829d488da77b117c8827d161b6831f6 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:36:06 +0530 Subject: [PATCH 08/11] fix: updated docs of select data-attributes --- .../components/Select/index.nw.stories.mdx | 87 +++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx index 5b16f1764..d95454e50 100644 --- a/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Select/index.nw.stories.mdx @@ -663,6 +663,93 @@ Select component is created using View component from react-native. It extends a +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focus + + + + data-focus + + + + true | false + + + + + + + invalid + + + + data-invalid + + + + true | false + + + + +
+ + + ### 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. From a4cdb7647232bd8d959413b6be8aab7c9afa00d7 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:40:01 +0530 Subject: [PATCH 09/11] fix: updated docs of slider data-attributes --- .../components/Slider/index.nw.stories.mdx | 103 +++++++++++++++--- 1 file changed, 89 insertions(+), 14 deletions(-) diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx index 7b9adc2bb..48d9b7b0b 100644 --- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx @@ -430,17 +430,92 @@ We have outlined the various features that ensure the Slider component is access Slider component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props). - + +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + active + + + + data-active + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + focus + + + + data-focus + + + + true | false + + + + +
+ + + + From f6cc6c4dd754cd4f1210e1eb7cc2f92b2b63c8f2 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:46:49 +0530 Subject: [PATCH 10/11] fix: updated docs of switch data-attributes --- .../components/Slider/index.nw.stories.mdx | 32 ++++--------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx index 48d9b7b0b..1cf28cba2 100644 --- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx @@ -430,7 +430,6 @@ We have outlined the various features that ensure the Slider component is access Slider component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props). - ### Data Attributes Table Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. @@ -451,16 +450,14 @@ Component receives states as props as boolean values, which are applied as ```da - + - hover + disabled - - data-hover - + data-disabled @@ -471,26 +468,11 @@ Component receives states as props as boolean values, which are applied as ```da - active - - - - data-active - - - - true | false - - - - - - - disabled + focus - data-disabled + data-focus @@ -501,11 +483,11 @@ Component receives states as props as boolean values, which are applied as ```da - focus + invalid - data-focus + data-invalid From 94cc32cf2841e72358960620312ad5119a546881 Mon Sep 17 00:00:00 2001 From: rajat693 Date: Wed, 4 Sep 2024 13:50:48 +0530 Subject: [PATCH 11/11] fix: updated docs of textarea data-attributes --- .../components/Textarea/index.nw.stories.mdx | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx index 7b87eb320..8d08744f6 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -384,6 +384,92 @@ Textarea component is created using TextInput component from react-native. It ex +### Data Attributes Table +Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. + +<> + + + + + + State + + + Data Attribute + + + Values + + + + + + + + hover + + + + + data-hover + + + + + true | false + + + + + + + focus + + + + data-focus + + + + true | false + + + + + + + disabled + + + + data-disabled + + + + true | false + + + + + + + invalid + + + + data-invalid + + + + true | false + + + + +
+ + ### Examples