feat(uui-color-slider): adds hideValueLabel option
#1150
Conversation
There was a problem hiding this comment.
Pull Request Overview
Adds a hideValueLabel option to the UUI Color Slider so that the numeric label can be hidden when rendering the hue slider in the color picker.
- Introduces a new boolean property/attribute to toggle the label’s visibility
- Updates the component template to conditionally render the value label
- Adds a corresponding Storybook story and applies the attribute in the color picker
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/uui-color-slider/lib/uui-color-slider.story.ts | Adds a new HideValueLabel story with hideValueLabel: true |
| packages/uui-color-slider/lib/uui-color-slider.element.ts | Defines hideValueLabel property and wraps the numeric label in a conditional render |
| packages/uui-color-picker/lib/uui-color-picker.element.ts | Applies hide-value-label attribute on the hue slider in the color picker |
Comments suppressed due to low confidence (3)
packages/uui-color-slider/lib/uui-color-slider.story.ts:235
- [nitpick] Consider adding
HideValueLabel.storyName = 'Hide value label';and/or a short description so this story is clearly labeled in Storybook’s UI and docs.
export const HideValueLabel: Story = {
packages/uui-color-slider/lib/uui-color-slider.element.ts:302
- Add unit or interaction tests to verify that
hideValueLabeltruly hides the numeric label in the DOM and doesn’t introduce layout regressions.
${this.hideValueLabel ? null : Math.round(this.value)}`;
packages/uui-color-picker/lib/uui-color-picker.element.ts:449
- [nitpick] Align the indentation of
hide-value-labelwith the other attributes for consistent formatting.
hide-value-label
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1150.westeurope.azurestaticapps.net |
Co-authored-by: Copilot <[email protected]>
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1150.westeurope.azurestaticapps.net |
|
I think it would be nice if we had a simple tooltip component (besides popover) which could be re-used here, perhaps in slider/rangeslider and at TipTap configuration buttons perhaps? |
Description
Adds a
hide-value-labeloption to the UUI Color Slider component.Types of changes
Motivation and context
The reason for this is when used in the UUI Color Picker inline/popover component, the Hue slider has a numeric value beneath it, ranging from 0 to 360. This value holds little relevance to the UX or the specified colour value. By hiding the value label, the UI is also tightened up a little.
How to test?
Open the Color Picker component, notice that the numerical value below the Hue slider is not visible.