From d6734ed9ba9f0e98b0a619e759fb0dfefe1cafd0 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 21 Sep 2022 12:08:08 -0700 Subject: [PATCH 1/6] Add style props to contextual help --- .../@react-spectrum/contextualhelp/src/ContextualHelp.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 1088268d5ff..022e251a90a 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -19,7 +19,7 @@ import InfoOutline from '@spectrum-icons/workflow/InfoOutline'; // @ts-ignore import intlMessages from '../intl/*.json'; import React from 'react'; -import {SlotProvider} from '@react-spectrum/utils'; +import {SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; @@ -30,6 +30,7 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef Date: Wed, 21 Sep 2022 12:28:39 -0700 Subject: [PATCH 2/6] contextual help to csf3 --- .../contextualhelp/src/ContextualHelp.tsx | 6 +- .../stories/ContextualHelp.stories.tsx | 140 ++++++++++++------ 2 files changed, 96 insertions(+), 50 deletions(-) diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 022e251a90a..1082f1ed682 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -19,7 +19,7 @@ import InfoOutline from '@spectrum-icons/workflow/InfoOutline'; // @ts-ignore import intlMessages from '../intl/*.json'; import React from 'react'; -import {SlotProvider, useStyleProps} from '@react-spectrum/utils'; +import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; @@ -51,13 +51,13 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef {icon} - + {children} diff --git a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx index 559b3226e70..73f00896f78 100644 --- a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx +++ b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx @@ -10,58 +10,104 @@ * governing permissions and limitations under the License. */ -import {action} from '@storybook/addon-actions'; import {Button, Content, Flex, Footer, Heading, Link, Text} from '@adobe/react-spectrum'; +import {ComponentMeta, ComponentStoryObj} from '@storybook/react'; import {ContextualHelp} from '../src'; import React from 'react'; -import {storiesOf} from '@storybook/react'; -storiesOf('ContextualHelp', module) -.add( - 'default', - () => render({heading: 'Help title', description: helpText()}) -) -.add( - 'type: info', - () => render({heading: 'Help title', description: helpText(), variant: 'info'}) -) -.add( - 'with link', - () => render({heading: 'Help title', description: helpText(), link: Learn more}) -) -.add( - 'with button', - () => ( - - - Help title - {helpText()} - - ) -) -.add( - 'trigger events', - () => render({heading: 'Help title', description: helpText(), onOpenChange: action('open change')}) -) -.add( - 'placement: bottom', - () => render({heading: 'Help title', description: helpText(), placement: 'bottom'}) -) -.add( - 'placement: bottom start', - () => render({heading: 'Help title', description: helpText(), placement: 'bottom start'}) -); +export default { + title: 'ContextualHelp', + component: ContextualHelp, + argTypes: { + onOpenChange: { + action: 'openChange', + table: {disable: true} + }, + placement: { + control: 'select', + defaultValue: 'bottom', + options: [ + 'bottom', 'bottom left', 'bottom right', 'bottom start', 'bottom end', + 'top', 'top left', 'top right', 'top start', 'top end', + 'left', 'left top', 'left bottom', + 'start', 'start top', 'start bottom', + 'right', 'right top', 'right bottom', + 'end', 'end top', 'end bottom' + ] + }, + variant: { + control: 'select', + defaultValue: 'help', + options: ['help', 'info'] + }, + offset: { + control: 'number', + defaultValue: 0, + min: -500, + max: 500 + }, + crossOffset: { + control: 'number', + defaultValue: 0, + min: -500, + max: 500 + }, + containerPadding: { + control: 'number', + defaultValue: 0, + min: -500, + max: 500 + }, + shouldFlip: { + control: 'boolean', + defaultValue: true + }, + children: { + table: {disable: true} + } + } +} as ComponentMeta; + +export type ContextualHelpStory = ComponentStoryObj; const helpText = () => Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem.; -function render(props: any = {}) { - let {heading, description, link, ...otherProps} = props; +export const Default: ContextualHelpStory = { + args: { + children: ( + <> + Help title + {helpText()} + + ) + } +}; + +export const WithLink: ContextualHelpStory = { + args: { + children: ( + <> + Help title + {helpText()} +
Learn more
+ + ) + }, + name: 'with link' +}; - return ( - - {heading && {heading}} - {description && {description}} - {link &&
{link}
} - - ); -} +export const WithButton: ContextualHelpStory = { + args: { + marginStart: 'size-100' + }, + render: (args) => ( + + + + Help title + {helpText()} + + + ), + name: 'with button' +}; From 75afb1cf7d10e3c924fa8e0cd28b9dcb98e16bf3 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 21 Sep 2022 12:39:58 -0700 Subject: [PATCH 3/6] allow aria labelling through --- .../contextualhelp/src/ContextualHelp.tsx | 3 ++- .../stories/ContextualHelp.stories.tsx | 13 +++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 1082f1ed682..35df86e86d3 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -53,7 +53,8 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef + aria-label={ariaLabel} + aria-labelledby={otherProps['aria-labelledby']}> {icon} diff --git a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx index 73f00896f78..d32f20e1c55 100644 --- a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx +++ b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx @@ -111,3 +111,16 @@ export const WithButton: ContextualHelpStory = { ), name: 'with button' }; + +export const AriaLabelledyBy: ContextualHelpStory = { + render: (args) => ( + +
I label the contextual help button
+ + Help title + {helpText()} + + + ), + name: 'aria-labelledyby' +}; From fdd8cdd98485bae8c8657bb068d4d243362cd8ee Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 21 Sep 2022 12:43:07 -0700 Subject: [PATCH 4/6] move to useLabels --- packages/@react-spectrum/contextualhelp/package.json | 1 + .../contextualhelp/src/ContextualHelp.tsx | 12 ++++-------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/@react-spectrum/contextualhelp/package.json b/packages/@react-spectrum/contextualhelp/package.json index 3bda3db17d5..a6e0b440259 100644 --- a/packages/@react-spectrum/contextualhelp/package.json +++ b/packages/@react-spectrum/contextualhelp/package.json @@ -33,6 +33,7 @@ "dependencies": { "@babel/runtime": "^7.6.2", "@react-aria/i18n": "^3.6.0", + "@react-aria/utils": "^3.13.3", "@react-spectrum/button": "^3.9.1", "@react-spectrum/dialog": "^3.5.1", "@react-spectrum/utils": "^3.7.3", diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 35df86e86d3..e90b8c74132 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -22,6 +22,7 @@ import React from 'react'; import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; +import {mergeProps, useLabels} from '@react-aria/utils'; function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef) { let { @@ -41,20 +42,15 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef + isQuiet> {icon} From 8152021fd9077834441596f1a520d351fbc64201 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 21 Sep 2022 13:03:05 -0700 Subject: [PATCH 5/6] support custom class name again --- .../contextualhelp/src/ContextualHelp.tsx | 9 ++++----- .../contextualhelp/stories/ContextualHelp.stories.tsx | 5 +++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index e90b8c74132..1c679057329 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -11,6 +11,7 @@ */ import {ActionButton} from '@react-spectrum/button'; +import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {FocusableRef} from '@react-types/shared'; import HelpOutline from '@spectrum-icons/workflow/HelpOutline'; @@ -18,11 +19,10 @@ import helpStyles from './contextualhelp.css'; import InfoOutline from '@spectrum-icons/workflow/InfoOutline'; // @ts-ignore import intlMessages from '../intl/*.json'; +import {mergeProps, useLabels} from '@react-aria/utils'; import React from 'react'; -import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils'; import {SpectrumContextualHelpProps} from '@react-types/contextualhelp'; import {useLocalizedStringFormatter} from '@react-aria/i18n'; -import {mergeProps, useLabels} from '@react-aria/utils'; function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef) { let { @@ -31,7 +31,6 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef {icon} diff --git a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx index d32f20e1c55..9b86e18382b 100644 --- a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx +++ b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx @@ -103,13 +103,14 @@ export const WithButton: ContextualHelpStory = { render: (args) => ( - + Help title {helpText()} ), - name: 'with button' + name: 'with button', + parameters: {description: {data: 'Custom classname foo is on the contextual help button.'}} }; export const AriaLabelledyBy: ContextualHelpStory = { From a7e3901427d1340849bdf111e0857094b189cc97 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Wed, 21 Sep 2022 13:57:33 -0700 Subject: [PATCH 6/6] fix lint --- packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx index 1c679057329..276361a47cc 100644 --- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx +++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx @@ -11,7 +11,7 @@ */ import {ActionButton} from '@react-spectrum/button'; -import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils'; +import {classNames, SlotProvider} from '@react-spectrum/utils'; import {Dialog, DialogTrigger} from '@react-spectrum/dialog'; import {FocusableRef} from '@react-types/shared'; import HelpOutline from '@spectrum-icons/workflow/HelpOutline';