Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input: add bookends #21462

Closed
ecraig12345 opened this issue Jan 26, 2022 · 1 comment
Closed

Input: add bookends #21462

ecraig12345 opened this issue Jan 26, 2022 · 1 comment
Assignees
Labels

Comments

@ecraig12345
Copy link
Member

ecraig12345 commented Jan 26, 2022

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?
@msft-fluent-ui-bot
Copy link
Collaborator

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 25, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants