Advanced color slider story #1076
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces an advanced story for the uui-color-slider component to demonstrate its capability for RGBA/HSLA/HSBA manipulation and updates the slider defaults to respect user-defined min and max values.
- Added an “Advanced” story that supports multiple slider types (hue, saturation, lightness, and opacity) and real-time color updates.
- Modified the uui-color-slider element to conditionally apply default max values based on the slider type.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/uui-color-slider/lib/uui-color-slider.story.ts | Introduces the advanced color slider story with dynamic slider behavior and live color preview. |
| packages/uui-color-slider/lib/uui-color-slider.element.ts | Updates default property handling to allow custom min/max values for different slider types. |
Comments suppressed due to low confidence (2)
packages/uui-color-slider/lib/uui-color-slider.story.ts:192
- For the opacity slider, the background color is generated without taking the current opacity value into account. Consider passing 'value.a * 100' (or a similar calculation) as the alpha parameter to getHexString to accurately reflect the slider's opacity.
.color=${slider.type === 'opacity' ? getHexString(value.h, value.s, value.l) : undefined}
packages/uui-color-slider/lib/uui-color-slider.story.ts:67
- [nitpick] The 'slider' object used in event handlers is currently typed as 'any'. Consider defining an interface for slider objects to improve type safety and maintainability.
const sliders = [
|
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 🤖 🙂 |
|
Description
I added a more advanced story for
uui-color-sliderto see how the sliders would work as RGBA/HSLA/HSBA and connect each other.I was inspired by these examples: https://everycolorpicker.com/pickers/slider-color-picker/
https://react.fluentui.dev/?path=/docs/components-colorpicker--docs#color-slider-channels
The logic is still missing a bit to update input value when slider change, and the other way around.
It also add the
saturationandlightnessoptions.While investigating I found that
uui-color-sliderdidn't respect min and max value, mainly the opacity slider which always expect a max or 100, even though I set max to 1.I re-used to
getHexString(), but perhaps we can move this and some other functions tocolorutils and may depend on Colord library or we can consider another #938We could probably also have some other functions here. e.g.
parseColorfrom a color string returning theh, s, l, avalues.I also think perhaps we should remove the output value below slider or an option to hide it? It can always be rendered below and in vertical slider is collide with the handle.
We can eventually consider some input field for this similar to color picker in Chrome depending on shown format.
Types of changes
Motivation and context
How to test?
Screenshots (if appropriate)
chrome_xBM04VTxjW.mp4
The saturation and lightness sliders would ideally use color similar the opacity slider, so it may not be necessary to set
--uui-slider-background-imagein story if set inuui-color-sliderwhen parsingcolorproperty.Checklist