From 7781cc13d2789523e6926b6454d10b23acfe7c10 Mon Sep 17 00:00:00 2001
From: fulcanellee <45999900+fulcanellee@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:16:09 +0700
Subject: [PATCH] fix(select): fix chevron disabled color (#1481)

---
 .changeset/lovely-rockets-kiss.md                |  5 +++++
 packages/select/src/Component.test.tsx           |  9 +++++++++
 .../select-click-theme-disabled-props-snap.png   |  3 +++
 .../select-default-theme-disabled-props-snap.png |  3 +++
 .../select/src/component.screenshots.test.tsx    | 16 ++++++++++++++++
 .../select/src/components/arrow/Component.tsx    |  9 +++++++--
 .../select/src/components/arrow/index.module.css |  4 ++++
 .../src/components/base-select/Component.tsx     |  2 +-
 packages/select/src/typings.ts                   |  5 +++++
 packages/select/src/vars.css                     |  1 +
 10 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/lovely-rockets-kiss.md
 create mode 100644 packages/select/src/__image_snapshots__/select-click-theme-disabled-props-snap.png
 create mode 100644 packages/select/src/__image_snapshots__/select-default-theme-disabled-props-snap.png

diff --git a/.changeset/lovely-rockets-kiss.md b/.changeset/lovely-rockets-kiss.md
new file mode 100644
index 0000000000..d0902bb091
--- /dev/null
+++ 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
index c7be36a3f8..27865d3a73 100644
--- 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
new file mode 100644
index 0000000000..f7712208e4
--- /dev/null
+++ b/packages/select/src/__image_snapshots__/select-click-theme-disabled-props-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f8e3930afd8e570ec8c87611401c04dba7666b88ce0192136b4355efd4582266
+size 10042
diff --git a/packages/select/src/__image_snapshots__/select-default-theme-disabled-props-snap.png b/packages/select/src/__image_snapshots__/select-default-theme-disabled-props-snap.png
new file mode 100644
index 0000000000..f7712208e4
--- /dev/null
+++ b/packages/select/src/__image_snapshots__/select-default-theme-disabled-props-snap.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f8e3930afd8e570ec8c87611401c04dba7666b88ce0192136b4355efd4582266
+size 10042
diff --git a/packages/select/src/component.screenshots.test.tsx b/packages/select/src/component.screenshots.test.tsx
index 8fdb25e414..dd9979a42b 100644
--- 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
index 38a35b0202..059fac991f 100644
--- 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
index 9ac07b5f39..8c1caddb53 100644
--- 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
index 97f96094b1..0d2078b894 100644
--- 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
index 8b6496532e..7f7aadca02 100644
--- 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
index d0424814b2..564d905f22 100644
--- 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 */