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

[Color Picker] Color field design improvement for values and scales #9415

Closed
3 of 12 tasks
geospatialem opened this issue May 24, 2024 · 5 comments
Closed
3 of 12 tasks

[Color Picker] Color field design improvement for values and scales #9415

geospatialem opened this issue May 24, 2024 · 5 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. breaking change Issues and pull requests with code changes that are not backwards compatible. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - low Issue is non core or affecting less that 10% of people using the library ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Milestone
2024-11-26 - 3.0....

Comments

@geospatialem
Copy link
Member

geospatialem commented May 24, 2024 •
edited
Loading

Check existing issues

Description

The design phase for adding alpha channel support to Color Picker (issue #749) proposed additional improvements that were intended to be tackled after the initial alpha channel support was implemented. This issue is to document the remaining tasks to complete, and the two items below should be considered together for next steps for their implementation.

Note: depending on the discussions, could result in a breaking change.

cc @ashetland

Acceptance Criteria

  • Consider changing updating the widths of Color Picker at each scale. Proposed widths are 200px (small), 240px (medium), 304px (large).
  • Also consider updating color fields to be square. This will ensure saturation and brightness values have a linear relationship and improve the UX of selecting a color inside the field. (note: this could be unnecessary if the color field can be responsive to container sizes)
    • Run past internal teams for additional expertise and insights
    • Should we consider as a new prop?

Relevant Info

Figma file

Part of the #7163 epic

Which Component

color-picker

Example Use Case

No response

Priority impact

impact - p3 - not time sensitive

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to development. p - low Issue is non core or affecting less that 10% of people using the library 0 - new New issues that need assignment. ready for dev Issues ready for development implementation. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels May 24, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. Calcite (design) Issues logged by Calcite designers. labels May 24, 2024
@github-actions GitHub Actions
Copy link
Contributor

cc @geospatialem, @brittneytewks

@geospatialem geospatialem mentioned this issue May 24, 2024
Open
4 tasks
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label May 24, 2024
@geospatialem geospatialem added this to the 2024-07-30 - Jul Release milestone May 24, 2024
@jcfranco jcfranco self-assigned this Jul 1, 2024
@jcfranco jcfranco added 1 - assigned Issues that are assigned to a sprint and a team member. breaking change Issues and pull requests with code changes that are not backwards compatible. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible. and removed 0 - new New issues that need assignment. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Jul 1, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 20, 2024
This was referenced Nov 27, 2024
Merged
Draft
jcfranco added a commit that referenced this issue Nov 27, 2024
@jcfranco
feat(color-picker)!: update color field dimensions (#10903)
7fc2ab8 
**Related Issue:** #9415 

## Summary

This updates the `color-picker`'s default widths to be:

* 200 (s)
* 240 (m)
* 304 (l)

Additionally, the color-field will use an aspect ratio of 1.8.

BREAKING CHANGE: The default width and height of the `color-picker` have
been updated. Developers should review and adjust their layouts to
accommodate these changes.
@jcfranco
Copy link
Member

Sizing changes (main breaking change) are now installed.

@jcfranco
Copy link
Member

Actually, the responsiveness part is separate, so I'll label this as installed. 🎉

@jcfranco jcfranco removed the 2 - in development Issues that are actively being worked on. label Nov 27, 2024
@jcfranco jcfranco added the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Nov 27, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@github-actions github-actions bot assigned DitwanP and unassigned jcfranco Nov 27, 2024
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 28, 2024
@geospatialem
Copy link
Member Author

Verified on 3.0.0-next.40 with https://codepen.io/geospatialem/pen/xbKxNxX:

image

@ashetland ashetland mentioned this issue Dec 2, 2024
Open
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. breaking change Issues and pull requests with code changes that are not backwards compatible. Calcite (design) Issues logged by Calcite designers. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. enhancement Issues tied to a new feature or request. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - low Issue is non core or affecting less that 10% of people using the library ready for dev Issues ready for development implementation. visual changes Issues with visual changes that are added for consistency, but are not backwards compatible.
Projects
None yet
Milestone
2024-11-26 - 3.0.0 Nov Breaking Chang...
Development

No branches or pull requests
3 participants
@jcfranco @geospatialem @DitwanP