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

calcite-color-picker: should be responsive to container sizes #8463

Closed
2 of 6 tasks
Tracked by #7180
AdelheidF opened this issue Dec 20, 2023 · 10 comments
Closed
2 of 6 tasks
Tracked by #7180

calcite-color-picker: should be responsive to container sizes #8463

AdelheidF opened this issue Dec 20, 2023 · 10 comments
Assignees
@DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. design-tokens Issues requiring design tokens. estimate - design - sm Small design effort; 1-4 days of design work impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2025-02-06 - 3.0....

Comments

@AdelheidF
Copy link

AdelheidF commented Dec 20, 2023 •
edited
Loading

Check existing issues

Actual Behavior

If color-picker is inside a panel that scrolls vertically then horizontal scrollbars appear in FF. Chrome is fine.

If you set display:flex on the color-picker and overflow:hidden on its container inside the shadow-dom then it's correct.

cc @driskull

Expected Behavior

No horizontal scroll bars in any browser.

Reproduction Sample

https://codepen.io/afreitag/pen/KKYgKzW
https://codepen.io/afreitag/pen/OJqLWEB

Reproduction Steps

Open codepen in Chrome and Firefox. You'll see horizontal scrollbars in FF.

Reproduction Version

2.1.0

Relevant Info

Firefox

Regression?

no

Priority impact

p1 - need for current milestone

Impact

No response

Calcite package

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

Esri team

ArcGIS Map Viewer
@AdelheidF AdelheidF added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Dec 20, 2023
@github-actions github-actions bot added ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone calcite-components Issues specific to the @esri/calcite-components package. labels Dec 20, 2023
@driskull
Copy link
Member

note: Seems like the color-picker component should be more flexible in its sizing. It should respond to its container and not overflow its boundaries.

@alisonailea alisonailea mentioned this issue Dec 21, 2023
Open
@geospatialem geospatialem added the design-tokens Issues requiring design tokens. label Dec 21, 2023
@geospatialem geospatialem added the design Issues that need design consultation prior to development. label Jan 11, 2024
@geospatialem
Copy link
Member

Design expertise sought on the color controls for the container sizing and/if design tokens could mitigate.

@brittneytewks brittneytewks added p - medium Issue is non core or affecting less that 60% of people using the library estimate - design - sm Small design effort; 1-4 days of design work and removed needs triage Planning workflow - pending design/dev review. labels Mar 4, 2024
@brittneytewks brittneytewks added this to the Design Backlog milestone Mar 4, 2024
@ashetland ashetland mentioned this issue May 24, 2024
Closed
12 tasks
@jcfranco jcfranco added the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Jul 5, 2024
@jcfranco jcfranco mentioned this issue Nov 27, 2024
Merged
@ashetland
Copy link
Contributor

Design work completed with #9415. See this Figma file for new default widths and a fixed 1:1.8 aspect ratio for the color field when resizing the Color Picker.

@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Dec 2, 2024
jcfranco added a commit that referenced this issue Jan 29, 2025
@jcfranco
feat(color-picker): enable responsive layout (#10904)
c37377b 
**Related Issue:** #8463

## Summary

This updates `color-picker` to adjust its layout for custom width values
larger than the default width for each scale.

### Notes

* The component will initialize with min-widths corresponding to scale,
but can be overridden to grow by using `inline-size`
* The color field will preserve its aspect ratio
* Extracts common `Dimensions` interface
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Jan 29, 2025
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@AdelheidF
Copy link
Author

AdelheidF commented Jan 30, 2025 •
edited
Loading

I don't see it fixed for FF.

FF Using Calcite Components 3.0.0-next.123 [Date: 2025-01-29, Revision: a43ecfe]

Chrome

Edge

@jcfranco
Copy link
Member

jcfranco commented Jan 30, 2025 •
edited
Loading

I dug into this further, and it seems to be a separate issue. The related feature allows the color picker to expand beyond the scale-defined min-width and adapt to the layout.

We could add box-sizing: border-box to the component and its contents, but in Firefox, the color-picker element container still shows an offset width of 225px, even when the component has a width and min-width of 240px.

@jcfranco
Copy link
Member

It looks like it is a separate layout issue. I managed to reproduce the issue by swapping the color-picker with a div with a defined width:

Image

@geospatialem geospatialem assigned DitwanP and unassigned geospatialem Feb 4, 2025
@DitwanP
Copy link
Contributor

DitwanP commented Feb 5, 2025

@jcfranco So is there anything else for us to do with this issue?

I'm still seeing the horizontal scrollbars on Safari and FF using the provided repro cases and on next.128

@jcfranco
Copy link
Member

jcfranco commented Feb 5, 2025

The scrollbars are unrelated to the color picker, so no further action needed here.

@DitwanP
Copy link
Contributor

DitwanP commented Feb 5, 2025

🍡 Verified

@DitwanP DitwanP closed this as completed Feb 5, 2025
@DitwanP DitwanP 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 Feb 5, 2025
benelan pushed a commit that referenced this issue Feb 8, 2025
@jcfranco @benelan
feat(color-picker): enable responsive layout (#10904)
289a431 
**Related Issue:** #8463

## Summary

This updates `color-picker` to adjust its layout for custom width values
larger than the default width for each scale.

### Notes

* The component will initialize with min-widths corresponding to scale,
but can be overridden to grow by using `inline-size`
* The color field will preserve its aspect ratio
* Extracts common `Dimensions` interface
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Map Viewer Issues logged by ArcGIS Map Viewer team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components Issues specific to the @esri/calcite-components package. design Issues that need design consultation prior to development. design-tokens Issues requiring design tokens. estimate - design - sm Small design effort; 1-4 days of design work impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2025-02-06 - 3.0.0 Feb Breaking Chang...
Development

No branches or pull requests
7 participants
@jcfranco @driskull @geospatialem @AdelheidF @DitwanP @ashetland @brittneytewks