diff --git a/packages/lib/src/select/Select.stories.tsx b/packages/lib/src/select/Select.stories.tsx index 781ebf58b..fed736eb5 100644 --- a/packages/lib/src/select/Select.stories.tsx +++ b/packages/lib/src/select/Select.stories.tsx @@ -304,6 +304,17 @@ const Select = () => ( <DxcSelect label="Multiple select" options={singleOptions} multiple defaultValue={["1", "2"]} /> </ExampleContainer> + <ExampleContainer> + <Title title="Multiple selection disabled" theme="light" level={4} /> + <DxcSelect + label="Multiple select" + searchable + options={singleOptions} + multiple + defaultValue={["1", "2"]} + disabled + /> + </ExampleContainer> <Title title="Sizes" theme="light" level={2} /> <ExampleContainer> <Title title="Small size" theme="light" level={4} /> diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 6c75eb4c2..65a2ed437 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -88,7 +88,7 @@ const SelectionIndicator = styled.div<{ disabled: SelectPropsType["disabled"] }> min-height: var(--height-s); border-radius: var(--border-radius-xs); border: var(--border-width-s) var(--border-style-default) - ${({ disabled }) => (disabled ? "var(--border-color-neutral-strong)" : "var(--border-color-neutral-light)")}; + ${({ disabled }) => (disabled ? "var(--border-color-neutral-lighter)" : "var(--border-color-neutral-strong)")}; `; const SelectionNumber = styled.span<{ disabled: SelectPropsType["disabled"] }>` @@ -96,7 +96,7 @@ const SelectionNumber = styled.span<{ disabled: SelectPropsType["disabled"] }>` place-items: center; background-color: ${({ disabled }) => (disabled ? "transparent" : "var(--color-bg-neutral-lighter)")}; border-right: var(--border-width-s) var(--border-style-default) - ${({ disabled }) => (disabled ? "var(--border-color-neutral-medium)" : "var(--border-color-neutral-light)")}; + ${({ disabled }) => (disabled ? "var(--border-color-neutral-lighter)" : "var(--border-color-neutral-strong)")}; color: ${({ disabled }) => (disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")}; font-size: var(--typography-label-s); font-weight: var(--typography-label-regular);