From f66e5a162fc55fe4a755519e13434706d47e027d Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Tue, 26 Mar 2024 16:56:36 +0530 Subject: [PATCH 1/3] feat(blade): radio & checkbox large size (#2092) --- .../components/Checkbox/Checkbox.stories.tsx | 7 + .../src/components/Checkbox/Checkbox.tsx | 23 ++- .../Checkbox/CheckboxGroup.stories.tsx | 6 + .../Checkbox/CheckboxGroup/CheckboxGroup.tsx | 10 +- .../Checkbox/CheckboxIcon/CheckboxIcon.tsx | 16 +- .../Checkbox.native.test.tsx.snap | 2 +- .../__snapshots__/Checkbox.web.test.tsx.snap | 4 +- .../CheckboxGroup.native.test.tsx.snap | 8 +- .../CheckboxGroup.ssr.test.tsx.snap | 88 +++++----- .../CheckboxGroup.web.test.tsx.snap | 156 +++++++++--------- .../src/components/Checkbox/checkboxTokens.ts | 16 +- .../Form/Selector/SelectorSupportText.tsx | 9 +- .../Form/Selector/SelectorTitle.tsx | 2 +- .../src/components/Radio/Radio.stories.tsx | 6 + packages/blade/src/components/Radio/Radio.tsx | 16 +- .../Radio/RadioGroup/RadioGroup.tsx | 9 +- .../__snapshots__/Radio.ssr.test.tsx.snap | 74 +++++---- .../RadioGroup.native.test.tsx.snap | 8 +- .../RadioGroup.ssr.test.tsx.snap | 76 +++++---- .../RadioGroup.web.test.tsx.snap | 138 ++++++++-------- .../blade/src/components/Radio/radioTokens.ts | 17 +- 21 files changed, 402 insertions(+), 289 deletions(-) diff --git a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx index 3e8d1837c6f..66d86b4f518 100644 --- a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx @@ -105,6 +105,13 @@ Small.args = { size: 'small', }; +export const Large = CheckboxTemplate.bind({}); +Large.storyName = 'Large'; +Large.args = { + size: 'large', + helpText: 'Checkbox help text', +}; + export const Indeterminate = CheckboxTemplate.bind({}); Indeterminate.storyName = 'Indeterminate'; Indeterminate.args = { diff --git a/packages/blade/src/components/Checkbox/Checkbox.tsx b/packages/blade/src/components/Checkbox/Checkbox.tsx index a27ffee2595..5abe8b90094 100644 --- a/packages/blade/src/components/Checkbox/Checkbox.tsx +++ b/packages/blade/src/components/Checkbox/Checkbox.tsx @@ -1,9 +1,10 @@ +/* eslint-disable @typescript-eslint/restrict-plus-operands */ /* eslint-disable @typescript-eslint/no-shadow */ import React from 'react'; import { useCheckboxGroupContext } from './CheckboxGroup/CheckboxGroupContext'; import { CheckboxIcon } from './CheckboxIcon'; import { useCheckbox } from './useCheckbox'; -import { checkboxHoverTokens } from './checkboxTokens'; +import { checkboxHoverTokens, checkboxSizes } from './checkboxTokens'; import isEmpty from '~utils/lodashButBetter/isEmpty'; import isUndefined from '~utils/lodashButBetter/isUndefined'; import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; @@ -18,6 +19,7 @@ import { SelectorInput } from '~components/Form/Selector/SelectorInput'; import type { BladeElementRef, TestID } from '~utils/types'; import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects'; import { throwBladeError } from '~utils/logger'; +import { makeSize, useTheme } from '~utils'; type OnChange = ({ isChecked, @@ -101,7 +103,7 @@ type CheckboxProps = { * * @default "medium" */ - size?: 'small' | 'medium'; + size?: 'small' | 'medium' | 'large'; /** * Sets the tab-index property on checkbox element * @@ -184,7 +186,12 @@ const _Checkbox: React.ForwardRefRenderFunction // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion const _isChecked = isChecked ?? groupProps?.state?.isChecked(value!); const _size = groupProps.size ?? size; - const isSmall = _size === 'small'; + const { theme } = useTheme(); + const formHintSize = { + small: 'medium', + medium: 'medium', + large: 'large', + } as const; // only show error when the self validation is set to error // Since we don't want to show errorText inside the group @@ -213,6 +220,9 @@ const _Checkbox: React.ForwardRefRenderFunction onChange: handleChange, }); + // Checkbox icon's size & margin + margin-left of SelectorTitle which is 2 + const helpTextLeftSpacing = makeSize(checkboxSizes.icon[size].width + theme.spacing[3]); + return ( ) : null} {showSupportingText ? ( - - {helpText} + + + {helpText} + ) : null} @@ -146,6 +152,7 @@ const CheckboxGroup = ({ position={labelPosition} id={ids.labelId} accessibilityText={accessibilityText} + size={formHintSize[size]} > {label} @@ -164,6 +171,7 @@ const CheckboxGroup = ({ })} { +const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' | 'large' }) => { const width = makeSpace(svgSize[size].width); const height = makeSpace(svgSize[size].height); @@ -42,7 +46,13 @@ const CheckedIcon = ({ color, size }: { color: string; size: 'small' | 'medium' ); }; -const IndeterminateIcon = ({ color, size }: { color: string; size: 'small' | 'medium' }) => { +const IndeterminateIcon = ({ + color, + size, +}: { + color: string; + size: 'small' | 'medium' | 'large'; +}) => { const width = makeSpace(svgSize[size].width); const height = makeSpace(svgSize[size].height); @@ -67,7 +77,7 @@ export type CheckboxIconProps = { isNegative?: boolean; isChecked?: boolean; isIndeterminate?: boolean; - size: 'small' | 'medium'; + size: 'small' | 'medium' | 'large'; }; const CheckboxIcon = ({ diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap index a83517d11db..949b840c06c 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap @@ -348,7 +348,7 @@ exports[` should set error state with validationState 1`] = ` } > should set error state with validationState 1`] = ` should set error state with validationState 1`] = `
should render with label 1`] = ` style={ [ { - "marginBottom": 8, + "marginBottom": 12, }, ] } @@ -357,7 +357,7 @@ exports[` should render with label 1`] = ` style={ [ { - "marginBottom": 8, + "marginBottom": 12, }, ] } @@ -883,7 +883,7 @@ exports[` should render with label 2`] = ` style={ [ { - "marginBottom": 8, + "marginBottom": 12, }, ] } @@ -1050,7 +1050,7 @@ exports[` should render with label 2`] = ` style={ [ { - "marginBottom": 8, + "marginBottom": 12, }, ] } diff --git a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap index c49d1cb640f..6da608b1c87 100644 --- a/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap +++ b/packages/blade/src/components/Checkbox/__tests__/__snapshots__/CheckboxGroup.ssr.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render errorText when validationState is set to error 1`] = `"

Select fruits

,Invalid selection

Invalid selection
"`; +exports[` should render errorText when validationState is set to error 1`] = `"

Select fruits

,Invalid selection

Invalid selection
"`; exports[` should render errorText when validationState is set to error 2`] = ` -.c9.c9.c9.c9.c9 { +.c10.c10.c10.c10.c10 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -30,7 +30,7 @@ exports[` should render errorText when validationState is set t border-color: hsla(4,74%,49%,1); } -.c10.c10.c10.c10.c10 { +.c11.c11.c11.c11.c11 { -webkit-animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1); animation: gYwSSW-450290765 150ms cubic-bezier(0.17,0,1,1); } @@ -68,7 +68,11 @@ exports[` should render errorText when validationState is set t gap: 0px; } -.c7.c7.c7.c7.c7 { +.c6.c6.c6.c6.c6 { + margin-bottom: 8px; +} + +.c8.c8.c8.c8.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -78,19 +82,19 @@ exports[` should render errorText when validationState is set t flex-direction: row; } -.c11.c11.c11.c11.c11 { +.c12.c12.c12.c12.c12 { margin-left: 4px; } -.c13.c13.c13.c13.c13 { +.c14.c14.c14.c14.c14 { margin-bottom: 0px; } -.c14.c14.c14.c14.c14 { +.c15.c15.c15.c15.c15 { margin-top: 4px; } -.c15.c15.c15.c15.c15 { +.c16.c16.c16.c16.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -104,7 +108,7 @@ exports[` should render errorText when validationState is set t align-items: center; } -.c16.c16.c16.c16.c16 { +.c17.c17.c17.c17.c17 { margin-right: 4px; } @@ -147,7 +151,7 @@ exports[` should render errorText when validationState is set t padding: 0; } -.c12.c12.c12.c12.c12 { +.c13.c13.c13.c13.c13 { color: hsla(211,26%,34%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.875rem; @@ -164,7 +168,7 @@ exports[` should render errorText when validationState is set t padding: 0; } -.c17.c17.c17.c17.c17 { +.c18.c18.c18.c18.c18 { color: hsla(4,74%,49%,1); font-family: "Inter","Inter Fallback Arial",Arial; font-size: 0.6875rem; @@ -198,7 +202,7 @@ exports[` should render errorText when validationState is set t word-wrap: normal; } -.c6.c6.c6.c6.c6 { +.c7.c7.c7.c7.c7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -207,7 +211,7 @@ exports[` should render errorText when validationState is set t margin-bottom: 2px; } -.c8.c8.c8.c8.c8 { +.c9.c9.c9.c9.c9 { border: 0; -webkit-clip: rect(0 0 0 0); clip: rect(0 0 0 0); @@ -224,7 +228,7 @@ exports[` should render errorText when validationState is set t word-wrap: normal; } -.c8.c8.c8.c8.c8:focus-visible + div { +.c9.c9.c9.c9.c9:focus-visible + div { outline: 4px solid hsla(227,100%,59%,0.18); outline-offset: 1px; -webkit-transition-property: outline-width; @@ -290,7 +294,7 @@ exports[` should render errorText when validationState is set t data-blade-component="base-box" >
should render errorText when validationState is set t data-blade-component="checkbox" >