Allow color gradient in color swatch #1074
Conversation
|
Hi there @bjarnef, thank you for this contribution! 👍 While we wait for the team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:
Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution. If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request. Thanks, from your friendly Umbraco GitHub bot 🤖 🙂 |
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for CSS gradients in color swatches by enhancing the story and component implementation.
- Introduces a new gradients array and updates the story to use an additional "color" attribute.
- Updates the swatch element’s style from "background-color" to "background" to properly render gradient values.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/uui-color-swatches/lib/uui-color-swatches.story.ts | Updated story to include both solid color and gradient swatches, adding a new "gradients" array and a "color" binding. |
| packages/uui-color-swatch/lib/uui-color-swatch.element.ts | Changed the style property from "background-color" to "background" for improved gradient support. |
Comments suppressed due to low confidence (2)
packages/uui-color-swatch/lib/uui-color-swatch.element.ts:132
- Verify that switching from 'background-color' to 'background' accommodates both solid colors and gradient values as intended, ensuring consistent rendering across different swatch types.
style="background: var(--uui-swatch-color, ${this.color ?? this.value})"
packages/uui-color-swatches/lib/uui-color-swatches.story.ts:22
- [nitpick] The gradient with label 'Disco Club' uses 'avocado' as its value, which might be confused with an existing solid color swatch. Consider using a more distinct value identifier for clarity.
{ label: 'Disco Club', value: 'avocado', color:
| const label = typeof swatch === 'string' ? swatch : swatch.label; | ||
| const value = typeof swatch === 'string' ? swatch : swatch.value; | ||
| const color = typeof swatch === 'string' ? swatch : swatch.color; |
There was a problem hiding this comment.
Consider ensuring that all swatch objects intended to display gradients explicitly include a 'color' property, as using a string fallback may lead to unexpected behavior when gradients are desired.
Copilot is powered by AI, so mistakes are possible. Review output carefully before use.
|
Description
This PR allow us to use CSS gradients (linear or radial) in color swatches, which we actually had a use-case for in the an Umbraco 13 project, but due a limitation in the approved color picker, we made a "hack" to solves this.
#1018
The color should be a valid CSS background (including linear/radial gradient), but the value could possible any string value with e.g.
gradientor something else from a hex color.Of course the core approved colors in CMS can still validate a hex color, but this change allow us to use gradient in a custom property editor.
Some CSS gradient examples:
https://uigradients.com/
https://cssgradient.io/
https://webgradients.com/
https://coolors.co/gradients
Types of changes
Motivation and context
It allow us to use CSS background colors as well and not only solid colors.
This could be useful in custom implementations in property editors, dashboards etc. and using specific frontend features like e.g. Tailwind CSS gradients:
https://tailscan.com/gradients
Furthermore some inspiration from Fluent UI library here:
https://react.fluentui.dev/?path=/docs/components-swatchpicker--docs&globals=storybook_fluentui-react-addon_theme:web-light#color-swatch-variants
How to test?
Screenshots (if appropriate)
Checklist