refactor(key-value-list-item): key-value-list-item의 height 28px이 고정되는 스타일을 개선

Author: Seolhun

packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.common.styled.ts

@@ -16,7 +16,7 @@ export interface KeyValueListItemContainerProps {
 export const KeyValueListItemContainer = styled.div<KeyValueListItemContainerProps>`
   box-sizing: border-box;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   padding: 4px 6px;
 
   ${({ foundation }) => foundation?.rounding?.round6};

packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.stories.tsx

@@ -6,6 +6,7 @@ import { Meta, Story } from '@storybook/react'
 
 /* Internal dependencies */
 import { getTitle } from 'Utils/storyUtils'
+import { Button, ButtonColorVariant, ButtonStyleVariant } from 'Components/Button'
 import KeyValueListItem from './KeyValueListItem'
 import KeyValueMultiLineListItem from './KeyValueMultiLineListItem'
 import { KeyValueListItemProps } from './KeyValueListItem.types'
@@ -47,6 +48,14 @@ const SingleLineTemplate: Story<KeyValueListItemStorybookProps> = ({ containerWi
       actions={Array.from(Array(2)).map(() => ({ icon: 'edit', onClick: console.log, tooltip: '수정하기' }))}
     />
     <KeyValueListItem {...otherProps} onClickKey={onClickKey} onClickValue={onClickValue} />
+    <KeyValueListItem {...otherProps}>
+      <Button
+        leftContent="play"
+        text="높이 테스트"
+        colorVariant={ButtonColorVariant.Green}
+        styleVariant={ButtonStyleVariant.Primary}
+      />
+    </KeyValueListItem>
   </div>
 )
 

packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.styled.ts

@@ -4,18 +4,17 @@ import { KeyValueListItemWrapper, KeyValueListItemContainer } from './KeyValueLi
 
 export const Wrapper = styled(KeyValueListItemWrapper)`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 `
 
 export const KeyItemContainer = styled(KeyValueListItemContainer)`
   flex: 1;
-  height: 28px;
   ${ellipsis()};
 `
 
 export const ValueItemContainer = styled(KeyValueListItemContainer)`
   flex: 2;
   justify-content: space-between;
-  height: 28px;
+  min-height: 28px;
   ${ellipsis()};
 `

packages/bezier-react/src/components/KeyValueListItem/KeyValueListItem.test.tsx

@@ -181,7 +181,7 @@ describe('KeyValueListItem', () => {
 
         await user.hover(keyItemContainer as Element)
         expect(keyItemContainer).toHaveStyle('display: flex;')
-        expect(keyItemContainer).toHaveStyle('align-items: center;')
+        expect(keyItemContainer).toHaveStyle('align-items: flex-start;')
         expect(keyItemContainer).toHaveStyle('padding: 4px 6px;')
         expect(keyItemContainer).not.toHaveStyle('cursor: pointer;')
         // NOTE(@sol): Hovered DOM style test is not working
@@ -200,7 +200,7 @@ describe('KeyValueListItem', () => {
 
         await user.hover(keyItemContainer as Element)
         expect(keyItemContainer).toHaveStyle('display: flex;')
-        expect(keyItemContainer).toHaveStyle('align-items: center;')
+        expect(keyItemContainer).toHaveStyle('align-items: flex-start;')
         expect(keyItemContainer).toHaveStyle('padding: 4px 6px;')
         expect(keyItemContainer).toHaveStyle('cursor: pointer;')
         // NOTE(@sol): Hovered DOM style test is not working
@@ -234,7 +234,7 @@ describe('KeyValueListItem', () => {
 
         await user.hover(valueItemContainer as Element)
         expect(valueItemContainer).toHaveStyle('display: flex;')
-        expect(valueItemContainer).toHaveStyle('align-items: center;')
+        expect(valueItemContainer).toHaveStyle('align-items: flex-start;')
         expect(valueItemContainer).toHaveStyle('padding: 4px 6px;')
         expect(valueItemContainer).not.toHaveStyle('cursor: pointer;')
         // NOTE(@sol): Hovered DOM style test is not working
@@ -253,7 +253,7 @@ describe('KeyValueListItem', () => {
 
         await user.hover(valueItemContainer as Element)
         expect(valueItemContainer).toHaveStyle('display: flex;')
-        expect(valueItemContainer).toHaveStyle('align-items: center;')
+        expect(valueItemContainer).toHaveStyle('align-items: flex-start;')
         expect(valueItemContainer).toHaveStyle('padding: 4px 6px;')
         expect(valueItemContainer).toHaveStyle('cursor: pointer;')
         // NOTE(@sol): Hovered DOM style test is not working
@@ -284,7 +284,7 @@ describe('KeyValueListItem', () => {
         const { getByTestId } = renderComponent()
         const rendered = getByTestId(TEST_ID_MAP.ROOT)
         expect(rendered).toHaveStyle('display: flex;')
-        expect(rendered).toHaveStyle('align-items: center;')
+        expect(rendered).toHaveStyle('align-items: flex-start;')
         expect(rendered).toHaveStyle('border-radius: 6px;')
         expect(rendered).toHaveStyle('transition-delay: 0ms;')
         expect(rendered).toHaveStyle('transition-timing-function: cubic-bezier(.3,0,0,1);')
@@ -294,13 +294,11 @@ describe('KeyValueListItem', () => {
         const rootKeyContainer = rendered.firstChild
         expect(rootKeyContainer).toHaveStyle('display: flex;')
         expect(rootKeyContainer).toHaveStyle('flex: 1;')
-        expect(rootKeyContainer).toHaveStyle('height: 28px;')
 
         const rootValueContainer = rendered.lastChild
         expect(rootValueContainer).toHaveStyle('display: flex;')
         expect(rootValueContainer).toHaveStyle('flex: 2;')
         expect(rootValueContainer).toHaveStyle('justify-content: space-between;')
-        expect(rootValueContainer).toHaveStyle('height: 28px;')
         expect(rootValueContainer).toHaveStyle('overflow: hidden;')
         expect(rootValueContainer).toHaveStyle('text-overflow: ellipsis;')
         expect(rootValueContainer).toHaveStyle('white-space: nowrap;')

packages/bezier-react/src/components/KeyValueListItem/__snapshots__/KeyValueListItem.test.tsx.snap

@@ -56,6 +56,7 @@ exports[`KeyValueListItem Snapshot > 1`] = `
 }
 
 .c9 {
+  color: #00000066;
   font-size: 1.4rem;
   line-height: 1.8rem;
   overflow: hidden;
@@ -82,10 +83,10 @@ exports[`KeyValueListItem Snapshot > 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
   padding: 4px 6px;
   overflow: hidden;
   border-radius: 6px;
@@ -96,17 +97,16 @@ exports[`KeyValueListItem Snapshot > 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
 }
 
 .c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  height: 28px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -120,7 +120,7 @@ exports[`KeyValueListItem Snapshot > 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  height: 28px;
+  min-height: 28px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;