CSS layout 방식 롤백했다

cobaltinc · Sep 15, 2023 · adcb256 · adcb256
1 parent f5107a4
commit adcb256
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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 (
-      <div>
+      <Chips>
         {chips.map((chip) => (
           <Chip
             key={chip}
@@ -52,7 +53,7 @@ export const Deletable = {
             {chip}
           </Chip>
         ))}
-      </div>
+      </Chips>
     );
   },
 };