Skip to content

Contextual help style props #3542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 22, 2022
Merged

Contextual help style props #3542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d6734ed
Add style props to contextual help
snowystinger Sep 21, 2022
75bc033
contextual help to csf3
snowystinger Sep 21, 2022
75afb1c
allow aria labelling through
snowystinger Sep 21, 2022
fdd8cdd
move to useLabels
snowystinger Sep 21, 2022
8152021
support custom class name again
snowystinger Sep 21, 2022
a7e3901
fix lint
snowystinger Sep 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@react-spectrum/contextualhelp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 7 additions & 10 deletions packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@
*/

import {ActionButton} from '@react-spectrum/button';
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';
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 {SlotProvider} from '@react-spectrum/utils';
import {SpectrumContextualHelpProps} from '@react-types/contextualhelp';
import {useLocalizedStringFormatter} from '@react-aria/i18n';

Expand All @@ -40,23 +41,19 @@ function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef<HT
footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}
};

let ariaLabel = otherProps['aria-label'];
if (!ariaLabel && !otherProps['aria-labelledby']) {
ariaLabel = stringFormatter.format(variant);
}
let labelProps = useLabels(otherProps, stringFormatter.format(variant));

return (
<DialogTrigger {...otherProps} type="popover" placement={placement} hideArrow>
<ActionButton
{...otherProps}
{...mergeProps(otherProps, labelProps)}
ref={ref}
UNSAFE_className={helpStyles['react-spectrum-ContextualHelp-button']}
isQuiet
aria-label={ariaLabel}>
UNSAFE_className={classNames(helpStyles, 'react-spectrum-ContextualHelp-button', otherProps.UNSAFE_className)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not styleProps.className from useStyleProps here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ActionButton will call useStyleProps for us, no reason to call it at this level

isQuiet>
{icon}
</ActionButton>
<SlotProvider slots={slots}>
<Dialog UNSAFE_className={helpStyles['react-spectrum-ContextualHelp-dialog']}>
<Dialog UNSAFE_className={classNames(helpStyles, 'react-spectrum-ContextualHelp-dialog')}>
{children}
</Dialog>
</SlotProvider>
Expand Down
154 changes: 107 additions & 47 deletions packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,58 +10,118 @@
* 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: <Link>Learn more</Link>})
)
.add(
'with button',
() => (<Flex alignItems="center">
<Button variant="primary" isDisabled>Create</Button>
<ContextualHelp marginStart="size-100">
<Heading>Help title</Heading>
<Content>{helpText()}</Content>
</ContextualHelp>
</Flex>)
)
.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<typeof ContextualHelp>;

export type ContextualHelpStory = ComponentStoryObj<typeof ContextualHelp>;

const helpText = () => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem.</Text>;

function render(props: any = {}) {
let {heading, description, link, ...otherProps} = props;
export const Default: ContextualHelpStory = {
args: {
children: (
<>
<Heading>Help title</Heading>
<Content>{helpText()}</Content>
</>
)
}
};

export const WithLink: ContextualHelpStory = {
args: {
children: (
<>
<Heading>Help title</Heading>
<Content>{helpText()}</Content>
<Footer><Link>Learn more</Link></Footer>
</>
)
},
name: 'with link'
};

export const WithButton: ContextualHelpStory = {
args: {
marginStart: 'size-100'
},
render: (args) => (
<Flex alignItems="center">
<Button variant="primary" isDisabled>Create</Button>
<ContextualHelp {...args} UNSAFE_className="foo">
<Heading>Help title</Heading>
<Content>{helpText()}</Content>
</ContextualHelp>
</Flex>
),
name: 'with button',
parameters: {description: {data: 'Custom classname foo is on the contextual help button.'}}
};

return (
<ContextualHelp {...otherProps}>
{heading && <Heading>{heading}</Heading>}
{description && <Content>{description}</Content>}
{link && <Footer>{link}</Footer>}
</ContextualHelp>
);
}
export const AriaLabelledyBy: ContextualHelpStory = {
render: (args) => (
<Flex alignItems="center">
<div id="foo">I label the contextual help button</div>
<ContextualHelp {...args} aria-labelledby="foo">
<Heading>Help title</Heading>
<Content>{helpText()}</Content>
</ContextualHelp>
</Flex>
),
name: 'aria-labelledyby'
};