feat(forms): implement hover styles for fields

Ref UXD-1651
securityscorecard · Oct 11, 2024 · 4f92c27 · 4f92c27
1 parent acc953f
commit 4f92c27
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 18 deletions.
diff --git a/...mage-snapshots/expected/components_forms_InputGroup_Input Group With Button.png b/...mage-snapshots/expected/components_forms_InputGroup_Input Group With Button.png
diff --git a/...ook/image-snapshots/expected/components_forms_InputGroup_Nested Input Group.png b/...ook/image-snapshots/expected/components_forms_InputGroup_Nested Input Group.png
diff --git a/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.tsx b/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.tsx
@@ -31,6 +31,7 @@ const SingleDatePicker = ({
   defaultIsYearPickerOpen,
   startDate,
   endDate,
+  isDisabled = false,
 }: SingleDatePickerProps) => {
   const [showYearPicker, setShowYearPicker] = useState(defaultIsYearPickerOpen);
   const pickerRef = useRef({ calendar: { instanceRef: { changeYear: noop } } });
@@ -42,6 +43,7 @@ const SingleDatePicker = ({
         calendarClassName="DateRangePicker-calendar"
         className="DateRangePicker-input"
         dateFormat="d MMM, yyyy"
+        disabled={isDisabled}
         endDate={endDate}
         maxDate={maxDate}
         minDate={minDate}

diff --git a/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.types.ts b/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.types.ts
@@ -8,4 +8,5 @@ export interface SingleDatePickerProps {
   defaultIsYearPickerOpen?: boolean;
   startDate?: Date;
   endDate?: Date;
+  isDisabled?: boolean;
 }
diff --git a/src/components/_internal/BaseSingleDatePicker/styles.ts b/src/components/_internal/BaseSingleDatePicker/styles.ts
@@ -16,6 +16,14 @@ export const datePickerStyles = css`
     line-height: var(--sscds-font-lineheight-body-md);
     font-weight: var(--sscds-font-weight-body-default);
   }
+  .DateRangePicker-input:disabled {
+    box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-disabled);
+    background: var(--sscds-color-background-input-disabled);
+  }
+  .DateRangePicker-input:hover:not(:disabled, :focus) {
+    box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover);
+    background: var(--sscds-color-background-input-hover);
+  }
   .DateRangePicker-input:focus {
     box-shadow: inset 0 0 0 2px ${getFormStyle('focusBorderColor')};
     outline: none;

diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx
@@ -61,6 +61,7 @@ const CheckboxInput = styled.input<TogglingInputProps>`
   &:disabled + ${Box} {
     border-color: ${getFormStyle('disabledBorderColor')};
     background: ${getFormStyle('disabledBgColor')};
+    cursor: not-allowed;
   }
 
   &:disabled:checked + ${Box} {
@@ -69,15 +70,20 @@ const CheckboxInput = styled.input<TogglingInputProps>`
     }
   }
 
+  &:hover:not(:disabled, :checked) + ${Box} {
+    border-color: var(--sscds-color-border-input-hover);
+    background: var(--sscds-color-background-input-hover);
+  }
+
   &:focus + ${Box} {
     border: 2px solid ${getFormStyle('activeBorderColor')};
   }
 
   ${({ isIndeterminate }) =>
     isIndeterminate &&
     css`
-      & + ${Box} {
-        background: ${getFormStyle('activeBorderColor')};
+      & + ${Box}, &:hover + ${Box} {
+        background: ${getFormStyle('activeBorderColor')} !important;
         border-color: ${getFormStyle('activeBorderColor')};
         ${Mark} {
           display: block;
@@ -93,8 +99,8 @@ const CheckboxInput = styled.input<TogglingInputProps>`
   ${({ isInvalid }) =>
     isInvalid &&
     css`
-      & + ${Box}, &:checked + ${Box} {
-        border: 2px solid ${getFormStyle('invalidBorderColor')};
+      & + ${Box}, &:checked + ${Box}, &:hover + ${Box} {
+        border: 2px solid ${getFormStyle('invalidBorderColor')} !important;
       }
     `}
 `;

diff --git a/src/components/forms/Input/Input.tsx b/src/components/forms/Input/Input.tsx
@@ -33,11 +33,19 @@ const Input = styled.input.attrs<InputProps>(
   line-height: ${getFormStyle('fieldLineHeight')};
   outline: none;
 
+  &:hover:not(:disabled, :focus, .focus) {
+    box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover);
+    background: var(--sscds-color-background-input-hover);
+  }
+
   ${({ isInvalid }) =>
     isInvalid &&
     css`
-      box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')};
-    `}
+      &,
+      &:hover {
+        box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')} !important;
+      }
+    `};
 
   &:focus,
   &.focus {
@@ -47,6 +55,7 @@ const Input = styled.input.attrs<InputProps>(
   &:disabled {
     background: ${getFormStyle('disabledBgColor')};
     border-color: ${getFormStyle('disabledBorderColor')};
+    cursor: not-allowed;
   }
 
   ::placeholder,

diff --git a/src/components/forms/InputGroup/InputGroup.tsx b/src/components/forms/InputGroup/InputGroup.tsx
@@ -11,7 +11,6 @@ import { Icon } from '../../Icon';
 import { Inline, Padbox } from '../../layout';
 import { InputGroupProps } from './InputGroup.types';
 import { InlineProps } from '../../layout/Inline/Inline';
-import { Button } from '../../Button';
 import { SearchBar } from '../SearchBar';
 import { CLX_COMPONENT } from '../../../theme/constants';
 import { useLogger } from '../../../hooks/useLogger';
@@ -23,6 +22,11 @@ const InputGroupContainer = styled(Inline)<InputGroupProps>`
   box-shadow: inset 0 0 0 1px ${getFormStyle('borderColor')};
   border-radius: var(--sscds-radii-input);
 
+  &:hover {
+    box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover);
+    background: var(--sscds-color-background-input-hover);
+  }
+
   .ssc__control {
     border: 0px;
     box-shadow: none;
@@ -31,14 +35,19 @@ const InputGroupContainer = styled(Inline)<InputGroupProps>`
     border: none;
     border-radius: 0px;
   }
-  & > *,
+  & > *:not(.sscds-buttonv2),
   input:not([id^='react-select']) {
     border: none;
     box-shadow: none;
     border-radius: 0px;
     background-color: transparent;
+
+    &:hover {
+      box-shadow: none;
+      background: transparent;
+    }
   }
-  & > * {
+  & > *:not(.sscds-buttonv2) {
     ${(props) =>
       props.hasDivider &&
       `border-right: 1px solid ${getFormStyle('borderColor')(props)};`}
@@ -70,7 +79,6 @@ const InputGroup = ({
     Select,
     Input,
     Icon,
-    Button,
     ButtonV2,
     IconButton,
     Password,
@@ -80,7 +88,7 @@ const InputGroup = ({
   Children.forEach(children, (child) => {
     if (!ALLOWED_CHILDREN.includes(prop('type', child))) {
       error(
-        'Only Select, Input, InputGroup, Icon, Button, ButtonV2, IconButton, SearchBar and Password are valid childs of InputGroup',
+        'Only Select, Input, InputGroup, Icon, ButtonV2, IconButton, SearchBar and Password are valid childs of InputGroup',
       );
     }
   });

diff --git a/src/components/forms/MultiValueInput/MultiValueInput.tsx b/src/components/forms/MultiValueInput/MultiValueInput.tsx
@@ -50,6 +50,12 @@ const Control = styled.div<ValueContainerProps>`
   background: ${getFormStyle('bgColor')};
   border-radius: var(--sscds-radii-input);
   box-shadow: inset 0 0 0 1px ${getFormStyle('borderColor')};
+  cursor: text;
+
+  &:hover {
+    box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover);
+    background: var(--sscds-color-background-input-hover);
+  }
 
   &:focus-within,
   &.focus-within {
@@ -60,8 +66,12 @@ const Control = styled.div<ValueContainerProps>`
   ${({ $isDisabled }) =>
     $isDisabled &&
     css`
-      background: ${getFormStyle('disabledBgColor')};
-      box-shadow: inset 0 0 0 1px ${getFormStyle('disabledBorderColor')};
+      &,
+      &:hover {
+        background: ${getFormStyle('disabledBgColor')};
+        box-shadow: inset 0 0 0 1px ${getFormStyle('disabledBorderColor')};
+        cursor: not-allowed;
+      }
     `};
 
   ${({ $isInvalid }) =>

diff --git a/src/components/forms/Radio/Radio.tsx b/src/components/forms/Radio/Radio.tsx
@@ -53,6 +53,11 @@ const RadioLabel = styled(Label)<
     border: 1px solid ${getFormStyle('borderColor')};
     background-color: ${getFormStyle('bgColor')};
   }
+
+  &:hover::before {
+    border-color: var(--sscds-color-border-input-hover);
+    background: var(--sscds-color-background-input-hover);
+  }
 `;
 
 const RadioInput = styled.input<TogglingInputProps>`

diff --git a/src/components/forms/Select/Select.styles.tsx b/src/components/forms/Select/Select.styles.tsx
@@ -66,7 +66,7 @@ const stateStyles = (
   color: `var(--sscds-${string})`,
   width: `${string}px`,
 ) => ({
-  boxShadow: `inset 0 0 0 ${width} ${color}`,
+  boxShadow: `inset 0 0 0 ${width} ${color} !important`,
 });
 
 const invalidStyles = {
@@ -123,7 +123,11 @@ export const selectStyles: (
         fontSize: 'var(--sscds-font-size-body-md)',
         lineHeight: 'var(--sscds-font-lineheight-body-md)',
         outline: 'none',
-
+        ':hover': {
+          boxShadow:
+            'inset 0px 0px 0px 1px var(--sscds-color-border-input-hover)',
+          background: 'var(--sscds-color-background-input-hover)',
+        },
         ...(isInvalid && invalidStyles),
         ...((isFocused || includes('focus', className)) && focusStyles),
         ...(isDisabled && disabledStyles),

diff --git a/src/components/forms/TextArea/TextArea.tsx b/src/components/forms/TextArea/TextArea.tsx
@@ -61,6 +61,9 @@ const TextareaStyled = styled.textarea<TextareaStyledProps>`
   :-ms-input-placeholder {
     color: ${getFormStyle('placeholderColor')};
   }
+  :disabled {
+    cursor: not-allowed;
+  }
 `;
 
 const TextareaRoot = styled(Padbox)<TextareaRootProps>`
@@ -79,15 +82,21 @@ const TextareaRoot = styled(Padbox)<TextareaRootProps>`
   ${({ $isDisabled }) =>
     $isDisabled &&
     css`
-      background: ${getFormStyle('disabledBgColor')};
-      box-shadow: inset 0px 0px 0px 1px ${getFormStyle('disabledBorderColor')};
+      background: ${getFormStyle('disabledBgColor')} !important;
+      box-shadow: inset 0px 0px 0px 1px ${getFormStyle('disabledBorderColor')} !important;
+      cursor: not-allowed;
     `};
   ${({ $isInvalid }) =>
     $isInvalid &&
     css`
-      box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')};
+      box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')} !important;
     `};
 
+  &:hover:not(:focus-within) {
+    box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover);
+    background: var(--sscds-color-background-input-hover);
+  }
+
   &:focus-within {
     outline: none;
     box-shadow: inset 0px 0px 0px 2px ${getFormStyle('focusBorderColor')};