From 418e10b419f8447e41eb262939aae34fefba7e0f Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Thu, 9 Oct 2025 11:35:41 +0200 Subject: [PATCH] docs: stable release documentation --- .../00-getting started/Troubleshooting.mdx | 71 ++++ .../migration guides/migration-v1-v2.mdx | 26 +- docs/stories/02-primitives/Combobox.mdx | 60 ++- .../02-primitives/Combobox.stories.tsx | 203 +++++++++- docs/stories/02-primitives/Select.mdx | 44 +-- docs/stories/02-primitives/Select.stories.tsx | 142 ++++++- docs/stories/02-primitives/overview.mdx | 59 +++ docs/stories/03-inputs/Checkbox.mdx | 10 +- docs/stories/03-inputs/Checkbox.stories.tsx | 4 +- docs/stories/03-inputs/Combobox.mdx | 27 +- docs/stories/03-inputs/Combobox.stories.tsx | 134 +++---- docs/stories/03-inputs/DatePicker.mdx | 10 +- docs/stories/03-inputs/DatePicker.stories.tsx | 12 +- docs/stories/03-inputs/DateTimePicker.mdx | 10 +- .../03-inputs/DateTimePicker.stories.tsx | 23 +- docs/stories/03-inputs/JSONInput.mdx | 10 +- docs/stories/03-inputs/JSONInput.stories.tsx | 59 ++- docs/stories/03-inputs/NumberInput.mdx | 10 +- .../stories/03-inputs/NumberInput.stories.tsx | 14 +- docs/stories/03-inputs/Radio.mdx | 10 +- docs/stories/03-inputs/Radio.stories.tsx | 68 ++++ docs/stories/03-inputs/Select.mdx | 50 ++- docs/stories/03-inputs/Select.stories.tsx | 177 +++++---- docs/stories/03-inputs/TextInput.mdx | 10 +- docs/stories/03-inputs/TextInput.stories.tsx | 8 +- docs/stories/03-inputs/Textarea.mdx | 9 +- docs/stories/03-inputs/Textarea.stories.tsx | 10 +- docs/stories/03-inputs/TimePicker.mdx | 10 +- docs/stories/03-inputs/TimePicker.stories.tsx | 8 +- docs/stories/03-inputs/Toggle.mdx | 10 +- docs/stories/03-inputs/Toggle.stories.tsx | 12 +- docs/stories/04-components/Accordion.mdx | 38 +- .../04-components/Accordion.stories.tsx | 13 +- docs/stories/{ => 04-components}/Alert.mdx | 0 .../{ => 04-components}/Alert.stories.tsx | 51 ++- docs/stories/04-components/Avatar.mdx | 16 +- docs/stories/{ => 04-components}/Badge.mdx | 0 .../{ => 04-components}/Badge.stories.tsx | 32 +- docs/stories/{ => 04-components}/Box.mdx | 0 docs/stories/04-components/Box.stories.tsx | 192 ++++++++++ .../{ => 04-components}/Breadcrumbs.mdx | 0 .../Breadcrumbs.stories.tsx | 58 ++- docs/stories/04-components/Button.mdx | 10 +- docs/stories/{ => 04-components}/Card.mdx | 0 docs/stories/04-components/Card.stories.tsx | 356 ++++++++++++++++++ docs/stories/{ => 04-components}/Carousel.mdx | 0 .../{ => 04-components}/Carousel.stories.tsx | 129 ++++++- docs/stories/04-components/Dialog.mdx | 34 +- docs/stories/{ => 04-components}/Divider.mdx | 0 .../{ => 04-components}/Divider.stories.tsx | 23 +- .../{ => 04-components}/EmptyStateLayout.mdx | 0 .../EmptyStateLayout.stories.tsx | 49 ++- docs/stories/04-components/Field.mdx | 32 +- docs/stories/04-components/Field.stories.tsx | 4 + docs/stories/{ => 04-components}/Flex.mdx | 0 .../{ => 04-components}/Flex.stories.tsx | 24 +- docs/stories/{ => 04-components}/Grid.mdx | 0 .../{ => 04-components}/Grid.stories.tsx | 89 ++++- docs/stories/04-components/IconButton.mdx | 8 +- .../04-components/IconButton.stories.tsx | 41 ++ docs/stories/{ => 04-components}/Link.mdx | 0 .../{ => 04-components}/Link.stories.tsx | 39 +- .../{ => 04-components}/LiveRegions.mdx | 0 .../LiveRegions.stories.tsx | 58 ++- docs/stories/{ => 04-components}/Loader.mdx | 0 .../{ => 04-components}/Loader.stories.tsx | 21 +- docs/stories/04-components/Modal.stories.tsx | 28 ++ .../{ => 04-components}/Pagination.mdx | 0 .../Pagination.stories.tsx | 29 +- .../stories/04-components/Popover.stories.tsx | 69 +++- .../04-components/ProgressBar.stories.tsx | 4 +- docs/stories/{ => 04-components}/RawTable.mdx | 0 .../{ => 04-components}/RawTable.stories.tsx | 2 +- .../stories/{ => 04-components}/Searchbar.mdx | 0 .../{ => 04-components}/Searchbar.stories.tsx | 69 ++-- .../{ => 04-components}/SimpleMenu.mdx | 0 .../SimpleMenu.stories.tsx | 57 ++- docs/stories/{ => 04-components}/Status.mdx | 0 .../{ => 04-components}/Status.stories.tsx | 45 ++- docs/stories/04-components/Switch.stories.tsx | 44 +++ docs/stories/{ => 04-components}/Table.mdx | 0 .../{ => 04-components}/Table.stories.tsx | 2 +- docs/stories/04-components/Tabs.stories.tsx | 213 +++-------- docs/stories/{ => 04-components}/Tag.mdx | 0 .../{ => 04-components}/Tag.stories.tsx | 34 +- .../stories/04-components/Tooltip.stories.tsx | 12 +- .../05-utilities/DismissibleLayer.stories.tsx | 66 +++- .../05-utilities/FocusTrap.stories.tsx | 12 + docs/stories/05-utilities/Portal.stories.tsx | 18 +- .../05-utilities/ScrollArea.stories.tsx | 11 + docs/stories/Box.stories.tsx | 101 ----- docs/stories/Card.stories.tsx | 190 ---------- docs/stories/SubNav.mdx | 84 ----- docs/stories/SubNav.stories.tsx | 179 --------- .../src/components/BaseLink/BaseLink.tsx | 22 +- .../src/components/Checkbox/Checkbox.tsx | 12 +- .../DateTimePicker/DateTimePicker.tsx | 1 + .../components/NumberInput/NumberInput.tsx | 7 +- .../src/components/Switch/Switch.tsx | 12 +- .../src/components/Toggle/Toggle.tsx | 2 +- 100 files changed, 2606 insertions(+), 1346 deletions(-) create mode 100644 docs/stories/00-getting started/Troubleshooting.mdx rename docs/stories/{ => 04-components}/Alert.mdx (100%) rename docs/stories/{ => 04-components}/Alert.stories.tsx (55%) rename docs/stories/{ => 04-components}/Badge.mdx (100%) rename docs/stories/{ => 04-components}/Badge.stories.tsx (61%) rename docs/stories/{ => 04-components}/Box.mdx (100%) create mode 100644 docs/stories/04-components/Box.stories.tsx rename docs/stories/{ => 04-components}/Breadcrumbs.mdx (100%) rename docs/stories/{ => 04-components}/Breadcrumbs.stories.tsx (56%) rename docs/stories/{ => 04-components}/Card.mdx (100%) create mode 100644 docs/stories/04-components/Card.stories.tsx rename docs/stories/{ => 04-components}/Carousel.mdx (100%) rename docs/stories/{ => 04-components}/Carousel.stories.tsx (53%) rename docs/stories/{ => 04-components}/Divider.mdx (100%) rename docs/stories/{ => 04-components}/Divider.stories.tsx (62%) rename docs/stories/{ => 04-components}/EmptyStateLayout.mdx (100%) rename docs/stories/{ => 04-components}/EmptyStateLayout.stories.tsx (55%) rename docs/stories/{ => 04-components}/Flex.mdx (100%) rename docs/stories/{ => 04-components}/Flex.stories.tsx (53%) rename docs/stories/{ => 04-components}/Grid.mdx (100%) rename docs/stories/{ => 04-components}/Grid.stories.tsx (52%) rename docs/stories/{ => 04-components}/Link.mdx (100%) rename docs/stories/{ => 04-components}/Link.stories.tsx (63%) rename docs/stories/{ => 04-components}/LiveRegions.mdx (100%) rename docs/stories/{ => 04-components}/LiveRegions.stories.tsx (57%) rename docs/stories/{ => 04-components}/Loader.mdx (100%) rename docs/stories/{ => 04-components}/Loader.stories.tsx (55%) rename docs/stories/{ => 04-components}/Pagination.mdx (100%) rename docs/stories/{ => 04-components}/Pagination.stories.tsx (52%) rename docs/stories/{ => 04-components}/RawTable.mdx (100%) rename docs/stories/{ => 04-components}/RawTable.stories.tsx (99%) rename docs/stories/{ => 04-components}/Searchbar.mdx (100%) rename docs/stories/{ => 04-components}/Searchbar.stories.tsx (51%) rename docs/stories/{ => 04-components}/SimpleMenu.mdx (100%) rename docs/stories/{ => 04-components}/SimpleMenu.stories.tsx (61%) rename docs/stories/{ => 04-components}/Status.mdx (100%) rename docs/stories/{ => 04-components}/Status.stories.tsx (69%) rename docs/stories/{ => 04-components}/Table.mdx (100%) rename docs/stories/{ => 04-components}/Table.stories.tsx (99%) rename docs/stories/{ => 04-components}/Tag.mdx (100%) rename docs/stories/{ => 04-components}/Tag.stories.tsx (54%) delete mode 100644 docs/stories/Box.stories.tsx delete mode 100644 docs/stories/Card.stories.tsx delete mode 100644 docs/stories/SubNav.mdx delete mode 100644 docs/stories/SubNav.stories.tsx diff --git a/docs/stories/00-getting started/Troubleshooting.mdx b/docs/stories/00-getting started/Troubleshooting.mdx new file mode 100644 index 000000000..41c658f99 --- /dev/null +++ b/docs/stories/00-getting started/Troubleshooting.mdx @@ -0,0 +1,71 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# Troubleshooting + +## Layout shift when opening Modals or Dialogs (due to radix-ui -> react-remove-scroll) + +If you notice a layout shift when opening Modals or Dialogs, this is caused by the `react-remove-scroll` library used by +`@radix-ui/react-dialog` to prevent background scrolling when a dialog is open. + +To fix this, you can add the following CSS to your global styles: + +```css +html, +body { + width: calc(100% - var(--removed-body-scroll-bar-size), 0px); +} +``` + +You will also need to set a background color on the `body` to avoid a white flash when opening a Modal or Dialog: + +```css +body { + background: [your-background-color]; +} +``` + +## Focus outline is visible when using mouse + +By default, browsers show focus outlines when elements are focused, regardless of the input method (keyboard or mouse). +This can lead to a less-than-ideal user interface when using a mouse. + +To improve the user experience, you can use [`what-input`](https://github.com/ten1seven/what-input) library to +conditionally apply focus styles based on the input method. + +Install and import `what-input` in your project. + +Then, add the following CSS to your global styles: + +```css +[data-whatintent='mouse'] *:focus { + outline: none; +} +``` + +This will hide focus outlines when using a mouse, while still allowing keyboard users to see focus indicators for +accessibility. + +## Popovers not appearing above other elements + +If you notice that Popovers are not appearing above other elements, you may need to adjust the default radix-ui popper +z-index by adding the following CSS to your global styles: + +```css +[data-radix-popper-content-wrapper] { + z-index: 300 !important; +} +``` + +## Disabled links are still clickable + +If you have a link that is disabled but still clickable, you can add the following CSS to your global styles to prevent +pointer events on disabled links: + +```css +a[aria-disabled='true'] { + pointer-events: none; + cursor: default; +} +``` diff --git a/docs/stories/00-getting started/migration guides/migration-v1-v2.mdx b/docs/stories/00-getting started/migration guides/migration-v1-v2.mdx index 2675b5847..d27351703 100644 --- a/docs/stories/00-getting started/migration guides/migration-v1-v2.mdx +++ b/docs/stories/00-getting started/migration guides/migration-v1-v2.mdx @@ -196,10 +196,28 @@ If you don't do this, the props for `MyBox` are all inferred as `Record { - return ( - - - - - - - - - - Option 1 - - - - - No value found - Create a new value - - - - - ); -}; + + + + + + + + + + Option 1 + + + + + No value found + Create a new value + + + + ``` ## API Reference @@ -106,30 +102,22 @@ and is combined in the following way: -### Trigger - -### TextInput - -### Icon - ### Portal ### Content -### Viewport + ### Item -### ItemText - -### ItemIndicator - -### NoValueFound + ### CreateItem + + ## Accessibility Adheres to the [Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) diff --git a/docs/stories/02-primitives/Combobox.stories.tsx b/docs/stories/02-primitives/Combobox.stories.tsx index e11f0380d..6dd1cb8ab 100644 --- a/docs/stories/02-primitives/Combobox.stories.tsx +++ b/docs/stories/02-primitives/Combobox.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from '@storybook/react-vite'; import { Check } from '@strapi/icons'; import { Combobox } from '@strapi/ui-primitives'; +import { default as outdent } from 'outdent'; const meta: Meta = { title: 'Primitives/Combobox', @@ -51,7 +52,51 @@ export const BasicUsage = { ), - + parameters: { + docs: { + source: { + type: 'code', + code: outdent` + + + + + + + + + + Option 1 + + + + + + Option 2 + + + + + + Option 3 + + + + + + Option 4 + + + + + No value + + + + `, + }, + }, + }, name: 'Basic Usage', } satisfies Story; @@ -101,7 +146,57 @@ export const ListAutocomplete = { ), - + parameters: { + docs: { + source: { + type: 'code', + code: outdent` + + + + + + + + + + Mango + + + + + + Apple + + + + + + Banana + + + + + + Papaya + + + + + + Avocado + + + + + No value + + + + `, + }, + }, + }, name: 'List Autocomplete', } satisfies Story; @@ -151,7 +246,57 @@ export const BothAutocomplete = { ), - + parameters: { + docs: { + source: { + type: 'code', + code: outdent` + + + + + + + + + + Banana + + + + + + Apples + + + + + + Oranges + + + + + + Kiwis + + + + + + Avocado + + + + + No value + + + + `, + }, + }, + }, name: 'Both Autocomplete', } satisfies Story; @@ -201,7 +346,57 @@ export const ListContainsAutocomplete = { ), - + parameters: { + docs: { + source: { + type: 'code', + code: outdent` + + + + + + + + + + Banana + + + + + + Apples + + + + + + Oranges + + + + + + Kiwis + + + + + + Avocado + + + + + No value + + + + `, + }, + }, + }, name: 'List Contains Autocomplete', } satisfies Story; diff --git a/docs/stories/02-primitives/Select.mdx b/docs/stories/02-primitives/Select.mdx index 319c0642e..f709cba9e 100644 --- a/docs/stories/02-primitives/Select.mdx +++ b/docs/stories/02-primitives/Select.mdx @@ -50,30 +50,26 @@ The `Select` primitive is composed of the following components: and is combined in the following way: ```tsx -() => { - return ( - - - - - - - - - - Option 1 - - - - - No value found - Create a new value - - - - - ); -}; + + + + + + + + + + Option 1 + + + + + No value found + Create a new value + + + + ``` ## API Reference diff --git a/docs/stories/02-primitives/Select.stories.tsx b/docs/stories/02-primitives/Select.stories.tsx index 7457da26c..40102d92a 100644 --- a/docs/stories/02-primitives/Select.stories.tsx +++ b/docs/stories/02-primitives/Select.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from '@storybook/react-vite'; import { Check } from '@strapi/icons'; import { Select } from '@strapi/ui-primitives'; +import { default as outdent } from 'outdent'; const meta: Meta = { title: 'Primitives/Select', @@ -50,7 +51,51 @@ export const SingleItem = { ), - + parameters: { + docs: { + source: { + type: 'code', + code: outdent` + + + + + + + + + + Option 1 + + + + + + Option 2 + + + + + + Option 3 + + + + + + Option 4 + + + + + + + + + `, + }, + }, + }, name: 'Single Item', } satisfies Story; @@ -93,7 +138,51 @@ export const MultipleItems = { ), - + parameters: { + docs: { + source: { + type: 'code', + code: outdent` + + + + + + + + + + Option 1 + + + + + + Option 2 + + + + + + Option 3 + + + + + + Option 4 + + + + + + + + + `, + }, + }, + }, name: 'Multiple Items', } satisfies Story; @@ -139,6 +228,53 @@ export const NestedItems = { ), - + parameters: { + docs: { + source: { + type: 'code', + code: outdent` + + + + + + + + + + Option 1 + + + + + + Option 2 + + + + + + Options 3 & 4 + + Option 3 + + + + + + Option 3 + + + + + + + + + + `, + }, + }, + }, name: 'Nested Items', } satisfies Story; diff --git a/docs/stories/02-primitives/overview.mdx b/docs/stories/02-primitives/overview.mdx index bac8299c5..57278849f 100644 --- a/docs/stories/02-primitives/overview.mdx +++ b/docs/stories/02-primitives/overview.mdx @@ -3,3 +3,62 @@ import { Title, Meta } from '@storybook/addon-docs/blocks'; Overview + +## What are Primitives? + +Primitives in the Strapi Design System are **low-level, accessible UI components** that serve as building blocks for +more complex interface elements. These components provide essential functionality and behavioral patterns while +maintaining maximum flexibility for customization. + +## Key Characteristics + +### Built on Radix UI + +Our primitives are forked and extended from [Radix UI](https://www.radix-ui.com/) primitives, ensuring: + +- **Accessibility by default** - Full keyboard navigation, screen reader support, and ARIA compliance +- **Unstyled foundations** - Behavior without imposed visual design +- **Composable architecture** - Mix and match components to build complex interfaces + +### Enhanced for Strapi + +While maintaining Radix UI's core principles, our primitives add: + +- **Additional functionality** - Extended features like multi-select capabilities +- **Strapi-specific optimizations** - Tailored for content management use cases +- **Consistent APIs** - Unified patterns across all primitive components + +## Available Primitives + +- **[Select](../?path=/docs/primitives-select--docs)** - Dropdown selection with single and multi-select support +- **[Combobox](../?path=/docs/primitives-combobox--docs)** - Searchable dropdown with filtering and custom input +- **[BaseLink](../?path=/docs/primitives-baselink--docs)** - Foundation for all link-based navigation components + +## When to Use Primitives + +Primitives are ideal when you need: + +- **Maximum customization control** over styling and behavior +- **Complex interaction patterns** not covered by standard components +- **Building custom components** that integrate seamlessly with the design system +- **Accessibility-first solutions** with minimal overhead + +## Usage Pattern + +```tsx +import { Select } from '@strapi/ui-primitives'; + +// Primitives provide the structure and behavior + + + + + + Option 1 + Option 2 + +; +``` + +Most users will prefer the higher-level components from `@strapi/design-system` which wrap these primitives with +Strapi's visual design and simplified APIs. diff --git a/docs/stories/03-inputs/Checkbox.mdx b/docs/stories/03-inputs/Checkbox.mdx index 04625904f..6aa4e6735 100644 --- a/docs/stories/03-inputs/Checkbox.mdx +++ b/docs/stories/03-inputs/Checkbox.mdx @@ -19,18 +19,12 @@ Checkboxes allow users to choose one or multiple values from a range of options. - - ## Usage ```js import { Checkbox } from '@strapi/design-system'; ``` -## Props - - - ## Variants ### Basic checkbox @@ -69,3 +63,7 @@ a `form`, you can omit this. ## Accessibility Adheres to the [tri-state Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/). + +## Props + + diff --git a/docs/stories/03-inputs/Checkbox.stories.tsx b/docs/stories/03-inputs/Checkbox.stories.tsx index f4c410fd4..bf2ed8156 100644 --- a/docs/stories/03-inputs/Checkbox.stories.tsx +++ b/docs/stories/03-inputs/Checkbox.stories.tsx @@ -98,8 +98,8 @@ export const Base = { docs: { source: { code: outdent` - - {label} + + Remember me `, }, }, diff --git a/docs/stories/03-inputs/Combobox.mdx b/docs/stories/03-inputs/Combobox.mdx index 0c591bff3..7c86b66b1 100644 --- a/docs/stories/03-inputs/Combobox.mdx +++ b/docs/stories/03-inputs/Combobox.mdx @@ -19,26 +19,12 @@ the [`Select`](../?path=/docs/inputs-select--docs) component! - - ## Usage ```js import { Combobox, ComboboxOption } from '@strapi/design-system'; ``` -## Props - -### Combobox - - - -### ComboboxOption - -The ComboboxOption is used inside the Combobox to render individual items. Each ComboboxOption has a value prop, which -is the underlying value that will be selected when the user clicks on the option. - - ## Variants ### Basic Combobox @@ -103,3 +89,16 @@ Wrap the input in the necessary [`Field`](../?path=/docs/components-field--docs) form input + +## Props + +### Combobox + + + +### ComboboxOption + +The ComboboxOption is used inside the Combobox to render individual items. Each ComboboxOption has a value prop, which +is the underlying value that will be selected when the user clicks on the option. + + diff --git a/docs/stories/03-inputs/Combobox.stories.tsx b/docs/stories/03-inputs/Combobox.stories.tsx index 44582fc04..56dd2b47b 100644 --- a/docs/stories/03-inputs/Combobox.stories.tsx +++ b/docs/stories/03-inputs/Combobox.stories.tsx @@ -279,7 +279,7 @@ export const Base: Story = { docs: { source: { code: outdent` - + Apple Avocado Banana @@ -302,11 +302,10 @@ export const Disabled: Story = { docs: { source: { code: outdent` - - {options.map(({ name, value }) => ( - {name} - ))} - + + Apple + Avocado + `, }, }, @@ -330,11 +329,10 @@ export const Size: Story = { docs: { source: { code: outdent` - - {options.map(({ name, value }) => ( - {name} - ))} - + + Apple + Avocado + `, }, }, @@ -367,13 +365,10 @@ export const Loading: Story = { docs: { source: { code: outdent` - - {options.map(({ name, value }) => ( - - {name} - - ))} - + + Apple + Avocado + `, }, }, @@ -411,19 +406,16 @@ export const Creatable: Story = { docs: { source: { code: outdent` - - {dynamicOptions.map(({ name, value }) => ( - - {name} - - ))} - + {}} + onCreateOption={() => {}} + creatable + > + Apple + Avocado + `, }, }, @@ -466,21 +458,18 @@ export const CreatableVisible: Story = { docs: { source: { code: outdent` - } - createMessage={() => 'Create a relation'} - > - {dynamicOptions.map(({ name, value }) => ( - - {name} - - ))} - + {}} + onCreateOption={() => {}} + creatable="visible" + creatableStartIcon={} + createMessage={() => 'Create a relation'} + > + Apple + Avocado + `, }, }, @@ -526,19 +515,15 @@ export const CreatableDisabled: Story = { code: outdent` {}} + onCreateOption={() => {}} creatable="visible" - creatableDisabled={true} - creatableStartIcon={} - createMessage={() => 'Create a relation'} + creatableDisabled + createMessage={() => "Create a relation"} > - {dynamicOptions.map(({ name, value }) => ( - - {name} - - ))} + Apple + Avocado `, }, @@ -589,17 +574,13 @@ export const Autocomplete = { source: { code: outdent` setValue('')} - {...props} + value="apple" + onChange={() => {}} + autocomplete="list" + onClear={() => {}} > - {options.map(({ name, value }) => ( - - {name} - - ))} + Apple + Avocado `, }, @@ -635,16 +616,15 @@ export const WithField = { docs: { source: { code: outdent` - - {label} - - {options.map(({ name, value }) => ( - {name} - ))} - - - - + + Fruits + + Apple + Avocado + + + + `, }, }, diff --git a/docs/stories/03-inputs/DatePicker.mdx b/docs/stories/03-inputs/DatePicker.mdx index 157174b95..69c28460d 100644 --- a/docs/stories/03-inputs/DatePicker.mdx +++ b/docs/stories/03-inputs/DatePicker.mdx @@ -25,12 +25,6 @@ keyboard arrows import { DatePicker } from '@strapi/design-system'; ``` - - -## Props - - - ## Variants ### Basic Usage @@ -69,3 +63,7 @@ DatePicker wrapped with [`Field`](../?path=/docs/components-field--docs) compone input + +## Props + + diff --git a/docs/stories/03-inputs/DatePicker.stories.tsx b/docs/stories/03-inputs/DatePicker.stories.tsx index 45aee054b..b72b97afe 100644 --- a/docs/stories/03-inputs/DatePicker.stories.tsx +++ b/docs/stories/03-inputs/DatePicker.stories.tsx @@ -183,7 +183,6 @@ export const MinMaxDate = { source: { code: outdent` @@ -203,7 +202,6 @@ export const Locale = { source: { code: outdent` `, @@ -234,13 +232,13 @@ export const WithField = { docs: { source: { code: outdent` - - {label} - + Date + {}} id="with_field" /> diff --git a/docs/stories/03-inputs/DateTimePicker.mdx b/docs/stories/03-inputs/DateTimePicker.mdx index f5993a0c2..5fede4acf 100644 --- a/docs/stories/03-inputs/DateTimePicker.mdx +++ b/docs/stories/03-inputs/DateTimePicker.mdx @@ -26,12 +26,6 @@ at using their respective components instead. import { DateTimePicker } from '@strapi/design-system/DateTimePicker'; ``` - - -## Props - - - ## Variants ### Basic Usage @@ -54,3 +48,7 @@ DateTimePicker wrapped with [`Field`](../?path=/docs/components-field--docs) com form input + +## Props + + diff --git a/docs/stories/03-inputs/DateTimePicker.stories.tsx b/docs/stories/03-inputs/DateTimePicker.stories.tsx index 93f1ab449..35fe22e31 100644 --- a/docs/stories/03-inputs/DateTimePicker.stories.tsx +++ b/docs/stories/03-inputs/DateTimePicker.stories.tsx @@ -132,12 +132,7 @@ export const Base: Story = { docs: { source: { code: outdent` - + `, }, }, @@ -156,9 +151,6 @@ export const Disabled: Story = { source: { code: outdent` @@ -180,9 +172,6 @@ export const Size: Story = { source: { code: outdent` @@ -215,13 +204,13 @@ export const WithField = { docs: { source: { code: outdent` - - {label} - + Date time picker + diff --git a/docs/stories/03-inputs/JSONInput.mdx b/docs/stories/03-inputs/JSONInput.mdx index c54ec569a..359f018ce 100644 --- a/docs/stories/03-inputs/JSONInput.mdx +++ b/docs/stories/03-inputs/JSONInput.mdx @@ -24,12 +24,6 @@ data. import { JSONInput } from '@strapi/design-system'; ``` - - -## Props - - - ## Variants ### Basic @@ -45,3 +39,7 @@ import { JSONInput } from '@strapi/design-system'; JSONInput wrapped in [`Field`](../?path=/docs/components-field--docs) component + +## Props + + diff --git a/docs/stories/03-inputs/JSONInput.stories.tsx b/docs/stories/03-inputs/JSONInput.stories.tsx index d331af0dd..feb26aaef 100644 --- a/docs/stories/03-inputs/JSONInput.stories.tsx +++ b/docs/stories/03-inputs/JSONInput.stories.tsx @@ -12,9 +12,15 @@ const meta: Meta = { return ( ); @@ -86,10 +92,15 @@ export const Base = { source: { code: ` `, }, @@ -107,7 +118,14 @@ export const Disabled = { code: ` `, }, @@ -124,9 +142,15 @@ export const WithField = { {label} @@ -143,14 +167,19 @@ export const WithField = { docs: { source: { code: outdent` - - {label} + + JSON diff --git a/docs/stories/03-inputs/NumberInput.mdx b/docs/stories/03-inputs/NumberInput.mdx index c9c56edca..7f4d5d075 100644 --- a/docs/stories/03-inputs/NumberInput.mdx +++ b/docs/stories/03-inputs/NumberInput.mdx @@ -23,12 +23,6 @@ Number inputs allow users to add or edit numbers. They support several number fo import { NumberInput } from '@strapi/design-system'; ``` - - -## Props - - - ## Variants ### Basic @@ -60,3 +54,7 @@ There are two options for sizes, `"S"` or `"M"`, the default is `"M"`. NumberInput wrapped with [`Field`](../?path=/docs/components-field--docs) component + +## Props + + diff --git a/docs/stories/03-inputs/NumberInput.stories.tsx b/docs/stories/03-inputs/NumberInput.stories.tsx index 9f3f52b33..eda768054 100644 --- a/docs/stories/03-inputs/NumberInput.stories.tsx +++ b/docs/stories/03-inputs/NumberInput.stories.tsx @@ -97,7 +97,7 @@ export const Locale = { docs: { source: { code: outdent` - `, + `, }, }, }, @@ -112,7 +112,7 @@ export const Disabled = { docs: { source: { code: outdent` - `, + `, }, }, }, @@ -128,7 +128,7 @@ export const Size = { docs: { source: { code: outdent` - `, + `, }, }, }, @@ -162,13 +162,13 @@ export const WithField = { docs: { source: { code: outdent` - - {label} + + Number {}} + value={3.14} /> diff --git a/docs/stories/03-inputs/Radio.mdx b/docs/stories/03-inputs/Radio.mdx index 408418c36..f1834eba1 100644 --- a/docs/stories/03-inputs/Radio.mdx +++ b/docs/stories/03-inputs/Radio.mdx @@ -24,12 +24,6 @@ Radio buttons allow users to choose a single value from a range of options. import { Radio } from '@strapi/design-system'; ``` - - -## Props - - - ## Variants ### Basic @@ -67,3 +61,7 @@ Element. Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) and uses [roving tabindex](https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/) to manage focus movement among radio items. + +## Props + + diff --git a/docs/stories/03-inputs/Radio.stories.tsx b/docs/stories/03-inputs/Radio.stories.tsx index 47c056b06..a7b820734 100644 --- a/docs/stories/03-inputs/Radio.stories.tsx +++ b/docs/stories/03-inputs/Radio.stories.tsx @@ -2,6 +2,7 @@ import { useId } from 'react'; import { Meta, StoryObj } from '@storybook/react-vite'; import { Radio, Typography } from '@strapi/design-system'; +import { default as outdent } from 'outdent'; import { fn } from 'storybook/test'; type RadioArgs = Radio.GroupProps; @@ -103,6 +104,18 @@ type Story = StoryObj; export const Base = { name: 'Base', + parameters: { + docs: { + source: { + code: outdent` + + System + Light + Dark + `, + }, + }, + }, } satisfies Story; export const DefaultValue = { @@ -110,6 +123,18 @@ export const DefaultValue = { defaultValue: 'system', }, name: 'Default Value', + parameters: { + docs: { + source: { + code: outdent` + + System + Light + Dark + `, + }, + }, + }, } satisfies Story; export const Controlled = { @@ -117,6 +142,22 @@ export const Controlled = { value: 'dark', }, name: 'Controlled', + parameters: { + docs: { + source: { + code: outdent` + const [value, setValue] = React.useState('dark'); + + return ( + setValue(val)} onChange aria-label="Theme"> + System + Light + Dark + + );`, + }, + }, + }, } satisfies Story; export const Disabled = { @@ -124,6 +165,18 @@ export const Disabled = { disabled: true, }, name: 'Disabled', + parameters: { + docs: { + source: { + code: outdent` + + System + Light + Dark + `, + }, + }, + }, } satisfies Story; export const WithLabel = { @@ -142,4 +195,19 @@ export const WithLabel = { ); }, name: 'With label', + parameters: { + docs: { + source: { + code: outdent` + + + Select Theme + + System + Light + Dark + `, + }, + }, + }, } satisfies Story; diff --git a/docs/stories/03-inputs/Select.mdx b/docs/stories/03-inputs/Select.mdx index 06fdc5b86..6d10577e5 100644 --- a/docs/stories/03-inputs/Select.mdx +++ b/docs/stories/03-inputs/Select.mdx @@ -1,4 +1,4 @@ -import { Meta, Canvas, ArgTypes, Controls } from '@storybook/addon-docs/blocks'; +import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'; import * as SelectStories from './Select.stories'; @@ -30,30 +30,7 @@ import { } from '@strapi/design-system'; ``` - - -## Props - -### SingleSelect - - - -### SingleSelectOption - - -### MultiSelect - - - -### MultiSelectOption - - - -### MultiSelectNested - - - -### Basic usage +## Basic usage The most common usage would be the `SingleSelect` which allows a user to only select one option from a list. The list has built in typeahead meaning pressing the letter `K` will highlight the word "Kiwi" in the example below. @@ -81,7 +58,6 @@ Is possible to pass a start icon for general Select or for each option. All the select variants can be a controlled component by passing a `value` prop and an `onChange` callback, this also enables you to have the ability to "clear" the input. - ### Multiple select @@ -120,3 +96,25 @@ SingleSelect decorated with the [`Field`](../?path=/docs/components-field--docs) MultiSelect decorated with the [`Field`](../?path=/docs/components-field--docs) component + +## Props + +### SingleSelect + + + +### SingleSelectOption + + + +### MultiSelect + + + +### MultiSelectOption + + + +### MultiSelectNested + + diff --git a/docs/stories/03-inputs/Select.stories.tsx b/docs/stories/03-inputs/Select.stories.tsx index 552406266..284aff602 100644 --- a/docs/stories/03-inputs/Select.stories.tsx +++ b/docs/stories/03-inputs/Select.stories.tsx @@ -19,14 +19,9 @@ const meta: Meta = { docs: { source: { code: outdent` - + Apple Avocado - Banana - Kiwi - Mango - Orange - Strawberry `, }, @@ -71,6 +66,17 @@ export const Base = { ); }, + parameters: { + docs: { + source: { + code: outdent` + + Apple + Avocado + `, + }, + }, + }, } satisfies SingleSelectStory; export const Disabled = { @@ -81,14 +87,9 @@ export const Disabled = { docs: { source: { code: outdent` - + Apple Avocado - Banana - Kiwi - Mango - Orange - Strawberry `, }, @@ -103,12 +104,10 @@ export const Controlled = { docs: { source: { code: outdent` - render: ({ ...props }) => { const [value, setValue] = React.useState(); return ( { setValue(undefined); }} @@ -117,15 +116,8 @@ export const Controlled = { > Apple Avocado - Banana - Kiwi - Mango - Orange - Strawberry - ); - }, - `, + );`, }, }, }, @@ -163,7 +155,7 @@ export const Size = { docs: { source: { code: outdent` - + Apple Avocado Banana @@ -182,6 +174,20 @@ export const Size = { export const StartIcon = { args: { startIcon: , + error: 'Error', + }, + parameters: { + docs: { + code: outdent` + + }> + Apple + + }> + Avocado + + `, + }, }, render: ({ label, error, hint, ...props }) => { const selectRef = React.useRef(null); @@ -205,28 +211,7 @@ export const StartIcon = { ); }, - parameters: { - docs: { - code: outdent` - - selectRef.current?.focus()}>{label} - - }> - Apple - - }> - Avocado - - }> - Banana - - - - - - `, - }, - }, + name: 'Start Icon', }; type MultipleSelectStory = StoryObj; @@ -254,7 +239,17 @@ export const Multiple = { ); }, - + parameters: { + docs: { + source: { + code: outdent` + + Apple + Avocado + `, + }, + }, + }, name: 'Multiple', } satisfies MultipleSelectStory; @@ -284,7 +279,17 @@ export const MultipleWithTags = { ); }, - + parameters: { + docs: { + source: { + code: outdent` + + Apple + Avocado + `, + }, + }, + }, name: 'Multiple With Tags', } satisfies MultipleSelectStory; @@ -350,7 +355,25 @@ export const MultipleNestedSelect = { /> ); }, + parameters: { + docs: { + source: { + code: outdent` + const options = [ + { label: 'Banana', value: 'banana' }, + { + label: 'Green fruits', + children: [ + { label: 'Apple', value: 'apple' }, + { label: 'Avocado', value: 'avocado' }, + ] + }, + ]; + `, + }, + }, + }, name: 'Multiple Nested Select', } satisfies MultipleSelectNestedStory; @@ -384,31 +407,19 @@ export const SingleSelectField = { docs: { source: { code: outdent` - render: ({ label, error, hint, ...props }) => { - const selectRef = React.useRef(null); - - return ( - - {label} - - Apple - Avocado - Banana - Kiwi - Mango - Orange - Strawberry - - - - - ); - }, + + Fruits + + Apple + Avocado + + + + `, }, }, }, - name: 'Single Select Field', }; @@ -442,30 +453,18 @@ export const MultiSelectField = { docs: { source: { code: outdent` - render: ({ label, error, hint, ...props }) => { - const multiSelectRef = React.useRef(null); - return ( - - multiSelectRef.current?.focus()}>{label} - - Apple - Avocado - Banana - Kiwi - Mango - Orange - Strawberry - - - - - ); - }, - `, + + Fruits + + Apple + Avocado + + + + `, }, }, }, - name: 'Multiple Select Field', }; diff --git a/docs/stories/03-inputs/TextInput.mdx b/docs/stories/03-inputs/TextInput.mdx index 3f8a3a118..98884e325 100644 --- a/docs/stories/03-inputs/TextInput.mdx +++ b/docs/stories/03-inputs/TextInput.mdx @@ -25,12 +25,6 @@ component. import { TextInput } from '@strapi/design-system'; ``` - - -## Props - - - ## Variants ### Base @@ -59,3 +53,7 @@ There are two options for sizes, `"S"` or `"M"`, the default is `"M"`. TextInput wrapped with [`Field`](../?path=/docs/components-field--docs) component + +## Props + + diff --git a/docs/stories/03-inputs/TextInput.stories.tsx b/docs/stories/03-inputs/TextInput.stories.tsx index 647a25504..e3de41592 100644 --- a/docs/stories/03-inputs/TextInput.stories.tsx +++ b/docs/stories/03-inputs/TextInput.stories.tsx @@ -140,11 +140,11 @@ export const WithField = { code: outdent` - {label} - + Text + diff --git a/docs/stories/03-inputs/Textarea.mdx b/docs/stories/03-inputs/Textarea.mdx index ebceb0b3f..21dca72fd 100644 --- a/docs/stories/03-inputs/Textarea.mdx +++ b/docs/stories/03-inputs/Textarea.mdx @@ -23,11 +23,6 @@ TextAreas allows user to enter a sizeable amount of free-form text. import { Textarea } from '@strapi/design-system'; ``` - - -## Props - - ## Variants ### Base @@ -43,3 +38,7 @@ import { Textarea } from '@strapi/design-system'; Textarea wrapped with [`Field`](../?path=/docs/components-field--docs) component + +## Props + + diff --git a/docs/stories/03-inputs/Textarea.stories.tsx b/docs/stories/03-inputs/Textarea.stories.tsx index d80c34de0..8a9178f08 100644 --- a/docs/stories/03-inputs/Textarea.stories.tsx +++ b/docs/stories/03-inputs/Textarea.stories.tsx @@ -93,8 +93,6 @@ export const Base: Story = {