From 2cbd5a5567448fd8affab7f7ce672c1454db98e7 Mon Sep 17 00:00:00 2001 From: Mikhail Lukin Date: Tue, 3 Dec 2024 13:29:55 +0700 Subject: [PATCH] fix(select): fix chevron disabled color --- .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(); + + 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) => ( - +export const Arrow = ({ open, disabled, className }: ArrowProps) => ( + ); 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( placeholder={placeholder} label={label && {label}} labelView={labelView} - Arrow={Arrow && } + Arrow={Arrow && } error={error} hint={hint} valueRenderer={valueRenderer} diff --git a/packages/select/src/typings.ts b/packages/select/src/typings.ts index 12b1766bb5..8d9e3dc82a 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 */