-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: contextual help * rm unusued * v0.9.22-0 * v0.9.22
- Loading branch information
1 parent
b5d3655
commit 1fa66b7
Showing
17 changed files
with
409 additions
and
30 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { ActionButton } from '../button'; | ||
| import { | ||
| AriaLabelingProps, | ||
| DOMProps, | ||
| FocusableRef, | ||
| OverlayTriggerProps, | ||
| Placement, | ||
| PositionProps, | ||
| } from '../types'; | ||
|
|
||
| import { mergeProps, useLabels } from '@react-aria/utils'; | ||
| import React, { ReactNode } from 'react'; | ||
|
|
||
| import { Icon, InfoOutline, QuestionOutline } from '../icon'; | ||
| import { HelpTooltip, TooltipTrigger } from '../tooltip'; | ||
|
|
||
| export interface ContextualHelpProps | ||
| extends OverlayTriggerProps, | ||
| PositionProps, | ||
| DOMProps, | ||
| AriaLabelingProps { | ||
| /** Contents of the Contextual Help popover. */ | ||
| children: ReactNode; | ||
| /** | ||
| * Indicates whether contents are informative or provides helpful guidance. | ||
| * @default 'help' | ||
| */ | ||
| variant?: 'help' | 'info'; | ||
| /** | ||
| * The placement of the popover with respect to the action button. | ||
| * @default 'bottom start' | ||
| */ | ||
| placement?: Placement; | ||
| /** | ||
| * The delay time for the tooltip to show up in milliseconds | ||
| * @default 0 | ||
| */ | ||
| delay?: number; | ||
| } | ||
|
|
||
| function ContextualHelp( | ||
| props: ContextualHelpProps, | ||
| ref: FocusableRef<HTMLButtonElement> | ||
| ) { | ||
| let { | ||
| variant = 'help', | ||
| placement = 'bottom start', | ||
| children, | ||
| delay = 0, | ||
| ...otherProps | ||
| } = props; | ||
|
|
||
| const iconSVG = variant === 'info' ? <InfoOutline /> : <QuestionOutline />; | ||
| const icon = <Icon svg={iconSVG} style={{ fontSize: 'inherit' }} />; | ||
|
|
||
| let labelProps = useLabels(otherProps); | ||
|
|
||
| return ( | ||
| <TooltipTrigger {...otherProps} placement={placement} delay={delay}> | ||
| <ActionButton | ||
| {...mergeProps(otherProps, labelProps, { isDisabled: false })} | ||
| ref={ref} | ||
| isQuiet | ||
| > | ||
| {icon} | ||
| </ActionButton> | ||
| <HelpTooltip>{children}</HelpTooltip> | ||
| </TooltipTrigger> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Contextual help shows a user extra information about the state of an adjacent component, or a total view. | ||
| */ | ||
| let _ContextualHelp = React.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './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
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,70 @@ | ||
| import React, { ReactNode, useContext, HTMLProps, CSSProperties } from 'react'; | ||
| import { useTooltip } from '@react-aria/tooltip'; | ||
| import { classNames } from '../utils'; | ||
| import { PlacementAxis, DOMRef } from '../types'; | ||
| import { mergeProps } from '@react-aria/utils'; | ||
| import { TooltipContext } from '../tooltip/context'; | ||
| import { helpTooltipCSS } from './styles'; | ||
|
|
||
| interface HelpTooltipProps extends HTMLProps<HTMLDivElement> { | ||
| isOpen?: boolean; | ||
| /** | ||
| * The placement of the element with respect to its anchor element. | ||
| * @default 'right' | ||
| */ | ||
| placement?: PlacementAxis; | ||
| children: ReactNode; | ||
| /** | ||
| * Style overrides. Not guaranteed to be not overridden | ||
| */ | ||
| UNSAFE_style?: CSSProperties; | ||
| } | ||
|
|
||
| /** | ||
| * A variant of the tooltip that is intended for users to gain info or help | ||
| * @param props | ||
| * @returns | ||
| */ | ||
| function HelpTooltip(props: HelpTooltipProps, _ref: DOMRef) { | ||
| const { | ||
| ref: overlayRef, | ||
| arrowProps, | ||
| state, | ||
| ...tooltipProviderProps | ||
| } = useContext(TooltipContext); | ||
|
|
||
| props = mergeProps(props, tooltipProviderProps); | ||
| const { placement = 'right', isOpen, style: propsStyle, id } = props; | ||
| const { tooltipProps } = useTooltip(props, state); | ||
|
|
||
| const style = { | ||
| ...props?.UNSAFE_style, | ||
| ...propsStyle, | ||
| ...tooltipProps.style, | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| id={id} | ||
| {...tooltipProps} | ||
| style={style} | ||
| className={classNames( | ||
| 'ac-help-tooltip', | ||
| `ac-help-tooltip--${placement}`, | ||
| { | ||
| 'is-open': isOpen, | ||
| } | ||
| )} | ||
| ref={overlayRef} | ||
| css={helpTooltipCSS({ placement })} | ||
| > | ||
| {props.children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Display container for Tooltip content. Has a directional arrow dependent on its placement. | ||
| */ | ||
| let _HelpTooltip = React.forwardRef(HelpTooltip); | ||
| export { _HelpTooltip as HelpTooltip }; |
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
Oops, something went wrong.