Skip to content
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

Jump to bottom

refactor: Introduce 'id' prop on <Tooltip> #2562

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

refactor: Introduce 'id' prop on <Tooltip> #2562

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
b9dcc6a
refactor: Introduce 'id' prop on <Tooltip>
ClayBenson94 Aug 16, 2023
42943be
Merge branch 'main' into tooltip_remove_random_id
ClayBenson94 Aug 29, 2023
ab491bd
made id optional, fall back to random
werdnanoslen Feb 13, 2024
dee5b22
Merge branch 'main' into tooltip_remove_random_id
werdnanoslen Feb 13, 2024
7ebf305
Merge branch 'main' into tooltip_remove_random_id
shkeating Feb 22, 2024
6a8d7f7
Merge branch 'main' into tooltip_remove_random_id
shkeating Mar 7, 2024
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
13 changes: 11 additions & 2 deletions src/components/Tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,20 @@
},
},
},
argTypes: {
id: { control: { type: 'text' } },
},
}

type StorybookArgs = {
id: string
}

export const TooltipDefault = (): React.ReactElement => (
export const tooltipDefault = (args: StorybookArgs): React.ReactElement => (

Check warning on line 41 in src/components/Tooltip/Tooltip.stories.tsx

View workflow job for this annotation

GitHub Actions / run-checks 

The story should use PascalCase notation: tooltipDefault
<div className="margin-4">
<Tooltip label="Default">Default</Tooltip>
<Tooltip id={args.id} label="Default">
Default
</Tooltip>
</div>
)

Expand Down
16 changes: 15 additions & 1 deletion src/components/Tooltip/Tooltip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ describe('Tooltip component', () => {
expect(wrapperEl).toHaveClass('usa-tooltip')

const bodyEl = screen.queryByRole('tooltip', { hidden: true })
expect(bodyEl).toBeInTheDocument()
const tooltipId = bodyEl?.getAttribute('id')
expect(bodyEl).toBeInTheDocument()
expect(bodyEl).toHaveAttribute('role', 'tooltip')
expect(bodyEl).toHaveAttribute('aria-hidden', 'true')
expect(bodyEl).toHaveTextContent('Click me')
Expand All @@ -40,6 +40,20 @@ describe('Tooltip component', () => {
expect(triggerEl).toHaveClass('usa-tooltip__trigger')
})

it('adds ID if given', () => {
const id = 'test-id'
render(
<Tooltip id={id} label="Click me">
My Tooltip
</Tooltip>
)
const bodyEl = screen.queryByRole('tooltip', { hidden: true })
const tooltipId = bodyEl?.getAttribute('id')
expect(tooltipId).toBe(id)
const triggerEl = screen.queryByTestId('triggerElement')
expect(triggerEl).toHaveAttribute('aria-describedby', id)
})

it('defaults the position to top if no position prop is given', () => {
render(<Tooltip label="Click me">My Tooltip</Tooltip>)

Expand Down
11 changes: 6 additions & 5 deletions src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import classnames from 'classnames'
import { isElementInViewport, calculateMarginOffset } from './utils'

type TooltipProps<T> = {
id?: string
label: ReactNode
title?: string
position?: 'top' | 'bottom' | 'left' | 'right' | undefined
Expand Down Expand Up @@ -56,7 +57,7 @@ export function Tooltip<
const [wrapTooltip, setWrapTooltip] = useState(false)
const [positionStyles, setPositionStyles] = useState({})

const { position, wrapperclasses, className } = props
const { id = tooltipID.current, position, wrapperclasses, className } = props

const positionTop = (e: HTMLElement, triggerEl: HTMLElement): void => {
const topMargin = calculateMarginOffset('top', e.offsetHeight, triggerEl)
Expand Down Expand Up @@ -214,7 +215,7 @@ export function Tooltip<
...customProps,
ref: triggerElementRef,
'data-testid': 'triggerElement',
'aria-describedby': tooltipID.current,
'aria-describedby': id,
tabIndex: 0,
title: '',
onMouseEnter: showTooltip,
Expand All @@ -234,7 +235,7 @@ export function Tooltip<
<span
data-testid="tooltipBody"
title={title ?? (typeof label === 'string' ? label : undefined)}
id={tooltipID.current}
id={id}
ref={tooltipBodyRef}
className={tooltipBodyClasses}
role="tooltip"
Expand All @@ -259,7 +260,7 @@ export function Tooltip<
{...remainingProps}
data-testid="triggerElement"
ref={triggerElementRef}
aria-describedby={tooltipID.current}
aria-describedby={id}
tabIndex={0}
type="button"
className={triggerClasses}
Expand All @@ -275,7 +276,7 @@ export function Tooltip<
<span
data-testid="tooltipBody"
title={title ?? (typeof label === 'string' ? label : undefined)}
id={tooltipID.current}
id={id}
ref={tooltipBodyRef}
className={tooltipBodyClasses}
role="tooltip"
Expand Down
Loading