GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-07 07:21:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Document controls sorting

Browse Source
This commit is contained in:
Michael Shilman 2021-03-15 17:29:18 +08:00
parent da4f95309b
commit 140721c03e
4 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/essentials/controls.md
View File

@ -61,7 +61,6 @@ By default, Storybook will render a free text input for the `variant` arg:
![Essential addon Controls using a string](addon-controls-args-variant-string.png) ![Essential addon Controls using a string](addon-controls-args-variant-string.png)
This works as long as you type a valid string into the auto-generated text control, but it's not the best UI for our scenario, given that the component only accepts `primary` or `secondary` as variants. Let’s replace it with Storybook’s radio component. This works as long as you type a valid string into the auto-generated text control, but it's not the best UI for our scenario, given that the component only accepts `primary` or `secondary` as variants. Let’s replace it with Storybook’s radio component.
We can specify which controls get used by declaring a custom [argType](../api/argtypes.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs. We can specify which controls get used by declaring a custom [argType](../api/argtypes.md) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, defaultValue for an arg. These get automatically filled in by Storybook Docs.
@ -87,13 +86,13 @@ This replaces the input with a radio group for a more intuitive experience.
For a few types, Controls will automatically infer them by using [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). You can change the matchers for a regex that suits you better. For a few types, Controls will automatically infer them by using [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp). You can change the matchers for a regex that suits you better.
| Data type | Default regex | Description | | Data type | Default regex | Description |
| :---------: | :-----------------------: | :-------------------------------------------------------: | | :-------: | :-----------------------: | :-------------------------------------------------------: |
| **color** | `/(background\|color)$/i` | Will display a color picker UI for the args that match it | | **color** | `/(background\|color)$/i` | Will display a color picker UI for the args that match it |
| **date** | `/Date$/` | Will display a date picker UI for the args that match it | | **date** | `/Date$/` | Will display a date picker UI for the args that match it |
To do so, use the `matchers` property in `controls` parameter: To do so, use the `matchers` property in `controls` parameter:
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
<CodeSnippets <CodeSnippets
@ -178,23 +177,23 @@ As shown above, you can configure individual controls with the “control" annot
Here is the full list of available controls you can use: Here is the full list of available controls you can use:
| Data Type | Control Type | Description | Options | | Data Type | Control Type | Description | Options |
| :---------- | :----------: | :------------------------------------------------------------- | :------------: | | :---------- | :----------: | :------------------------------------------------------- | :------------: |
| **boolean** | boolean | checkbox input | - | | **boolean** | boolean | checkbox input | - |
| **number** | number | a numeric text box input | min, max, step | | **number** | number | a numeric text box input | min, max, step |
| | range | a range slider input | min, max, step | | | range | a range slider input | min, max, step |
| **object** | object | json editor text input | - | | **object** | object | json editor text input | - |
| **array** | object | json editor text input | - | | **array** | object | json editor text input | - |
| | file | a file input that gives you a array of urls | accept | | | file | a file input that gives you a array of urls | accept |
| **enum** | radio | radio buttons input | - | | **enum** | radio | radio buttons input | - |
| | inline-radio | inline radio buttons input | - | | | inline-radio | inline radio buttons input | - |
| | check | multi-select checkbox input | - | | | check | multi-select checkbox input | - |
| | inline-check | multi-select inline checkbox input | - | | | inline-check | multi-select inline checkbox input | - |
| | select | select dropdown input | - | | | select | select dropdown input | - |
| | multi-select | multi-select dropdown input | - | | | multi-select | multi-select dropdown input | - |
| **string** | text | simple text input | - | | **string** | text | simple text input | - |
| | color | color picker input that assumes strings are color values | - | | | color | color picker input that assumes strings are color values | - |
| | date | date picker input | - | | | date | date picker input | - |
If you need to customize a control for a number data type in your story, you can do it like so: If you need to customize a control for a number data type in your story, you can do it like so:
@ -303,10 +302,27 @@ Consider the following story snippets:
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
<CodeSnippets <CodeSnippets
paths={[ paths={[
'common/component-story-disable-controls-regex.js.mdx', 'common/component-story-disable-controls-regex.js.mdx',
'common/component-story-disable-controls-regex.mdx.mdx' 'common/component-story-disable-controls-regex.mdx.mdx'
]} ]}
/>
<!-- prettier-ignore-end -->
## Sorting controls
By default, controls are sorted alphabetically by arg name (`alpha`). This can be configured to sort alphabetically required args first (`requiredFirst`), or to not sort at all and use whatever order the args data is processed in (`none`).
Consider the following snippet to force required args first:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/component-story-sort-controls.js.mdx',
'common/component-story-sort-controls.mdx.mdx'
]}
/> />
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->

11
docs/snippets/common/component-story-sort-controls.js.mdx Normal file
View File

@ -0,0 +1,11 @@
```js
// YourComponent.stories.js | YourComponent.stories.ts
import { YourComponent } from './your-component'
export default {
title:'My Story',
component: YourComponent,
parameters: { controls: { sort: 'requiredFirst' } },
};
```

12
docs/snippets/common/component-story-sort-controls.mdx.mdx Normal file
View File

@ -0,0 +1,12 @@
```md
<!--- YourComponent.stories.mdx -->
import { Meta } from '@storybook/addon-docs/blocks';
import { YourComponent } from './your-component'
<Meta
title='My Story'
component={YourComponent}
parameters={{ controls: { sort: 'requiredFirst' } }}
/>
```

2
lib/components/src/blocks/ArgsTable/ArgsTable.tsx
View File

@ -346,7 +346,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
compact, compact,
inAddonPanel, inAddonPanel,
initialExpandedArgs, initialExpandedArgs,
sort = 'requiredFirst', sort = 'alpha',
} = props as ArgsTableRowProps; } = props as ArgsTableRowProps;
const groups = groupRows( const groups = groupRows(