diff --git a/.storybook/image-snapshots/expected/components_forms_InputGroup_Input Group With Search Bar.png b/.storybook/image-snapshots/expected/components_forms_InputGroup_Input Group With Search Bar.png index 75e44f803..3ce0550c2 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_InputGroup_Input Group With Search Bar.png and b/.storybook/image-snapshots/expected/components_forms_InputGroup_Input Group With Search Bar.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_InputGroup_Nested Input Group.png b/.storybook/image-snapshots/expected/components_forms_InputGroup_Nested Input Group.png index 1fa79c60a..eaaa7d8f2 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_InputGroup_Nested Input Group.png and b/.storybook/image-snapshots/expected/components_forms_InputGroup_Nested Input Group.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_InputGroup_Select Input Group.png b/.storybook/image-snapshots/expected/components_forms_InputGroup_Select Input Group.png index 3acf3d6a3..6cc1bebe6 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_InputGroup_Select Input Group.png and b/.storybook/image-snapshots/expected/components_forms_InputGroup_Select Input Group.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Input_Disabled.png b/.storybook/image-snapshots/expected/components_forms_Input_Disabled.png index 3af815d05..ca09f3bf2 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Input_Disabled.png and b/.storybook/image-snapshots/expected/components_forms_Input_Disabled.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Disabled.png b/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Disabled.png index 3af815d05..cd17a57ea 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Disabled.png and b/.storybook/image-snapshots/expected/components_forms_MultiValueInput_Disabled.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_SearchBar_Disabled.png b/.storybook/image-snapshots/expected/components_forms_SearchBar_Disabled.png index c9ccc7368..fb43f2972 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_SearchBar_Disabled.png and b/.storybook/image-snapshots/expected/components_forms_SearchBar_Disabled.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled.png b/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled.png index b3a9f56de..034613702 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled.png and b/.storybook/image-snapshots/expected/components_forms_Select_Select_Disabled.png differ diff --git a/.storybook/image-snapshots/expected/components_forms_TextArea_Disabled.png b/.storybook/image-snapshots/expected/components_forms_TextArea_Disabled.png index c0e023987..b981ba678 100644 Binary files a/.storybook/image-snapshots/expected/components_forms_TextArea_Disabled.png and b/.storybook/image-snapshots/expected/components_forms_TextArea_Disabled.png differ diff --git a/src/components/_internal/BaseSingleDatePicker/styles.ts b/src/components/_internal/BaseSingleDatePicker/styles.ts index bd735351a..141dc813c 100644 --- a/src/components/_internal/BaseSingleDatePicker/styles.ts +++ b/src/components/_internal/BaseSingleDatePicker/styles.ts @@ -20,6 +20,7 @@ export const datePickerStyles = css` .DateRangePicker-input:disabled { box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-disabled); background: var(--sscds-color-background-input-disabled); + color: var(--sscds-color-text-disabled); } .DateRangePicker-input:hover:not(:disabled, :focus) { box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover); @@ -36,6 +37,13 @@ export const datePickerStyles = css` .DateRangePicker-input:-ms-input-placeholder { color: ${getFormStyle('placeholderColor')}; } + .DateRangePicker-input:disabled::placeholder, + .DateRangePicker-input:disabled::-webkit-input-placeholder { + color: var(--sscds-color-text-disabled); + } + .DateRangePicker-input:disabled:-ms-input-placeholder { + color: var(--sscds-color-text-disabled); + } .DateRangePicker-calendar { font-size: var(--sscds-font-size-body-md); line-height: var(--sscds-font-lineheight-body-md); diff --git a/src/components/forms/Input/Input.stories.tsx b/src/components/forms/Input/Input.stories.tsx index 98d302b20..513724b30 100644 --- a/src/components/forms/Input/Input.stories.tsx +++ b/src/components/forms/Input/Input.stories.tsx @@ -56,5 +56,10 @@ export const Invalid: StoryFn = () => ( ); export const Disabled: StoryFn = () => ( - + ); diff --git a/src/components/forms/Input/Input.tsx b/src/components/forms/Input/Input.tsx index e9b5b2ffd..4d3c429c0 100644 --- a/src/components/forms/Input/Input.tsx +++ b/src/components/forms/Input/Input.tsx @@ -53,9 +53,18 @@ const Input = styled.input.attrs( } &:disabled { + color: var(--sscds-color-text-disabled); background: ${getFormStyle('disabledBgColor')}; border-color: ${getFormStyle('disabledBorderColor')}; cursor: not-allowed; + + ::placeholder, + ::-webkit-input-placeholder { + color: var(--sscds-color-text-disabled); + } + :-ms-input-placeholder { + color: var(--sscds-color-text-disabled); + } } ::placeholder, diff --git a/src/components/forms/InputGroup/InputGroup.tsx b/src/components/forms/InputGroup/InputGroup.tsx index be62af20e..c3da15b91 100644 --- a/src/components/forms/InputGroup/InputGroup.tsx +++ b/src/components/forms/InputGroup/InputGroup.tsx @@ -35,6 +35,7 @@ const InputGroupContainer = styled(Inline)` border: none; border-radius: 0px; } + & .ssc__control, & > *:not(.sscds-buttonv2), input:not([id^='react-select']) { border: none; @@ -50,7 +51,7 @@ const InputGroupContainer = styled(Inline)` & > *:not(.sscds-buttonv2) { ${(props) => props.hasDivider && - `border-right: 1px solid ${getFormStyle('borderColor')(props)};`} + `border-right: 1px solid var(--sscds-color-border-input-default);`} } & > *:first-child { border-radius: var(--sscds-radii-input) 0 0 var(--sscds-radii-input) !important; diff --git a/src/components/forms/Label/Label.tsx b/src/components/forms/Label/Label.tsx index 91d079d8e..55ca410c3 100644 --- a/src/components/forms/Label/Label.tsx +++ b/src/components/forms/Label/Label.tsx @@ -5,10 +5,11 @@ import cls from 'classnames'; import { CLX_COMPONENT } from '../../../theme/constants'; import ElementLabel from '../../ElementLabel/ElementLabel'; -const LabelRoot = styled(ElementLabel)` +const LabelRoot = styled(ElementLabel)<{ $isInline: boolean }>` display: block; padding-inline: var(--sscds-space-1x); - padding-block-end: var(--sscds-space-2x); + padding-block-end: ${({ $isInline }) => + $isInline ? undefined : 'var(--sscds-space-2x)'}; cursor: inherit; > * { @@ -20,11 +21,14 @@ const Label = ({ children, htmlFor, className, + isInline = false, ...props }: Omit, 'color'> & { children: ReactNode; + isInline?: boolean; }) => ( + $hasValue && + css` + padding-left: ${getSpace(SpaceSizes.xs, { theme })}; + `}; +`; + const Control = styled.div` display: flex; flex-direction: column; @@ -72,6 +86,9 @@ const Control = styled.div` box-shadow: inset 0 0 0 1px ${getFormStyle('disabledBorderColor')}; cursor: not-allowed; } + & ${ValueContainer} { + opacity: 0.5; + } `}; ${({ $isInvalid }) => @@ -83,20 +100,6 @@ const Control = styled.div` `}; `; -const ValueContainer = styled(Padbox)` - display: flex; - flex-wrap: wrap; - gap: ${getSpace('xs')}; - padding-left: ${getSpace(SpaceSizes.md)}; - overflow: hidden; - flex: 1 1 0%; - ${({ $hasValue, theme }) => - $hasValue && - css` - padding-left: ${getSpace(SpaceSizes.xs, { theme })}; - `}; -`; - const InputContainer = styled.div` display: inline-grid; grid-area: 1 / 1 / 2 / 3; diff --git a/src/components/forms/SearchBar/SearchBar.tsx b/src/components/forms/SearchBar/SearchBar.tsx index 882c95144..97c48953f 100644 --- a/src/components/forms/SearchBar/SearchBar.tsx +++ b/src/components/forms/SearchBar/SearchBar.tsx @@ -185,7 +185,15 @@ const SearchBar = forwardRef( dark /> ) : ( - + )} {isClearButtonVisible && ( diff --git a/src/components/forms/Select/Select.stories.tsx b/src/components/forms/Select/Select.stories.tsx index 0696196b5..9e14b215e 100644 --- a/src/components/forms/Select/Select.stories.tsx +++ b/src/components/forms/Select/Select.stories.tsx @@ -183,6 +183,8 @@ export const Disabled = SelectTemplate.bind({}); Disabled.args = { ...Default.args, isDisabled: true, + defaultValue: [options[1]], + isMulti: true, }; export const Loading = SelectTemplate.bind({}); diff --git a/src/components/forms/Select/Select.styles.tsx b/src/components/forms/Select/Select.styles.tsx index 705bfcae9..38558d68c 100644 --- a/src/components/forms/Select/Select.styles.tsx +++ b/src/components/forms/Select/Select.styles.tsx @@ -14,7 +14,7 @@ import { StylesConfig, components, } from 'react-select'; -import { append, apply, assoc, both, includes, pick, pipe, take } from 'ramda'; +import { append, apply, both, includes, pick, pipe, take } from 'ramda'; import { isEmptyString, isNonEmptyArray, @@ -80,6 +80,7 @@ const focusStyles = { const disabledStyles = { ...stateStyles('var(--sscds-color-border-input-disabled)', '1px'), background: 'var(--sscds-color-background-input-disabled)', + color: 'var(--sscds-color-text-disabled)', }; const indicatorStyles = { @@ -133,7 +134,10 @@ export const selectStyles: ( ...(isDisabled && disabledStyles), }; }, - valueContainer: (styles, { selectProps: { isMulti, value } }) => { + valueContainer: ( + styles, + { selectProps: { isMulti, value, isDisabled } }, + ) => { return { ...styles, display: 'flex', @@ -145,11 +149,21 @@ export const selectStyles: ( isMulti && isNotNilOrEmpty(value) ? undefined : 'var(--sscds-space-4x)', + opacity: isDisabled && isMulti ? 0.5 : 1, }; }, - singleValue: assoc('margin', 0), + singleValue: (styles) => ({ + ...styles, + margin: 0, + color: 'inherit', + }), multiValue: () => ({}), - multiValueContainer: () => ({}), + multiValueContainer: (_, { isDisabled }) => + isDisabled + ? { + opacity: 0.7, + } + : {}, multiValueLabel: () => ({}), multiValueRemove: () => ({}), // Disable TS because types are wrong for Input component diff --git a/src/components/forms/TextArea/TextArea.stories.tsx b/src/components/forms/TextArea/TextArea.stories.tsx index e4a287f13..d721404c2 100644 --- a/src/components/forms/TextArea/TextArea.stories.tsx +++ b/src/components/forms/TextArea/TextArea.stories.tsx @@ -39,7 +39,7 @@ Invalid.args = { }; export const Disabled: Story = Template.bind({}); -Disabled.args = { isDisabled: true }; +Disabled.args = { isDisabled: true, defaultValue: 'DefaultValue text' }; const lipsum = `Donec sed nunc sed leo vestibulum pretium. Aenean sollicitudin velit neque. Curabitur placerat, velit sit amet lobortis condimentum, libero tortor ullamcorper quam, nec porttitor massa sem quis tellus. Sed feugiat nec libero a fermentum. Vivamus laoreet sapien convallis, interdum sapien vitae, lobortis eros. Ut interdum dui ut mauris malesuada, vitae pellentesque est fermentum. Cras quis erat est. Proin tempus a leo ut pulvinar. Nulla scelerisque tempor mollis. Etiam quis dolor non diam sollicitudin mollis eu vitae nisl. Vestibulum bibendum augue vel justo fringilla, sed ultrices libero congue. Maecenas nec erat ac ante mollis eleifend. Sed ut mattis metus. Nullam molestie, diam blandit aliquam tincidunt, magna leo auctor diam, vel eleifend risus ex vel tortor. Donec ornare pellentesque urna quis volutpat. Donec dictum, arcu id luctus tincidunt, arcu purus venenatis lorem, at imperdiet orci lacus a metus.`; export const Autosize: Story = Template.bind({}); diff --git a/src/components/forms/TextArea/TextArea.tsx b/src/components/forms/TextArea/TextArea.tsx index ad2e2bca1..65b4fbb3e 100644 --- a/src/components/forms/TextArea/TextArea.tsx +++ b/src/components/forms/TextArea/TextArea.tsx @@ -63,6 +63,14 @@ const TextareaStyled = styled.textarea` } :disabled { cursor: not-allowed; + color: var(--sscds-color-text-disabled); + ::placeholder, + ::-webkit-input-placeholder { + color: var(--sscds-color-text-disabled); + } + :-ms-input-placeholder { + color: var(--sscds-color-text-disabled); + } } `;