From cc2d524e9495b4097101c25713bdf1681190ebd5 Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Fri, 3 Apr 2026 20:04:17 +0200 Subject: [PATCH 1/5] fix(design-system): all input based components have wrong styles in disabled state [AR-55907] --- .../components/ds-autocomplete/ds-autocomplete.stories.tsx | 4 ++++ .../src/components/ds-date-input/ds-date-input.stories.tsx | 6 ++++++ .../src/components/ds-select/ds-select.stories.tsx | 4 ++++ packages/design-system/src/styles/shared/_input.scss | 3 --- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.stories.tsx b/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.stories.tsx index be5f9d938..2f95572a8 100644 --- a/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.stories.tsx +++ b/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.stories.tsx @@ -36,6 +36,10 @@ const meta: Meta = { control: 'object', description: 'Locale strings for the autocomplete component', }, + disabled: { + control: 'boolean', + description: 'Whether the autocomplete is disabled', + }, }, args: { onValueChange: fn(), diff --git a/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx b/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx index 17bb94a65..abbb8cee9 100644 --- a/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx +++ b/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx @@ -27,6 +27,12 @@ const meta: Meta = { }, }, tags: ['deprecated'], + argTypes: { + disabled: { + control: 'boolean', + description: 'Whether the date input is disabled', + }, + }, beforeEach: () => { // We use mockdate here and not vi.useFakeTimers() because the latter is not compatible with Storybook. // See https://github.com/storybookjs/storybook/issues/31400#issuecomment-2943382690 for more details. diff --git a/packages/design-system/src/components/ds-select/ds-select.stories.tsx b/packages/design-system/src/components/ds-select/ds-select.stories.tsx index 57a615dd1..9ac0c9cf7 100644 --- a/packages/design-system/src/components/ds-select/ds-select.stories.tsx +++ b/packages/design-system/src/components/ds-select/ds-select.stories.tsx @@ -46,6 +46,10 @@ const meta: Meta = { control: 'boolean', description: 'Whether the selection can be cleared', }, + disabled: { + control: 'boolean', + description: 'Whether the select is disabled', + }, }, }; diff --git a/packages/design-system/src/styles/shared/_input.scss b/packages/design-system/src/styles/shared/_input.scss index 74287391c..af6c3a315 100644 --- a/packages/design-system/src/styles/shared/_input.scss +++ b/packages/design-system/src/styles/shared/_input.scss @@ -57,7 +57,6 @@ $textarea-height-default: 120px; &:has(.input:disabled) { color: var(--color-background-deselected); - background: var(--color-background-secondary); border-color: var(--color-border-disabled); cursor: not-allowed; @@ -82,7 +81,6 @@ $textarea-height-default: 120px; &:disabled { color: var(--color-background-deselected); - background: var(--color-background-secondary); border-color: var(--color-border-disabled); cursor: not-allowed; } @@ -129,7 +127,6 @@ $textarea-height-default: 120px; &[data-disabled] { color: var(--color-background-deselected); - background: var(--color-background-secondary); border-color: var(--color-border-disabled); &, From 8431a5ce9edddc633426be9162900ca7ee32d369 Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Fri, 3 Apr 2026 20:10:30 +0200 Subject: [PATCH 2/5] add changeset --- .changeset/cool-results-show.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cool-results-show.md diff --git a/.changeset/cool-results-show.md b/.changeset/cool-results-show.md new file mode 100644 index 000000000..3039b432b --- /dev/null +++ b/.changeset/cool-results-show.md @@ -0,0 +1,5 @@ +--- +'@drivenets/design-system': patch +--- + +fix background of input based components in disabled state From 7fae404d77a9e842f2e508db7ffbd852738f31f7 Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Fri, 3 Apr 2026 20:31:45 +0200 Subject: [PATCH 3/5] fix autocomplete, revert date input --- .../components/ds-autocomplete/ds-autocomplete.module.scss | 1 - .../src/components/ds-date-input/ds-date-input.stories.tsx | 6 ------ 2 files changed, 7 deletions(-) diff --git a/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.module.scss b/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.module.scss index 55b332181..bd3401d74 100644 --- a/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.module.scss +++ b/packages/design-system/src/components/ds-autocomplete/ds-autocomplete.module.scss @@ -200,7 +200,6 @@ $autocomplete-opacity-visible: 1; .disabled { .control { color: var(--color-background-deselected); - background: var(--color-background-secondary); border-color: var(--color-border-disabled); cursor: not-allowed; diff --git a/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx b/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx index abbb8cee9..17bb94a65 100644 --- a/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx +++ b/packages/design-system/src/components/ds-date-input/ds-date-input.stories.tsx @@ -27,12 +27,6 @@ const meta: Meta = { }, }, tags: ['deprecated'], - argTypes: { - disabled: { - control: 'boolean', - description: 'Whether the date input is disabled', - }, - }, beforeEach: () => { // We use mockdate here and not vi.useFakeTimers() because the latter is not compatible with Storybook. // See https://github.com/storybookjs/storybook/issues/31400#issuecomment-2943382690 for more details. From 005d38cbef0ca640bfee7517ad43d7163bd2d622 Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Fri, 3 Apr 2026 21:13:15 +0200 Subject: [PATCH 4/5] Fix selected value color in disabled state --- .../src/components/ds-select/ds-select.module.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/components/ds-select/ds-select.module.scss b/packages/design-system/src/components/ds-select/ds-select.module.scss index 0f0e09488..b4fdbfa4e 100644 --- a/packages/design-system/src/components/ds-select/ds-select.module.scss +++ b/packages/design-system/src/components/ds-select/ds-select.module.scss @@ -53,8 +53,11 @@ @include typography.ellipsis; grid-column: 1; grid-row: 1; - color: var(--color-font-secondary); text-align: start; + + .trigger:not([data-disabled]) & { + color: var(--color-font-secondary); + } } .multiSelectItemsContainer { From 0e82eddedc367fe5054a0b289f1fb1d7f4e796c0 Mon Sep 17 00:00:00 2001 From: Ihor Romanchuk Date: Fri, 3 Apr 2026 21:13:49 +0200 Subject: [PATCH 5/5] update changeset --- .changeset/cool-results-show.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/cool-results-show.md b/.changeset/cool-results-show.md index 3039b432b..912a5d675 100644 --- a/.changeset/cool-results-show.md +++ b/.changeset/cool-results-show.md @@ -2,4 +2,4 @@ '@drivenets/design-system': patch --- -fix background of input based components in disabled state +fix styles of input based components in disabled state