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.

Sign up for GitHub

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

Jump to bottom

[New Component] Swatch Group + Swatch #10288

Open
macandcheese opened this issue Sep 12, 2024 · 3 comments
Open

[New Component] Swatch Group + Swatch #10288

macandcheese opened this issue Sep 12, 2024 · 3 comments
Labels
0 - new New issues that need assignment. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone new component Issues tied to a new component. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Milestone
2025-07-29 - 3.3....

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Sep 12, 2024 •
edited by ashetland
Loading

Description

Create a new Swatch Group + Swatch component that provides selection affordances, keyboard navigation, and other accessible helpers for the Swatch Group / Swatch.

User Stories

As a designer, I want to create a selection experience for Swatches. I may want to have multiple swatch groups, and they may exist within any number of workflow locations and contexts - not just within a Color Picker component's "Saved" area.

It should not be scoped to "Color" workflows - as it may display patterns or other images.

Acceptance Criteria

A public Swatch Group and Swatch component set is available. Calcite Color Picker Swatch is deprecated.

Relevant Info

https://codesandbox.io/p/sandbox/calcite-color-picker-swatch-group-example-in-popover-l6qbu7

Initial Figma design spec includes the following:

  • Revised Swatch active/selected state
  • New Swatch disabled state
  • New Swatch image-fill option
  • Revised Swatch hover and focus styling
  • Swatch Group spacing copied from existing saved swatch spec from Color Picker
  • Swatch Groups should support our typical array of selection-modes
  • Clickable prototype with selection, hover, and focus in light and dark modes (Color Picker used for rough context only).

Final design may adjust based on feedback and usability testing during development.

Helpful Details

Blocked issues: #748, #1616

Priority impact

impact - p2 - want for an upcoming milestone

Esri team

Calcite (design)
@macandcheese macandcheese added new component Issues tied to a new component. design Issues that need design consultation prior to development. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Sep 12, 2024
@github-actions GitHub Actions
Copy link
Contributor

cc @ashetland, @SkyeSeitz, @brittneytewks

@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone labels Sep 12, 2024
@geospatialem geospatialem mentioned this issue Sep 13, 2024
Open
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 5 A few days of work, definitely requires updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Sep 13, 2024
@geospatialem geospatialem added this to the 2024-12-17 - Dec Release milestone Sep 13, 2024
@ashetland ashetland self-assigned this Nov 25, 2024
@ashetland ashetland added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Nov 25, 2024
@geospatialem geospatialem removed this from the 2024-12-17 - Dec Milestone milestone Dec 2, 2024
@ashetland
Copy link
Contributor

Added design info to Relevant Info section above. Final design may be updated during development phase based on usability discoveries and feedback.

@ashetland ashetland added the ready for dev Issues ready for development implementation. label Dec 18, 2024
@github-actions github-actions bot added 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Dec 18, 2024
@github-actions GitHub Actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@DitwanP DitwanP added this to the 2025-07-29 - 3.3.0 Jul Release milestone Jan 3, 2025
@DitwanP DitwanP removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0 - new New issues that need assignment. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. estimate - 5 A few days of work, definitely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone new component Issues tied to a new component. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2025-07-29 - 3.3.0 Jul Release
Development

No branches or pull requests
4 participants
@macandcheese @geospatialem @DitwanP @ashetland