Add trailingAction to TextInput

.changeset/chatty-moose-wait.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds the option to render a trailing action inside of the TextInput component

docs/content/TextInput.mdx

@@ -108,6 +108,42 @@ const WithIconAndLoadingIndicator = () => {
 render(<WithIconAndLoadingIndicator />)
 ```
 
+### With trailing action
+
+```jsx live
+<Box display="grid" sx={{gap: 3}}>
+ <FormControl>
+ <FormControl.Label>Icon action</FormControl.Label>
+ <TextInput
+ trailingAction={
+ <TextInput.Action
+ onClick={() => {
+ alert('clear input')
+ }}
+ icon={XIcon}
+ aria-label="Clear input"
+ sx={{color: 'fg.subtle'}}
+ />
+ }
+ />
+ </FormControl>
+ <FormControl>
+ <FormControl.Label>Text action</FormControl.Label>
+ <TextInput
+ trailingAction={
+ <TextInput.Action
+ onClick={() => {
+ alert('clear input')
+ }}
+ >
+ Clear
+ </TextInput.Action>
+ }
+ />
+ </FormControl>
+</Box>
+```
+
 ### With error and warning states
 
 ```jsx live
@@ -160,61 +196,63 @@ render(<WithIconAndLoadingIndicator />)
 
 <PropsTable>
  <PropsTableRow name="aria-label" type="string" description="Allows input to be accessible." />
- <PropsTableRow
- name="block"
- type="boolean"
- defaultValue="false"
- description="Creates a full-width input element"
- />
+ <PropsTableRow name="block" type="boolean" defaultValue="false" description="Creates a full-width input element" />
  <PropsTableRow
  name="contrast"
  type="boolean"
  defaultValue="false"
  description="Changes background color to a higher contrast color"
  />
- <PropsTableRow name='size' type="'small' | 'medium' | 'large'" description="Creates a smaller or larger input than the default." />
-
-<PropsTableRow name="loading" type="boolean" description="Whether to show a loading indicator in the input" />
-<PropsTableRow
- name="loaderPosition"
- type="'auto' | 'leading' | 'trailing'"
- description={
- <>
- <div>Which position to render the loading indicator</div>
- <ul>
- <li>
- 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the
- beginning
- </li>
- <li>'leading': at the beginning of the input</li>
- <li>'trailing': at the end of the input</li>
- </ul>
- </>
- }
-/>
-<PropsTableRow
- name="leadingVisual"
- type={<>string | React.ComponentType</>}
- description="Visual positioned on the left edge inside the input"
-/>
-<PropsTableRow name="monospace" type="boolean" defaultValue="false" description="Shows input in monospace font" />
-<PropsTableRow
- name="trailingVisual"
- type={<>string | React.ComponentType</>}
- description="Visual positioned on the right edge inside the input"
-/>
-<PropsTableRow
- name="validationStatus"
- type="'error' | 'success' | 'warning'"
- description="Style the input to match the status"
-/>
-<PropsTableRow
- name="variant"
- type="'small' | 'medium' | 'large'"
- description="(Use size) Creates a smaller or larger input than the default."
- deprecated
-/>
-
+ <PropsTableRow
+ name="size"
+ type="'small' | 'medium' | 'large'"
+ description="Creates a smaller or larger input than the default."
+ />
+ <PropsTableRow name="loading" type="boolean" description="Whether to show a loading indicator in the input" />
+ <PropsTableRow
+ name="loaderPosition"
+ type="'auto' | 'leading' | 'trailing'"
+ description={
+ <>
+ <div>Which position to render the loading indicator</div>
+ <ul>
+ <li>
+ 'auto' (default): at the end of the input, unless a `leadingVisual` is passed. Then, it will render at the
+ beginning
+ </li>
+ <li>'leading': at the beginning of the input</li>
+ <li>'trailing': at the end of the input</li>
+ </ul>
+ </>
+ }
+ />
+ <PropsTableRow
+ name="leadingVisual"
+ type={<>string | React.ComponentType</>}
+ description="Visual positioned on the left edge inside the input"
+ />
+ <PropsTableRow name="monospace" type="boolean" defaultValue="false" description="Shows input in monospace font" />
+ <PropsTableRow
+ name="trailingVisual"
+ type={<>string | React.ComponentType</>}
+ description="Visual positioned on the right edge inside the input"
+ />
+ <PropsTableRow
+ name="trailingAction"
+ type="React.ReactElement<HTMLProps<HTMLButtonElement>>"
+ description="A visual that renders inside the input after the typing area"
+ />
+ <PropsTableRow
+ name="validationStatus"
+ type="'error' | 'success' | 'warning'"
+ description="Style the input to match the status"
+ />
+ <PropsTableRow
+ name="variant"
+ type="'small' | 'medium' | 'large'"
+ description="(Use size) Creates a smaller or larger input than the default."
+ deprecated
+ />
  <PropsTableRow
  name="width"
  type={
@@ -265,6 +303,29 @@ render(<WithIconAndLoadingIndicator />)
  />
 </PropsTable>
 
+### TextInput.Action
+
+<PropsTable>
+ <PropsTableRow
+ name="aria-label"
+ type="string"
+ description="Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies."
+ />
+ <PropsTableRow name="icon" type="React.FunctionComponent" description="The icon to render inside the button" />
+ <PropsTableRow
+ name="variant"
+ type="'default' | 'primary' | 'invisible' | 'danger'"
+ description="Determine's the styles on a button"
+ />
+ <PropsTableBasePropRows
+ elementType="button"
+ refType="HTMLButtonElement"
+ passthroughPropsLink={
+ <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">MDN</Link>
+ }
+ />
+</PropsTable>
+
 ## Status
 
 <ComponentChecklist

src/FormControl/FormControl.tsx

@@ -174,7 +174,6 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
  ref={ref}
  display="flex"
  flexDirection="column"
- width="100%"
  sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}}
  >
  {slots.Label}
@@ -184,7 +183,8 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
  required,
  disabled,
  validationStatus,
- ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' ')
+ ['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
+ ...InputComponent.props
  })}
  {React.Children.toArray(children).filter(
  child =>

src/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, {MouseEventHandler} from 'react'
+import React, {MouseEventHandler, useCallback, useState} from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import classnames from 'classnames'
 
@@ -7,6 +7,7 @@ import {useProvidedRefOrCreate} from './hooks'
 import {Merge} from './utils/types'
 import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper'
 import UnstyledTextInput from './_UnstyledTextInput'
+import TextInputAction from './_TextInputInnerAction'
 
 export type TextInputNonPassthroughProps = {
  /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
@@ -28,6 +29,10 @@ export type TextInputNonPassthroughProps = {
  * A visual that renders inside the input after the typing area
  */
  trailingVisual?: string | React.ComponentType<{className?: string}>
+ /**
+ * A visual that renders inside the input after the typing area
+ */
+ trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>
 } & Pick<
  StyledWrapperProps,
  | 'block'
@@ -52,6 +57,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  icon: IconComponent,
  leadingVisual: LeadingVisual,
  trailingVisual: TrailingVisual,
+ trailingAction,
  block,
  className,
  contrast,
@@ -62,6 +68,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  validationStatus,
  sx: sxProp,
  size: sizeProp,
+ onFocus,
+ onBlur,
  // start deprecated props
  width: widthProp,
  minWidth: minWidthProp,
@@ -72,6 +80,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  },
  ref
  ) => {
+ const [isInputFocused, setIsInputFocused] = useState<boolean>(false)
  const inputRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
  // this class is necessary to style FilterSearch, plz no touchy!
  const wrapperClasses = classnames(className, 'TextInput-wrapper')
@@ -82,6 +91,20 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  const focusInput: MouseEventHandler = () => {
  inputRef.current?.focus()
  }
+ const handleInputFocus = useCallback(
+ e => {
+ setIsInputFocused(true)
+ onFocus && onFocus(e)
+ },
+ [onFocus]
+ )
+ const handleInputBlur = useCallback(
+ e => {
+ setIsInputFocused(false)
+ onBlur && onBlur(e)
+ },
+ [onBlur]
+ )
 
  return (
  <TextInputWrapper
@@ -99,6 +122,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  variant={variantProp}
  hasLeadingVisual={Boolean(LeadingVisual || showLeadingLoadingIndicator)}
  hasTrailingVisual={Boolean(TrailingVisual || showTrailingLoadingIndicator)}
+ hasTrailingAction={Boolean(trailingAction)}
+ isInputFocused={isInputFocused}
  onClick={focusInput}
  aria-live="polite"
  aria-busy={Boolean(loading)}
@@ -111,14 +136,22 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  >
  {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
  </TextInputInnerVisualSlot>
- <UnstyledTextInput ref={inputRef} disabled={disabled} {...inputProps} data-component="input" />
+ <UnstyledTextInput
+ ref={inputRef}
+ disabled={disabled}
+ onFocus={handleInputFocus}
+ onBlur={handleInputBlur}
+ {...inputProps}
+ data-component="input"
+ />
  <TextInputInnerVisualSlot
  visualPosition="trailing"
  showLoadingIndicator={showTrailingLoadingIndicator}
  hasLoadingIndicator={typeof loading === 'boolean'}
  >
  {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
  </TextInputInnerVisualSlot>
+ {trailingAction}
  </TextInputWrapper>
  )
  }
@@ -131,4 +164,6 @@ TextInput.defaultProps = {
 
 TextInput.displayName = 'TextInput'
 
-export default TextInput
+export default Object.assign(TextInput, {
+ Action: TextInputAction
+})

src/_InputLabel.tsx

@@ -21,6 +21,7 @@ const InputLabel: React.FC<Props & SxProp> = ({children, disabled, required, vis
  display: 'block',
  color: disabled ? 'fg.muted' : 'fg.default',
  cursor: disabled ? 'default' : 'pointer',
+ alignSelf: 'flex-start',
  ...sx
  }}
  >