-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* initial ContextualHelp implementation * Adding ContextualHelp to FieldLabel * fix crash in textfield contextual help story * Updating ContextualHelp positioning in FieldLabel * field label and contextual help button sizes match * adding contextualhelp to monopackage for release * storybook autodocs working * Improving ContextualHelp positioning * adding combobox contextualhelp story * Improving popover focus * Improving popover focus * Improving contextual help placement in field and aria labeling * updating links to have hrefs * Fixing button context and popover style * updated useId and aria-label in field label --------- Co-authored-by: Kyle Taborski <[email protected]> Co-authored-by: danilu <[email protected]>
- Loading branch information
3 people
authored and
GitHub Enterprise
committed
Jun 12, 2024
1 parent
386dcc4
commit eab002f
Showing
15 changed files
with
383 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import {ActionButton, ActionButtonProps} from './ActionButton'; | ||
| import {AriaLabelingProps, DOMProps, FocusableRef} from '@react-types/shared'; | ||
| import {ContentContext, FooterContext, HeadingContext} from './Content'; | ||
| import {ContextValue, Dialog as RACDialog, DEFAULT_SLOT, Provider, TextContext, useContextProps} from 'react-aria-components'; | ||
| import {ReactNode, createContext, forwardRef} from 'react'; | ||
| import {dialogInner} from './Dialog'; | ||
| import {DialogTrigger, DialogTriggerProps} from './DialogTrigger'; | ||
| import {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils'; | ||
| import HelpIcon from '../s2wf-icons/assets/svg/S2_Icon_HelpCircle_20_N.svg'; | ||
| import InfoIcon from '../s2wf-icons/assets/svg/S2_Icon_InfoCircle_20_N.svg'; | ||
| import {mergeStyles} from '../style/runtime'; | ||
| import {Popover, PopoverProps} from './Popover'; | ||
| import {size as styleSize, style} from '../style/spectrum-theme' with {type: 'macro'}; | ||
| import {StyleProps} from './style-utils' with { type: 'macro' }; | ||
| import {useFocusableRef} from '@react-spectrum/utils'; | ||
|
|
||
| export interface ContextualHelpStyleProps { | ||
| /** | ||
| * Indicates whether contents are informative or provides helpful guidance. | ||
| * | ||
| * @default 'help' | ||
| */ | ||
| variant?: 'info' | 'help' | ||
| } | ||
| export interface ContextualHelpProps extends | ||
| Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'shouldFlip' | 'offset' | 'crossOffset' | 'placement'>, | ||
| Pick<PopoverProps, 'containerPadding'>, | ||
| Pick<ActionButtonProps, 'size'>, | ||
| ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps { | ||
| /** Contents of the Contextual Help popover. */ | ||
| children?: ReactNode | ||
| } | ||
|
|
||
| const popover = style({ | ||
| fontFamily: 'sans', | ||
| minWidth: '[218px]', | ||
| width: '[218px]', | ||
| padding: 24 | ||
| }); | ||
|
|
||
| export const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, HTMLButtonElement>>({}); | ||
|
|
||
| function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) { | ||
| let domRef = useFocusableRef(ref); | ||
| [props, domRef] = useContextProps(props, domRef, ContextualHelpContext); | ||
| let { | ||
| children, | ||
| defaultOpen, | ||
| // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx. | ||
| size = 'XS', | ||
| crossOffset, | ||
| isOpen, | ||
| offset = 8, | ||
| onOpenChange, | ||
| placement = 'bottom start', | ||
| shouldFlip, | ||
| UNSAFE_className, | ||
| UNSAFE_style, | ||
| variant = 'help' | ||
| } = props; | ||
|
|
||
| // In a FieldLabel we're getting the context's aria-labeledby, so we need to | ||
| // manually set the aria-label after useLabels() to keep the order of label | ||
| // then ContextualHelp variant | ||
| let labelProps = useLabels(props); | ||
| // Translate variant | ||
| labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + variant : variant; | ||
|
|
||
| let buttonProps = filterDOMProps(props, {labelable: true}); | ||
|
|
||
| return ( | ||
| <DialogTrigger | ||
| isOpen={isOpen} | ||
| defaultOpen={defaultOpen} | ||
| onOpenChange={onOpenChange}> | ||
| <ActionButton | ||
| slot={null} | ||
| ref={ref} | ||
| size={size} | ||
| {...mergeProps(buttonProps, labelProps)} | ||
| UNSAFE_style={UNSAFE_style} | ||
| UNSAFE_className={UNSAFE_className} | ||
| isQuiet> | ||
| {variant === 'info' ? <InfoIcon /> : <HelpIcon />} | ||
| </ActionButton> | ||
| <Popover | ||
| placement={placement} | ||
| shouldFlip={shouldFlip} | ||
| // not working => containerPadding={containerPadding} | ||
| offset={offset} | ||
| crossOffset={crossOffset} | ||
| hideArrow | ||
| UNSAFE_className={popover}> | ||
| <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none'}))}> | ||
| <Provider | ||
| values={[ | ||
| [TextContext, { | ||
| slots: { | ||
| [DEFAULT_SLOT]: {} | ||
| } | ||
| }], | ||
| [HeadingContext, {className: style({ | ||
| fontSize: 'heading-xs', | ||
| fontWeight: 'heading', | ||
| lineHeight: 'heading', | ||
| color: 'heading', | ||
| margin: 0, | ||
| marginBottom: styleSize(8) // This only makes it 10px on mobile and should be 12px | ||
| })}], | ||
| [ContentContext, {className: style({ | ||
| fontSize: 'ui', | ||
| fontWeight: 'normal', | ||
| lineHeight: 'body', | ||
| color: 'body' | ||
| })}], | ||
| [FooterContext, {className: style({ | ||
| fontSize: 'ui', | ||
| lineHeight: 'body', | ||
| color: 'body', | ||
| marginTop: 16 | ||
| })}] | ||
| ]}> | ||
| {children} | ||
| </Provider> | ||
| </RACDialog> | ||
| </Popover> | ||
| </DialogTrigger> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Contextual help shows a user extra information about the state of an adjacent component, or a total view. | ||
| */ | ||
| let _ContextualHelp = forwardRef(ContextualHelp); | ||
| export {_ContextualHelp as ContextualHelp}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.