feat: add ColorPicker component

package.json

@@ -131,6 +131,7 @@
     "@gravity-ui/i18n": "^1.8.0",
     "@gravity-ui/icons": "^2.16.0",
     "@hello-pangea/dnd": "^18.0.1",
+    "@uiw/react-color": "^2.9.2",
     "@tanstack/react-virtual": "^3.13.12",
     "blueimp-md5": "^2.19.0",
     "lodash": "^4.17.21",

src/components/Alert/types.ts

@@ -64,7 +64,6 @@ export interface AlertProps extends QAProps, Partial<AlertContextType> {
      * Center all content in vertical direction,
      * useful if for some reason you actions takes more space then text
      * or needed icon to be on the middle of the card
-     *
      * @default - 'baseline'
      */
     align?: 'center' | 'baseline';

src/components/NumberInput/NumberInput.tsx

@@ -46,26 +46,32 @@ export interface NumberInputProps
     /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */
     note?: React.ReactNode;
 
-    /** Hides increment/decrement buttons at the end of control
+    /**
+      Hides increment/decrement buttons at the end of control
      */
     hiddenControls?: boolean;
-    /** min allowed value. It is used for clamping entered value to allowed range
+    /**
+     * min allowed value. It is used for clamping entered value to allowed range
      * @default Number.MAX_SAFE_INTEGER
      */
     min?: number;
-    /** max allowed value. It is used for clamping entered value to allowed range
+    /**
+     * max allowed value. It is used for clamping entered value to allowed range
      * @default Number.MIN_SAFE_INTEGER
      */
     max?: number;
-    /** Delta for incrementing/decrementing entered value with arrow keyboard buttons or component controls
+    /**
+     * Delta for incrementing/decrementing entered value with arrow keyboard buttons or component controls
      * @default 1
      */
     step?: number;
-    /** Step multiplier when shift button is pressed
+    /**
+     * Step multiplier when shift button is pressed
      * @default 10
      */
     shiftMultiplier?: number;
-    /** Enables ability to enter decimal numbers
+    /**
+     * Enables ability to enter decimal numbers
      * @default false
      */
     allowDecimal?: boolean;

src/components/Palette/Palette.tsx

@@ -26,7 +26,6 @@ export type PaletteOption = Pick<ButtonProps, 'disabled' | 'title'> & {
      * Content inside the option (emoji/image/GIF/symbol etc).
      *
      * Uses `value` as default, if `value` is a number, then it is treated as a unicode symbol (emoji for example).
-     *
      * @default props.value
      */
     content?: React.ReactNode;
@@ -39,7 +38,6 @@ export interface PaletteProps
         QAProps {
     /**
      * Allows selecting multiple options.
-     *
      * @default true
      */
     multiple?: boolean;
@@ -57,7 +55,6 @@ export interface PaletteProps
     options?: PaletteOption[];
     /**
      * How many options are there per row.
-     *
      * @default 6
      */
     columns?: number;

src/components/Select/hooks-public/useSelectOptions/index.ts

@@ -22,10 +22,8 @@ function isFlattenOptions(options: UseSelectOptionsProps['options']): options is
 
 /**
  * Helps to manage options data before passing it into `Select` component.
- *
  * @param {SelectOptions} options
  * @returns preprared options for `Select` component.
- *
  * @example
  *
  * import {Select, getSelectFilteredOptions, useSelectOptions} from '@gravity-ui/uikit';

src/components/Select/types.ts

@@ -164,8 +164,10 @@ export type SelectOption<T = any> = QAProps &
     };
 
 export type SelectOptionGroup<T = any> = {
-    /** Label is a string which displayed above the options group.
-     * If label is empty string, group item height will be 0 and only border will be displayed */
+    /**
+     * Label is a string which displayed above the options group.
+     * If label is empty string, group item height will be 0 and only border will be displayed
+     */
     label: string;
     data?: T;
     options?: SelectOption<T>[];

src/components/controls/types.ts

@@ -31,7 +31,8 @@ export type BaseInputControlProps<T = Element> = DOMProps &
         defaultValue?: string;
         /** Indicates that the user cannot interact with the control */
         disabled?: boolean;
-        /** Shows error state and optional message if property identified as a string
+        /**
+         * Shows error state and optional message if property identified as a string
          * @deprecated Prop `error` has a lower priority than `errorMessage`. Use `errorMessage` instead
          */
         error?: string | boolean;

src/components/lab/ColorPicker/ColorPicker.scss

@@ -0,0 +1,207 @@
+@use '../../variables';
+/* stylelint-disable declaration-no-important */
+
+$block: '.#{variables.$ns}color-picker';
+
+#{$block} {
+    &__text {
+        padding: 0 var(--g-spacing-1);
+    }
+
+    &__input {
+        width: 50px;
+    }
+
+    &__color-display {
+        display: inline-block;
+        position: relative;
+    }
+
+    &__color-swatch {
+        box-sizing: border-box;
+
+        /* Color swatch specific styles */
+        min-width: var(--_--height);
+        height: var(--_--height);
+        border-radius: var(--g-border-radius-s);
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        border: none;
+
+        /* Checkerboard pattern */
+        background: conic-gradient(#ccc 25%, #fff 25% 50%, #ccc 50% 75%, #fff 75%);
+        background-size: 8px 8px;
+
+        &_size {
+            &_xs {
+                --_--height: 16px;
+                --_--border-radius: var(--g-border-radius-xs);
+            }
+
+            &_s {
+                --_--height: 20px;
+                --_--border-radius: var(--g-border-radius-s);
+            }
+
+            &_m {
+                --_--height: 24px;
+                --_--border-radius: var(--g-border-radius-m);
+            }
+
+            &_l {
+                --_--height: 28px;
+                --_--border-radius: var(--g-border-radius-l);
+            }
+
+            &_xl {
+                --_--height: 36px;
+                --_--border-radius: var(--g-border-radius-xl);
+            }
+        }
+        /* Color overlay using ::after pseudo-element */
+        &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-color: inherit;
+            pointer-events: none;
+        }
+
+        /* Focus and hover states */
+        &:hover {
+            border-color: var(--g-color-line-hover);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: 1px;
+        }
+
+        &:active {
+            transform: scale(0.95);
+        }
+    }
+
+    &__handlers-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    &__inputs {
+        display: flex;
+        gap: 8px;
+    }
+
+    &__picker-handlers {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__picker-wrapper {
+        --_--base-picker-wrapper-width: 100px;
+        --__--picker-wrapper-padding: 2px var(--g-spacing-1);
+        padding: var(--__--picker-wrapper-padding);
+        width: var(--_--base-picker-wrapper-width);
+
+        &_alpha {
+            width: calc(--_--base-picker-wrapper-width + 10px);
+        }
+
+        &_size {
+            &_s {
+                --_--base-picker-wrapper-width: 110px;
+            }
+
+            &_m {
+                --_--base-picker-wrapper-width: 120px;
+            }
+
+            &_l {
+                --__--picker-wrapper-padding: 0px var(--g-spacing-1);
+                --_--base-picker-wrapper-width: 130px;
+            }
+
+            &_xl {
+                --__--picker-wrapper-padding: 0px var(--g-spacing-1);
+                --_--base-picker-wrapper-width: 140px;
+            }
+        }
+
+        &_compact {
+            --_--base-picker-wrapper-width: fit-content;
+            --__--picker-wrapper-padding: var(--g-spacing-1);
+        }
+    }
+
+    &__hex-input {
+        width: 100px;
+    }
+
+    &__popup {
+        padding: 4px;
+
+        .w-color-editable-input {
+            margin-inline-start: 0 !important;
+        }
+    }
+
+    &__hex-input {
+        width: 150px;
+    }
+
+    &__saturation {
+        width: 100% !important;
+        cursor: default !important;
+
+        &:focus {
+            outline: none !important;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus) !important;
+            outline-offset: 2px !important;
+        }
+    }
+
+    &__slider {
+        height: 8px !important;
+
+        // Hide outline on internal Interactive element
+        .w-color-interactive {
+            &:focus {
+                outline: none !important;
+            }
+        }
+
+        // Apply outline to parent slider when internal element has keyboard focus
+        &:has(.w-color-interactive:focus-visible) {
+            outline: 2px solid var(--g-color-line-focus) !important;
+            outline-offset: 2px !important;
+        }
+    }
+
+    &__pointer {
+        .w-color-alpha-fill {
+            width: 16px !important;
+            height: 16px !important;
+            inset-block-start: 8px !important;
+        }
+    }
+
+    &__color-pointer {
+        pointer-events: none;
+        border: 4px solid #fff;
+        border-radius: 50%;
+        font-size: 0;
+        line-height: 0;
+        padding: 0;
+        width: 16px;
+        height: 16px;
+        background-color: transparent;
+        position: absolute;
+        box-shadow: 0 1px 5px 0 var(--g-color-sfx-shadow);
+    }
+}