Merge pull request #1172 from securityscorecard/ajkl2533@UXD-1651-05

fix(forms): fix text color for disabled fields

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);

src/components/forms/Input/Input.stories.tsx

@@ -56,5 +56,10 @@ export const Invalid: StoryFn = () => (
 );
 
 export const Disabled: StoryFn = () => (
-  <Input aria-label="Input" type="text" isDisabled />
+  <Input
+    aria-label="Input"
+    defaultValue="SecurityScorecard"
+    type="text"
+    isDisabled
+  />
 );

src/components/forms/Input/Input.tsx

@@ -53,9 +53,18 @@ const Input = styled.input.attrs<InputProps>(
   }
 
   &: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,

src/components/forms/InputGroup/InputGroup.tsx

@@ -35,6 +35,7 @@ const InputGroupContainer = styled(Inline)<InputGroupProps>`
     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)<InputGroupProps>`
   & > *: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;

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<ComponentPropsWithoutRef<'label'>, 'color'> & {
   children: ReactNode;
+  isInline?: boolean;
 }) => (
   <LabelRoot
+    $isInline={isInline}
     className={cls(CLX_COMPONENT, className)}
     forwardedAs="label"
     htmlFor={htmlFor}

src/components/forms/MultiValueInput/MultiValueInput.stories.tsx

@@ -68,6 +68,7 @@ export const Disabled = MultiValueInputTemplate.bind({});
 Disabled.args = {
   ...Playground.args,
   isDisabled: true,
+  value: ['[email protected]', '[email protected]'],
 };
 
 export const NonClearable = MultiValueInputTemplate.bind({});

src/components/forms/MultiValueInput/MultiValueInput.tsx

@@ -42,6 +42,20 @@ import {
 } from './MultiValueInput.types';
 import { CLX_COMPONENT } from '../../../theme/constants';
 
+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 Control = styled.div<ValueContainerProps>`
   display: flex;
   flex-direction: column;
@@ -72,6 +86,9 @@ const Control = styled.div<ValueContainerProps>`
         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<ValueContainerProps>`
     `};
 `;
 
-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;

src/components/forms/SearchBar/SearchBar.tsx

@@ -185,7 +185,15 @@ const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
               dark
             />
           ) : (
-            <Icon name={SSCIconNames.search} type={IconTypes.ssc} />
+            <Icon
+              color={
+                isDisabled
+                  ? 'var(--sscds-color-icon-disabled)'
+                  : 'var(--sscds-color-icon-subtle)'
+              }
+              name={SSCIconNames.search}
+              type={IconTypes.ssc}
+            />
           )}
         </SearchIconWrapper>
         {isClearButtonVisible && (

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({});

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

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({});

src/components/forms/TextArea/TextArea.tsx

@@ -63,6 +63,14 @@ const TextareaStyled = styled.textarea<TextareaStyledProps>`
   }
   :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);
+    }
   }
 `;