Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox Component styling #178

Merged
merged 10 commits into from
Jun 21, 2024
Merged

Checkbox Component styling #178

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9f2de67
GOOD-181 add dark checkbox styles
zinchenkoivan May 13, 2024
81b96d6
GOOD-181 add light checkbox styles and refactoring
zinchenkoivan May 14, 2024
6edcce5
GOOD-181 fix pr comment
zinchenkoivan May 14, 2024
b7e142d
Merge branch 'master' into feature/GOOD-181
zinchenkoivan May 20, 2024
d5d7aa7
Merge branch 'master' into feature/GOOD-181
zinchenkoivan Jun 16, 2024
1377729
GOOD-181 update checkbox theme
zinchenkoivan Jun 17, 2024
4709b94
Add eslint arrow-body-style
ghsteff Jun 17, 2024
a248567
GOOD-181 minor
zinchenkoivan Jun 18, 2024
159bb8f
Merge branch 'master' into feature/GOOD-181
zinchenkoivan Jun 20, 2024
1d4124b
GOOD-181 fix pr comments
zinchenkoivan Jun 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 43 additions & 1 deletion src/form/Checkbox/Checkbox.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,30 @@ export const Simple = () => {
return <Checkbox checked={state} label="Check me" onChange={setState} />;
};

export const WithoutLabel = () => {
const [state, setState] = useState(true);
return <Checkbox checked={state} onChange={setState} />;
};

export const LabelPosition = () => {
zinchenkoivan marked this conversation as resolved.
Show resolved Hide resolved
const [state, setState] = useState(true);
return (
<Fragment>
<div style={{ padding: 20 }}>
<Checkbox
checked={state}
label="Start label"
labelPosition="start"
onChange={setState}
/>
</div>
<div style={{ padding: 20 }}>
<Checkbox checked={state} label="End label" onChange={setState} />
</div>
</Fragment>
);
};

export const Intermediate = () => {
const [state, setState] = useState(true);
return (
Expand Down Expand Up @@ -81,8 +105,26 @@ export const Sizes = () => {

export const Disabled = () => {
const [state, setState] = useState(true);
const [state2, setState2] = useState(false);
return (
<Checkbox checked={state} label="Disabled" onChange={setState} disabled />
<>
<div style={{ padding: 20 }}>
<Checkbox
checked={state}
label="Disabled"
onChange={setState}
disabled
/>
</div>
<div style={{ padding: 20 }}>
<Checkbox
checked={state2}
label="Disabled"
onChange={setState2}
disabled
/>
</div>
</>
);
};

Expand Down
78 changes: 55 additions & 23 deletions src/form/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
/**
Expand All @@ -20,6 +21,11 @@ export interface CheckboxProps {
*/
label?: string;

/**
* Label position of checkbox.
*/
labelPosition?: 'start' | 'end';

/**
* Whether the checkbox is disabled or not.
*/
Expand Down Expand Up @@ -88,13 +94,14 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
label,
disabled,
size = 'medium',
labelPosition = 'end',
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
Expand All @@ -111,15 +118,39 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
unchecked: { pathLength: 0 }
};

const handleOnChange = useCallback(() => {
if (!disabled && onChange) {
onChange(!checked);
}
}, [disabled, onChange, checked]);

return (
<div className={twMerge(theme.base, containerClassName)}>
<div
className={twMerge(
theme.base,
containerClassName,
checked && 'checked'
)}
>
{labelPosition === 'start' && label && (
<CheckboxLabel
label={label}
size={size}
checked={checked}
disabled={disabled}
onChange={handleOnChange}
labelClassName={twMerge('mr-2.5', labelClassName)}
theme={theme}
/>
)}
<motion.div
{...rest}
ref={ref}
tabIndex={disabled ? -1 : 0}
className={twMerge(
theme.checkbox,
disabled && theme.disabled,
checked && theme.checked,
theme.sizes[size],
className
)}
Expand All @@ -145,7 +176,11 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
height={16}
>
<motion.path
className={theme.border}
className={twMerge(
theme.border,
disabled && theme.disabled,
checked && theme.checked
)}
d={borderPath}
variants={theme.boxVariants}
/>
Expand All @@ -164,31 +199,28 @@ export const Checkbox: FC<CheckboxProps & CheckboxRef> = 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}
/>
)}
</motion.svg>
</motion.div>
{label && (
<span
className={twMerge(
theme.label.base,
theme.label.sizes[size],
disabled && theme.disabled,
!disabled && onChange && theme.label.clickable,
labelClassName
)}
onClick={() => {
if (!disabled && onChange) {
onChange?.(!checked);
}
}}
>
{label}
</span>
{labelPosition === 'end' && label && (
<CheckboxLabel
label={label}
size={size}
checked={checked}
disabled={disabled}
onChange={handleOnChange}
labelClassName={twMerge('ml-2.5', labelClassName)}
theme={theme}
/>
)}
</div>
);
Expand Down
43 changes: 43 additions & 0 deletions src/form/Checkbox/CheckboxLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { FC } from 'react';
import { twMerge } from 'tailwind-merge';
import { CheckboxTheme } from './CheckboxTheme';

interface CheckboxLabelProps {
label: string;
size: 'small' | 'medium' | 'large';
disabled?: boolean;
checked?: boolean;
onChange?: () => void;
labelClassName?: string;
theme: CheckboxTheme;
}

export const CheckboxLabel: FC<CheckboxLabelProps> = ({
label,
size,
disabled,
checked,
onChange,
labelClassName,
theme
}) => {
return (
<span
zinchenkoivan marked this conversation as resolved.
Show resolved Hide resolved
className={twMerge(
theme.label.base,
theme.label.sizes[size],
disabled && theme.disabled,
checked && theme.checked,
!disabled && onChange && theme.label.clickable,
labelClassName
)}
onClick={() => {
if (!disabled && onChange) {
onChange();
}
}}
>
{label}
</span>
);
};
74 changes: 54 additions & 20 deletions src/form/Checkbox/CheckboxTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import TWConfig from '@/utils/Theme/config';

export interface CheckboxTheme {
base: string;
label: {
Expand All @@ -15,6 +13,7 @@ export interface CheckboxTheme {
check: string;
checkbox: string;
disabled: string;
checked: string;
sizes: {
small: string;
medium: string;
Expand All @@ -41,7 +40,7 @@ export interface CheckboxTheme {
}

const baseTheme: Partial<CheckboxTheme> = {
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',
Expand All @@ -51,11 +50,12 @@ const baseTheme: Partial<CheckboxTheme> = {
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 dark:opacity-60 cursor-not-allowed',
zinchenkoivan marked this conversation as resolved.
Show resolved Hide resolved
sizes: {
small: '[&>svg]:w-3 [&>svg]:min-h-3',
medium: '[&>svg]:w-4 [&>svg]:h-4',
Expand All @@ -65,26 +65,60 @@ const baseTheme: Partial<CheckboxTheme> = {

export const checkboxTheme: CheckboxTheme = {
...baseTheme,
checkbox: [baseTheme.checkbox, 'fill-transparent border border-surface'].join(
' '
),
check: [baseTheme.check, 'stroke-primary'].join(' '),
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(' '),

label: {
...baseTheme.label,
base: [baseTheme.label.base, 'text-surface-content'].join(' ')
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'
].join(' ')
},
boxVariants: {
hover: {
amcdnl marked this conversation as resolved.
Show resolved Hide resolved
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;

Expand Down
Loading