feat(color-picker): add standard input field props, e.g. disabled, etc…

Also `required`, `invalid`, and `placeholder`.
These will help to use this component more like a
standard input field in a form.

Author: Kiarokh

etc/lime-elements.api.md

@@ -322,10 +322,13 @@ export namespace Components {
         "language": Languages;
     }
     export interface LimelColorPicker {
+        "disabled": boolean;
         "helperText": string;
+        "invalid": boolean;
         "label": string;
         "palette"?: Array<string | CustomColorSwatch>;
         "paletteColumnCount"?: number;
+        "placeholder": string;
         "readonly": boolean;
         "required": boolean;
         "tooltipLabel": string;
@@ -335,8 +338,10 @@ export namespace Components {
     export interface LimelColorPickerPalette {
         "columnCount"?: number;
         "helperText": string;
+        "invalid": boolean;
         "label": string;
         "palette"?: CustomPalette;
+        "placeholder": string;
         "required": boolean;
         "value": string;
     }
@@ -1471,11 +1476,14 @@ export namespace JSX {
         "onOpen"?: (event: LimelCollapsibleSectionCustomEvent<void>) => void;
     }
     export interface LimelColorPicker {
+        "disabled"?: boolean;
         "helperText"?: string;
+        "invalid"?: boolean;
         "label"?: string;
         "onChange"?: (event: LimelColorPickerCustomEvent<string>) => void;
         "palette"?: Array<string | CustomColorSwatch>;
         "paletteColumnCount"?: number;
+        "placeholder"?: string;
         "readonly"?: boolean;
         "required"?: boolean;
         "tooltipLabel"?: string;
@@ -1485,9 +1493,11 @@ export namespace JSX {
     export interface LimelColorPickerPalette {
         "columnCount"?: number;
         "helperText"?: string;
+        "invalid"?: boolean;
         "label"?: string;
         "onChange"?: (event: LimelColorPickerPaletteCustomEvent<string>) => void;
         "palette"?: CustomPalette;
+        "placeholder"?: string;
         "required"?: boolean;
         "value"?: string;
     }

src/components/color-picker/color-picker-palette.tsx

@@ -30,12 +30,26 @@ export class Palette implements FormComponent {
     @Prop({ reflect: true })
     public helperText: string;
 
+    /**
+     * The placeholder text shown inside the input field,
+     * when the field is focused and empty.
+     */
+    @Prop({ reflect: true })
+    public placeholder: string;
+
     /**
      * Set to `true` if a value is required
      */
     @Prop({ reflect: true })
     public required: boolean;
 
+    /**
+     * Set to `true` to indicate that the current value of the input field is
+     * invalid.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
     /**
      * Defines the number of columns in the color swatch grid.
      * If not provided, it will default to the number of colors in the palette.
@@ -74,6 +88,8 @@ export class Palette implements FormComponent {
                     value={this.value}
                     onChange={this.handleChange}
                     required={this.required}
+                    invalid={this.invalid}
+                    placeholder={this.placeholder}
                 />
                 <div class="chosen-color-preview" style={background} />
             </div>,

src/components/color-picker/color-picker.scss

@@ -57,7 +57,10 @@ button[slot='trigger'] {
                 )
             );
     }
+}
 
+:host([readonly]:not([readonly='false'])),
+:host([disabled]:not([disabled='false'])) {
     button[slot='trigger'] {
         border: 1px solid rgba(var(--contrast-700), 0.65);
     }

src/components/color-picker/color-picker.tsx

@@ -62,10 +62,35 @@ export class ColorPicker implements FormComponent {
     public required: boolean;
 
     /**
-     * Set to `true` if a value is readonly. This makes the component un-interactive.
+     * Set to `true` to disable the field.
+     * Use `disabled` to indicate that the field can normally be interacted
+     * with, but is currently disabled. This tells the user that if certain
+     * requirements are met, the field may become enabled again.
      */
     @Prop({ reflect: true })
-    public readonly: boolean;
+    public disabled = false;
+
+    /**
+     * Set to `true` to make the field read-only.
+     * Use `readonly` when the field is only there to present the data it holds,
+     * and will not become possible for the current user to edit.
+     */
+    @Prop({ reflect: true })
+    public readonly = false;
+
+    /**
+     * Set to `true` to indicate that the current value of the input field is
+     * invalid.
+     */
+    @Prop({ reflect: true })
+    public invalid = false;
+
+    /**
+     * The placeholder text shown inside the input field,
+     * when the field is focused and empty.
+     */
+    @Prop({ reflect: true })
+    public placeholder: string;
 
     /**
      * An array of either color value strings, or objects with a `name` and a `value`,
@@ -115,6 +140,9 @@ export class ColorPicker implements FormComponent {
                     onChange={this.handleChange}
                     required={this.required}
                     readonly={this.readonly}
+                    disabled={this.disabled}
+                    invalid={this.invalid}
+                    placeholder={this.placeholder}
                 />
             </Host>
         );
@@ -147,6 +175,8 @@ export class ColorPicker implements FormComponent {
                     value={this.value}
                     label={this.label}
                     helperText={this.helperText}
+                    placeholder={this.placeholder}
+                    invalid={this.invalid}
                     onChange={this.handleChange}
                     required={this.required}
                     palette={this.palette as any}
@@ -166,7 +196,7 @@ export class ColorPicker implements FormComponent {
                 role="button"
                 onClick={this.openPopover}
                 id="tooltip-button"
-                disabled={this.readonly}
+                disabled={this.readonly || this.disabled}
             />
         );
     };

src/components/color-picker/examples/color-picker-readonly.tsx

@@ -1,22 +1,105 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, Host, State } from '@stencil/core';
 /**
- * Using the component in `readonly` mode
- * It is possible to use the component to visualize a color of your choice.
- * In this case, users cannot pick any colors, but they can view what you have picked.
+ * Composite example
  */
 
 @Component({
     tag: 'limel-example-color-picker-readonly',
     shadow: true,
 })
 export class ColorPickerReadonlyExample {
+    @State()
+    private value = 'rgba(var(--color-red-default), 0.4)';
+
+    @State()
+    private required = false;
+
+    @State()
+    private disabled = false;
+
+    @State()
+    private invalid = false;
+
+    @State()
+    private readonly = false;
+
+    @State()
+    private placeholder = 'Any valid CSS color format is accepted';
+
     public render() {
         return (
-            <limel-color-picker
-                label="Look at this beautiful color!"
-                readonly={true}
-                value="rgba(var(--color-red-default), 0.4)"
-            />
+            <Host>
+                <limel-color-picker
+                    label="Select a beautiful color"
+                    value={this.value}
+                    placeholder={this.placeholder}
+                    readonly={this.readonly}
+                    required={this.required}
+                    disabled={this.disabled}
+                    invalid={this.invalid}
+                    onChange={this.onChange}
+                />
+                <limel-example-controls>
+                    <limel-checkbox
+                        checked={this.required}
+                        label="Required"
+                        onChange={this.setRequired}
+                    />
+                    <limel-checkbox
+                        checked={this.disabled}
+                        label="Disabled"
+                        onChange={this.setDisabled}
+                    />
+                    <limel-checkbox
+                        checked={this.invalid}
+                        label="Invalid"
+                        onChange={this.setInvalid}
+                    />
+                    <limel-checkbox
+                        checked={this.readonly}
+                        label="Readonly"
+                        onChange={this.setReadonly}
+                    />
+                    <limel-input-field
+                        label="Placeholder"
+                        value={this.placeholder}
+                        onChange={this.setPlaceholder}
+                        style={{
+                            gridColumn: '1/-1',
+                            marginTop: '1rem',
+                        }}
+                    />
+                </limel-example-controls>
+            </Host>
         );
     }
+
+    private onChange = (event: CustomEvent<string>) => {
+        this.value = event.detail;
+    };
+
+    private setRequired = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.required = event.detail;
+    };
+
+    private setDisabled = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.disabled = event.detail;
+    };
+
+    private setInvalid = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.invalid = event.detail;
+    };
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private setPlaceholder = (event: CustomEvent<string>) => {
+        event.stopPropagation();
+        this.placeholder = event.detail;
+    };
 }