Merge pull request #693 from appsmithorg/fix-radio-span-issue

fix: Radio, Checkbox - child span issue
appsmithorg · Jan 17, 2024 · 9f01bd0 · 9f01bd0
2 parents ba11fdd + e8d0e52
commit 9f01bd0
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 23 deletions.
diff --git a/.changeset/few-shrimps-appear.md b/.changeset/few-shrimps-appear.md
@@ -0,0 +1,5 @@
+---
+"@appsmithorg/design-system": patch
+---
+
+fix: Radio, Checkbox - child span issue
diff --git a/packages/design-system/src/Checkbox/Checkbox.constants.ts b/packages/design-system/src/Checkbox/Checkbox.constants.ts
@@ -2,3 +2,4 @@ import { CLASS_NAME_PREFIX } from "__config__/constants";
 
 export const CheckboxClassName = `${CLASS_NAME_PREFIX}-checkbox`;
 export const CheckboxClassNameLabel = `${CheckboxClassName}__label`;
+export const CheckboxClassNameSquare = `${CheckboxClassName}__square`;
diff --git a/packages/design-system/src/Checkbox/Checkbox.styles.tsx b/packages/design-system/src/Checkbox/Checkbox.styles.tsx
@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { CheckboxClassNameSquare } from "./Checkbox.constants";
 
 const Variables = css`
   /* This is a category level token.Since this is specific to checkbox, it is added here. */
@@ -34,7 +35,7 @@ const Checkbox = css`
     cursor: pointer;
   }
 
-  span {
+  span${"." + CheckboxClassNameSquare} {
     position: absolute;
     left: 0;
     top: 0;
@@ -47,12 +48,12 @@ const Checkbox = css`
     transition: background-color 200ms ease, border 200ms ease;
   }
 
-  input[type="checkbox"]:checked + span {
+  input[type="checkbox"]:checked + span${"." + CheckboxClassNameSquare} {
     --checkbox-color-border: var(--ads-v2-colors-control-field-checked-border);
     --checkbox-color-background: var(--ads-v2-colors-control-field-checked-bg);
   }
 
-  span::after {
+  span${"." + CheckboxClassNameSquare}::after {
     content: "";
     opacity: 0;
     position: absolute;
@@ -66,11 +67,11 @@ const Checkbox = css`
     z-index: 2;
   }
 
-  input[type="checkbox"]:checked + span::after {
+  input[type="checkbox"]:checked + span${"." + CheckboxClassNameSquare}::after {
     opacity: 1;
   }
 
-  span::before {
+  span${"." + CheckboxClassNameSquare}::before {
     content: "";
     opacity: 0;
     position: absolute;
@@ -84,7 +85,8 @@ const Checkbox = css`
     z-index: 2;
   }
 
-  input[type="checkbox"]:checked + span::before {
+  input[type="checkbox"]:checked
+    + span${"." + CheckboxClassNameSquare}::before {
     opacity: 1;
   }
 `;
@@ -102,7 +104,7 @@ export const StyledCheckbox = styled.label<{
   ${({ isIndeterminate }) => {
     if (isIndeterminate) {
       return css`
-        span {
+        span${"." + CheckboxClassNameSquare} {
           --checkbox-color-border: var(
             --ads-v2-colors-control-field-checked-border
           );
@@ -111,15 +113,15 @@ export const StyledCheckbox = styled.label<{
           );
         }
 
-        span::after {
+        span${"." + CheckboxClassNameSquare}::after {
           opacity: 1;
           left: 2px;
           top: 6px;
           width: 10px;
           transform: rotateZ(0deg);
         }
 
-        span::before {
+        span${"." + CheckboxClassNameSquare}::before {
           display: none;
         }
       `;
@@ -129,7 +131,7 @@ export const StyledCheckbox = styled.label<{
   ${({ isFocusVisible }) => {
     if (isFocusVisible === true) {
       return css`
-        span {
+        span${"." + CheckboxClassNameSquare} {
           outline: var(--ads-v2-border-width-outline) solid
             var(--ads-v2-color-outline);
           outline-offset: var(--ads-v2-offset-outline);
@@ -150,7 +152,7 @@ export const StyledCheckbox = styled.label<{
     } else {
       return isChecked
         ? css`
-            &:hover > span {
+            &:hover > span${"." + CheckboxClassNameSquare} {
               --checkbox-color-background: var(
                 --ads-v2-colors-control-field-checked-hover-bg
               ) !important;
@@ -160,7 +162,7 @@ export const StyledCheckbox = styled.label<{
             }
           `
         : css`
-            &:hover > span {
+            &:hover > span${"." + CheckboxClassNameSquare} {
               --checkbox-color-border: var(
                 --ads-v2-colors-control-field-hover-border
               );

diff --git a/packages/design-system/src/Checkbox/Checkbox.tsx b/packages/design-system/src/Checkbox/Checkbox.tsx
@@ -6,7 +6,10 @@ import clsx from "classnames";
 
 import { CheckboxProps } from "./Checkbox.types";
 import { StyledCheckbox } from "./Checkbox.styles";
-import { CheckboxClassName } from "./Checkbox.constants";
+import {
+  CheckboxClassName,
+  CheckboxClassNameSquare,
+} from "./Checkbox.constants";
 
 function Checkbox(props: CheckboxProps) {
   const { children, className, isDisabled, isIndeterminate } = props;
@@ -26,7 +29,7 @@ function Checkbox(props: CheckboxProps) {
     >
       {children}
       <input {...inputProps} {...focusProps} ref={ref} />
-      <span />
+      <span className={CheckboxClassNameSquare} />
     </StyledCheckbox>
   );
 }

diff --git a/packages/design-system/src/Radio/Radio.constants.ts b/packages/design-system/src/Radio/Radio.constants.ts
@@ -2,5 +2,6 @@ import { CLASS_NAME_PREFIX } from "__config__/constants";
 
 export const RadioClassName = `${CLASS_NAME_PREFIX}-radio`;
 export const RadioLabelClassName = `${RadioClassName}__label`;
+export const RadioDotClassName = `${RadioClassName}__dot`;
 
 export const RadioGroupClassName = `${CLASS_NAME_PREFIX}-radio-group`;
diff --git a/packages/design-system/src/Radio/Radio.styles.tsx b/packages/design-system/src/Radio/Radio.styles.tsx
@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { RadioDotClassName } from "./Radio.constants";
 
 const Variables = css`
   --ads-v2-colors-control-radio-dot-checked-bg: var(
@@ -25,7 +26,7 @@ const BasicStyles = css`
   font-family: var(--ads-v2-font-family);
   color: var(--radio-color-label);
 
-  span::before {
+  span${"." + RadioDotClassName}::before {
     content: "";
     position: absolute;
     width: var(--ads-v2-spaces-5);
@@ -39,7 +40,7 @@ const BasicStyles = css`
     transition: border-color 400ms ease;
   }
 
-  span::after {
+  span${"." + RadioDotClassName}::after {
     content: "";
     position: absolute;
     width: var(--ads-v2-spaces-5);
@@ -53,27 +54,30 @@ const BasicStyles = css`
     transition: transform 200ms ease;
   }
 
-  input[type="radio"]:checked + span::before {
+  input[type="radio"]:checked + span${"." + RadioDotClassName}::before {
     --radio-color-border: var(--ads-v2-colors-control-field-checked-border);
   }
 
-  input[type="radio"]:checked + span::after {
+  input[type="radio"]:checked + span${"." + RadioDotClassName}::after {
     transform: translateY(-50%) scale(0.55);
   }
 
   /* unchecked hover - outer circle */
-  input[type="radio"]:hover:not(:disabled) + span::before {
+  input[type="radio"]:hover:not(:disabled)
+    + span${"." + RadioDotClassName}::before {
     --radio-color-border: var(--ads-v2-colors-control-field-hover-border);
   }
   /* checked hover - outer circle */
-  input[type="radio"]:checked:hover:not(:disabled) + span::before {
+  input[type="radio"]:checked:hover:not(:disabled)
+    + span${"." + RadioDotClassName}::before {
     --radio-color-border: var(
       --ads-v2-colors-control-field-checked-hover-border
     );
   }
 
   /* checked hover - inner circle */
-  input[type="radio"]:checked:hover:not(:disabled) + span::after {
+  input[type="radio"]:checked:hover:not(:disabled)
+    + span${"." + RadioDotClassName}::after {
     --radio-color-dot: var(--ads-v2-colors-control-radio-dot-checked-hover-bg);
   }
 `;

diff --git a/packages/design-system/src/Radio/Radio.tsx b/packages/design-system/src/Radio/Radio.tsx
@@ -6,7 +6,11 @@ import clsx from "classnames";
 
 import { StyledRadio, StyledRadioGroup } from "./Radio.styles";
 import { RadioProps, RadioGroupProps } from "./Radio.types";
-import { RadioClassName, RadioGroupClassName } from "./Radio.constants";
+import {
+  RadioClassName,
+  RadioDotClassName,
+  RadioGroupClassName,
+} from "./Radio.constants";
 
 const RadioContext = React.createContext({} as RadioGroupState);
 
@@ -43,7 +47,7 @@ export function Radio(props: RadioProps) {
     >
       {children}
       <input {...inputProps} {...focusProps} ref={ref} />
-      <span />
+      <span className={RadioDotClassName} />
     </StyledRadio>
   );
 }