From 76dd6156ad0a4edc525af016165839d4e687697c Mon Sep 17 00:00:00 2001 From: kimdaeyeobbb Date: Wed, 22 Jan 2025 15:56:34 +0900 Subject: [PATCH] fix(checkbox): resolve indeterminate state issue --- packages/checkbox/src/Checkbox.module.css | 20 ++++++------- packages/checkbox/src/Checkbox.stories.tsx | 9 ++---- packages/checkbox/src/Checkbox.tsx | 18 ++++++------ packages/checkbox/src/constants/checkStyle.ts | 29 +++++++++++-------- packages/checkbox/src/images/minus-icon.svg | 3 ++ 5 files changed, 41 insertions(+), 38 deletions(-) create mode 100644 packages/checkbox/src/images/minus-icon.svg diff --git a/packages/checkbox/src/Checkbox.module.css b/packages/checkbox/src/Checkbox.module.css index 9023522..397180d 100644 --- a/packages/checkbox/src/Checkbox.module.css +++ b/packages/checkbox/src/Checkbox.module.css @@ -13,17 +13,8 @@ border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); background-color: var(--background-color); - } -.checkbox-input:checked { - background-color: var(--checked-color); - border-color: var(--checked-color); - background-image: var(--background-image); - background-size: var(--background-size); - background-position: var(--background-position); - background-repeat: var(--background-repeat); -} .checkbox-input:disabled { background-color: var(--disabled-color); @@ -40,11 +31,18 @@ opacity: 0.6; } -.checkbox-input:indeterminate { +.checkbox-input:is(:checked, :indeterminate) { background-color: var(--checked-color); border-color: var(--checked-color); - background-image: var(--background-image); background-size: var(--background-size); background-position: var(--background-position); background-repeat: var(--background-repeat); +} + +.checkbox-input:checked { + background-image: var(--checked-icon); +} + +.checkbox-input:indeterminate { + background-image: var(--indeterminate-icon); } \ No newline at end of file diff --git a/packages/checkbox/src/Checkbox.stories.tsx b/packages/checkbox/src/Checkbox.stories.tsx index 4faef89..0e59394 100644 --- a/packages/checkbox/src/Checkbox.stories.tsx +++ b/packages/checkbox/src/Checkbox.stories.tsx @@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; import { Checkbox } from './Checkbox'; import { useCheckboxGroup } from './hooks/useCheckboxGroup'; -import CheckboxIcon from './images/checkbox-icon.svg'; const meta = { title: 'Checkbox', @@ -75,13 +74,9 @@ export const customStyles: Story = { label: 'Custom Styled Checkbox', style: { padding: '20px', - border: '2px solid #007bff', + border: '2px solid #f8f', borderRadius: '10px', backgroundColor: '#f8f9fa', - // backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E")`, - // backgroundSize: '75%', - // backgroundPosition: 'center', - // backgroundRepeat: 'no-repeat', }, value: 'test', name: 'test', @@ -166,6 +161,8 @@ export const Indeterminate: Story = { updateParentState(newChildChecked); }; + console.log('parent indeterminate 확인: ', parentIndeterminate); + return (
{ asChild?: boolean; innerRef?: React.RefObject; children?: ReactNode; - styleConfig?: Partial; + checkStyleConfig?: Partial; } // //////////////////////////////////////////////////////////////////////////////// @@ -52,7 +51,7 @@ export const Checkbox = ({ children, style: _style, innerRef, - styleConfig = {}, + checkStyleConfig = {}, ...props }: CheckboxProps) => { const localRef = useRef(null); @@ -74,7 +73,7 @@ export const Checkbox = ({ }; const sizeConfig = CHECKBOX_SIZES[size]; - const mergedStyleConfig = { ...DEFAULT_CHECKBOX_STYLE, ...styleConfig }; + const mergedStyleConfig = { ...DEFAULT_CHECK_STYLE, ...checkStyleConfig }; const style = { '--checkbox-size': `${sizeConfig.checkboxSize}px`, @@ -88,7 +87,8 @@ export const Checkbox = ({ '--checked-color': mergedStyleConfig.checkedColor, '--disabled-color': mergedStyleConfig.disabledColor, '--hover-color': mergedStyleConfig.hoverColor, - '--background-image': mergedStyleConfig.backgroundImage, + '--checked-icon': `url(${mergedStyleConfig.checkedIcon})`, + '--indeterminate-icon': `url(${mergedStyleConfig.indeterminateIcon})`, '--background-size': mergedStyleConfig.backgroundSize, '--background-position': mergedStyleConfig.backgroundPosition, '--background-repeat': mergedStyleConfig.backgroundRepeat, diff --git a/packages/checkbox/src/constants/checkStyle.ts b/packages/checkbox/src/constants/checkStyle.ts index 5e04b7f..3bfcac0 100644 --- a/packages/checkbox/src/constants/checkStyle.ts +++ b/packages/checkbox/src/constants/checkStyle.ts @@ -1,15 +1,19 @@ +import CheckboxIcon from '../images/checkbox-icon.svg'; +import minusIcon from '../images/minus-icon.svg'; + export interface CheckStyleConfig { - borderRadius?: string | number; - borderWidth?: number; - borderColor?: string; - backgroundColor?: string; - checkedColor?: string; - disabledColor?: string; - hoverColor?: string; - backgroundImage?: string; - backgroundSize?: string; - backgroundPosition?: string; - backgroundRepeat?: string; + borderRadius: number; + borderWidth: number; + borderColor: string; + backgroundColor: string; + checkedColor: string; + disabledColor: string; + hoverColor: string; + checkedIcon: string; + indeterminateIcon: string; + backgroundSize: string; + backgroundPosition: string; + backgroundRepeat: string; } export const DEFAULT_CHECK_STYLE: CheckStyleConfig = { @@ -20,7 +24,8 @@ export const DEFAULT_CHECK_STYLE: CheckStyleConfig = { checkedColor: '#3B82F6', disabledColor: '#E5E7EB', hoverColor: '#F3F4F6', - backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E")`, + checkedIcon: CheckboxIcon, + indeterminateIcon: minusIcon, backgroundSize: '100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', diff --git a/packages/checkbox/src/images/minus-icon.svg b/packages/checkbox/src/images/minus-icon.svg new file mode 100644 index 0000000..210aaad --- /dev/null +++ b/packages/checkbox/src/images/minus-icon.svg @@ -0,0 +1,3 @@ + + +