[UIK-3527][color-picker] fixed some color-picker issues

semcore/color-picker/CHANGELOG.md

@@ -2,12 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-
 ## [16.1.12] - 2025-11-10
 
 ### Fixed
 
 - Issue with `svg` in `ColorPicker.Trigger` and `ColorPicker.Item`.
+- `size` property didn't apply for the `PaletteManager.InputColor`.
+- Incorrect types for `PaletteManager`.
+- Validation issues in `PaletteManager.InputColor`.
 
 ## [16.1.11] - 2025-10-29
 

semcore/color-picker/__tests__/color-picker.axe-test.tsx

@@ -38,7 +38,7 @@ test.describe(`@color-picker ${TAG.ACCESSIBILITY}`, () => {
   });
 
   test('Input validation', async ({ page }) => {
-    await loadPage(page, 'stories/components/color-picker/docs/examples/input_validation.tsx', 'en');
+    await loadPage(page, 'stories/components/color-picker/tests/examples/input_validation.tsx', 'en');
 
     await page.locator('[data-ui-name="ColorPicker.Trigger"]').click();
     const input = page.locator('input[data-ui-name="PaletteManager.InputColor"]');

semcore/color-picker/__tests__/color-picker.browser-test.tsx

@@ -596,7 +596,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
     await locators.clearColor(page).click();
     await expect(locators.inputColor(page)).toBeFocused();
     await expect(locators.palette(page)).toBeEmpty();
-    await expect(locators.inputColor(page)).toHaveAttribute('aria-invalid', 'true');
+    await expect(locators.inputColor(page)).toHaveAttribute('aria-invalid', 'false');
     await expect(locators.inputColor(page)).toBeEmpty();
 
     await locators.inputColor(page).fill('999');

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

@@ -3,6 +3,7 @@ import { Box } from '@semcore/flex-box';
 import CheckM from '@semcore/icon/Check/m';
 import CloseM from '@semcore/icon/Close/m';
 import Input from '@semcore/input';
+import type { InputSize } from '@semcore/input';
 import React from 'react';
 
 import style from '../style/color-picker.shadow.css';
@@ -18,6 +19,7 @@ type InputColorAsProps = {
   focus?: boolean;
   Children: any;
   getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;
+  size?: InputSize;
 };
 
 function isValidHex(hex: string) {
@@ -69,6 +71,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
 
   handlerCancel = (event: React.MouseEvent) => {
     this.handlers.value('', event);
+    this.handlers.state('normal');
   };
 
   handlerChange = debounce((value: string) => {
@@ -91,7 +94,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
   };
 
   render() {
-    const { styles, state, value, onFocus, onBlur, focus, getI18nText } = this.asProps;
+    const { styles, state, value, onFocus, onBlur, focus, getI18nText, size } = this.asProps;
 
     const SPaletteManager = Box;
     const SInputValue = Root;
@@ -108,7 +111,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
         <SInputContainer>
           <span aria-hidden='true'>#</span>
           <SInput>
-            <Input ml={1} w={135} state={state} onKeyDown={this.handlekeyDown}>
+            <Input ml={1} w={135} state={state} size={size} onKeyDown={this.handlekeyDown}>
               <SInputValue
                 render={Input.Value}
                 placeholder='FFFFFF'

semcore/color-picker/src/index.d.ts

@@ -74,6 +74,10 @@ export type InputColorProps = InputProps & {
    * Fired with entered value when user clicks on the check icon or hits `Enter` or `Space`
    */
   onAdd?: (value: string, event: React.MouseEvent | React.KeyboardEvent) => void;
+  /**
+   * Handle changes of state
+   */
+  onStateChange?: (state: 'normal' | 'valid' | 'invalid') => void;
 };
 
 /** @deprecated */
@@ -110,7 +114,7 @@ export type ColorPickerProps = DropdownProps & {
 
 /** @deprecated */
 export interface IPaletteManagerProps extends PaletteManagerProps, UnknownProperties {}
-export type PaletteManagerProps = BoxProps & {
+export type PaletteManagerProps = {
   /**
    * Array of color items. Should be used with `onColorsChange` property together
    * @default []

stories/components/color-picker/docs/color-picker.stories.tsx

@@ -3,10 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { BasicExampleTest } from './__tests__/basic_example.test';
-import { InputValidationTest } from './__tests__/input_validation.test';
 import BasicExampleExample from './examples/basic_example';
 import CustomTriggerExample from './examples/custom_trigger';
-import InputValidationExample from './examples/input_validation';
 import PalettemanagerExample from './examples/palettemanager';
 import PredefinedPaletteExample from './examples/predefined_palette';
 import { playWrapper } from '../../../utils/playWrapper';
@@ -29,11 +27,6 @@ export const CustomTrigger: Story = {
   render: CustomTriggerExample,
 };
 
-export const InputValidation: Story = {
-  render: InputValidationExample,
-  play: playWrapper(InputValidationTest),
-};
-
 export const Palettemanager: Story = {
   render: PalettemanagerExample,
 };

stories/components/color-picker/tests/color-picker.stories.tsx

@@ -6,8 +6,11 @@ import BaseNoPaletteManagerExample from './examples/base-no-palette-manager';
 import ColorPickerPropsExample from './examples/color-picker-props';
 import ColorsAndPaletterManagerPropsExample from './examples/colors-and-palette-manager-colors-props';
 import InputColorAndItemsPropsExample from './examples/input-color-and-items-props';
+import InputValidationExample from './examples/input_validation';
 import LabelAndColorExpandedExample from './examples/label-and-color-expanded';
 import TriggersExample from './examples/triggers';
+import { playWrapper } from '../../../utils/playWrapper';
+import { InputValidationTest } from '../docs/__tests__/input_validation.test';
 
 const meta: Meta<typeof ColorPicker> = {
   title: 'Components/ColorPicker/Tests',
@@ -41,3 +44,8 @@ export const ColorPickerProps: Story = {
 export const ColorsAndPaletterManagerProps: Story = {
   render: ColorsAndPaletterManagerPropsExample,
 };
+
+export const InputValidation: Story = {
+  render: InputValidationExample,
+  play: playWrapper(InputValidationTest),
+};

stories/components/color-picker/tests/examples/colors-and-palette-manager-colors-props.tsx

@@ -24,8 +24,6 @@ const Demo = () => {
             ]}
           />
           <PaletteManager
-            w={200}
-            wMax={300}
             colors={customColors}
             defaultColors={['#00FF00', '#0000FF']}
             onColorsChange={(newColors, event) => {
@@ -59,8 +57,6 @@ const Demo = () => {
               ]}
             />
             <PaletteManager
-              w={500}
-              h={500}
               defaultColors={['#00FF00', '#0000FF']}
               onColorsChange={(newColors, event) => {
                 console.log('Updated palette:', newColors);

stories/components/color-picker/docs/examples/input_validation.tsx → stories/components/color-picker/tests/examples/input_validation.tsx

@@ -4,14 +4,16 @@ import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 const Demo = () => {
-  const [state, setState] = React.useState<'normal' | 'invalid'>('normal');
+  const [state, setState] = React.useState<'normal' | 'invalid' | 'valid'>('normal');
 
   const onChange = (value: any) => {
     if (value.toLowerCase() === 'ffffff') {
       setState('invalid');
+      return false;
     }
-
-    return false;
+  };
+  const handleChangeState = (state: 'normal' | 'invalid' | 'valid') => {
+    setState(state);
   };
 
   return (
@@ -25,7 +27,7 @@ const Demo = () => {
           <ColorPicker.Colors />
           <PaletteManager>
             <PaletteManager.Colors />
-            <PaletteManager.InputColor state={state} onChange={onChange} />
+            <PaletteManager.InputColor state={state} onChange={onChange} onStateChange={handleChangeState} />
           </PaletteManager>
         </ColorPicker.Popper>
       </ColorPicker>

website/docs/components/color-picker/color-picker-code.md

@@ -15,18 +15,6 @@ PaletteManager lets you add your own colors by typing in the hexadecimal code an
 
 :::
 
-## Input validation
-
-To prevent users from entering white as a color option, replace the default validation function in `PaletteManager.InputColor` with your own custom validation function using the `onChange` prop. Here is an example:
-
-::: sandbox
-
-<script lang="tsx">
-  export Demo from 'stories/components/color-picker/docs/examples/input_validation.tsx';
-</script>
-
-:::
-
 ## Custom trigger
 
 You have complete control over the appearance of ColorPicker, including the trigger.