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

feat(color-picker): enable responsive layout #10904

Merged
merged 25 commits into from
Jan 29, 2025
Merged

feat(color-picker): enable responsive layout #10904

merged 25 commits into from
Jan 29, 2025

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Nov 27, 2024 •
edited
Loading

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

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Nov 27, 2024
@jcfranco jcfranco changed the title feat(color-picker): make responsive feat(color-picker): enable responsive layout Nov 27, 2024
@jcfranco jcfranco mentioned this pull request Nov 27, 2024
Merged
@github-actions GitHub Actions
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Dec 13, 2024
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 18, 2024
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 18, 2024
@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Dec 20, 2024
@github-actions GitHub Actions
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Dec 30, 2024
@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Jan 3, 2025
@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jan 18, 2025
@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Jan 25, 2025
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 25, 2025
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 27, 2025
@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 27, 2025
@jcfranco jcfranco marked this pull request as ready for review January 27, 2025 20:38
@jcfranco
Copy link
Member Author

@ashetland Here's the latest screenshot build: https://www.chromatic.com/build?appId=6266d45509d7eb004aa254fb&number=7225.

aPreciado88
aPreciado88 approved these changes Jan 27, 2025
View reviewed changes
Copy link
Contributor

@aPreciado88 aPreciado88 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

ashetland
ashetland approved these changes Jan 28, 2025
View reviewed changes
Copy link
Contributor

@ashetland ashetland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Visuals looking good!

driskull
driskull approved these changes Jan 28, 2025
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! 👍 💯

packages/calcite-components/src/components/color-picker/color-picker.scss Outdated
inline-size: 198px;
}
inline-size: 200px;
min-inline-size: 200px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any future potential for a scale prop here for sizing?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you mean a custom CSS prop, it might be tricky since I also need static dimensions for canvas drawing.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I should DRY this up though.

packages/calcite-components/src/components/color-picker/color-picker.tsx Outdated
@@ -377,14 +294,19 @@ export class ColorPicker extends LitElement implements InteractiveComponent, Loa
this.listen("keyup", this.handleChannelKeyUpOrDown, { capture: true });
}

connectedCallback(): void {
if (this.hasUpdated) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this check be moved inside resizeCanvas?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think so. I might be able to remove the observeResize in firstUpdated this way too.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that might be better 👍

packages/calcite-components/src/components/color-picker/utils.ts Outdated
const previewWidth = hasAlpha ? STATIC_DIMENSIONS["l"].preview.size : activeStaticDimensions.preview.size;
const effectiveWidth = availableWidth - inlineSizeBorderTotalWidth;

return Math.max(effectiveWidth - activeStaticDimensions.gap * 3 - previewWidth, 0);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the 3 for? Just curious.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the spacing between elements around the slider.

Screenshot 2025-01-28 at 1 18 53 PM

I should avoid the magic number though. WDYT about this?

const inlineSpaceAroundElements = activeStaticDimensions.gap * 3;

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, yeah i was just wondering where the magic number came from :)

@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 28, 2025
@jcfranco jcfranco merged commit c37377b into dev Jan 29, 2025
14 checks passed
@jcfranco jcfranco deleted the jcfranco/9415-update-color-picker-to-be-responsive branch January 29, 2025 01:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@driskull driskull driskull approved these changes

@aPreciado88 aPreciado88 aPreciado88 approved these changes

@ashetland ashetland ashetland approved these changes

@benelan benelan Awaiting requested review from benelan

Assignees

@jcfranco jcfranco

Labels
enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2025-02-06 - 3.0.0 Feb Breaking Chang...
Development

Successfully merging this pull request may close these issues.
4 participants
@jcfranco @driskull @ashetland @aPreciado88