From d75292c36afddc3ab433655a5022c3f4bfae704f Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 17 Jan 2024 16:42:32 +0530 Subject: [PATCH 1/2] fix: Radio, Checkbox - child span issue --- .../src/Checkbox/Checkbox.constants.ts | 1 + .../src/Checkbox/Checkbox.styles.tsx | 26 ++++++++++--------- .../design-system/src/Checkbox/Checkbox.tsx | 7 +++-- .../src/Radio/Radio.constants.ts | 1 + .../design-system/src/Radio/Radio.styles.tsx | 18 ++++++++----- packages/design-system/src/Radio/Radio.tsx | 8 ++++-- 6 files changed, 38 insertions(+), 23 deletions(-) diff --git a/packages/design-system/src/Checkbox/Checkbox.constants.ts b/packages/design-system/src/Checkbox/Checkbox.constants.ts index 3d05e037d..15537d0d5 100644 --- 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 index f7dd4e64d..666aecfbf 100644 --- 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,7 +113,7 @@ export const StyledCheckbox = styled.label<{ ); } - span::after { + span${"." + CheckboxClassNameSquare}::after { opacity: 1; left: 2px; top: 6px; @@ -119,7 +121,7 @@ export const StyledCheckbox = styled.label<{ 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 index 3a0f691fc..95b67d03f 100644 --- 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} - + ); } diff --git a/packages/design-system/src/Radio/Radio.constants.ts b/packages/design-system/src/Radio/Radio.constants.ts index f2d32e08e..96560d438 100644 --- 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 index 2512c9110..6f8ff67ea 100644 --- 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 index beb9d68fa..b193586de 100644 --- 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} - + ); } From e8d0e5220713ba235148078e744f2aaff09daa20 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 17 Jan 2024 16:46:01 +0530 Subject: [PATCH 2/2] Create few-shrimps-appear.md --- .changeset/few-shrimps-appear.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/few-shrimps-appear.md diff --git a/.changeset/few-shrimps-appear.md b/.changeset/few-shrimps-appear.md new file mode 100644 index 000000000..060527dcd --- /dev/null +++ b/.changeset/few-shrimps-appear.md @@ -0,0 +1,5 @@ +--- +"@appsmithorg/design-system": patch +--- + +fix: Radio, Checkbox - child span issue