fix: Reskinning Radio + Toggle + Checkbox (#15329)

* update checkbox * fix margin in checkbox * fix color bug * fix border radius * fixes * remove unused imports * bug fixes * ui fixes * code review feedback fixes * css updates for toggle * fix bg bug in checkbox * fix disabled checkbox style * update styles for radio and switch * update label align * add hover interaction for switch * add wds css variables * add error state * add error state * fix css variable * fix css * fix checkbox group column height * move checkbox icons to assets * fix alignment issue * fix cypress tests * fix snapshot tests
2022-08-05 10:16:42 +05:30 · 2022-08-05 10:16:42 +05:30 · 89b39e239b
commit 89b39e239b
parent 56b247f421
22 changed files with 261 additions and 187 deletions
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Widgets_Labels_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Widgets_Labels_spec.js
@ -10,7 +10,7 @@ describe("Label feature", () => {
      widgetName: "checkboxgroupwidget",
      parentColumnSpace: 11.9375,
      containerSelector: "[data-testid='checkboxgroup-container']",
-      isCompact: false,
+      isCompact: true,
      labelText: "Name",
      labelWidth: 4,
    };
@ -101,7 +101,7 @@ describe("Label feature", () => {
      widgetName: "radiogroupwidget",
      parentColumnSpace: 11.9375,
      containerSelector: "[data-testid='radiogroup-container']",
-      isCompact: false,
+      isCompact: true,
      labelText: "Name",
      labelWidth: 4,
    };
@ -153,7 +153,7 @@ describe("Label feature", () => {
      widgetName: "switchgroupwidget",
      parentColumnSpace: 11.9375,
      containerSelector: "[data-testid='switchgroup-container']",
-      isCompact: false,
+      isCompact: true,
      labelText: "Name",
      labelWidth: 4,
    };
--- a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineDisabled.snap.png
+++ b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineDisabled.snap.png
--- a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineEnabled.snap.png
+++ b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js/inlineEnabled.snap.png
--- a/app/client/src/assets/icons/widget/checkbox/check-icon.svg
+++ b/app/client/src/assets/icons/widget/checkbox/check-icon.svg
@ -0,0 +1,10 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4835_11759)">
+<path d="M8.91407 0.650391L9.8998 1.64943L3.83076 7.80039L0.549804 4.47515L1.53554 3.47611L3.83076 5.80175L8.91407 0.650391Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4835_11759">
+<rect width="10" height="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/app/client/src/assets/icons/widget/checkbox/disabled-indeterminate-icon.svg
+++ b/app/client/src/assets/icons/widget/checkbox/disabled-indeterminate-icon.svg
@ -0,0 +1,3 @@
+<svg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.25" width="9" height="1.5" fill="#716E6E"/>
+</svg>
--- a/app/client/src/assets/icons/widget/checkbox/disabledcheck-icon.svg
+++ b/app/client/src/assets/icons/widget/checkbox/disabledcheck-icon.svg
@ -0,0 +1,10 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4835_11759)">
+<path d="M8.91407 0.650391L9.8998 1.64943L3.83076 7.80039L0.549804 4.47515L1.53554 3.47611L3.83076 5.80175L8.91407 0.650391Z" fill="#716E6E"/>
+</g>
+<defs>
+<clipPath id="clip0_4835_11759">
+<rect width="10" height="8" fill="#716E6E"/>
+</clipPath>
+</defs>
+</svg>
--- a/app/client/src/assets/icons/widget/checkbox/indeterminate-icon.svg
+++ b/app/client/src/assets/icons/widget/checkbox/indeterminate-icon.svg
@ -0,0 +1,3 @@
+<svg width="10" height="2" viewBox="0 0 10 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.25" width="9" height="1.5" fill="white"/>
+</svg>
--- a/app/client/src/components/ads/LabelWithTooltip.tsx
+++ b/app/client/src/components/ads/LabelWithTooltip.tsx
@ -97,14 +97,10 @@ export const labelLayoutStyles = css<{

  align-items: ${({ compactMode, labelPosition }) => {
    if (labelPosition === LabelPosition.Top) return "flex-start";
-    if (compactMode || labelPosition === LabelPosition.Left) return "center";
+    if (compactMode) return "center";
    return "flex-start";
  }};
-  justify-content: ${({ compactMode, labelPosition }) => {
-    if (labelPosition && labelPosition !== LabelPosition.Left && !compactMode) {
-      return "space-between";
-    }
-  }};
+  justify-content: flex-start;
 `;

 export const multiSelectInputContainerStyles = css<{
--- a/app/client/src/components/wds/Checkbox/index.tsx
+++ b/app/client/src/components/wds/Checkbox/index.tsx
@ -1,115 +1,147 @@
 import styled from "styled-components";
-import { Checkbox as BlueprintCheckbox } from "@blueprintjs/core";
+import { Alignment, Checkbox as BlueprintCheckbox } from "@blueprintjs/core";
+import CheckIcon from "assets/icons/widget/checkbox/check-icon.svg";
+import DisabledCheckIcon from "assets/icons/widget/checkbox/disabledcheck-icon.svg";
+import IndeterminateIcon from "assets/icons/widget/checkbox/indeterminate-icon.svg";
+import DisabledIndeterminate from "assets/icons/widget/checkbox//disabled-indeterminate-icon.svg";

-import { Colors } from "constants/Colors";
-import { lightenColor, darkenColor } from "widgets/WidgetUtils";
+import { darkenColor } from "widgets/WidgetUtils";

 type StyledCheckboxProps = {
  checked?: boolean;
  disabled?: boolean;
-  backgroundColor?: string;
  borderRadius?: string;
  indeterminate?: boolean;
  hasError?: boolean;
+  accentColor?: string;
  inputRef?: (el: HTMLInputElement | null) => any;
 };

-const DISABLED_ICON_SVG =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='white'/%3e%3c/svg%3e";
-const CHECKED_ICON_SVG =
-  "data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='14' /%3E%3Cpath d='M10.1039 3.5L11 4.40822L5.48269 10L2.5 6.97705L3.39613 6.06883L5.48269 8.18305L10.1039 3.5Z' fill='white'/%3E%3C/svg%3E%0A";
-
 const Checkbox = styled(BlueprintCheckbox)<StyledCheckboxProps>`
-  ${({ backgroundColor, borderRadius, checked, hasError }) => `
+  ${({ accentColor, alignIndicator, borderRadius, hasError }) => `
    margin: 0;
    padding: 0;
    height: auto;
    display: flex;
-    align-items: center;
+    align-items: flex-start;
    gap: 10px;
-    color: ${checked ? Colors.GREY_10 : Colors.GREY_9};
+    flex-direction: ${
+      alignIndicator === Alignment.RIGHT ? "row-reverse" : "row"
+    };

+    // base
    &.bp3-control.bp3-checkbox .bp3-control-indicator  {
      margin: 0;
+      margin-top: .2rem;
      border: none;
-      box-shadow: 0px 0px 0px 1px ${Colors.GREY_3};
+      box-shadow: 0px 0px 0px 1px var(--wds-color-border);
      outline: none !important;
-      background: transparent;
-      border-radius: ${borderRadius};
+      background-color: white;
+      border-radius: ${borderRadius === "0.375rem" ? "0.25rem" : borderRadius};

      // ERROR state ( needed when checkbox is required )
-      ${hasError && `box-shadow: 0px 0px 0px 1px ${Colors.ERROR_RED};`};
+      ${
+        hasError
+          ? `box-shadow: 0px 0px 0px 1px var(--wds-color-bg-danger);`
+          : ""
+      };
    }

+    &.bp3-control.bp3-checkbox .bp3-control-indicator::before {
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    // active
+    &.bp3-control input:not(:disabled):active ~ .bp3-control-indicator {
+      background: white !important;
+      box-shadow: 0px 0px 0px 1px var(--wds-color-border-hover);
+    }
+
+    // hover
+    &.bp3-control.bp3-checkbox:hover input:not(:checked) ~ .bp3-control-indicator {
+      box-shadow: 0px 0px 0px 1px ${
+        hasError
+          ? "var(--wds-color-border-danger-hover)"
+          : "var(--wds-color-border-hover)"
+      };
+    }
+
+    // hover on checked
+    &.bp3-control.bp3-checkbox:hover input:checked ~ .bp3-control-indicator,  &.bp3-control.bp3-checkbox:hover input:indeterminate ~ .bp3-control-indicator {
+      box-shadow: none;
+      background: ${darkenColor(accentColor)} !important;
+    }
+
+    // hover on disabled
+    &.bp3-control.bp3-checkbox:hover input:disabled:not(:checked):not(:indeterminate) ~ .bp3-control-indicator {
+      box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled);
+    }
+
+    // hover on checked + disabled
+    &.bp3-control.bp3-checkbox:hover input:checked:disabled ~ .bp3-control-indicator {
+      box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled);
+      background-color: var(--wds-color-disabled) !important;
+    }
+
+    // checked
    &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator,
    &.bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator {
-      background: ${backgroundColor} !important;
+      background-color: ${accentColor} !important;
      background-image: none;
      border: none !important;
      box-shadow: none;
    }

-    // ACTIVE
-    &.bp3-control.bp3-checkbox:active .bp3-control-indicator {
-      background: ${lightenColor(backgroundColor)} !important;
-      box-shadow:
-        0px 0px 0px 1px ${backgroundColor},
-        0px 0px 0px 3px ${lightenColor(backgroundColor)} !important;
+    // checked + disabled
+    &.bp3-control.bp3-checkbox input:checked:disabled ~ .bp3-control-indicator {
+      box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled);
+      background-color: var(--wds-color-bg-disabled) !important;
+    }
+    // not checked + disabled
+    &.bp3-control.bp3-checkbox input:not(:checked):disabled ~ .bp3-control-indicator {
+      background-color: var(--wds-color-bg-disabled) !important;
    }

-    // ACTIVE WHEN DISABLED
-    &.bp3-control.bp3-checkbox:active input:disabled ~ .bp3-control-indicator {
-      box-shadow: 0px 0px 0px 1px ${Colors.GREY_3} !important;
-    }
-
-    // DISABLED
-    &.bp3-control.bp3-checkbox input:disabled ~ .bp3-control-indicator {
-      opacity: 0.5;
-      background: ${Colors.GREY_5} !important;
-      color: ${Colors.GREY_8};
-
-      &::before {
-        background-image: url("${DISABLED_ICON_SVG}") !important;
-      }
-    }
-
-    &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator {
-      &::before {
-        background-image: url("${CHECKED_ICON_SVG}") !important;
-      }
-    }
-
-    // CHECKED
-    &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator {
-      background: ${backgroundColor} !important;
-    }
-
-    // HOVER WHEN CHECKED
-    &.bp3-control.bp3-checkbox:hover input:checked ~ .bp3-control-indicator {
-      box-shadow: none;
-      background: ${darkenColor(backgroundColor)} !important;
-    }
-
-    // HOVER WHEN UNCHECKED
-    &.bp3-control.bp3-checkbox:hover :not(input:checked) ~ .bp3-control-indicator {
-      box-shadow: 0px 0px 0px 1px ${Colors.GREY_5};
-    }
-
-    // INDETERMINATE
+    // indeterminate
    &.bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator {
      box-shadow: none;
    }

-    // BLUEPRINT DEFAULT ISSUES
+    &.bp3-control.bp3-checkbox:hover input:indeterminate ~ .bp3-control-indicator {
+      box-shadow: none;
+    }
+
+    &.bp3-control.bp3-checkbox input:indeterminate:disabled ~ .bp3-control-indicator {
+      background-color: var(--wds-color-bg-disabled) !important;
+      box-shadow: 0px 0px 0px 1px var(--wds-color-border-disabled);
+    }
+
+    // blueprint specific issues
    &.bp3-control:not(.bp3-align-right) {
      padding-left: 0;
    }
+
+    // checked + disabled icon
+    &.bp3-control.bp3-checkbox input:checked:disabled ~ .bp3-control-indicator::before {
+      background-image: url(${DisabledCheckIcon});
+    }
+
+    // indeterminate icon
+    &.bp3-control.bp3-checkbox input:indeterminate ~ .bp3-control-indicator::before {
+      background-image: url(${IndeterminateIcon});
+    }
+
+    // indeterminate + disabled icon
+    &.bp3-control.bp3-checkbox input:indeterminate:disabled ~ .bp3-control-indicator::before {
+      background-image: url(${DisabledIndeterminate});
+    }
+
+    // checked icon
+    &.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator::before {
+      background-image: url(${CheckIcon})
+    }
  `}
 `;

-Checkbox.defaultProps = {
-  backgroundColor: "#553DE9",
-  borderRadius: "0.375rem",
-};
-
 export { Checkbox };
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@ -82,18 +82,42 @@ export const BlueprintControlTransform = css`
        box-shadow: none;
        border: 1px solid ${(props) => props.theme.colors.primaryOld};
      }
-      input:disabled ~ .${Classes.CONTROL_INDICATOR} {
-        opacity: 0.5;
+
+      &
+        input:invalid:not(:disabled):not(:checked)
+        ~ .${Classes.CONTROL_INDICATOR} {
+        border: 1px solid var(--wds-color-border-danger);
      }
+
+      &:hover
+        input:invalid:not(:disabled):not(:checked)
+        ~ .${Classes.CONTROL_INDICATOR} {
+        border: 1px solid var(--wds-color-border-danger-hover) !important;
+      }
+
      & input:disabled:not(:checked) ~ .${Classes.CONTROL_INDICATOR} {
-        border: 1px solid ${Colors.GREY_5};
+        background-color: var(--wds-color-bg-disabled) !important;
+        border: 1px solid var(--wds-color-border-disabled) !important;
+      }
+
+      & input:disabled:checked ~ .${Classes.CONTROL_INDICATOR} {
+        background-color: var(--wds-color-bg-disabled) !important;
+        border: 1px solid var(--wds-color-border-disabled) !important;
+      }
+
+      &:hover {
+        & input:not(:checked):not(:disabled) ~ .bp3-control-indicator {
+          border: 1px solid ${Colors.GREY_6} !important;
+        }
      }
    }

    .${Classes.SWITCH} {
-      & .${Classes.CONTROL_INDICATOR} {
+      & input ~ .${Classes.CONTROL_INDICATOR} {
+        transition: none;
+
        &::before {
-          box-shadow: -2px 2px 5px rgba(67, 86, 100, 0.1);
+          box-shadow: none;
        }
      }
      input:checked ~ .${Classes.CONTROL_INDICATOR} {
@ -102,8 +126,22 @@ export const BlueprintControlTransform = css`
        }
      }
      input:not(:checked) ~ .${Classes.CONTROL_INDICATOR} {
-        background: ${Colors.GREY_3};
-        border: 1px solid ${Colors.GREY_5};
+        background: var(--wds-color-bg-strong);
+        border: 1px solid var(--wds-color-border);
+      }
+
+      input:disabled ~ .${Classes.CONTROL_INDICATOR} {
+        background: var(--wds-color-bg-disabled) !important;
+        &::before {
+          background: var(--wds-color-bg-disabled-strong);
+        }
+      }
+
+      &:hover {
+        & input:not(:checked):not(:disabled) ~ .bp3-control-indicator {
+          background: var(--wds-color-bg-strong-hover);
+          border: 1px solid var(--wds-color-border-hover) !important;
+        }
      }
    }

@ -342,16 +380,10 @@ export const BlueprintRadioSwitchGroupTransform = css<{
    }
    .bp3-control-indicator {
      margin-top: 0;
-      border: 1px solid ${Colors.GREY_3};
-    }
-    input:checked ~ .bp3-control-indicator,
-    &:hover input:checked ~ .bp3-control-indicator {
-      background-color: ${Colors.GREEN};
-    }
-    &:hover {
-      & input:not(:checked) ~ .bp3-control-indicator {
-        border: 1px solid ${Colors.GREY_5} !important;
-      }
+      border: 1px solid ${Colors.GREY_5};
+      box-shadow: none;
+      background-image: none;
+      background-color: white;
    }
  }
 `;
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@ -4,6 +4,7 @@
@import "~design-system/build/css/design-system.css";
@import "theme/colors.css";
@import "theme/defaultTheme.css";
+@import "theme/wds.css";

 body {
  margin: 0;
--- a/app/client/src/theme/defaultTheme.css
+++ b/app/client/src/theme/defaultTheme.css
@ -8,6 +8,6 @@

  /* search input */
  --appsmith-search-input-focus-mobile-border-color: var(--appsmith-color-black-900);
-  --appsmith-search-input-mobile-border-color: var(--appsmith-color-black-400); 
+  --appsmith-search-input-mobile-border-color: var(--appsmith-color-black-400);

 }
--- a/app/client/src/theme/wds.css
+++ b/app/client/src/theme/wds.css
@ -0,0 +1,18 @@
+:root {
+  --wds-color-border: #E0DEDE;
+  --wds-color-border-hover: #B3B3B3;
+
+  --wds-color-border-danger: #D91921;
+  --wds-color-border-danger-hover: #B90707;
+
+  --wds-color-border-disabled: #E0DEDE;
+
+  --wds-color-bg-strong: #E0DEDE;
+  --wds-color-bg-strong-hover: #B3B3B3;
+
+  --wds-color-bg-disabled: #F3F3F3;
+  --wds-color-bg-disabled-strong: #A9A7A7;
+
+  --wds-color-bg-danger: #D91921;
+  --wds-color-bg-danger-hover: #B90707;
+}
--- a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx
+++ b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx
@ -12,7 +12,10 @@ import { TextSize } from "constants/WidgetConstants";

 // TODO(abstraction-issue): this needs to be a common import from somewhere in the platform
 // Alternatively, they need to be replicated.
-import { StyledCheckbox } from "widgets/CheckboxWidget/component";
+import {
+  CheckboxLabel,
+  StyledCheckbox,
+} from "widgets/CheckboxWidget/component";
 import { OptionProps, SelectAllState, SelectAllStates } from "../constants";
 import LabelWithTooltip, {
  labelLayoutStyles,
@ -30,7 +33,7 @@ const InputContainer = styled.div<ThemeProp & InputContainerProps>`
  display: ${({ inline }) => (inline ? "inline-flex" : "flex")};
  ${({ inline }) => `
    flex-direction: ${inline ? "row" : "column"};
-    align-items: ${inline ? "center" : "flex-start"};
+    align-items:  "flex-start";
    ${inline && "flex-wrap: wrap"};
  `}
  justify-content: ${({ inline, optionAlignment, optionCount }) =>
@ -43,12 +46,9 @@ const InputContainer = styled.div<ThemeProp & InputContainerProps>`
      : `center`};
  width: 100%;
  height: ${({ inline }) => (inline ? "32px" : "100%")};
+  flex-grow: 1;
+  height: 100%;
  border: 1px solid transparent;
-  ${({ theme, valid }) =>
-    !valid &&
-    `
-    border: 1px solid ${theme.colors.error};
-  `}

  .${Classes.CONTROL} {
    display: flex;
@ -57,7 +57,7 @@ const InputContainer = styled.div<ThemeProp & InputContainerProps>`
    min-height: 30px;

    .bp3-control-indicator {
-      margin-top: 0;
+      margin-top: 0 !important;
    }
  }
 `;
@ -75,7 +75,6 @@ export const CheckboxGroupContainer = styled.div<CheckboxGroupContainerProps>`
  }
  & .select-all {
    white-space: nowrap;
-    color: ${Colors.GREY_9} !important;
  }
 `;

@ -85,32 +84,42 @@ export interface SelectAllProps {
  indeterminate?: boolean;
  inline?: boolean;
  onChange: React.FormEventHandler<HTMLInputElement>;
-  rowSpace: number;
  accentColor: string;
  borderRadius: string;
+  isDisabled?: boolean;
 }

 function SelectAll(props: SelectAllProps) {
  const {
    accentColor,
+    borderRadius,
    checked,
    disabled,
    indeterminate,
    inline,
+    isDisabled,
    onChange,
-    rowSpace,
  } = props;
  return (
    <StyledCheckbox
      accentColor={accentColor}
+      borderRadius={borderRadius}
      checked={checked}
      className="select-all"
      disabled={disabled}
      indeterminate={indeterminate}
      inline={inline}
-      label="Select All"
+      labelElement={
+        <CheckboxLabel
+          className="t--checkbox-widget-label"
+          disabled={isDisabled}
+          labelPosition={LabelPosition.Left}
+          labelTextColor={disabled ? Colors.GREY_8 : "inherit"}
+        >
+          Select all
+        </CheckboxLabel>
+      }
      onChange={onChange}
-      rowSpace={rowSpace}
    />
  );
 }
@ -126,7 +135,7 @@ export interface CheckboxGroupComponentProps extends ComponentProps {
    state: SelectAllState,
  ) => React.FormEventHandler<HTMLInputElement>;
  options: OptionProps[];
-  rowSpace: number;
+
  selectedValues: string[];
  optionAlignment?: string;
  compactMode: boolean;
@ -160,7 +169,6 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
    onSelectAllChange,
    optionAlignment,
    options,
-    rowSpace,
    selectedValues,
  } = props;

@ -205,7 +213,6 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
        inline={isInline}
        optionAlignment={optionAlignment}
        optionCount={options.length}
-        valid={isValid}
      >
        {isSelectAll && (
          <SelectAll
@ -216,7 +223,6 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
            indeterminate={selectAllIndeterminate}
            inline={isInline}
            onChange={onSelectAllChange(selectAllState)}
-            rowSpace={rowSpace}
          />
        )}
        {options &&
@ -227,12 +233,19 @@ function CheckboxGroupComponent(props: CheckboxGroupComponentProps) {
              borderRadius={borderRadius}
              checked={(selectedValues || []).includes(option.value)}
              disabled={isDisabled}
-              indeterminate={isDisabled ? true : undefined}
+              hasError={!isValid}
              inline={isInline}
              key={generateReactKey()}
-              label={option.label}
+              labelElement={
+                <CheckboxLabel
+                  className="t--checkbox-widget-label"
+                  disabled={isDisabled}
+                  labelPosition={LabelPosition.Left}
+                >
+                  {option.label}
+                </CheckboxLabel>
+              }
              onChange={onChange(option.value)}
-              rowSpace={rowSpace}
            />
          ))}
      </InputContainer>
--- a/app/client/src/widgets/CheckboxGroupWidget/index.ts
+++ b/app/client/src/widgets/CheckboxGroupWidget/index.ts
@ -9,7 +9,7 @@ export const CONFIG = {
  iconSVG: IconSVG,
  needsMeta: true,
  defaults: {
-    rows: 6,
+    rows: 4,
    columns: 23,
    animateLoading: true,
    labelTextSize: "0.875rem",
--- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
+++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx
@ -518,7 +518,6 @@ class CheckboxGroupWidget extends BaseWidget<
        onSelectAllChange={this.handleSelectAllChange}
        optionAlignment={this.props.optionAlignment}
        options={compact(this.props.options)}
-        rowSpace={this.props.parentRowSpace}
        selectedValues={this.props.selectedValues || []}
        widgetId={this.props.widgetId}
      />
--- a/app/client/src/widgets/CheckboxWidget/component/index.tsx
+++ b/app/client/src/widgets/CheckboxWidget/component/index.tsx
@ -1,20 +1,12 @@
 import React from "react";
 import styled from "styled-components";
 import { ComponentProps } from "widgets/BaseComponent";
-import { Alignment, Checkbox, Classes } from "@blueprintjs/core";
+import { Alignment, Classes } from "@blueprintjs/core";
 import { AlignWidgetTypes } from "widgets/constants";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
 import { FontStyleTypes } from "constants/WidgetConstants";
-
-type StyledCheckboxProps = {
-  checked?: boolean;
-  disabled?: boolean;
-  indeterminate?: boolean;
-  rowSpace: number;
-  borderRadius?: string;
-  accentColor?: string;
-};
+import { Checkbox } from "components/wds/Checkbox";

 type StyledCheckboxContainerProps = {
  isValid: boolean;
@ -26,24 +18,15 @@ const DEFAULT_BACKGROUND_COLOR = Colors.GREEN_SOLID;

 const CheckboxContainer = styled.div<StyledCheckboxContainerProps>`
  && {
-    padding: ${({ noContainerPadding }) =>
-      noContainerPadding ? 0 : "9px 12px"};
    align-items: center;
    display: flex;
    height: 100%;
-    justify-content: flex-start;
+    justify-content: start;
    width: 100%;
-    .${Classes.CHECKBOX} {
-      width: 100%;
-    }
-    & .bp3-control-indicator {
-      border: ${(props) =>
-        !props.isValid && `1px solid ${props.theme.colors.error} !important`};
-    }
  }
 `;

-const CheckboxLabel = styled.div<{
+export const CheckboxLabel = styled.div<{
  disabled?: boolean;
  labelPosition: LabelPosition;
  labelTextColor?: string;
@ -64,52 +47,7 @@ const CheckboxLabel = styled.div<{
  `}
 `;

-export const StyledCheckbox = styled(Checkbox)<StyledCheckboxProps>`
-  height: ${({ rowSpace }) => rowSpace}px;
-  color: ${({ checked }) => (checked ? Colors.GREY_10 : Colors.GREY_9)};
-  &.bp3-control.bp3-checkbox .bp3-control-indicator {
-    border-radius: ${({ borderRadius }) => borderRadius};
-    border: 1px solid ${Colors.GREY_3};
-    box-shadow: none !important;
-    outline: none !important;
-    background: transparent;
-    ${({ accentColor, checked, indeterminate }) =>
-      checked || indeterminate
-        ? `
-        background-color: ${accentColor} !important;
-        background-image: none;
-        border: none !important;
-        `
-        : ``}
-    ${({ checked }) =>
-      checked &&
-      `
-      &::before {
-          background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='14' /%3E%3Cpath d='M10.1039 3.5L11 4.40822L5.48269 10L2.5 6.97705L3.39613 6.06883L5.48269 8.18305L10.1039 3.5Z' fill='white'/%3E%3C/svg%3E%0A") !important;
-        }
-    `}
-    ${({ disabled }) => (disabled ? `opacity: 0.5;` : ``)}
-  }
-  &:hover {
-    &.bp3-control.bp3-checkbox .bp3-control-indicator {
-      ${({ disabled }) =>
-        disabled ? "" : `border: 1px solid ${Colors.GREY_5}`};
-      ${({ checked, indeterminate }) =>
-        checked || indeterminate
-          ? `
-        background-image: linear-gradient(
-          0deg,
-          rgba(0, 0, 0, 0.2),
-          rgba(0, 0, 0, 0.2)
-        );
-        `
-          : ""};
-    }
-  }
-  &.${Classes.CONTROL}.${Classes.DISABLED} {
-    color: ${Colors.GREY_8};
-  }
-`;
+export const StyledCheckbox = Checkbox;

 class CheckboxComponent extends React.Component<CheckboxComponentProps> {
  render() {
@ -142,6 +80,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
            this.props.isLoading ? Classes.SKELETON : Classes.RUNNING_TEXT
          }
          disabled={this.props.isDisabled}
+          hasError={!isValid}
          inputRef={this.props.inputRef}
          labelElement={
            <CheckboxLabel
@ -156,7 +95,6 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
            </CheckboxLabel>
          }
          onChange={this.onCheckChange}
-          rowSpace={this.props.rowSpace}
        />
      </CheckboxContainer>
    );
--- a/app/client/src/widgets/RadioGroupWidget/component/index.tsx
+++ b/app/client/src/widgets/RadioGroupWidget/component/index.tsx
@ -43,6 +43,13 @@ const StyledRadioGroup = styled(RadioGroup)<StyledRadioGroupProps>`
      background: ${({ accentColor }) => `${accentColor}`} !important;
      border: 1px solid ${({ accentColor }) => `${accentColor}`} !important;
    }
+
+    & input:disabled:checked ~ .${Classes.CONTROL_INDICATOR} {
+      &:before {
+       opacity: 1;
+       background-image: radial-gradient(var( --wds-color-bg-disabled-strong), var( --wds-color-bg-disabled-strong) 28%, transparent 32%)
+      }
+    }
  }

  .${Classes.SWITCH} {
@ -70,6 +77,7 @@ function RadioGroupComponent(props: RadioGroupComponentProps) {
    loading,
    onRadioSelectionChange,
    options,
+    required,
    selectedOptionValue,
  } = props;

@ -125,6 +133,7 @@ function RadioGroupComponent(props: RadioGroupComponentProps) {
              inline={inline}
              key={optInd}
              label={option.label}
+              required={required}
              value={option.value}
            />
          );
@ -153,6 +162,7 @@ export interface RadioGroupComponentProps extends ComponentProps {
  widgetId: string;
  height?: number;
  accentColor: string;
+  required?: boolean;
 }

 export default RadioGroupComponent;
--- a/app/client/src/widgets/RadioGroupWidget/index.ts
+++ b/app/client/src/widgets/RadioGroupWidget/index.ts
@ -10,7 +10,7 @@ export const CONFIG = {
  needsMeta: true,
  searchTags: ["choice"],
  defaults: {
-    rows: 8,
+    rows: 4,
    columns: 20,
    animateLoading: true,
    label: "Label",
--- a/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
+++ b/app/client/src/widgets/RadioGroupWidget/widget/index.tsx
@ -515,6 +515,7 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
        loading={isLoading}
        onRadioSelectionChange={this.onRadioSelectionChange}
        options={isArray(options) ? compact(options) : []}
+        required={this.props.isRequired}
        selectedOptionValue={selectedOptionValue}
        widgetId={widgetId}
      />
--- a/app/client/src/widgets/SwitchGroupWidget/index.ts
+++ b/app/client/src/widgets/SwitchGroupWidget/index.ts
@ -11,7 +11,7 @@ export const CONFIG = {
  isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
  defaults: {
    widgetName: "SwitchGroup",
-    rows: 6,
+    rows: 4,
    columns: 26,
    options: [
      { label: "Blue", value: "BLUE" },
--- a/app/client/src/widgets/SwitchWidget/component/index.tsx
+++ b/app/client/src/widgets/SwitchWidget/component/index.tsx
@ -7,6 +7,7 @@ import { ComponentProps } from "widgets/BaseComponent";
 import { AlignWidgetTypes } from "widgets/constants";
 import { Colors } from "constants/Colors";
 import { FontStyleTypes } from "constants/WidgetConstants";
+import { darkenColor } from "widgets/WidgetUtils";

 export interface SwitchComponentProps extends ComponentProps {
  label: string;
@ -66,6 +67,13 @@ export const StyledSwitch = styled(Switch)<{
      background: ${({ accentColor }) => `${accentColor}`} !important;
      border: 1px solid ${({ accentColor }) => `${accentColor}`} !important;
    }
+
+    &:hover input:checked:not(:disabled) ~ .bp3-control-indicator {
+      background: ${({ accentColor }) =>
+        `${darkenColor(accentColor)}`} !important;
+      border: 1px solid ${({ accentColor }) =>
+        `${darkenColor(accentColor)}`} !important;
+    }
  }

  &.${Classes.SWITCH} {