Update TextInput.TrailingAction hover state (#4831)

* input action: remove background, fix color

* update examples to hide trailing action when empty

* Create seven-scissors-explain.md

* update jest snapshots

* test(vrt): update snapshots

---------

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

.changeset/seven-scissors-explain.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TextInput: Update trailing action styles for hover state 

packages/react/src/TextInput/TextInput.features.stories.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {Box, FormControl} from '..'
+import {Box, FormControl, Stack} from '..'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {CalendarIcon, CheckIcon, XCircleFillIcon} from '@primer/octicons-react'
@@ -121,7 +121,7 @@ export const WithTrailingIcon = () => (
 )
 
 export const WithTrailingAction = () => {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState('sample text')
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
@@ -131,26 +131,23 @@ export const WithTrailingAction = () => {
       <FormControl>
         <FormControl.Label>Default label</FormControl.Label>
         <TextInput
-          trailingAction={
-            <TextInput.Action
-              onClick={() => {
-                setValue('')
-              }}
-              icon={XCircleFillIcon}
-              aria-label="Clear input"
-              sx={{color: 'fg.subtle'}}
-            />
-          }
           value={value}
           onChange={handleChange}
+          trailingAction={
+            <Stack justify="center" style={{minWidth: '34px'}}>
+              {value.length ? (
+                <TextInput.Action onClick={() => setValue('')} icon={XCircleFillIcon} aria-label="Clear input" />
+              ) : undefined}
+            </Stack>
+          }
         />
       </FormControl>
     </Box>
   )
 }
 
 export const WithTooltipDirection = () => {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState('sample text')
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)
@@ -160,19 +157,20 @@ export const WithTooltipDirection = () => {
       <FormControl>
         <FormControl.Label>Default label</FormControl.Label>
         <TextInput
-          trailingAction={
-            <TextInput.Action
-              onClick={() => {
-                setValue('')
-              }}
-              icon={XCircleFillIcon}
-              aria-label="Clear input"
-              tooltipDirection="nw"
-              sx={{color: 'fg.subtle'}}
-            />
-          }
           value={value}
           onChange={handleChange}
+          trailingAction={
+            <Stack justify="center" style={{minWidth: '34px'}}>
+              {value.length ? (
+                <TextInput.Action
+                  onClick={() => setValue('')}
+                  icon={XCircleFillIcon}
+                  aria-label="Clear input"
+                  tooltipDirection="nw"
+                />
+              ) : undefined}
+            </Stack>
+          }
         />
       </FormControl>
     </Box>

packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -1964,6 +1964,13 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
+  background-color: transparent;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+}
+
+.c4[data-size="small"][data-no-visuals]:hover,
+.c4[data-size="small"][data-no-visuals]:focus {
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c4[data-size="small"][data-no-visuals][data-component="IconButton"] {
@@ -2566,12 +2573,18 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c4[data-no-visuals] {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
+  background-color: transparent;
+}
+
+.c4[data-no-visuals]:hover,
+.c4[data-no-visuals]:focus {
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c4[data-no-visuals][data-component="IconButton"] {
@@ -2742,7 +2755,11 @@ exports[`TextInput renders trailingAction text button 1`] = `
       data-loading={false}
       data-no-visuals={true}
       onClick={[MockFunction]}
-      style={{}}
+      style={
+        {
+          "--button-color": "fg.subtle",
+        }
+      }
       type="button"
     >
       <span
@@ -3047,12 +3064,18 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c4[data-no-visuals] {
-  color: var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
+  background-color: transparent;
+}
+
+.c4[data-no-visuals]:hover,
+.c4[data-no-visuals]:focus {
+  color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
 .c4[data-no-visuals][data-component="IconButton"] {
@@ -3340,7 +3363,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
       onFocus={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
-      style={{}}
+      style={
+        {
+          "--button-color": "fg.subtle",
+        }
+      }
       type="button"
     >
       <span

packages/react/src/internal/components/TextInputInnerAction.tsx

@@ -32,6 +32,9 @@ const invisibleButtonStyleOverrides = {
   paddingBottom: '2px',
   paddingLeft: '4px',
   position: 'relative',
+  backgroundColor: 'transparent',
+  color: 'fg.subtle',
+  '&:hover, &:focus': {color: 'fg.default'},
 
   '&[data-component="IconButton"]': {
     width: 'var(--inner-action-size)',