Use camelCase for tooltipDirection prop (#3101)

* Use camelCase for tooltipDirection prop

* Update generated/components.json

---------

Co-authored-by: colebemis <colebemis@users.noreply.github.com>

.changeset/wild-fishes-carry.md

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

docs/content/TextInput.mdx

@@ -144,7 +144,7 @@ render(<WithIconAndLoadingIndicator />)
         }}
         icon={XIcon}
         aria-label="Clear input"
-        tooltip-direction="nw"
+        tooltipDirection="nw"
         sx={{color: 'fg.subtle'}}
       />
     }

generated/components.json

@@ -4134,7 +4134,7 @@
               "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",
+              "name": "tooltipDirection",
               "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
               "defaultValue": "n",
               "description": "Sets where the tooltip renders in relation to the target."

src/TextInput/TextInput.docs.json

@@ -126,7 +126,7 @@
           "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",
+          "name": "tooltipDirection",
           "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'",
           "defaultValue": "n",
           "description": "Sets where the tooltip renders in relation to the target."

src/TextInput/TextInput.features.stories.tsx

@@ -166,7 +166,7 @@ export const WithTooltipDirection = () => {
               }}
               icon={XCircleFillIcon}
               aria-label="Clear input"
-              tooltip-direction="nw"
+              tooltipDirection="nw"
               sx={{color: 'fg.subtle'}}
             />
           }

src/_TextInputInnerAction.tsx

@@ -7,14 +7,14 @@ import {BetterSystemStyleObject, merge, SxProp} from './sx'
 
 type TextInputActionProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
-  'aria-label' | 'size' | 'tooltip-direction'
+  'aria-label' | 'size' | 'tooltipDirection'
 > & {
   /** @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'
+  tooltipDirection?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
   /** The icon to render inside the button */
   icon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /**
@@ -52,10 +52,10 @@ const invisibleButtonStyleOverrides = {
 const ConditionalTooltip: React.FC<
   React.PropsWithChildren<{
     ['aria-label']?: string
-    ['tooltip-direction']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
+    ['tooltipDirection']?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
     children: React.ReactNode
   }>
-> = ({'aria-label': ariaLabel, children, 'tooltip-direction': tooltipDirection}) => (
+> = ({'aria-label': ariaLabel, children, tooltipDirection: tooltipDirection}) => (
   <>
     {ariaLabel ? (
       <Tooltip
@@ -79,7 +79,7 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
   (
     {
       'aria-label': ariaLabel,
-      'tooltip-direction': tooltipDirection,
+      tooltipDirection: tooltipDirection,
       children,
       icon,
       sx: sxProp,