The design for Input includes a "bookends" feature which is partially outlined in Input's Spec-variants.md and Spec-styling.md.

This was removed from the initial implementation due to a lot of open questions and lack of priority from partners, but we may need to implement it in the future.

For a tentative implementation of bookends in Input itself (which is probably NOT what we want), see this branch.

Open questions

• What's the product scenario where this is needed?
• How should the bookends be associated with the input for accessibility?
• Should this be implemented Input-specific e.g. <BookendInput/>, or as a reusable wrapper for any input-like component?
• If a reusable wrapper, what pattern?
  • <Bookends><BookendBefore/><Input/><BookendAfter/></Bookends>
  • <BookendBefore/><Input/><BookendAfter/> (problem: need to modify input border radius, and you can't style siblings)
  • <Bookends before={...} after={...}><Input/></Bookends>
  • <InputGroup><Bookend/><Input/><Bookend/></InputGroup> where InputGroup modifies border radius as needed
• Missing from design spec:
  • What is the default appearance?
  • Disabled styles (color, cursor)
  • Does the input focus outline encompass the bookends?
  • Are they included in the hover and pressed states?
  • How do they look with field outline appearance? (background, border color, is there inner border)
  • How do they look with field underline appearance?
  • With outlined field + transparent bookends, should the rounded corners move to the input wrapper?