fix(select): fix chevron disabled color (#1481)

core-ds · Dec 13, 2024 · 7781cc1 · 7781cc1
1 parent 7c33f98
commit 7781cc1
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 3 deletions.
diff --git a/.changeset/lovely-rockets-kiss.md b/.changeset/lovely-rockets-kiss.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-select': patch
+---
+
+Исправлен цвет шеврона для заблокированного состояния
diff --git a/packages/select/src/Component.test.tsx b/packages/select/src/Component.test.tsx
@@ -12,6 +12,7 @@ import {
     OptionsListProps,
     OptionProps,
     useSelectWithApply,
+    Arrow,
 } from './shared';
 import { SelectDesktop as Select } from './desktop';
 import { SelectMobile, SelectModalMobile } from './mobile';
@@ -1025,4 +1026,12 @@ describe('Select', () => {
             expect(container.querySelectorAll('select option').length).toBe(options.length);
         });
     });
+
+    describe('Chevron tests', () => {
+        it('should set `disabled` className', () => {
+            const { container } = render(<Arrow disabled={true} />);
+
+            expect(container.firstElementChild).toHaveClass('disabled');
+        });
+    });
 });
diff --git a/packages/select/src/__image_snapshots__/select-click-theme-disabled-props-snap.png b/packages/select/src/__image_snapshots__/select-click-theme-disabled-props-snap.png
diff --git a/...ges/select/src/__image_snapshots__/select-default-theme-disabled-props-snap.png b/...ges/select/src/__image_snapshots__/select-default-theme-disabled-props-snap.png
diff --git a/packages/select/src/component.screenshots.test.tsx b/packages/select/src/component.screenshots.test.tsx
@@ -118,6 +118,22 @@ describe('Select', () => {
                         size: { width: 300, height: 120 },
                     }),
                 ],
+                [
+                    `${theme} theme — disabled props`,
+                    createSpriteStorybookUrl({
+                        packageName: 'select',
+                        componentName: 'SelectDesktop',
+                        knobs: {
+                            options: [[]],
+                            block: true,
+                            placeholder: 'Выберите элемент',
+                            size: [48],
+                            label: ['Элемент'],
+                            disabled: [true, false],
+                        },
+                        size: { width: 300, height: 120 },
+                    }),
+                ],
             ],
             screenshotOpts: {
                 fullPage: true,

diff --git a/packages/select/src/components/arrow/Component.tsx b/packages/select/src/components/arrow/Component.tsx
@@ -7,6 +7,11 @@ import { ArrowProps } from '../../typings';
 
 import styles from './index.module.css';
 
-export const Arrow = ({ open, className }: ArrowProps) => (
-    <ChevronDownMIcon className={cn(styles.arrow, className, { [styles.open]: open })} />
+export const Arrow = ({ open, disabled, className }: ArrowProps) => (
+    <ChevronDownMIcon
+        className={cn(styles.arrow, className, {
+            [styles.open]: open,
+            [styles.disabled]: disabled,
+        })}
+    />
 );
diff --git a/packages/select/src/components/arrow/index.module.css b/packages/select/src/components/arrow/index.module.css
@@ -8,6 +8,10 @@
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
+
+    &.disabled {
+        color: var(--select-arrow-disabled-color);
+    }
 }
 
 .open {

diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -674,7 +674,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                     placeholder={placeholder}
                     label={label && <span {...getLabelProps()}>{label}</span>}
                     labelView={labelView}
-                    Arrow={Arrow && <Arrow open={open} />}
+                    Arrow={Arrow && <Arrow open={open} disabled={disabled} />}
                     error={error}
                     hint={hint}
                     valueRenderer={valueRenderer}

diff --git a/packages/select/src/typings.ts b/packages/select/src/typings.ts
@@ -497,6 +497,11 @@ export type ArrowProps = {
      * Флаг, открыто ли меню
      */
     open?: boolean;
+
+    /**
+     * Флаг блокировки select'а
+     */
+    disabled?: boolean;
 };
 
 export type OptionsListProps = {

diff --git a/packages/select/src/vars.css b/packages/select/src/vars.css
@@ -1,6 +1,7 @@
 :root {
     --select-error-color: var(--color-light-text-negative);
     --select-arrow-color: var(--color-light-neutral-translucent-700);
+    --select-arrow-disabled-color: var(--color-light-neutral-translucent-500);
     --select-arrow-hover-opacity: 0.7;
 
     /* options list */