Feature: Input color#1156
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 🤖 🙂 |
|
I have use part of this here: which can be simplied a bit with this component. I think we possible may want to use |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new uui-input-color component that extends the existing uui-input component to provide color input functionality. The component combines a text input field with a color swatch that triggers a native color picker when clicked.
- Adds a new
uui-input-colorcomponent that extendsuui-inputfor color value input - Refactors the password input component to use more generic naming conventions
- Integrates the new component into the main UUI library package
Reviewed Changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/uui/lib/index.ts | Exports the new uui-input-color component |
| packages/uui-input-password/lib/uui-input-password.element.ts | Renames passwordType to inputType for consistency |
| packages/uui-input-color/* | Complete implementation of the new color input component including TypeScript config, package.json, tests, stories, and main element |
| type="color" | ||
| id="color" | ||
| aria-hidden="true" | ||
| value=${this.value} |
There was a problem hiding this comment.
The color input value should use _valueHex instead of this.value to ensure proper hex format. The native color input expects a hex value with the # prefix.
| value=${this.value} | |
| value=${this._valueHex} |
| connectedCallback(): void { | ||
| super.connectedCallback(); | ||
|
|
||
| demandCustomElement(this, 'uui-color-swatch'); |
There was a problem hiding this comment.
The component demands 'uui-color-swatch' but the template uses 'uui-color-swatch'. However, the import statement references 'UUIColorPickerElement' which suggests a mismatch in dependencies.
| "exclude": ["./**/*.test.ts", "./**/*.story.ts"], | ||
| "references": [ | ||
| { | ||
| "path": "../uui-base" |
There was a problem hiding this comment.
Missing dependency reference to uui-input package. The component extends UUIInputElement but the tsconfig.json doesn't include a reference to the uui-input package.
| "path": "../uui-base" | |
| "path": "../uui-base" | |
| }, | |
| { | |
| "path": "../uui-input" |
| "custom-elements.json" | ||
| ], | ||
| "dependencies": { | ||
| "@umbraco-ui/uui-base": "1.14.1" |
There was a problem hiding this comment.
Missing required dependencies. The component imports from @umbraco-ui/uui-input and @umbraco-ui/uui-color-picker but these are not listed in dependencies.
|
@iOvergaard @nielslyngsoe do you know why it is possible to set 
Is it possible to omit / remove irrelevant inherited properties? |
|
It seems I manually needed to add dependencies used to package.json , which and re-generate 
Alternatively we can possible use |
|
|
@bjarnef Looks good, but wouldn't you like this(uui-input-color) ideally use the Color Picker component, aka. the custom experience of UI Library and not the native color picker? |
|
@nielslyngsoe yes I guess. Or an property to configure if we want to allow native browser color picker to be used. However browsers doesn't allow configuration of e.g. transparency, etc. |
|
@bjarnef, my take on it would be that we have the color input component, so we like to use it now that we have it. primarily because it will secure a consistent experience with colors across the system. |
Description
Currently the following is used in Umbraco backoffice:
Inspired from the following components:
https://5f27fec87f827f00226fd51a-whnvchgprq.chromatic.com/?path=/story/forms-colorinput--base
https://storybook.forem.com/?path=/story/components-form-elements-color-picker--default
I think it would be great to wrap this in a custom component extending
uui-inputcomponent.Something like this https://github.com/web-padawan/vanilla-colorful may be an alternative to browser default color picker, which the second example above seems to use. It also doesn't have dependency the Colord library, which seems to be unmaintained for a while: #938
It may also be useful to consider other input fields e.g.
I noticed in
uui-input-password(which extendsuui-input) that from story book it is still possible to set input type, e.g.color.Is there a way to omit inherited properties, which may not be relevant to extended components, not allow developers to set these properties and get this in intellisense?
For this component
uui-input-colorI think it would be great if it can extenduui-input, but not sure if we want to use input typecoloras it may be useful to support named color, e.g.red,green,blueand thereforetextinput type may be better. It is not crucial to support named colors and hex in probably just fine. In any case I think we prefer text input and we can use the swatch as preview.Types of changes
Motivation and context
Make a dedicated input color component, which allow to set
disabledandreadonlystate as well.A bit alternative to the
uui-color-pickercomponent using vanilla color picker, but also allow to display the color value in the input unlike<uui-input type"color" />It will simplify the current markup in backoffice a bit and ensure (package) developers can re-use same feature. Not necessary the
multiple-color-picker-item-inputelement used in backoffice, but just the single swatch + input component.How to test?
Screenshots (if appropriate)
Checklist