[feat] New Component: Input prefix or suffix

Input prefix or suffix

USWDS Version

2.11.0

Description

Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input.

Requirements (proposed)

Prop Interface

interface InputPrefixSuffixProps = {
 type: ‘prefix’ | ‘suffix’
 className?: string
 children: React.ReactNode
} & JSX.IntrinsicElements['div']

Example Implementation (proposed)

return (
  <FormGroup>
    <label class="usa-label" for="example-input-prefix">Credit card number</label>
    <InputPrefixSuffix type="prefix">
      <Icon name="credit_card"/>
    </InputPrefixSuffix>
  </FormGroup>

  <FormGroup error={true}>
    <label class="usa-label" for="example-input-prefix-error">Credit card number (Error)</label>
    <InputPrefixSuffix type="prefix">
      <Icon name="credit_card"/>
    </InputPrefixSuffix>
  </FormGroup>

   <FormGroup>
     <label class="usa-label" for="example-input-suffix">Weight, in pounds</label>
    <InputPrefixSuffix type="suffix">
      lbs.
    </InputPrefixSuffix> 
  </FormGroup>
)

More Details

• <div>root element

Other Considerations

[jenbutongit]

👋 Hey there, I’m an engineer currently consulting in uk gov, are you still looking for contributors for this? Happy to look into it 🤓

@SirenaBorracha - I think for your proposed prop interface you meant to use type instead of interface. Using interface with & JSX.xx will give you this namespace error TS2708: Cannot use namespace ‘JSX’ as a value.

I’d also suggest two components here, but happy to concede (since we don’t have this component ourselves so I’m not sure how your developers would rather use this component), I’d have one component for InputPrefix and one for InputSuffix, and remove the need for type: ‘prefix’ | ‘suffix’

Is InputPrefix|Suffix only applicable to textInputs? Could I suggest an API similar to this? https://github.com/NHSDigital/nhsuk-react-components/tree/main/src/components/error-summary

so in this case the implementation would be

 <FormGroup>
    <label class="usa-label" for="example-input-prefix">Credit card number</label>
    <TextInput.Prefix>
      <Icon name="credit_card"/>
    </TextInput.Prefix>
    <TextInput/>
  </FormGroup>

[jenbutongit]

@brandonlenz circleCI says no 🚫 - I also don’t have write access so it wont let me push any commits up either