feat(TextInputInnerAction): adds a tooltip-direction property to the …

.changeset/wild-fishes-carry.md

@@ -0,0 +1,4 @@
+---
+'@primer/react': minor
+---
+Add the `tooltip-direction` property to the `TextInput.Action` component to make the tooltip position flexible.

docs/content/TextInput.mdx

@@ -131,6 +131,27 @@ render(<WithIconAndLoadingIndicator />)
 </FormControl>
 ```
 
+### With tooltip direction
+
+```jsx live
+<FormControl>
+  <FormControl.Label>Icon action</FormControl.Label>
+  <TextInput
+    trailingAction={
+      <TextInput.Action
+        onClick={() => {
+          alert('clear input')
+        }}
+        icon={XIcon}
+        aria-label="Clear input"
+        tooltip-direction="nw"
+        sx={{color: 'fg.subtle'}}
+      />
+    }
+  />
+</FormControl>
+```
+
 ### With error and warning states
 
 ```jsx live

generated/components.json

@@ -4118,6 +4118,12 @@
               "defaultValue": "",
               "description": "Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies."
             },
+            {
+              "name": "tooltip-direction",
+              "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
+              "defaultValue": "n",
+              "description": "Sets where the tooltip renders in relation to the target."
+            },
             {
               "name": "icon",
               "type": "React.FunctionComponent",
@@ -5100,4 +5106,4 @@
       "subcomponents": []
     }
   }
-}
+}

src/TextInput/TextInput.docs.json

@@ -125,6 +125,12 @@
           "defaultValue": "",
           "description": "Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies."
         },
+        {
+          "name": "tooltip-direction",
+          "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
+          "defaultValue": "n",
+          "description": "Sets where the tooltip renders in relation to the target."
+        },
         {
           "name": "icon",
           "type": "React.FunctionComponent",
@@ -158,4 +164,4 @@
       }
     }
   ]
-}
+}

src/TextInput/TextInput.features.stories.tsx

@@ -148,6 +148,36 @@ export const WithTrailingAction = () => {
   )
 }
 
+export const WithTooltipDirection = () => {
+  const [value, setValue] = useState('')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+  return (
+    <Box as="form">
+      <FormControl>
+        <FormControl.Label>Default label</FormControl.Label>
+        <TextInput
+          trailingAction={
+            <TextInput.Action
+              onClick={() => {
+                setValue('')
+              }}
+              icon={XCircleFillIcon}
+              aria-label="Clear input"
+              tooltip-direction="nw"
+              sx={{color: 'fg.subtle'}}
+            />
+          }
+          value={value}
+          onChange={handleChange}
+        />
+      </FormControl>
+    </Box>
+  )
+}
+
 export const WithLoadingIndicator = (args: FormControlArgs<TextInputProps>) => {
   return (
     <Box as="form">

src/_TextInputInnerAction.tsx

@@ -5,11 +5,16 @@ import {Button, IconButton, ButtonProps} from './Button'
 import Tooltip from './Tooltip'
 import {BetterSystemStyleObject, merge, SxProp} from './sx'
 
-type TextInputActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'size'> & {
+type TextInputActionProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'aria-label' | 'size' | 'tooltip-direction'
+> & {
   /** @deprecated Text input action buttons should only use icon buttons */
   children?: React.ReactNode
   /** Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies. */
   ['aria-label']?: string
+  /** Position of tooltip. If no position is passed or defaults to "n" */
+  ['tooltip-direction']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
   /** The icon to render inside the button */
   icon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /**
@@ -47,13 +52,15 @@ const invisibleButtonStyleOverrides = {
 const ConditionalTooltip: React.FC<
   React.PropsWithChildren<{
     ['aria-label']?: string
+    ['tooltip-direction']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
     children: React.ReactNode
   }>
-> = ({'aria-label': ariaLabel, children}) => (
+> = ({'aria-label': ariaLabel, children, 'tooltip-direction': tooltipDirection}) => (
   <>
     {ariaLabel ? (
       <Tooltip
         aria-label={ariaLabel}
+        direction={tooltipDirection}
         sx={{
           /* inline-block is used to ensure the tooltip dimensions don't
              collapse when being used with `grid` or `inline` children */
@@ -69,7 +76,18 @@ const ConditionalTooltip: React.FC<
 )
 
 const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
-  ({'aria-label': ariaLabel, children, icon, sx: sxProp, variant = 'invisible', ...rest}, forwardedRef) => {
+  (
+    {
+      'aria-label': ariaLabel,
+      'tooltip-direction': tooltipDirection,
+      children,
+      icon,
+      sx: sxProp,
+      variant = 'invisible',
+      ...rest
+    },
+    forwardedRef,
+  ) => {
     const sx =
       variant === 'invisible'
         ? merge<BetterSystemStyleObject>(invisibleButtonStyleOverrides, sxProp || {})
@@ -83,7 +101,7 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
     return (
       <Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
         {icon && !children ? (
-          <Tooltip aria-label={ariaLabel}>
+          <Tooltip direction={tooltipDirection} aria-label={ariaLabel}>
             <IconButton
               variant={variant}
               type="button"