Update form fields style

src/components/Datatable/BatchModule/BatchActions/BatchActions.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
-import { map, pipe } from 'ramda';
+import { map } from 'ramda';
 import { isNotUndefined } from 'ramda-adjunct';
 
 import { SpaceSizes } from '../../../../theme';
 import { SSCIconNames } from '../../../../theme/icons/icons.enums';
-import { getFormStyle, pxToRem } from '../../../../utils';
+import { pxToRem } from '../../../../utils';
 import { Inline } from '../../../layout';
 import { BaseButton } from '../../../_internal/BaseButton';
 import { ButtonVariants } from '../../../Button/Button.enums';
@@ -24,7 +24,7 @@ import { Tooltip } from '../../../Tooltip';
 const BatchActionButton = styled(BaseButton)`
   padding: ${pxToRem(9.5, 16)};
   line-height: ${pxToRem(13)};
-  height: ${pipe(getFormStyle('fieldHeight'), pxToRem)};
+  height: 2.25rem;
 `;
 
 const BatchActions = ({ actions }: BatchActionsProps) => {

src/components/Datatable/ControlsModule/ControlsModule.tsx

@@ -261,6 +261,7 @@ function ControlsModule<D extends Record<string, unknown>>({
               onClear={handleOnSearchClear}
               onSearch={handleOnSearch}
               {...restSearchConfig}
+              style={{ height: '2.25rem' }}
             />
           )}
         </Inline>

src/components/DatatableV2/toolbar/Pagination.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { abbreviateNumber, getFormStyle, getRadii } from '../../../utils';
+import { abbreviateNumber, getFormStyle } from '../../../utils';
 import { Inline, Padbox } from '../../layout';
 import { DatatableInstance } from '../Datatable.types';
 import { useContainerQuery } from '../../../hooks/useContainerQuery';
@@ -20,9 +20,9 @@ const cq = {
 
 const Select = styled.select`
   border: 1px solid ${getFormStyle('borderColor')};
-  border-radius: ${getRadii('default')};
+  border-radius: var(--sscds-radii-input);
   color: ${getFormStyle('color')};
-  height: ${getFormStyle('fieldHeight')};
+  height: 2rem;
 `;
 
 const Pagination = <D,>({ table }: { table: DatatableInstance<D> }) => {

src/components/Filters/DisabledOperator/DisabledOperator.tsx

@@ -4,15 +4,17 @@ import styled from 'styled-components';
 import { Text as BaseText } from '../../Text';
 import { TextSizes } from '../../Text/Text.enums';
 import { Padbox } from '../../layout';
-import { getColor, getRadii } from '../../../utils';
+import { getColor, getFormStyle } from '../../../utils';
 import { SpaceSizes } from '../../../theme';
 import { PaddingTypes } from '../../layout/Padbox/Padbox.enums';
 
 const Container = styled(Padbox)`
   display: flex;
-  border-radius: ${getRadii('default')};
+  border-radius: var(--sscds-radii-input);
   background: ${getColor('neutral.200')};
   text-transform: capitalize;
+  height: ${getFormStyle('fieldHeight')};
+  align-items: center;
 `;
 
 const Text = styled(BaseText)`

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}

src/components/_internal/BaseSingleDatePicker/SingleDatePicker.types.ts

@@ -8,4 +8,5 @@ export interface SingleDatePickerProps {
   defaultIsYearPickerOpen?: boolean;
   startDate?: Date;
   endDate?: Date;
+  isDisabled?: boolean;
 }

src/components/_internal/BaseSingleDatePicker/styles.ts

@@ -8,18 +8,25 @@ export const datePickerStyles = css`
     height: ${getFormStyle('fieldHeight')};
     padding: ${pxToRem(4, 16)};
     background: ${getFormStyle('bgColor')};
-    border: ${getFormStyle('borderWidth')} solid ${getFormStyle('borderColor')};
-    border-radius: ${getRadii('default')};
+    border: 0 none transparent;
+    box-shadow: inset 0 0 0 1px ${getFormStyle('borderColor')};
+    border-radius: var(--sscds-radii-input);
     color: ${getFormStyle('color')};
     font-size: var(--sscds-font-size-body-md);
     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 {
-    border: ${getFormStyle('statefulBorderWidth')} solid
-      ${getFormStyle('focusBorderColor')};
+    box-shadow: inset 0 0 0 2px ${getFormStyle('focusBorderColor')};
     outline: none;
-    padding: ${pxToRem(3, 15)};
   }
   .DateRangePicker-input::placeholder,
   .DateRangePicker-input::-webkit-input-placeholder {

src/components/_internal/BaseTable/BaseTable.styles.tsx

@@ -170,8 +170,7 @@ export const StyledBaseTable = styled.table.attrs({ $color: 'primary' })`
       flex: 0 0 ${getRemToggleSize};
       height: ${getRemToggleSize};
       width: ${getRemToggleSize};
-      border: ${getFormStyle('borderWidth')} solid
-        ${getFormStyle('borderColor')};
+      border: 1px solid ${getFormStyle('borderColor')};
       border-radius: ${getRadii('default')};
       background: ${getColor('neutral.0')};
       padding: ${pxToRem(3)};

src/components/forms/Checkbox/Checkbox.stories.tsx

@@ -128,7 +128,6 @@ export const CheckboxWithLabelAsComponent: StoryFn = () => (
     checkboxId="disabledCheckbox"
     label={<Text>{textExample}</Text>}
     name="disabledCheckbox"
-    isDisabled
   />
 );
 
@@ -142,6 +141,5 @@ export const CheckboxWithLabelAsComponentWithIcon: StoryFn = () => (
       </Inline>
     }
     name="disabledCheckbox"
-    isDisabled
   />
 );

src/components/forms/Checkbox/Checkbox.tsx

@@ -6,7 +6,7 @@ import cls from 'classnames';
 
 import * as checked from '../../../theme/icons/check';
 import * as indeterminate from '../../../theme/icons/minus';
-import { getColor, getFormStyle, getRadii, pxToRem } from '../../../utils';
+import { getFormStyle, getRadii, pxToRem } from '../../../utils';
 import { Label } from '../Label';
 import { TogglingInputProps } from '../types/forms.types';
 import { CheckboxProps } from './Checkbox.types';
@@ -30,9 +30,9 @@ const Box = styled.div`
   flex: 0 0 ${getRemToggleSize};
   height: ${getRemToggleSize};
   width: ${getRemToggleSize};
-  border: ${getFormStyle('borderWidth')} solid ${getFormStyle('borderColor')};
+  border: 1px solid ${getFormStyle('borderColor')};
   border-radius: ${getRadii('default')};
-  background: ${getColor('neutral.0')};
+  background: ${getFormStyle('bgColor')};
   padding: ${pxToRem(3)};
 `;
 
@@ -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,9 +99,8 @@ const CheckboxInput = styled.input<TogglingInputProps>`
   ${({ isInvalid }) =>
     isInvalid &&
     css`
-      & + ${Box}, &:checked + ${Box} {
-        border: ${getFormStyle('statefulBorderWidth')} solid
-          ${getFormStyle('invalidBorderColor')};
+      & + ${Box}, &:checked + ${Box}, &:hover + ${Box} {
+        border: 2px solid ${getFormStyle('invalidBorderColor')} !important;
       }
     `}
 `;

src/components/forms/Input/Input.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { createPadding, getFormStyle, getRadii } from '../../../utils';
+import { createPadding, getFormStyle } from '../../../utils';
 import { InputProps } from './Input.types';
 import { SpaceSizes } from '../../../theme';
 import { PaddingTypes } from '../../layout/Padbox/Padbox.enums';
@@ -24,30 +24,38 @@ const Input = styled.input.attrs<InputProps>(
       theme,
     })};
   background: ${getFormStyle('bgColor')};
-  border: ${getFormStyle('borderWidth')} solid ${getFormStyle('borderColor')};
-  border-radius: ${getRadii('default')};
+  box-shadow: inset 0px 0px 0px 1px ${getFormStyle('borderColor')};
+  border: 0 transparent none;
+  border-radius: var(--sscds-radii-input);
   color: ${getFormStyle('color')};
   font-family: var(--sscds-font-family-body);
   font-size: var(--sscds-font-size-body-md);
   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`
-      border-color: ${getFormStyle('invalidBorderColor')};
-      box-shadow: inset 0px 0px 0px 1px ${getFormStyle('invalidBorderColor')};
-    `}
+      &,
+      &:hover {
+        box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')} !important;
+      }
+    `};
 
   &:focus,
   &.focus {
-    border-color: ${getFormStyle('focusBorderColor')};
-    box-shadow: inset 0px 0px 0px 1px ${getFormStyle('focusBorderColor')};
+    box-shadow: inset 0px 0px 0px 2px ${getFormStyle('focusBorderColor')};
   }
 
   &:disabled {
     background: ${getFormStyle('disabledBgColor')};
     border-color: ${getFormStyle('disabledBorderColor')};
+    cursor: not-allowed;
   }
 
   ::placeholder,

src/components/forms/InputGroup/InputGroup.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react';
 import InputGroup from './InputGroup';
 import { Input, Password, Select } from '..';
 import { Icon } from '../../Icon';
-import { Button } from '../../Button';
+import Button from '../../ButtonV2/Button';
 import { SearchBar } from '../SearchBar';
 
 export default {

src/components/forms/InputGroup/InputGroup.tsx

@@ -3,24 +3,29 @@ import styled from 'styled-components';
 import { prop } from 'ramda';
 import cls from 'classnames';
 
-import { getFormStyle, getRadii } from '../../../utils';
+import { getFormStyle } from '../../../utils';
 import { Input } from '../Input';
 import { Password } from '../Password';
 import { Select } from '../Select';
 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';
 import ButtonV2 from '../../ButtonV2/Button';
 import IconButton from '../../ButtonV2/IconButton';
 
 const InputGroupContainer = styled(Inline)<InputGroupProps>`
-  border: ${getFormStyle('borderWidth')} solid ${getFormStyle('borderColor')};
-  border-radius: ${getRadii('default')};
+  background-color: ${getFormStyle('bgColor')};
+  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;
@@ -30,27 +35,31 @@ 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: ${getFormStyle('borderWidth')(props)} solid ${getFormStyle(
-        'borderColor',
-      )(props)};`}
+      `border-right: 1px solid ${getFormStyle('borderColor')(props)};`}
   }
   & > *:first-child {
-    border-radius: ${getRadii('default')} 0 0 ${getRadii('default')} !important;
+    border-radius: var(--sscds-radii-input) 0 0 var(--sscds-radii-input) !important;
   }
   & > *:last-child,
   & > *:last-child input[type='password'],
   & > *:last-child input[type='search'] {
     border-right: 0px !important;
-    border-radius: 0 ${getRadii('default')} ${getRadii('default')} 0 !important;
+    border-radius: 0 var(--sscds-radii-input) var(--sscds-radii-input) 0 !important;
   }
 `;
 
@@ -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',
       );
     }
   });