From a18bcb38c33955a25857cef0280c5b002ec2d70e Mon Sep 17 00:00:00 2001 From: Kyle Taborski Date: Thu, 15 Aug 2024 13:57:57 -0700 Subject: [PATCH] Adding more S2 ContextualHelp examples (#6875) * Adding more S2 ContextualHelp examples * adding NumberField ContectualHelp for v3 parity * re-adding removed props when previously meant to just stop the omit of a prop. --------- Co-authored-by: Robert Snow --- .../@react-spectrum/s2/src/NumberField.tsx | 6 +- .../s2/stories/CheckboxGroup.stories.tsx | 72 +++++++++++- .../s2/stories/ColorField.stories.tsx | 63 ++++++++++- .../s2/stories/NumberField.stories.tsx | 65 ++++++++++- .../s2/stories/Picker.stories.tsx | 85 ++++++++++++++- .../s2/stories/RadioGroup.stories.tsx | 103 +++++++++++++++++- .../s2/stories/SearchField.stories.tsx | 62 ++++++++++- .../s2/stories/TagGroup.stories.tsx | 85 ++++++++++++++- 8 files changed, 529 insertions(+), 12 deletions(-) diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx index 2a83641e585..66a90cf79ac 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -40,7 +40,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps'; export interface NumberFieldProps extends AriaNumberFieldProps, StyleProps, - Omit, + SpectrumLabelableProps, HelpTextProps { /** * Whether the NumberField step buttons should be collapsed into a single column. @@ -228,6 +228,7 @@ function NumberField(props: NumberFieldProps, ref: Ref) { [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext); let { label, + contextualHelp, description: descriptionMessage, errorMessage, isCollapsed, @@ -280,7 +281,8 @@ function NumberField(props: NumberFieldProps, ref: Ref) { size={size} labelPosition={labelPosition} labelAlign={labelAlign} - necessityIndicator={necessityIndicator}> + necessityIndicator={necessityIndicator} + contextualHelp={contextualHelp}> {label} = { @@ -42,3 +51,64 @@ export const Example: Story = { label: 'Favorite sports' } }; + +export const ContextualHelpExample = (args: any) => ( + + Soccer + Baseball + Basketball + +); + +ContextualHelpExample.args = { + label: 'Favorite sports', + contextualHelp: ( + + Sports + + + Social games we paly to have fun and stay healthy. + + +
+ Learn more about sports +
+ + ) +}; + +ContextualHelpExample.parameters = { + docs: { + source: { + transform: () => { + return ` + + Sports + + + Social games we paly to have fun and stay healthy. + + +
+ Learn more about sports +
+ + } + label="Segment" +/> + Soccer + Baseball + Basketball +`; + } + } + } +}; diff --git a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx index da229a62b41..db4f0a949cc 100644 --- a/packages/@react-spectrum/s2/stories/ColorField.stories.tsx +++ b/packages/@react-spectrum/s2/stories/ColorField.stories.tsx @@ -10,7 +10,15 @@ * governing permissions and limitations under the License. */ -import {ColorField} from '../src/ColorField'; +import { + ColorField, + Content, + ContextualHelp, + Footer, + Heading, + Link, + Text +} from '../src/'; import type {Meta} from '@storybook/react'; const meta: Meta = { @@ -31,3 +39,56 @@ export const Example = (args: any) => ; Example.args = { label: 'Color' }; + +export const ContextualHelpExample = (args: any) => ( + +); + +ContextualHelpExample.args = { + label: 'Color', + contextualHelp: ( + + Color + + + Pick your favorite color. + + +
+ Learn more about color +
+ + ) +}; + +ContextualHelpExample.parameters = { + docs: { + source: { + transform: () => { + return ` + + Color + + + Pick your favorite color. + + +
+ Learn more about color +
+ + } + label="Color" +/>`; + } + } + } +}; diff --git a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx index 90a3b3c1456..1940356d11b 100644 --- a/packages/@react-spectrum/s2/stories/NumberField.stories.tsx +++ b/packages/@react-spectrum/s2/stories/NumberField.stories.tsx @@ -10,9 +10,18 @@ * governing permissions and limitations under the License. */ -import {Button, Form} from '../src'; +import { + Button, + Content, + ContextualHelp, + Footer, + Form, + Heading, + Link, + NumberField, + Text +} from '../src'; import type {Meta, StoryObj} from '@storybook/react'; -import {NumberField} from '../src/NumberField'; import {style} from '../style/spectrum-theme' with {type: 'macro'}; const meta: Meta = { @@ -62,3 +71,55 @@ CustomWidth.parameters = { disable: true } }; + + +export const ContextualHelpExample = (args: any) => ; + +ContextualHelpExample.args = { + label: 'Quantity', + contextualHelp: ( + + Quantity + + + Pick a number between negative infinity and positive infinity. + + +
+ Learn more about quantity +
+ + ) +}; + +ContextualHelpExample.parameters = { + docs: { + source: { + transform: () => { + return ` + + Quantity + + + Pick a number between negative infinity and positive infinity. + + +
+ Learn more about quantity +
+ + } +/>`; + } + } + } +}; diff --git a/packages/@react-spectrum/s2/stories/Picker.stories.tsx b/packages/@react-spectrum/s2/stories/Picker.stories.tsx index 0d221a47872..ce476ca6bde 100644 --- a/packages/@react-spectrum/s2/stories/Picker.stories.tsx +++ b/packages/@react-spectrum/s2/stories/Picker.stories.tsx @@ -10,8 +10,20 @@ * governing permissions and limitations under the License. */ -import {Button, Form, Header, Heading, Picker, PickerItem, PickerSection, Text} from '../src'; - +import { + Button, + Content, + ContextualHelp, + Footer, + Form, + Header, + Heading, + Link, + Picker, + PickerItem, + PickerSection, + Text +} from '../src'; import {categorizeArgTypes, StaticColorDecorator} from './utils'; import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg'; import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg'; @@ -140,3 +152,72 @@ CustomWidth.parameters = { disable: true } }; + +export const ContextualHelpExample = (args: any) => ( + + Chocolate + Mint + Strawberry + Vanilla + Chocolate Chip Cookie Dough + +); + +ContextualHelpExample.args = { + label: 'Ice cream flavor', + contextualHelp: ( + + What is a ice cream? + + + A combination of sugar, eggs, milk, and cream is cooked to make + a custard base. Then, flavorings are added, and this flavored + mixture is carefully churned and frozen to make ice cream. + + +
+ Learn more about ice cream +
+ + ) +}; + +ContextualHelpExample.parameters = { + docs: { + source: { + transform: () => { + return ` + + What is a ice cream? + + + A combination of sugar, eggs, milk, and cream is cooked to make + a custard base. Then, flavorings are added, and this flavored + mixture is carefully churned and frozen to make ice cream. + + +
+ Learn more about ice cream +
+ + } + label="Ice cream flavor" +/> + Chocolate + Mint + Strawberry + Vanilla + Chocolate Chip Cookie Dough +`; + } + } + } +}; diff --git a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx index 6d1731dfa8c..7b79ff950c0 100644 --- a/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/RadioGroup.stories.tsx @@ -10,8 +10,17 @@ * governing permissions and limitations under the License. */ +import { + Content, + ContextualHelp, + Footer, + Heading, + Link, + Radio, + RadioGroup, + Text +} from '../src'; import type {Meta} from '@storybook/react'; -import {Radio, RadioGroup} from '../src'; import {style} from '../style/spectrum-theme' with {type: 'macro'}; const meta: Meta = { @@ -28,7 +37,7 @@ const meta: Meta = { export default meta; export const Example = (args: any) => ( - + Soccer Baseball Football @@ -45,3 +54,93 @@ export const LongLabel = (args: any) => ( Radio with very long label so we can see wrapping ); + +LongLabel.parameters = { + docs: { + disable: true + } +}; + +export const ErrorAndDescription = (args: any) => ( + + Soccer + Baseball + Football + Basketball + +); + +ErrorAndDescription.args = { + label: 'Favorite sport', + description: 'A long description to test help text wrapping.', + errorMessage: 'A long error message to test help text wrapping. Only shows when invalid is set which makes it red too!' +}; + +ErrorAndDescription.parameters = { + docs: { + disable: true + } +}; + +export const ContextualHelpExample = (args: any) => ( + + Soccer + Baseball + Football + Basketball + +); + +ContextualHelpExample.args = { + label: 'Favorite sports', + contextualHelp: ( + + Sports + + + Social games we paly to have fun and stay healthy. + + +
+ Learn more about sports +
+ + ) +}; + +ContextualHelpExample.parameters = { + docs: { + source: { + transform: () => { + return ` + + Sports + + + Social games we paly to have fun and stay healthy. + + +
+ Learn more about sports +
+ + } + label="Segment" +/> + Soccer + Baseball + Football + Basketball +`; + } + } + } +}; diff --git a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx index 99b745dfad0..a46fbeb293d 100644 --- a/packages/@react-spectrum/s2/stories/SearchField.stories.tsx +++ b/packages/@react-spectrum/s2/stories/SearchField.stories.tsx @@ -11,8 +11,16 @@ */ import {categorizeArgTypes} from './utils'; +import { + Content, + ContextualHelp, + Footer, + Heading, + Link, + SearchField, + Text +} from '../src'; import type {Meta} from '@storybook/react'; -import {SearchField} from '../src'; import {style} from '../style/spectrum-theme' with {type: 'macro'}; const meta: Meta = { @@ -44,3 +52,55 @@ CustomWidth.parameters = { disable: true } }; + + +export const ContextualHelpExample = (args: any) => ; + +ContextualHelpExample.args = { + label: 'Search', + contextualHelp: ( + + Search tips + + + You can use modifiers like "date:" and "from:" to search by specific attributes. + + +
+ React Spectrum +
+ + ) +}; + +ContextualHelpExample.parameters = { + docs: { + source: { + transform: () => { + return ` + + Search tips + + + You can use modifiers like "date:" and "from:" to search by specific attributes. + + +
+ React Spectrum +
+ + } +/>`; + } + } + } +}; diff --git a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx index 042bafff067..81668c6d913 100644 --- a/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/TagGroup.stories.tsx @@ -11,7 +11,18 @@ */ import {action} from '@storybook/addon-actions'; -import {Avatar, Image, Link, Tag, TagGroup, Text} from '../src'; +import { + Avatar, + Content, + ContextualHelp, + Footer, + Heading, + Image, + Link, + Tag, + TagGroup, + Text +} from '../src'; import type {Meta} from '@storybook/react'; import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg'; import {style} from '../style/spectrum-theme' with {type: 'macro'}; @@ -144,3 +155,75 @@ export let Links = { selectionMode: 'none' } }; + +export const ContextualHelpExample = { + render: (args: any) => { + if (args.onRemove) { + args.onRemove = action('remove'); + } + return ( + + Chocolate + Mint + Strawberry + Vanilla + + ); + }, + args: { + label: 'Ice cream flavor', + contextualHelp: ( + + What is a ice cream? + + + A combination of sugar, eggs, milk, and cream is cooked to make + a custard base. Then, flavorings are added, and this flavored + mixture is carefully churned and frozen to make ice cream. + + +
+ Learn more about ice cream +
+ + ) + }, + parameters: { + docs: { + source: { + transform: () => { + return ` + + What is a ice cream? + + + A combination of sugar, eggs, milk, and cream is cooked to make + a custard base. Then, flavorings are added, and this flavored + mixture is carefully churned and frozen to make ice cream. + + +
+ Learn more about ice cream +
+ + } +> + Chocolate + Mint + Strawberry + Vanilla +`; + } + } + } + } +};