Skip to content

Commit

Permalink
TextInput: Refactor TextInputInnerAction to use the default icon bu…
Browse files Browse the repository at this point in the history
…tton tooltip (#4733)

* Remove the external Tooltip from textinputinneraction

* Create modern-carrots-check.md
  • Loading branch information
broccolinisoup authored Jul 23, 2024
1 parent d4f23fb commit 1c131f8
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .changeset/modern-carrots-check.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

TextInput: Refactor TextInputInnerAction to use the default icon button tooltip (No changes in the behaviour or DOM is expected)
36 changes: 30 additions & 6 deletions packages/react/src/internal/components/TextInputInnerAction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,16 @@ const ConditionalTooltip: React.FC<

const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
(
{'aria-label': ariaLabel, tooltipDirection, children, icon, sx: sxProp, variant = 'invisible', ...rest},
{
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
tooltipDirection,
children,
icon,
sx: sxProp,
variant = 'invisible',
...rest
},
forwardedRef,
) => {
const sx =
Expand All @@ -92,13 +101,28 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology')
}

const accessibleLabel = ariaLabel
? {'aria-label': ariaLabel}
: ariaLabelledBy
? {'aria-labelledby': ariaLabelledBy}
: {
'aria-label': '',
}

return (
<Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
{icon && !children ? (
<Tooltip direction={tooltipDirection ?? 's'} text={ariaLabel ?? ''} type="label">
{/* @ts-ignore we intentionally do add aria-label to IconButton because Tooltip v2 adds an aria-labelledby instead. */}
<IconButton variant={variant} type="button" icon={icon} size="small" sx={sx} {...rest} ref={forwardedRef} />
</Tooltip>
{icon && !children && ariaLabel ? (
<IconButton
{...accessibleLabel}
tooltipDirection={tooltipDirection ?? 's'}
variant={variant}
type="button"
icon={icon}
size="small"
sx={sx}
{...rest}
ref={forwardedRef}
/>
) : (
<ConditionalTooltip aria-label={ariaLabel}>
<Button variant={variant} type="button" sx={sx} {...rest} ref={forwardedRef}>
Expand Down

0 comments on commit 1c131f8

Please sign in to comment.