From 9f2de67d12319744ba514885c5483279395c0a4c Mon Sep 17 00:00:00 2001 From: ivanzinchenko Date: Mon, 13 May 2024 18:37:50 +0300 Subject: [PATCH 1/7] GOOD-181 add dark checkbox styles --- src/form/Checkbox/Checkbox.story.tsx | 24 ++++++++++ src/form/Checkbox/Checkbox.tsx | 70 +++++++++++++++++++--------- src/form/Checkbox/CheckboxLabel.tsx | 40 ++++++++++++++++ src/form/Checkbox/CheckboxTheme.ts | 52 +++++++++++++++------ 4 files changed, 149 insertions(+), 37 deletions(-) create mode 100644 src/form/Checkbox/CheckboxLabel.tsx diff --git a/src/form/Checkbox/Checkbox.story.tsx b/src/form/Checkbox/Checkbox.story.tsx index 9b0fbd1d..45293c29 100644 --- a/src/form/Checkbox/Checkbox.story.tsx +++ b/src/form/Checkbox/Checkbox.story.tsx @@ -11,6 +11,30 @@ export const Simple = () => { return ; }; +export const WithoutLabel = () => { + const [state, setState] = useState(true); + return ; +}; + +export const LabelPosition = () => { + const [state, setState] = useState(true); + return ( + +
+ +
+
+ +
+ + ); +}; + export const Intermediate = () => { const [state, setState] = useState(true); return ( diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx index 14b7bc3c..9e89c8a9 100644 --- a/src/form/Checkbox/Checkbox.tsx +++ b/src/form/Checkbox/Checkbox.tsx @@ -1,8 +1,9 @@ -import React, { FC, forwardRef, LegacyRef } from 'react'; +import React, { FC, forwardRef, LegacyRef, useCallback } from 'react'; import { motion, useMotionValue, useTransform } from 'framer-motion'; import { twMerge } from 'tailwind-merge'; import { CheckboxTheme } from './CheckboxTheme'; import { useComponentTheme } from '@/utils'; +import { CheckboxLabel } from './CheckboxLabel'; export interface CheckboxProps { /** @@ -20,6 +21,11 @@ export interface CheckboxProps { */ label?: string; + /** + * Label position of checkbox. + */ + labelPosition?: 'left' | 'right'; + /** * Whether the checkbox is disabled or not. */ @@ -88,13 +94,14 @@ export const Checkbox: FC = forwardRef( label, disabled, size = 'medium', + labelPosition = 'right', onChange, onBlur, className, containerClassName, labelClassName, - borderPath = 'M 0 0 L 0 16 L 16 16 L 16 0 Z', - checkedPath = 'M 5.36396 8.17792 L 7.34236 9.91424 L 10.6044 5.832', + borderPath = 'M 1 0 L 16 0 C 16.552 0 17 0.448 17 1 L 17 15 C 17 15.552 16.552 16 16 16 L 1 16 C 0.448 16 0 15.552 0 15 L 0 1 C 0 0.448 0.448 0 1 0 Z', + checkedPath = 'M 4 8 L 8 12 L 12 4', intermediatePath = 'M 5.36396 8.17792 L 10.6044 8.17792', theme: customTheme, ...rest @@ -111,8 +118,30 @@ export const Checkbox: FC = forwardRef( unchecked: { pathLength: 0 } }; + const handleOnChange = useCallback(() => { + if (!disabled && onChange) { + onChange(!checked); + } + }, [disabled, onChange, checked]); + return ( -
+
+ {labelPosition === 'left' && label && ( + + )} = forwardRef( className={twMerge( theme.checkbox, disabled && theme.disabled, + checked && theme.checked, theme.sizes[size], className )} @@ -145,7 +175,11 @@ export const Checkbox: FC = forwardRef( height={16} > @@ -172,23 +206,15 @@ export const Checkbox: FC = forwardRef( )} - {label && ( - { - if (!disabled && onChange) { - onChange?.(!checked); - } - }} - > - {label} - + {labelPosition === 'right' && label && ( + )}
); diff --git a/src/form/Checkbox/CheckboxLabel.tsx b/src/form/Checkbox/CheckboxLabel.tsx new file mode 100644 index 00000000..dc740faa --- /dev/null +++ b/src/form/Checkbox/CheckboxLabel.tsx @@ -0,0 +1,40 @@ +import React, { FC } from 'react'; +import { twMerge } from 'tailwind-merge'; +import { CheckboxTheme } from './CheckboxTheme'; + +interface CheckboxLabelProps { + label: string; + size: 'small' | 'medium' | 'large'; + disabled?: boolean; + onChange?: () => void; + labelClassName?: string; + theme: CheckboxTheme; +} + +export const CheckboxLabel: FC = ({ + label, + size, + disabled, + onChange, + labelClassName, + theme +}) => { + return ( + { + if (!disabled && onChange) { + onChange(); + } + }} + > + {label} + + ); +}; diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index c949b016..5082c4f1 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -15,6 +15,7 @@ export interface CheckboxTheme { check: string; checkbox: string; disabled: string; + checked: string; sizes: { small: string; medium: string; @@ -51,11 +52,12 @@ const baseTheme: Partial = { large: 'text-lg' } }, - check: '', + check: 'check', border: '', checkbox: - 'flex items-center justify-center cursor-pointer focus-visible:outline-none', - disabled: 'opacity-60 cursor-not-allowed', + 'checkbox flex items-center justify-center cursor-pointer focus-visible:outline-none', + checked: 'checked', + disabled: 'disabled opacity-60 cursor-not-allowed', sizes: { small: '[&>svg]:w-3 [&>svg]:min-h-3', medium: '[&>svg]:w-4 [&>svg]:h-4', @@ -65,26 +67,46 @@ const baseTheme: Partial = { export const checkboxTheme: CheckboxTheme = { ...baseTheme, - checkbox: [baseTheme.checkbox, 'fill-transparent border border-surface'].join( + base: [ + baseTheme.base, + 'group', + // label + 'dark:text-waterloo light:text-charade', + '[&.checked]:text-athens-gray', + + // disabled + 'hover:[&>.disabled]:text-athens-gray', + '[&>.checkbox.disabled]:fill-gray-500' + ].join(' '), + checkbox: [ + baseTheme.checkbox, + 'fill-transparent border border-surface', + 'group-hover:[&.checked]:fill-blue-300', + '[&.checked]:fill-blue-500' + ].join(' '), + check: [baseTheme.check, 'stroke-white', 'group-hover:stroke-black'].join( ' ' ), - check: [baseTheme.check, 'stroke-primary'].join(' '), + border: [ + baseTheme.border, + 'stroke-slate-500', + '[&.checked]:stroke-blue-500', + 'group-hover:stroke-blue-300', + '[&.disabled]:stroke-gray-500' + ].join(' '), + label: { ...baseTheme.label, - base: [baseTheme.label.base, 'text-surface-content'].join(' ') + base: [ + baseTheme.label.base, + 'text-surface-content text-inherit group-hover:text-blue-300' + ].join(' ') }, boxVariants: { hover: { - strokeWidth: 2, - stroke: TWConfig.colors.slate[400] + strokeWidth: 1 }, - pressed: { scale: 0.95 }, - checked: { - stroke: TWConfig.colors.primary['active'] - }, - unchecked: { - stroke: TWConfig.colors.slate[500] - } + pressed: { scale: 0.95 } } } as CheckboxTheme; From 81b96d695beb97bf75f1fdce8cc128f192207607 Mon Sep 17 00:00:00 2001 From: ivanzinchenko Date: Tue, 14 May 2024 10:02:13 +0300 Subject: [PATCH 2/7] GOOD-181 add light checkbox styles and refactoring --- src/form/Checkbox/Checkbox.story.tsx | 20 +++++++++- src/form/Checkbox/Checkbox.tsx | 8 +++- src/form/Checkbox/CheckboxLabel.tsx | 3 ++ src/form/Checkbox/CheckboxTheme.ts | 58 +++++++++++++++++----------- 4 files changed, 64 insertions(+), 25 deletions(-) diff --git a/src/form/Checkbox/Checkbox.story.tsx b/src/form/Checkbox/Checkbox.story.tsx index 45293c29..2c1c4f73 100644 --- a/src/form/Checkbox/Checkbox.story.tsx +++ b/src/form/Checkbox/Checkbox.story.tsx @@ -105,8 +105,26 @@ export const Sizes = () => { export const Disabled = () => { const [state, setState] = useState(true); + const [state2, setState2] = useState(false); return ( - + <> +
+ +
+
+ +
+ ); }; diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx index 9e89c8a9..8db8ea5c 100644 --- a/src/form/Checkbox/Checkbox.tsx +++ b/src/form/Checkbox/Checkbox.tsx @@ -136,6 +136,7 @@ export const Checkbox: FC = forwardRef( = forwardRef( d={checkedPath} fill="transparent" strokeWidth="1" - className={theme.check} + className={twMerge( + theme.check, + disabled && theme.disabled, + checked && theme.checked + )} variants={checkVariants} style={{ pathLength, opacity }} custom={checked} @@ -210,6 +215,7 @@ export const Checkbox: FC = forwardRef( void; labelClassName?: string; theme: CheckboxTheme; @@ -15,6 +16,7 @@ export const CheckboxLabel: FC = ({ label, size, disabled, + checked, onChange, labelClassName, theme @@ -25,6 +27,7 @@ export const CheckboxLabel: FC = ({ theme.label.base, theme.label.sizes[size], disabled && theme.disabled, + checked && theme.checked, !disabled && onChange && theme.label.clickable, labelClassName )} diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index 5082c4f1..e858e994 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -1,5 +1,3 @@ -import TWConfig from '@/utils/Theme/config'; - export interface CheckboxTheme { base: string; label: { @@ -42,7 +40,7 @@ export interface CheckboxTheme { } const baseTheme: Partial = { - base: 'inline-flex items-center w-full', + base: 'inline-flex items-center w-full group', label: { base: 'ml-2.5 w-full', clickable: 'cursor-pointer', @@ -57,7 +55,7 @@ const baseTheme: Partial = { checkbox: 'checkbox flex items-center justify-center cursor-pointer focus-visible:outline-none', checked: 'checked', - disabled: 'disabled opacity-60 cursor-not-allowed', + disabled: 'disabled dark:opacity-60 cursor-not-allowed', sizes: { small: '[&>svg]:w-3 [&>svg]:min-h-3', medium: '[&>svg]:w-4 [&>svg]:h-4', @@ -67,31 +65,35 @@ const baseTheme: Partial = { export const checkboxTheme: CheckboxTheme = { ...baseTheme, - base: [ - baseTheme.base, - 'group', - // label - 'dark:text-waterloo light:text-charade', - '[&.checked]:text-athens-gray', - - // disabled - 'hover:[&>.disabled]:text-athens-gray', - '[&>.checkbox.disabled]:fill-gray-500' - ].join(' '), checkbox: [ baseTheme.checkbox, 'fill-transparent border border-surface', - 'group-hover:[&.checked]:fill-blue-300', - '[&.checked]:fill-blue-500' + 'light:group-hover:[&.checked]:fill-blue-600', + 'light:[&.checked.disabled]:fill-waterloo', + 'light:group-hover:[&.checked.disabled]:fill-waterloo', + 'group-hover:[&.checked]:fill-blue-400', + 'group-hover:[&.checked.disabled]:fill-gray-400', + '[&.checked]:fill-blue-500', + '[&.checked.disabled]:fill-gray-400 ' + ].join(' '), + check: [ + baseTheme.check, + 'light:group-hover:stroke-white', + 'light:[&.disabled]:stroke-white', + 'stroke-white', + 'group-hover:stroke-black', + 'group-hover:[&.disabled]:stroke-black', + '[&.disabled]:stroke-black' ].join(' '), - check: [baseTheme.check, 'stroke-white', 'group-hover:stroke-black'].join( - ' ' - ), border: [ baseTheme.border, - 'stroke-slate-500', + 'light:stroke-waterloo', + 'light:group-hover:stroke-blue-600', + 'light:group-hover:[&.disabled]:stroke-waterloo', + 'stroke-gray-300', + 'group-hover:stroke-blue-400', + 'group-hover:[&.disabled]:stroke-gray-500', '[&.checked]:stroke-blue-500', - 'group-hover:stroke-blue-300', '[&.disabled]:stroke-gray-500' ].join(' '), @@ -99,7 +101,17 @@ export const checkboxTheme: CheckboxTheme = { ...baseTheme.label, base: [ baseTheme.label.base, - 'text-surface-content text-inherit group-hover:text-blue-300' + 'text-surface-content', + 'light:text-charade', + 'light:[&.disabled]:text-waterloo', + 'light:group-hover:[&.disabled]:text-waterloo', + 'light:[&.checked]:text-vulcan', + 'light:group-hover:text-blue-400', + 'dark:text-waterloo', + 'group-hover:text-blue-300', + 'group-hover:[&.disabled]:text-waterloo', + 'group-hover:[&.checked.disabled]:text-athens-gray', + '[&.checked]:text-athens-gray' ].join(' ') }, boxVariants: { From 6edcce55ef5c278f8cb596f04762a91c4342ef6f Mon Sep 17 00:00:00 2001 From: ivanzinchenko Date: Tue, 14 May 2024 17:41:18 +0300 Subject: [PATCH 3/7] GOOD-181 fix pr comment --- src/form/Checkbox/Checkbox.story.tsx | 6 +++--- src/form/Checkbox/Checkbox.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/form/Checkbox/Checkbox.story.tsx b/src/form/Checkbox/Checkbox.story.tsx index 2c1c4f73..4d1c3909 100644 --- a/src/form/Checkbox/Checkbox.story.tsx +++ b/src/form/Checkbox/Checkbox.story.tsx @@ -23,13 +23,13 @@ export const LabelPosition = () => {
- +
); diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx index 8db8ea5c..7e883370 100644 --- a/src/form/Checkbox/Checkbox.tsx +++ b/src/form/Checkbox/Checkbox.tsx @@ -24,7 +24,7 @@ export interface CheckboxProps { /** * Label position of checkbox. */ - labelPosition?: 'left' | 'right'; + labelPosition?: 'start' | 'end'; /** * Whether the checkbox is disabled or not. @@ -94,7 +94,7 @@ export const Checkbox: FC = forwardRef( label, disabled, size = 'medium', - labelPosition = 'right', + labelPosition = 'end', onChange, onBlur, className, @@ -132,14 +132,14 @@ export const Checkbox: FC = forwardRef( checked && 'checked' )} > - {labelPosition === 'left' && label && ( + {labelPosition === 'start' && label && ( )} @@ -211,14 +211,14 @@ export const Checkbox: FC = forwardRef( )} - {labelPosition === 'right' && label && ( + {labelPosition === 'end' && label && ( )} From 1377729738dc71acff39fb4cf8a2727cf0da44b6 Mon Sep 17 00:00:00 2001 From: ivanzinchenko Date: Mon, 17 Jun 2024 12:55:15 +0300 Subject: [PATCH 4/7] GOOD-181 update checkbox theme --- docs/blocks/administration/Team.story.tsx | 4 +- src/form/Checkbox/Checkbox.tsx | 20 +-- src/form/Checkbox/CheckboxLabel.tsx | 6 +- src/form/Checkbox/CheckboxTheme.ts | 152 +++++++++++++--------- 4 files changed, 109 insertions(+), 73 deletions(-) diff --git a/docs/blocks/administration/Team.story.tsx b/docs/blocks/administration/Team.story.tsx index b2c060f5..77f1f6db 100644 --- a/docs/blocks/administration/Team.story.tsx +++ b/docs/blocks/administration/Team.story.tsx @@ -75,7 +75,7 @@ export const TeamGeneral = () => { const checkboxTheme: CheckboxTheme = { ...defaultCheckboxTheme, - check: 'stroke-white', + checkMark: 'stroke-white', boxVariants: { ...defaultCheckboxTheme.boxVariants, checked: { @@ -459,7 +459,7 @@ export const TeamRoles = () => { const checkboxTheme: CheckboxTheme = { ...defaultCheckboxTheme, - check: 'stroke-white', + checkMark: 'stroke-white', boxVariants: { ...defaultCheckboxTheme.boxVariants, checked: { diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx index 1a2d53c5..962c63b2 100644 --- a/src/form/Checkbox/Checkbox.tsx +++ b/src/form/Checkbox/Checkbox.tsx @@ -151,9 +151,9 @@ export const Checkbox: FC = forwardRef( ref={ref} tabIndex={disabled ? -1 : 0} className={twMerge( - theme.checkbox, - disabled && theme.disabled, - checked && theme.checked, + theme.checkbox.base, + checked && theme.checkbox.checked, + disabled && theme.checkbox.disabled, theme.sizes[size], className )} @@ -180,9 +180,9 @@ export const Checkbox: FC = forwardRef( > = forwardRef( d={intermediatePath} fill="transparent" strokeWidth="1" - className={theme.check} + className={theme.checkMark.base} variants={checkVariants} style={{ pathLength, opacity }} custom={checked} @@ -203,9 +203,9 @@ export const Checkbox: FC = forwardRef( fill="transparent" strokeWidth="1" className={twMerge( - theme.check, - disabled && theme.disabled, - checked && theme.checked + theme.checkMark.base, + disabled && theme.checkMark.disabled, + checked && theme.checkMark.checked )} variants={checkVariants} style={{ pathLength, opacity }} diff --git a/src/form/Checkbox/CheckboxLabel.tsx b/src/form/Checkbox/CheckboxLabel.tsx index a2812889..0fe0b5b9 100644 --- a/src/form/Checkbox/CheckboxLabel.tsx +++ b/src/form/Checkbox/CheckboxLabel.tsx @@ -4,7 +4,7 @@ import { CheckboxTheme } from './CheckboxTheme'; interface CheckboxLabelProps { label: string; - size: 'small' | 'medium' | 'large'; + size: 'small' | 'medium' | 'large' | string; disabled?: boolean; checked?: boolean; onChange?: () => void; @@ -26,8 +26,8 @@ export const CheckboxLabel: FC = ({ className={twMerge( theme.label.base, theme.label.sizes[size], - disabled && theme.disabled, - checked && theme.checked, + checked && theme.label.checked, + disabled && theme.label.disabled, !disabled && onChange && theme.label.clickable, labelClassName )} diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index 5e638745..18da5d53 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -3,6 +3,8 @@ export interface CheckboxTheme { label: { base: string; clickable: string; + disabled: string; + checked: string; sizes: { small: string; medium: string; @@ -10,11 +12,21 @@ export interface CheckboxTheme { [key: string]: string; }; }; - border: string; - check: string; - checkbox: string; - disabled: string; - checked: string; + border: { + base: string; + disabled: string; + checked: string; + }; + checkMark: { + base: string; + disabled: string; + checked: string; + }; + checkbox: { + base: string; + disabled: string; + checked: string; + }; sizes: { small: string; medium: string; @@ -44,7 +56,9 @@ export interface CheckboxTheme { const baseTheme: Partial = { base: 'inline-flex items-center w-full group', label: { - base: 'ml-2.5 w-full', + base: 'text-surface-content dark:text-waterloo light:text-charade ml-2.5 w-full', + checked: 'checked dark:text-athens-gray light:text-vulcan', + disabled: 'cursor-not-allowed dark:text-gray-600 light:text-waterloo', clickable: 'cursor-pointer', sizes: { small: 'text-sm', @@ -52,68 +66,85 @@ const baseTheme: Partial = { large: 'text-lg' } }, - check: 'check', - border: '', - checkbox: - 'checkbox flex items-center justify-center cursor-pointer focus-visible:outline-none', - checked: 'checked', - disabled: 'disabled dark:opacity-60 cursor-not-allowed', + checkMark: { + base: 'stroke-white', + checked: '', + disabled: 'cursor-not-allowed' + }, + border: { + base: 'stroke-gray-400 light:stroke-gray-700', + checked: 'stroke-blue-500', + disabled: 'cursor-not-allowed stroke-gray-500' + }, + checkbox: { + base: 'fill-transparent flex items-center justify-center cursor-pointer focus-visible:outline-none', + checked: 'fill-blue-500 checked', + disabled: 'fill-transparent disabled' + }, sizes: { small: '[&>svg]:w-3 [&>svg]:h-3', medium: '[&>svg]:w-4 [&>svg]:h-4', large: '[&>svg]:w-5 [&>svg]:h-5' } }; - export const checkboxTheme: CheckboxTheme = { ...baseTheme, - checkbox: [ - baseTheme.checkbox, - 'fill-transparent border border-surface', - 'light:group-hover:[&.checked]:fill-blue-600', - 'light:[&.checked.disabled]:fill-waterloo', - 'light:group-hover:[&.checked.disabled]:fill-waterloo', - 'group-hover:[&.checked]:fill-blue-400', - 'group-hover:[&.checked.disabled]:fill-gray-400', - '[&.checked]:fill-blue-500', - '[&.checked.disabled]:fill-gray-400 ' - ].join(' '), - check: [ - baseTheme.check, - 'light:group-hover:stroke-white', - 'light:[&.disabled]:stroke-white', - 'stroke-white', - 'group-hover:stroke-black', - 'group-hover:[&.disabled]:stroke-black', - '[&.disabled]:stroke-black' - ].join(' '), - border: [ - baseTheme.border, - 'light:stroke-waterloo', - 'light:group-hover:stroke-blue-600', - 'light:group-hover:[&.disabled]:stroke-waterloo', - 'stroke-gray-300', - 'group-hover:stroke-blue-400', - 'group-hover:[&.disabled]:stroke-gray-500', - '[&.checked]:stroke-blue-500', - '[&.disabled]:stroke-gray-500' - ].join(' '), - + checkbox: { + ...baseTheme.checkbox, + base: [ + baseTheme.checkbox.base, + 'border border-surface', + '[&.checked.disabled]:fill-gray-400' + ].join(' '), + checked: [ + baseTheme.checkbox.checked, + 'group-hover:fill-blue-400', + 'light:group-hover:fill-blue-600', + 'light:group-hover:[&.disabled]:fill-gray-400' + ].join(' '), + disabled: [ + baseTheme.checkbox.disabled, + 'group-hover:transparent', + 'light:group-hover:transparent' + ].join(' ') + }, + checkMark: { + ...baseTheme.checkMark, + base: [ + baseTheme.checkMark.base, + 'group-hover:stroke-black light:group-hover:stroke-white' + ].join(' '), + disabled: [ + baseTheme.checkMark.disabled, + 'stroke-black light:stroke-white group-hover:stroke-black ' + ].join(' ') + }, + border: { + ...baseTheme.border, + base: [ + baseTheme.border.base, + 'dark:group-hover:stroke-blue-300', + 'light:group-hover:stroke-blue-600' + ].join(' '), + disabled: [ + baseTheme.border.disabled, + 'dark:group-hover:stroke-gray-500', + 'light:group-hover:stroke-waterloo' + ].join(' ') + }, label: { ...baseTheme.label, base: [ baseTheme.label.base, - 'text-surface-content', - 'light:text-charade', - 'light:[&.disabled]:text-waterloo', - 'light:group-hover:[&.disabled]:text-waterloo', - 'light:[&.checked]:text-vulcan', - 'light:group-hover:text-blue-400', - 'dark:text-waterloo', - 'group-hover:text-blue-300', - 'group-hover:[&.disabled]:text-waterloo', - 'group-hover:[&.checked.disabled]:text-athens-gray', - '[&.checked]:text-athens-gray' + 'dark:group-hover:text-blue-300 light:group-hover:text-blue-400' + ].join(' '), + checked: [baseTheme.label.checked, 'group-hover:text-athens-gray'].join( + ' ' + ), + disabled: [ + baseTheme.label.disabled, + 'light:group-hover:text-waterloo', + 'dark:group-hover:text-gray-600' ].join(' ') }, boxVariants: { @@ -126,8 +157,13 @@ export const checkboxTheme: CheckboxTheme = { export const legacyCheckboxTheme: CheckboxTheme = { ...baseTheme, - checkbox: [baseTheme.checkbox, 'fill-transparent'].join(' '), - check: [baseTheme.check, 'stroke-[var(--checkbox-check-stroke)]'].join(' '), + checkbox: { base: [baseTheme.checkbox, 'fill-transparent'].join(' ') }, + checkMark: { + base: [ + baseTheme.checkMark.base, + 'stroke-[var(--checkbox-check-stroke)]' + ].join(' ') + }, label: { ...baseTheme.label, base: [ From 4709b944b8ef006b0699ff30b8c0ee2e1ed68c08 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Mon, 17 Jun 2024 10:32:57 -0500 Subject: [PATCH 5/7] Add eslint arrow-body-style --- .eslintrc.cjs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d6b3c6e7..7cfc1bc8 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -41,6 +41,7 @@ module.exports = { 'no-relative-import-paths/no-relative-import-paths': [ 'warn', { 'allowSameFolder': true, 'prefix': '@', 'rootDir': 'src' } - ] + ], + 'arrow-body-style': ['warn', 'as-needed'], } }; From a248567bb538e9e892c3d485ab5463824c244fb0 Mon Sep 17 00:00:00 2001 From: ivanzinchenko Date: Tue, 18 Jun 2024 12:13:38 +0300 Subject: [PATCH 6/7] GOOD-181 minor --- src/form/Checkbox/CheckboxLabel.tsx | 40 ++++++++++++++--------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/form/Checkbox/CheckboxLabel.tsx b/src/form/Checkbox/CheckboxLabel.tsx index 0fe0b5b9..7f42afbc 100644 --- a/src/form/Checkbox/CheckboxLabel.tsx +++ b/src/form/Checkbox/CheckboxLabel.tsx @@ -20,24 +20,22 @@ export const CheckboxLabel: FC = ({ onChange, labelClassName, theme -}) => { - return ( - { - if (!disabled && onChange) { - onChange(); - } - }} - > - {label} - - ); -}; +}) => ( + { + if (!disabled && onChange) { + onChange(); + } + }} + > + {label} + +); From 1d4124b508200903fea3647b7174d004fe7b2909 Mon Sep 17 00:00:00 2001 From: ivanzinchenko Date: Fri, 21 Jun 2024 09:59:45 +0300 Subject: [PATCH 7/7] GOOD-181 fix pr comments --- docs/blocks/administration/Team.story.tsx | 4 +-- src/form/Checkbox/Checkbox.tsx | 8 ++--- src/form/Checkbox/CheckboxTheme.ts | 37 +++++++++++------------ 3 files changed, 23 insertions(+), 26 deletions(-) diff --git a/docs/blocks/administration/Team.story.tsx b/docs/blocks/administration/Team.story.tsx index afe67eb3..0e2c7f01 100644 --- a/docs/blocks/administration/Team.story.tsx +++ b/docs/blocks/administration/Team.story.tsx @@ -75,7 +75,7 @@ export const TeamGeneral = () => { const checkboxTheme: CheckboxTheme = { ...defaultCheckboxTheme, - checkMark: 'stroke-white', + check: 'stroke-white', boxVariants: { ...defaultCheckboxTheme.boxVariants, checked: { @@ -459,7 +459,7 @@ export const TeamRoles = () => { const checkboxTheme: CheckboxTheme = { ...defaultCheckboxTheme, - checkMark: 'stroke-white', + check: 'stroke-white', boxVariants: { ...defaultCheckboxTheme.boxVariants, checked: { diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx index 962c63b2..b4e2602e 100644 --- a/src/form/Checkbox/Checkbox.tsx +++ b/src/form/Checkbox/Checkbox.tsx @@ -192,7 +192,7 @@ export const Checkbox: FC = forwardRef( d={intermediatePath} fill="transparent" strokeWidth="1" - className={theme.checkMark.base} + className={theme.check.base} variants={checkVariants} style={{ pathLength, opacity }} custom={checked} @@ -203,9 +203,9 @@ export const Checkbox: FC = forwardRef( fill="transparent" strokeWidth="1" className={twMerge( - theme.checkMark.base, - disabled && theme.checkMark.disabled, - checked && theme.checkMark.checked + theme.check.base, + disabled && theme.check.disabled, + checked && theme.check.checked )} variants={checkVariants} style={{ pathLength, opacity }} diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index 021fd3d8..afa0180f 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -17,7 +17,7 @@ export interface CheckboxTheme { disabled: string; checked: string; }; - checkMark: { + check: { base: string; disabled: string; checked: string; @@ -56,9 +56,9 @@ export interface CheckboxTheme { const baseTheme: Partial = { base: 'inline-flex items-center w-full group', label: { - base: 'text-text-primary dark:text-waterloo light:text-charade ml-2.5 w-full', - checked: 'checked dark:text-athens-gray light:text-vulcan', - disabled: 'cursor-not-allowed dark:text-gray-600 light:text-waterloo', + base: 'dark:text-gray-400 light:text-gray-700 ml-2.5 w-full', + checked: 'checked dark:text-gray-100 light:text-gray-900', + disabled: 'cursor-not-allowed dark:text-gray-600 light:text-gray-400', clickable: 'cursor-pointer', sizes: { small: 'text-sm', @@ -66,7 +66,7 @@ const baseTheme: Partial = { large: 'text-lg' } }, - checkMark: { + check: { base: 'stroke-white', checked: '', disabled: 'cursor-not-allowed' @@ -108,14 +108,14 @@ export const checkboxTheme: CheckboxTheme = { 'light:group-hover:transparent' ].join(' ') }, - checkMark: { - ...baseTheme.checkMark, + check: { + ...baseTheme.check, base: [ - baseTheme.checkMark.base, + baseTheme.check.base, 'group-hover:stroke-black light:group-hover:stroke-white' ].join(' '), disabled: [ - baseTheme.checkMark.disabled, + baseTheme.check.disabled, 'stroke-black light:stroke-white group-hover:stroke-black ' ].join(' ') }, @@ -129,21 +129,19 @@ export const checkboxTheme: CheckboxTheme = { disabled: [ baseTheme.border.disabled, 'dark:group-hover:stroke-gray-500', - 'light:group-hover:stroke-waterloo' + 'light:group-hover:stroke-gray-400' ].join(' ') }, label: { ...baseTheme.label, base: [ baseTheme.label.base, - 'dark:group-hover:text-blue-300 light:group-hover:text-blue-400' + 'text-text-primary dark:group-hover:text-blue-300 light:group-hover:text-blue-400' ].join(' '), - checked: [baseTheme.label.checked, 'group-hover:text-athens-gray'].join( - ' ' - ), + checked: [baseTheme.label.checked, 'group-hover:text-gray-100'].join(' '), disabled: [ baseTheme.label.disabled, - 'light:group-hover:text-waterloo', + 'light:group-hover:text-gray-400', 'dark:group-hover:text-gray-600' ].join(' ') }, @@ -158,11 +156,10 @@ export const checkboxTheme: CheckboxTheme = { export const legacyCheckboxTheme: CheckboxTheme = { ...baseTheme, checkbox: { base: [baseTheme.checkbox, 'fill-transparent'].join(' ') }, - checkMark: { - base: [ - baseTheme.checkMark.base, - 'stroke-[var(--checkbox-check-stroke)]' - ].join(' ') + check: { + base: [baseTheme.check.base, 'stroke-[var(--checkbox-check-stroke)]'].join( + ' ' + ) }, label: { ...baseTheme.label,