-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: [DS-211] Disclosure Component (#531)
- Loading branch information
Showing
68 changed files
with
3,226 additions
and
1,579 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@hopper-ui/components": patch | ||
| --- | ||
|
|
||
| Created the Disclosure component with its sub components: DisclosureHeader and DisclosurePanel. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| --- | ||
| title: Disclosure | ||
| description: The disclosure component is used to put long sections of information under a block that users can expand or collapse. | ||
| category: "navigation" | ||
| links: | ||
| source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Disclosure/src/Disclosure.tsx | ||
| aria: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ | ||
| --- | ||
|
|
||
| <Example src="Disclosure/docs/preview" isOpen /> | ||
|
|
||
| <FeatureFlag flag="next"> | ||
| ## Guidelines | ||
|
|
||
| TODO: If we have some guidelines about this component's usage | ||
|
|
||
| ### Accessibility ? | ||
|
|
||
| TODO: If we have some guidelines about this component and accessibility | ||
| </FeatureFlag> | ||
|
|
||
| ## Anatomy | ||
|
|
||
| <FeatureFlag flag="rc"> | ||
| TODO: We have anatomy screenshots from the Figma, we could most likely use them here | ||
|
|
||
| ### Concepts | ||
|
|
||
| TODO: links to related concepts | ||
| </FeatureFlag> | ||
|
|
||
| ### Composed Components | ||
|
|
||
| A `Disclosure` uses the following components. | ||
|
|
||
| <ComposedComponents components={["Text, Icon"]}/> | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Disabled | ||
|
|
||
| A disclosure can be disabled. | ||
|
|
||
| <Example src="Disclosure/docs/disabled" /> | ||
|
|
||
| ### Variants | ||
|
|
||
| A disclosure has multiple variants. | ||
|
|
||
| <Example src="Disclosure/docs/variants" /> | ||
|
|
||
| **Standalone** - Used when the disclosure is not inside a container. | ||
|
|
||
| **Inline** - Used when placing a disclosure inside a container. | ||
|
|
||
| ### Icon | ||
|
|
||
| A disclosure can contain an icon. | ||
|
|
||
| <Example src="Disclosure/docs/icon" /> | ||
|
|
||
| ### Description | ||
|
|
||
| A disclosure can contain a description. | ||
|
|
||
| <Example src="Disclosure/docs/description" /> | ||
|
|
||
| ### Controlled | ||
|
|
||
| A disclosure can handle its expanded state in controlled mode. | ||
|
|
||
| <Example src="Disclosure/docs/controlled" /> | ||
|
|
||
| ### Custom Header | ||
|
|
||
| A disclosure can have a custom header. To accomplish this, do not use `DisclosureHeader` and use the [Button](./Button) component with `slot="trigger"` instead. | ||
| Using React Aria's [Button](https://react-spectrum.adobe.com/react-aria/Button.html) component will also work. | ||
|
|
||
| <Example src="Disclosure/docs/customHeader" /> | ||
|
|
||
| <FeatureFlag flag="next"> | ||
| ## Advanced customization | ||
|
|
||
| ### Contexts | ||
| TODO: Example of context + content about the context | ||
|
|
||
| ### Custom Children | ||
|
|
||
| TODO: Example of passing custom children to the components to fake a slot | ||
|
|
||
| ### Custom Component | ||
|
|
||
| TODO: Example of creating a custom version of this component | ||
| </FeatureFlag> | ||
|
|
||
| ## Props | ||
|
|
||
| ### Disclosure | ||
| <PropTable component="Disclosure" /> | ||
|
|
||
| ### Disclosure Header | ||
| <PropTable component="DisclosureHeader" /> | ||
|
|
||
| ### Disclosure Panel | ||
| <PropTable component="DisclosurePanel" /> | ||
|
|
||
| ## Progressive Enhancement | ||
|
|
||
| Our Disclosure component uses experimental CSS features like: | ||
|
|
||
| - **interpolate-size: allow-keywords**: Enables fluid transitions between dynamic sizes. | ||
|
|
||
| - **transition-behavior: allow-discrete**: Allows transitions for properties like content-visibility. | ||
|
|
||
| These features enhance animations where supported. In browsers without support, the component remains fully usable without animations, maintaining progressive enhancement. | ||
|
|
||
| ## Migration Notes | ||
|
|
||
| <MigrateGuide src="Disclosure/docs/migration-notes" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.