From d766b66b7f2db5635b78248847488539c99fc3ba Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Tue, 26 Mar 2024 18:35:08 -0400
Subject: [PATCH 1/2] fix(app): update chip component style and storybook

update small chip padding 4px 10px to 4px 8px  and storybook iconName list

close AUTH-241
---
 app/src/atoms/Chip/Chip.stories.tsx        | 4 ++--
 app/src/atoms/Chip/__tests__/Chip.test.tsx | 4 +---
 app/src/atoms/Chip/index.tsx               | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx
index c36cf187647..27de8c7bb07 100644
--- a/app/src/atoms/Chip/Chip.stories.tsx
+++ b/app/src/atoms/Chip/Chip.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Flex, COLORS, ICON_DATA_BY_NAME, SPACING } from '@opentrons/components'
+import { Flex, COLORS, SPACING } from '@opentrons/components'
 import { touchScreenViewport } from '../../DesignTokens/constants'
 import { Chip } from '.'
 import type { Story, Meta } from '@storybook/react'
@@ -28,7 +28,7 @@ export default {
       defaultValue: 'medium',
     },
     iconName: {
-      options: Object.keys(ICON_DATA_BY_NAME),
+      options: ['connection-status', 'ot-check', 'ot-alert'],
       control: {
         type: 'select',
       },
diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
index 194714b13ae..7f3b75f13c3 100644
--- a/app/src/atoms/Chip/__tests__/Chip.test.tsx
+++ b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -217,9 +217,7 @@ describe('Chip', () => {
     }
     render(props)
     const chip = screen.getByTestId('Chip_info')
-    expect(chip).toHaveStyle(
-      `padding: ${SPACING.spacing4} ${SPACING.spacing10}`
-    )
+    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing8}`)
     const icon = screen.getByLabelText('icon_mockInfo')
     expect(icon).toHaveStyle(`width: 1.25rem`)
   })
diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx
index cf291572c76..06d26cf21c7 100644
--- a/app/src/atoms/Chip/index.tsx
+++ b/app/src/atoms/Chip/index.tsx
@@ -109,7 +109,7 @@ export function Chip(props: ChipProps): JSX.Element {
   `
 
   const TOUCHSCREEN_SMALL_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing10};
+    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing8};
     grid-gap: ${SPACING.spacing4};
   `
 

From 9cff9e86d66906fcc5837b0fd9741948fe3b3060 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 27 Mar 2024 00:27:44 -0400
Subject: [PATCH 2/2] update storybook for version 7

---
 app/src/atoms/Chip/Chip.stories.tsx | 44 ++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx
index 27de8c7bb07..26cb9025911 100644
--- a/app/src/atoms/Chip/Chip.stories.tsx
+++ b/app/src/atoms/Chip/Chip.stories.tsx
@@ -2,9 +2,9 @@ import * as React from 'react'
 import { Flex, COLORS, SPACING } from '@opentrons/components'
 import { touchScreenViewport } from '../../DesignTokens/constants'
 import { Chip } from '.'
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof Chip> = {
   title: 'ODD/Atoms/Chip',
   argTypes: {
     type: {
@@ -37,27 +37,27 @@ export default {
   },
   component: Chip,
   parameters: touchScreenViewport,
-} as Meta
-
-interface ChipStorybookProps extends React.ComponentProps<typeof Chip> {
-  backgroundColor: string
+  decorators: [
+    Story => (
+      <Flex
+        padding={SPACING.spacing16}
+        backgroundColor={COLORS.grey50}
+        width="59rem"
+      >
+        <Story />
+      </Flex>
+    ),
+  ],
 }
 
-// Note: 59rem(944px) is the size of ODD
-const Template: Story<ChipStorybookProps> = ({ ...args }) => (
-  <Flex
-    padding={SPACING.spacing16}
-    backgroundColor={COLORS.grey50}
-    width="59rem"
-  >
-    <Chip {...args} />
-  </Flex>
-)
+export default meta
+type Story = StoryObj<typeof Chip>
 
-export const ChipComponent = Template.bind({})
-ChipComponent.args = {
-  type: 'basic',
-  text: 'Chip component',
-  hasIcon: true,
-  chipSize: 'medium',
+export const ChipComponent: Story = {
+  args: {
+    type: 'basic',
+    text: 'Chip component',
+    hasIcon: true,
+    chipSize: 'medium',
+  },
 }