Skip to content

Commit

Permalink
Merge pull request #26398 from storybookjs/docs_fix_tables
Browse files Browse the repository at this point in the history 
Docs: Fix table alignment
  • Loading branch information
@jonniebigodes
jonniebigodes committed Mar 10, 2024
2 parents 0cfd141 + b5eacba commit 973fa2d
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 64 deletions.
38 changes: 19 additions & 19 deletions docs/addons/addons-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,32 +244,32 @@ This method allows you to override the default Storybook UI configuration (e.g.,

The following table details how to use the API values:

| Name | Type | Description | Example Value |
| --------------------- | :-------------: | :-----------------------------------------------------: | :-----------------------------------: |
| **navSize** | Number (pixels) | The size of the sidebar that shows a list of stories | `300` |
| **bottomPanelHeight** | Number (pixels) | The size of the addon panel when in the bottom position | `200` |
| **rightPanelWidth** | Number (pixels) | The size of the addon panel when in the right position | `200` |
| **panelPosition** | String | Where to show the addon panel | `'bottom'` or `'right'` |
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
| **showToolbar** | Boolean | Show/hide toolbar | `true` |
| **theme** | Object | Storybook Theme, see next section | `undefined` |
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` |
| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` |
| Name | Type | Description | Example Value |
| --------------------- | --------------- | ------------------------------------------------------- | ------------------------------------- |
| **navSize** | Number (pixels) | The size of the sidebar that shows a list of stories | `300` |
| **bottomPanelHeight** | Number (pixels) | The size of the addon panel when in the bottom position | `200` |
| **rightPanelWidth** | Number (pixels) | The size of the addon panel when in the right position | `200` |
| **panelPosition** | String | Where to show the addon panel | `'bottom'` or `'right'` |
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
| **showToolbar** | Boolean | Show/hide toolbar | `true` |
| **theme** | Object | Storybook Theme, see next section | `undefined` |
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` |
| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` |

The following options are configurable under the `sidebar` namespace:

| Name | Type | Description | Example Value |
| ------------------ | :------: | :-----------------------------------------------------------: | :----------------------------------------------: |
| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` |
| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` |
| Name | Type | Description | Example Value |
| ------------------ | -------- | ------------------------------------------------------------- | ------------------------------------------------ |
| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` |
| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` |
| **renderLabel** | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => <abbr title="...">{item.name}</abbr>` |

The following options are configurable under the `toolbar` namespace:

| Name | Type | Description | Example Value |
| ------ | :----: | :--------------------------------: | :-----------------: |
| Name | Type | Description | Example Value |
| ------ | ------ | ---------------------------------- | ------------------- |
| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |

---
Expand Down
10 changes: 5 additions & 5 deletions docs/api/csf.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@ With CSF, every named export in the file represents a story object by default.

The exported identifiers will be converted to "start case" using Lodash's [startCase](https://lodash.com/docs/#startCase) function. For example:

| Identifier | Transformation |
| ---------------- | :---------------: |
| name | Name |
| someName | Some Name |
| someNAME | Some NAME |
| Identifier | Transformation |
| ---------------- | ----------------- |
| name | Name |
| someName | Some Name |
| someNAME | Some NAME |
| some_custom_NAME | Some Custom NAME |
| someName1234 | Some Name 1 2 3 4 |

Expand Down
56 changes: 28 additions & 28 deletions docs/configure/features-and-behavior.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,44 @@ To control the layout of Storybook’s UI you can use `addons.setConfig` in your

The following table details how to use the API values:

| Name | Type | Description | Example Value |
| --------------------- | :-------------: | :-----------------------------------------------------: | :-------------------------------------: |
| **navSize** | Number (pixels) | The size of the sidebar that shows a list of stories | `300` |
| **bottomPanelHeight** | Number (pixels) | The size of the addon panel when in the bottom position | `200` |
| **rightPanelWidth** | Number (pixels) | The size of the addon panel when in the right position | `200` |
| **panelPosition** | String | Where to show the addon panel | `'bottom'` or `'right'` |
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
| **showToolbar** | Boolean | Show/hide tool bar | `true` |
| **theme** | Object | Storybook Theme, see next section | `undefined` |
| **selectedPanel** | String | Id to select an addon panel | `'storybook/actions/panel'` |
| **initialActive** | String | Select the default active tab on Mobile | `'sidebar'` or `'canvas'` or `'addons'` |
| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` |
| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` |
| Name | Type | Description | Example Value |
| --------------------- | --------------- | ------------------------------------------------------- | --------------------------------------- |
| **navSize** | Number (pixels) | The size of the sidebar that shows a list of stories | `300` |
| **bottomPanelHeight** | Number (pixels) | The size of the addon panel when in the bottom position | `200` |
| **rightPanelWidth** | Number (pixels) | The size of the addon panel when in the right position | `200` |
| **panelPosition** | String | Where to show the addon panel | `'bottom'` or `'right'` |
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
| **showToolbar** | Boolean | Show/hide tool bar | `true` |
| **theme** | Object | Storybook Theme, see next section | `undefined` |
| **selectedPanel** | String | Id to select an addon panel | `'storybook/actions/panel'` |
| **initialActive** | String | Select the default active tab on Mobile | `'sidebar'` or `'canvas'` or `'addons'` |
| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` |
| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` |

The following options are configurable under the `sidebar` namespace:

| Name | Type | Description | Example Value |
| ------------------ | :------: | :-----------------------------------------------------------: | :----------------------------------------------: |
| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` |
| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` |
| Name | Type | Description | Example Value |
| ------------------ | -------- | ------------------------------------------------------------- | ------------------------------------------------ |
| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` |
| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` |
| **renderLabel** | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => <abbr title="...">{item.name}</abbr>` |

The following options are configurable under the `toolbar` namespace:

| Name | Type | Description | Example Value |
| ------ | :----: | :--------------------------------: | :-----------------: |
| Name | Type | Description | Example Value |
| ------ | ------ | ---------------------------------- | ------------------- |
| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |

## Configuring through URL parameters

You can use URL parameters to configure some of the available features:

| Config option | Query param | Supported values |
| ------------------- | :----------: | :----------------------------: |
| **enableShortcuts** | `shortcuts` | `false` |
| --- (fullscreen) | `full` | `true`, `false` |
| --- (show sidebar) | `nav` | `true`, `false` |
| --- (show panel) | `panel` | `false`, `'right'`, `'bottom'` |
| **selectedPanel** | `addonPanel` | Any panel ID |
| **showTabs** | `tabs` | `true` |
| --- | `instrument` | `false`, `true` |
| Config option | Query param | Supported values |
| ------------------- | ------------ | ------------------------------ |
| **enableShortcuts** | `shortcuts` | `false` |
| --- (fullscreen) | `full` | `true`, `false` |
| --- (show sidebar) | `nav` | `true`, `false` |
| --- (show panel) | `panel` | `false`, `'right'`, `'bottom'` |
| **selectedPanel** | `addonPanel` | Any panel ID |
| **showTabs** | `tabs` | `true` |
| --- | `instrument` | `false`, `true` |
12 changes: 6 additions & 6 deletions docs/essentials/toolbars-and-globals.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,12 +144,12 @@ By adding the configuration element `right`, the text will be displayed on the r

Here's a list of the configuration options available.

| MenuItem | Type | Description | Required |
| --------- | :----: | :-------------------------------------------------------------: | :------: |
| **value** | String | The string value of the menu that gets set in the globals | Yes |
| **title** | String | The main text of the title | Yes |
| **right** | String | A string that gets displayed on the right side of the menu | No |
| **icon** | String | An icon that gets shown in the toolbar if this item is selected | No |
| MenuItem | Type | Description | Required |
| --------- | ------ | --------------------------------------------------------------- | -------- |
| **value** | String | The string value of the menu that gets set in the globals | Yes |
| **title** | String | The main text of the title | Yes |
| **right** | String | A string that gets displayed on the right side of the menu | No |
| **icon** | String | An icon that gets shown in the toolbar if this item is selected | No |

## Consuming globals from within a story

Expand Down
12 changes: 6 additions & 6 deletions docs/writing-stories/naming-components-and-hierarchy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,12 @@ The `storySort` can also accept a configuration object.

<!-- prettier-ignore-end -->

| Field | Type | Description | Required | Default Value | Example |
| ---------------- | :-----: | :------------------------------------------------------: | :------: | :---------------------: | :-----------------------: |
| **method** | String | Tells Storybook in which order the stories are displayed | No | Storybook configuration | `'alphabetical'` |
| **order** | Array | The stories to be shown, ordered by supplied name | No | Empty Array `[]` | `['Intro', 'Components']` |
| **includeNames** | Boolean | Include story name in sort calculation | No | `false` | `true` |
| **locales** | String | The locale required to be displayed | No | System locale | `en-US` |
| Field | Type | Description | Required | Default Value | Example |
| ---------------- | ------- | -------------------------------------------------------- | -------- | ----------------------- | ------------------------- |
| **method** | String | Tells Storybook in which order the stories are displayed | No | Storybook configuration | `'alphabetical'` |
| **order** | Array | The stories to be shown, ordered by supplied name | No | Empty Array `[]` | `['Intro', 'Components']` |
| **includeNames** | Boolean | Include story name in sort calculation | No | `false` | `true` |
| **locales** | String | The locale required to be displayed | No | System locale | `en-US` |

To sort your stories alphabetically, set `method` to `'alphabetical'` and optionally set the `locales` string. To sort your stories using a custom list, use the `order` array; stories that don't match an item in the `order` list will appear after the items in the list.

Expand Down

0 comments on commit 973fa2d

Please sign in to comment.