fix(app): update chip component style and Storybook (#14739)

* fix(app): update chip component style and Storybook
Opentrons · May 20, 2024 · 42bfdc8 · 42bfdc8
1 parent b4c76da
commit 42bfdc8
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx
@@ -1,10 +1,10 @@
 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'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof Chip> = {
   title: 'ODD/Atoms/Chip',
   argTypes: {
     type: {
@@ -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',
       },
@@ -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',
+  },
 }
diff --git 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
@@ -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};
   `