Skip to content

Commit

Permalink
Merge pull request #2448 from gluestack/feat/data-attributes
Browse files Browse the repository at this point in the history 
Feat/data attributes
  • Loading branch information
@rajat693
rajat693 authored Sep 4, 2024
2 parents 7bb8dd3 + 94cc32c commit a02c5b1
Show file tree
Hide file tree
Showing 11 changed files with 848 additions and 32 deletions.
26 changes: 8 additions & 18 deletions example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@ export default () => (
</Accordion>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -627,7 +627,7 @@ Wrapper,

</AppProvider>

### Rounded corners
#### Rounded corners

The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.

Expand Down Expand Up @@ -723,7 +723,7 @@ function App(){
/>
</AppProvider>

### 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.

Expand Down Expand Up @@ -821,7 +821,7 @@ function App(){
/>
</AppProvider>

### Default value
#### Default value

Use the defaultValue prop to define the open item by default.

Expand Down Expand Up @@ -943,7 +943,7 @@ function App(){
/>
</AppProvider>

### 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.

Expand Down Expand Up @@ -1064,7 +1064,7 @@ function App(){
/>
</AppProvider>

### 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.
Expand Down Expand Up @@ -1189,13 +1189,3 @@ function App(){
}}
/>
</AppProvider>










89 changes: 89 additions & 0 deletions example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>State</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Data Attribute</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Values</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>hover</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
data-hover
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>active</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-active</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>disabled</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-disabled</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>focusVisible</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-focus-visible</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>


### 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
118 changes: 118 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 @@ -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.

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>State</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Data Attribute</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Values</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>hover</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
data-hover
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>active</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-active</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>disabled</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-disabled</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>focusVisible</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-focus-visible</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>invalid</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-invalid</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>checked</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-checked</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

### 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
55 changes: 55 additions & 0 deletions example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<>
<TableContainer>
<Table>
<Table.THead>
<Table.TR>
<Table.TH>
<Table.TText>State</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Data Attribute</Table.TText>
</Table.TH>
<Table.TH>
<Table.TText>Values</Table.TText>
</Table.TH>
</Table.TR>
</Table.THead>
<Table.TBody>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>focus</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-focus</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
<Table.TR>
<Table.TD>
<Table.TText>
<InlineCode>focusVisible</InlineCode>
</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>data-focus-visible</Table.TText>
</Table.TD>
<Table.TD>
<Table.TText>
<InlineCode>true | false</InlineCode>
</Table.TText>
</Table.TD>
</Table.TR>
</Table.TBody>
</Table>
</TableContainer>
</>

#### Fab

<>
Expand Down
Loading

0 comments on commit a02c5b1

Please sign in to comment.