feat(components, app): update Chip component for unification

update Chip component for unification. the details are below close AUTH-214
Opentrons · Mar 20, 2024 · 563ee5d · 563ee5d
1 parent 0539980
commit 563ee5d
Show file tree

Hide file tree

Showing 40 changed files with 91 additions and 90 deletions.
diff --git a/app/src/atoms/InlineNotification/InlineNotification.stories.tsx b/app/src/atoms/InlineNotification/InlineNotification.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { InlineNotification } from '.'
 import type { Story, Meta } from '@storybook/react'
 
@@ -26,7 +26,7 @@ export default {
       defaultValue: true,
     },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<

diff --git a/app/src/atoms/ListItem/ListItem.stories.tsx b/app/src/atoms/ListItem/ListItem.stories.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
-import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
 import { StyledText } from '../text'
 import { ListItem } from '.'
 import type { Story, Meta } from '@storybook/react'
@@ -15,7 +19,7 @@ export default {
       },
     },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const ListItemTemplate: Story<React.ComponentProps<typeof ListItem>> = args => (

diff --git a/app/src/atoms/Snackbar/Snackbar.stories.tsx b/app/src/atoms/Snackbar/Snackbar.stories.tsx
@@ -7,17 +7,17 @@ import {
   JUSTIFY_CENTER,
   PrimaryButton,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
 import { StyledText } from '../text'
-import { touchScreenViewport } from '../../DesignTokens/constants'
 
 import { Snackbar } from './index'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Snackbar',
   component: Snackbar,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => {

diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import {
-  Flex,
   DIRECTION_COLUMN,
+  Flex,
   POSITION_ABSOLUTE,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../../DesignTokens/constants'
 import { InputField } from '../../InputField'
 import { CustomKeyboard } from './'
 import '../index.css'

diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react'
 import {
-  Flex,
   DIRECTION_COLUMN,
+  Flex,
   POSITION_ABSOLUTE,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../../DesignTokens/constants'
 import { InputField } from '../../InputField'
 import { NormalKeyboard } from '.'
 
@@ -17,7 +17,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Atoms/SoftwareKeyboard/NormalKeyboard',
   component: NormalKeyboard,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof NormalKeyboard>> = args => {

diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx
@@ -4,8 +4,8 @@ import {
   DIRECTION_COLUMN,
   POSITION_ABSOLUTE,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../../DesignTokens/constants'
 import { InputField } from '../../InputField'
 import { Numpad } from './'
 import '../index.css'
@@ -16,7 +16,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Atoms/SoftwareKeyboard/Numpad',
   component: Numpad,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Numpad>> = args => {

diff --git a/app/src/atoms/Toast/ODDToast.stories.tsx b/app/src/atoms/Toast/ODDToast.stories.tsx
@@ -7,16 +7,16 @@ import {
   POSITION_FIXED,
   PrimaryButton,
   SPACING,
+  VIEWPORT,
 } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
 import { StyledText } from '../text'
 import { Toast } from '.'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Toast',
   component: Toast,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Toast>> = args => {

diff --git a/app/src/atoms/buttons/FloatingActionButton.stories.tsx b/app/src/atoms/buttons/FloatingActionButton.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { ICON_DATA_BY_NAME } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { ICON_DATA_BY_NAME, VIEWPORT } from '@opentrons/components'
 import { FloatingActionButton } from './'
 
 import type { Story, Meta } from '@storybook/react'
@@ -17,7 +16,7 @@ export default {
     },
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const FloatingActionButtonTemplate: Story<

diff --git a/app/src/atoms/buttons/LargeButton.stories.tsx b/app/src/atoms/buttons/LargeButton.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { LargeButton } from './'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Buttons/LargeButton',
   argTypes: { onClick: { action: 'clicked' } },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const LargeButtonTemplate: Story<

diff --git a/app/src/atoms/buttons/MediumButton.stories.tsx b/app/src/atoms/buttons/MediumButton.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { ICON_DATA_BY_NAME } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { ICON_DATA_BY_NAME, VIEWPORT } from '@opentrons/components'
 import { MediumButton } from './'
 import type { Story, Meta } from '@storybook/react'
 
@@ -29,7 +28,7 @@ export default {
       defaultValue: undefined,
     },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const MediumButtonTemplate: Story<

diff --git a/app/src/atoms/buttons/RadioButton.stories.tsx b/app/src/atoms/buttons/RadioButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 
 import { RadioButton } from './'
 import type { Story, Meta } from '@storybook/react'
@@ -16,7 +16,7 @@ export default {
     },
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const RadioButtonTemplate: Story<

diff --git a/app/src/atoms/buttons/SmallButton.stories.tsx b/app/src/atoms/buttons/SmallButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { SmallButton } from './'
 
 import type { Story, Meta } from '@storybook/react'
@@ -8,7 +8,7 @@ export default {
   title: 'ODD/Atoms/Buttons/SmallButton',
   argTypes: { onClick: { action: 'clicked' } },
   component: SmallButton,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof SmallButton>> = args => (

diff --git a/app/src/atoms/buttons/TabbedButton.stories.tsx b/app/src/atoms/buttons/TabbedButton.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { TabbedButton } from './'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Buttons/TabbedButton',
   argTypes: { onClick: { action: 'clicked' } },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const TabbedButtonTemplate: Story<

diff --git a/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx b/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react'
-import { Flex, PrimaryButton } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { Flex, PrimaryButton, VIEWPORT } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
 import { BackgroundOverlay } from './index'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Molecules/BackgroundOverlay',
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<

diff --git a/app/src/molecules/CardButton/CardButton.stories.tsx b/app/src/molecules/CardButton/CardButton.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import { Flex, SPACING } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { Flex, SPACING, VIEWPORT } from '@opentrons/components'
 import { GlobalStyle } from '../../atoms/GlobalStyle'
 import { CardButton } from '.'
 
@@ -10,7 +9,7 @@ import type { Story, Meta } from '@storybook/react'
 export default {
   title: 'ODD/Molecules/CardButton',
   component: CardButton,
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
   decorators: [
     Story => (
       <>

diff --git a/app/src/molecules/Modal/Modal.stories.tsx b/app/src/molecules/Modal/Modal.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { COLORS, Flex, BORDERS, SPACING } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { COLORS, Flex, BORDERS, SPACING, VIEWPORT } from '@opentrons/components'
 import { Modal } from './Modal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -13,7 +12,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Modal>> = args => (

diff --git a/app/src/molecules/Modal/ModalHeader.stories.tsx b/app/src/molecules/Modal/ModalHeader.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { COLORS } from '@opentrons/components'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { COLORS, VIEWPORT } from '@opentrons/components'
 import { ModalHeader } from './ModalHeader'
 import type { Story, Meta } from '@storybook/react'
 
@@ -24,7 +23,7 @@ export default {
     },
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof ModalHeader>> = args => (

diff --git a/app/src/molecules/Modal/SmallModalChildren.stories.tsx b/app/src/molecules/Modal/SmallModalChildren.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { SmallModalChildren } from './SmallModalChildren'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Molecules/Modals/SmallModalChildren',
   argTypes: { onClick: { action: 'clicked' } },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<

diff --git a/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx b/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { ODDBackButton } from '.'
 import type { Story, Meta } from '@storybook/react'
 
@@ -8,7 +8,7 @@ export default {
   argTypes: {
     onClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const ODDBackButtonTemplate: Story<

diff --git a/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx b/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { SmallButton } from '../../atoms/buttons'
 import { ChildNavigation } from '.'
 import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Organisms/ChildNavigation',
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof ChildNavigation>> = args => (

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { AddFixtureModal } from './AddFixtureModal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -13,7 +13,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const queryClient = new QueryClient()

diff --git a/...organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx b/...organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { DeckConfigurationDiscardChangesModal } from './DeckConfigurationDiscardChangesModal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -12,7 +12,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<

diff --git a/...ms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx b/...ms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { touchScreenViewport } from '../../DesignTokens/constants'
+import { VIEWPORT } from '@opentrons/components'
 import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstructionsModal'
 import type { Story, Meta } from '@storybook/react'
 
@@ -12,7 +12,7 @@ export default {
     },
     onOutsideClick: { action: 'clicked' },
   },
-  parameters: touchScreenViewport,
+  parameters: VIEWPORT.touchScreenViewport,
 } as Meta
 
 const Template: Story<

diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
@@ -16,7 +16,6 @@ import {
 import { StyledText } from '../../../atoms/text'
 import { Banner } from '../../../atoms/Banner'
 import { Divider } from '../../../atoms/structure'
-// import { Chip } from '../../../atoms/Chip'
 import { NoParameter } from '../../ProtocolDetails/ProtocolParameters/NoParameter'
 import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis'