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

Draft NEW Selector component #7221

Closed
wants to merge 1 commit into from
Closed

Conversation

taysea
Copy link
Collaborator

@taysea taysea commented May 2, 2024

What does this PR do?

Status: Early draft state for component/API feedback. Selection, accessibility, theming, keyboard logic has not been implemented.

I've left a variety of "TO DO" comments in the code to capture questions I ran into while building.

Use the storybook examples and index.d.ts files to get a feel for developer experience + component behavior.

Introduces new set of "Selector" components:

  • SelectorGroup
  • Selector
  • SelectorHeader
  • SelectorBody (Should this be more generic in case people want multiple sections (for example, one with pad, but one full width? "SelectorContent"?)
  • SelectorTitle
Component Styling responsibilities State/behavior responsibilities Configurable props
SelectorGroup Direction and spacing between individual selectors. Manages selected state, passes down via context --
Selector Container styling of individual selector (border, rounding, selected border) Roving tabIndex --
SelectorHeader Padding around content Renders selection indicator (RadioButton/CheckBox) title, will render SelectorTitle
SelectorBody Padding around content -- --
SelectorTitle Text style -- --

For details on the purpose for this component set see: grommet/hpe-design-system#3840

Considerations for how this was built

Based on the 80% case for custom content, it makes most sense to approach this component from a "compositional" mindset, rather than just a "configurable" one.

Where should the reviewer start?

What testing has been done on this PR?

How should this be manually tested?

Do Jest tests follow these best practices?

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Closes grommet/hpe-design-system#3840

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Should this PR be mentioned in the release notes?

Is this change backwards compatible or is it a breaking change?

@taysea
Copy link
Collaborator Author

taysea commented May 13, 2024

Closing this PR as we've decided it doesn't warrant a Grommet component at this time.

@taysea taysea closed this May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Draft PR for Selector component
1 participant