From 8ef4c361109cd8541f0d96b42b33327e68f9fc85 Mon Sep 17 00:00:00 2001 From: healtheloper Date: Fri, 15 Sep 2023 15:01:06 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Chip=20=EC=97=90=20onDelete=20=EB=A5=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=96=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Chips/Chip.style.ts | 64 +++++++++++++++---- .../src/components/Chips/Chip.tsx | 29 +++++++-- .../src/components/Chips/CloseIcon.tsx | 13 ++++ .../components/Chips/stories/Chip.stories.tsx | 58 +++++++++++++++++ 4 files changed, 147 insertions(+), 17 deletions(-) create mode 100644 packages/co-design-core/src/components/Chips/CloseIcon.tsx create mode 100644 packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx diff --git a/packages/co-design-core/src/components/Chips/Chip.style.ts b/packages/co-design-core/src/components/Chips/Chip.style.ts index f9b5344b..a4b4380e 100644 --- a/packages/co-design-core/src/components/Chips/Chip.style.ts +++ b/packages/co-design-core/src/components/Chips/Chip.style.ts @@ -9,7 +9,7 @@ export const sizes = { xlarge: 40, }; -const iconSizes = { +const checkIconSizes = { xsmall: 10, small: 12, medium: 14, @@ -17,6 +17,14 @@ const iconSizes = { xlarge: 18, }; +const closeIconSizes = { + xsmall: 14, + small: 16, + medium: 18, + large: 20, + xlarge: 22, +}; + const padding = { xsmall: 16, small: 20, @@ -33,13 +41,22 @@ const checkedPadding = { xlarge: 15, }; +const deletablePadding = { + xsmall: 7.5, + small: 10, + medium: 11.5, + large: 13, + xlarge: 15, +}; + interface ChipStyles { radius: CoRadius | number; size: CoSize; color: CoPalette; + checked: boolean; } -export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) => { +export default createStyles((theme, { radius, size, color, checked }: ChipStyles, getRef) => { const label = getRef('label'); const iconWrapper = getRef('iconWrapper'); @@ -51,8 +68,10 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) ...defaultFontStyles(theme), boxSizing: 'border-box', color: theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.black, - display: 'inline-block', + display: 'flex', + width: 'fit-content', alignItems: 'center', + justifyContent: 'space-around', userSelect: 'none', border: `1px solid ${theme.colorScheme === 'dark' ? theme.palettes.gray[2] : theme.palettes.gray[3]}`, borderRadius: getFieldValue(radius, theme.radius), @@ -66,21 +85,30 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) transition: 'background-color 100ms ease', WebkitTapHighlightColor: 'transparent', backgroundColor: theme.colorScheme === 'dark' ? theme.palettes.gray[8] : theme.colors.white, - + position: 'relative', '&:hover': { backgroundColor: theme.colorScheme === 'dark' ? theme.palettes.gray[8] : theme.palettes.gray[0], }, }, - iconWrapper: { + checkWrapper: { ref: iconWrapper, color: theme.palettes[color][theme.colorScheme === 'dark' ? 3 : 5], - width: getFieldValue(size, iconSizes), - maxWidth: getFieldValue(size, iconSizes), - height: getFieldValue(size, iconSizes), + width: getFieldValue(size, checkIconSizes), + maxWidth: getFieldValue(size, checkIconSizes), + height: getFieldValue(size, checkIconSizes), marginRight: theme.spacing.small, - display: 'inline-block', - verticalAlign: 'middle', + overflow: 'hidden', + }, + + closeWrapper: { + display: 'flex', + alignItems: 'center', + ref: iconWrapper, + width: getFieldValue(size, closeIconSizes), + maxWidth: getFieldValue(size, closeIconSizes), + height: getFieldValue(size, closeIconSizes), + marginLeft: theme.spacing.small, overflow: 'hidden', }, @@ -103,11 +131,23 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) paddingLeft: getFieldValue(size, checkedPadding), paddingRight: getFieldValue(size, checkedPadding), border: `1px solid ${theme.palettes[color][theme.colorScheme === 'dark' ? 3 : 5]}`, + color: theme.palettes[color][theme.colorScheme === 'dark' ? 3 : 5], + }, + + deletable: { + paddingLeft: getFieldValue(size, deletablePadding), + paddingRight: getFieldValue(size, deletablePadding), }, checkIcon: { - width: getFieldValue(size, iconSizes), - height: getFieldValue(size, iconSizes) / 1.1, + width: getFieldValue(size, checkIconSizes), + height: getFieldValue(size, checkIconSizes) / 1.1, + display: 'block', + }, + + deleteIcon: { + width: getFieldValue(size, closeIconSizes), + height: getFieldValue(size, closeIconSizes) / 1.1, display: 'block', }, diff --git a/packages/co-design-core/src/components/Chips/Chip.tsx b/packages/co-design-core/src/components/Chips/Chip.tsx index 79a21abe..6c53f893 100644 --- a/packages/co-design-core/src/components/Chips/Chip.tsx +++ b/packages/co-design-core/src/components/Chips/Chip.tsx @@ -1,9 +1,11 @@ -import React, { forwardRef } from 'react'; +import React, { MouseEventHandler, SyntheticEvent, forwardRef } from 'react'; import { useUncontrolled, useId } from '@co-design/hooks'; import { CoComponentProps, CoPalette, CoSize, CoRadius, useCoTheme, ClassNames } from '@co-design/styles'; import { View } from '../View'; import { CheckboxIcon } from './CheckboxIcon'; import useStyles from './Chip.style'; +import CloseIcon from './CloseIcon'; +import { Text } from '../Text'; export type ChipStylesNames = ClassNames; @@ -55,6 +57,10 @@ export interface ChipProps extends CoComponentProps, Omit( checked, defaultChecked, onChange, + onDelete, co, overrideStyles, ...props @@ -83,7 +90,6 @@ export const Chip = forwardRef( const uuid = useId(id); const theme = useCoTheme(); const _color = color || theme.primaryColor; - const { classes, cx } = useStyles({ radius, size, color: _color }, { overrideStyles, name: __staticSelector }); const [value, setValue] = useUncontrolled({ value: checked, @@ -93,25 +99,38 @@ export const Chip = forwardRef( rule: (val) => typeof val === 'boolean', }); + const { classes, cx } = useStyles({ radius, size, color: _color, checked: value }, { overrideStyles, name: __staticSelector }); + return ( setValue(event.currentTarget.checked)} + onChange={(event) => { + console.log('change'); + setValue(event.currentTarget.checked); + }} id={uuid} disabled={disabled} ref={ref} {...props} /> - ); diff --git a/packages/co-design-core/src/components/Chips/CloseIcon.tsx b/packages/co-design-core/src/components/Chips/CloseIcon.tsx new file mode 100644 index 00000000..e3f1f445 --- /dev/null +++ b/packages/co-design-core/src/components/Chips/CloseIcon.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; + +const CloseIcon = (props: SVGProps) => ( + + + +); + +export default CloseIcon; diff --git a/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx b/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx new file mode 100644 index 00000000..cf09ae55 --- /dev/null +++ b/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import { Chip } from '../Chip'; + +export default { + title: '@co-design/core/Chip', + component: Chip, + argTypes: { + size: { + options: ['xsmall', 'small', 'medium', 'large', 'xlarge'], + control: { type: 'inline-radio' }, + }, + color: { + options: ['purple', 'gray', 'red', 'blue', 'orange', 'green'], + control: { type: 'inline-radio' }, + }, + radius: { + options: ['small', 'medium', 'large', 'round'], + control: { type: 'inline-radio' }, + }, + checked: { + control: { type: 'boolean' }, + }, + }, + args: { + size: 'small', + color: 'purple', + radius: 'medium', + }, +}; + +export const Default = { + render: (props) => { + return React; + }, +}; + +export const Deletable = { + render: (props) => { + const [chips, setChips] = useState(['React', 'Angular', 'Svelte', 'Vue']); + return ( +
+ {chips.map((chip) => ( + { + setChips(chips.filter((c) => c !== chip)); + }} + > + {chip} + + ))} +
+ ); + }, +}; From a7e9c63ca432f9bcf631116142b9c9b8f47c5887 Mon Sep 17 00:00:00 2001 From: healtheloper Date: Fri, 15 Sep 2023 15:01:51 +0900 Subject: [PATCH 2/5] =?UTF-8?q?console.log=20=EC=82=AD=EC=A0=9C=ED=96=88?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/co-design-core/src/components/Chips/Chip.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/co-design-core/src/components/Chips/Chip.tsx b/packages/co-design-core/src/components/Chips/Chip.tsx index 6c53f893..9a4c9ef0 100644 --- a/packages/co-design-core/src/components/Chips/Chip.tsx +++ b/packages/co-design-core/src/components/Chips/Chip.tsx @@ -108,7 +108,6 @@ export const Chip = forwardRef( className={classes.input} checked={value} onChange={(event) => { - console.log('change'); setValue(event.currentTarget.checked); }} id={uuid} From f5107a4c4979c1493a5a6a84e03ce74073eca101 Mon Sep 17 00:00:00 2001 From: healtheloper Date: Fri, 15 Sep 2023 15:11:40 +0900 Subject: [PATCH 3/5] =?UTF-8?q?styles=20=EC=97=90=EC=84=9C=20=EC=95=88?= =?UTF-8?q?=EC=93=B0=EB=8A=94=20=EC=86=8D=EC=84=B1=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=ED=96=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/co-design-core/src/components/Chips/Chip.style.ts | 3 +-- packages/co-design-core/src/components/Chips/Chip.tsx | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/co-design-core/src/components/Chips/Chip.style.ts b/packages/co-design-core/src/components/Chips/Chip.style.ts index a4b4380e..26d1cf59 100644 --- a/packages/co-design-core/src/components/Chips/Chip.style.ts +++ b/packages/co-design-core/src/components/Chips/Chip.style.ts @@ -53,10 +53,9 @@ interface ChipStyles { radius: CoRadius | number; size: CoSize; color: CoPalette; - checked: boolean; } -export default createStyles((theme, { radius, size, color, checked }: ChipStyles, getRef) => { +export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) => { const label = getRef('label'); const iconWrapper = getRef('iconWrapper'); diff --git a/packages/co-design-core/src/components/Chips/Chip.tsx b/packages/co-design-core/src/components/Chips/Chip.tsx index 9a4c9ef0..a9a39766 100644 --- a/packages/co-design-core/src/components/Chips/Chip.tsx +++ b/packages/co-design-core/src/components/Chips/Chip.tsx @@ -91,6 +91,8 @@ export const Chip = forwardRef( const theme = useCoTheme(); const _color = color || theme.primaryColor; + const { classes, cx } = useStyles({ radius, size, color: _color }, { overrideStyles, name: __staticSelector }); + const [value, setValue] = useUncontrolled({ value: checked, defaultValue: defaultChecked, @@ -99,8 +101,6 @@ export const Chip = forwardRef( rule: (val) => typeof val === 'boolean', }); - const { classes, cx } = useStyles({ radius, size, color: _color, checked: value }, { overrideStyles, name: __staticSelector }); - return ( Date: Fri, 15 Sep 2023 15:19:39 +0900 Subject: [PATCH 4/5] =?UTF-8?q?CSS=20layout=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=A1=A4=EB=B0=B1=ED=96=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Chips/Chip.style.ts | 12 ++++++------ .../src/components/Chips/stories/Chip.stories.tsx | 5 +++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/co-design-core/src/components/Chips/Chip.style.ts b/packages/co-design-core/src/components/Chips/Chip.style.ts index 26d1cf59..ca4780a2 100644 --- a/packages/co-design-core/src/components/Chips/Chip.style.ts +++ b/packages/co-design-core/src/components/Chips/Chip.style.ts @@ -67,10 +67,8 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) ...defaultFontStyles(theme), boxSizing: 'border-box', color: theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.black, - display: 'flex', - width: 'fit-content', + display: 'inline-block', alignItems: 'center', - justifyContent: 'space-around', userSelect: 'none', border: `1px solid ${theme.colorScheme === 'dark' ? theme.palettes.gray[2] : theme.palettes.gray[3]}`, borderRadius: getFieldValue(radius, theme.radius), @@ -84,13 +82,15 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) transition: 'background-color 100ms ease', WebkitTapHighlightColor: 'transparent', backgroundColor: theme.colorScheme === 'dark' ? theme.palettes.gray[8] : theme.colors.white, - position: 'relative', + '&:hover': { backgroundColor: theme.colorScheme === 'dark' ? theme.palettes.gray[8] : theme.palettes.gray[0], }, }, checkWrapper: { + display: 'inline-block', + verticalAlign: 'middle', ref: iconWrapper, color: theme.palettes[color][theme.colorScheme === 'dark' ? 3 : 5], width: getFieldValue(size, checkIconSizes), @@ -101,8 +101,8 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef) }, closeWrapper: { - display: 'flex', - alignItems: 'center', + display: 'inline-block', + verticalAlign: 'middle', ref: iconWrapper, width: getFieldValue(size, closeIconSizes), maxWidth: getFieldValue(size, closeIconSizes), diff --git a/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx b/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx index cf09ae55..89f97296 100644 --- a/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx +++ b/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { Chip } from '../Chip'; +import { Chips } from '../Chips'; export default { title: '@co-design/core/Chip', @@ -38,7 +39,7 @@ export const Deletable = { render: (props) => { const [chips, setChips] = useState(['React', 'Angular', 'Svelte', 'Vue']); return ( -
+ {chips.map((chip) => ( ))} -
+ ); }, }; From 6f46930effbe0d71d628baca63c2dce3ca65cca6 Mon Sep 17 00:00:00 2001 From: healtheloper Date: Fri, 15 Sep 2023 15:21:10 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20impo?= =?UTF-8?q?rt=20=EC=A7=80=EC=9B=A0=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/co-design-core/src/components/Chips/Chip.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/co-design-core/src/components/Chips/Chip.tsx b/packages/co-design-core/src/components/Chips/Chip.tsx index a9a39766..695e138f 100644 --- a/packages/co-design-core/src/components/Chips/Chip.tsx +++ b/packages/co-design-core/src/components/Chips/Chip.tsx @@ -1,11 +1,10 @@ -import React, { MouseEventHandler, SyntheticEvent, forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import { useUncontrolled, useId } from '@co-design/hooks'; import { CoComponentProps, CoPalette, CoSize, CoRadius, useCoTheme, ClassNames } from '@co-design/styles'; import { View } from '../View'; import { CheckboxIcon } from './CheckboxIcon'; import useStyles from './Chip.style'; import CloseIcon from './CloseIcon'; -import { Text } from '../Text'; export type ChipStylesNames = ClassNames; @@ -107,9 +106,7 @@ export const Chip = forwardRef( type={type} className={classes.input} checked={value} - onChange={(event) => { - setValue(event.currentTarget.checked); - }} + onChange={(event) => setValue(event.currentTarget.checked)} id={uuid} disabled={disabled} ref={ref}