update examples to hide trailing action when empty

primer · Aug 8, 2024 · 096e54c · 096e54c
1 parent 2792717
commit 096e54c
Showing 1 changed file with 22 additions and 24 deletions.
diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/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>