From b9580b470d34f0e379af242d3ecb8345836d3a2b Mon Sep 17 00:00:00 2001 From: Gert Hengeveld <info@ghengeveld.nl> Date: Thu, 18 Mar 2021 11:27:00 +0100 Subject: [PATCH] Update docs for argType.options --- docs/writing-stories/args.md | 19 +++---------------- lib/client-api/src/inferArgTypes.ts | 2 +- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 7fbd028ac0db..80d534f17c35 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -143,15 +143,12 @@ Args specified through the URL will extend and override any default values of ar ## Mapping to complex arg values -Complex values such as JSX elements cannot be serialized to the manager (e.g. the Controls addon) or synced with the URL. To work around this limitation, arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes`. This works on any type of arg, but makes most sense when used with the 'select' control. +Complex values such as JSX elements cannot be serialized to the manager (e.g. the Controls addon) or synced with the URL. To work around this limitation, arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes`. This works on any type of arg, but makes most sense when used with the `select` control type. ``` argTypes: { label: { - control: { - type: 'select', - options: ['Normal', 'Bold', 'Italic'] - }, + options: ['Normal', 'Bold', 'Italic'], mapping: { Bold: <b>Bold</b>, Italic: <i>Italic</i> @@ -160,17 +157,7 @@ argTypes: { } ``` -Note that `mapping` does not have to be exhaustive. If the arg value is not a property of `mapping`, the value will be used directly. Keys in `mapping` always correspond to arg *values*, even when `options` is an object. Specifying `options` as an object (key-value pairs) is useful if you want to use special characters in the input label. For example: - -``` -{ - control: { - type: 'select', - options: { да: 'yes', нет: 'no' } - }, - mapping: { yes: 'да', no: 'нет' } -} -``` +Note that `mapping` does not have to be exhaustive. If the arg value is not a property of `mapping`, the value will be used directly. Keys in `mapping` always correspond to arg *values*, not their index in the `options` array. <details> <summary>Using args in addons</summary> diff --git a/lib/client-api/src/inferArgTypes.ts b/lib/client-api/src/inferArgTypes.ts index c3b1642760c6..ed2a3b1cacfd 100644 --- a/lib/client-api/src/inferArgTypes.ts +++ b/lib/client-api/src/inferArgTypes.ts @@ -20,7 +20,7 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => { if (value) { if (visited.has(value)) { logger.warn(dedent` - We've detected a cycle in arg '${name}'. Args should be JSON-serializable (-ish, functions are ok). + We've detected a cycle in arg '${name}'. Args should be JSON-serializable. More info: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args `);