feat(components, app): move ListItem and create a ListItem child (#15902

)

closes AUTH-623 AUTH-628

app/src/organisms/EmergencyStop/EstopPressedModal.tsx

@@ -13,18 +13,18 @@ import {
   Icon,
   JUSTIFY_FLEX_END,
   JUSTIFY_SPACE_BETWEEN,
+  LegacyStyledText,
+  ListItem,
+  Modal,
   PrimaryButton,
   SPACING,
-  Modal,
-  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
 import { useAcknowledgeEstopDisengageMutation } from '@opentrons/react-api-client'
 
 import { getTopPortalEl } from '../../App/portal'
 import { Banner } from '../../atoms/Banner'
-import { ListItem } from '../../atoms/ListItem'
 import { SmallButton } from '../../atoms/buttons'
 import { OddModal } from '../../molecules/OddModal'
 import { getIsOnDevice } from '../../redux/config'

app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx

@@ -4,14 +4,14 @@ import capitalize from 'lodash/capitalize'
 import {
   DIRECTION_COLUMN,
   Flex,
-  SPACING,
   LegacyStyledText,
-  TYPOGRAPHY,
+  ListItem,
   OVERFLOW_SCROLL,
+  SPACING,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import { getModuleDisplayName } from '@opentrons/shared-data'
 import { OddModal } from '../../molecules/OddModal'
-import { ListItem } from '../../atoms/ListItem'
 import type { AttachedModule } from '@opentrons/api-client'
 import type { OddModalHeaderBaseProps } from '../../molecules/OddModal/types'
 export interface IncompatibleModuleODDModalBodyProps {

app/src/organisms/QuickTransferFlow/Overview.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  COLORS,
+  DIRECTION_COLUMN,
   Flex,
+  JUSTIFY_SPACE_BETWEEN,
   LegacyStyledText,
+  ListItem,
   SPACING,
-  TYPOGRAPHY,
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
-  COLORS,
   TEXT_ALIGN_RIGHT,
+  TYPOGRAPHY,
 } from '@opentrons/components'
-import { ListItem } from '../../atoms/ListItem'
 import { CONSOLIDATE, DISTRIBUTE } from './constants'
 
 import type { QuickTransferSummaryState } from './types'

app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BaseSettings.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  Flex,
-  StyledText,
-  SPACING,
-  TYPOGRAPHY,
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
+  ALIGN_CENTER,
   COLORS,
-  TEXT_ALIGN_RIGHT,
+  DIRECTION_COLUMN,
+  Flex,
   Icon,
+  JUSTIFY_SPACE_BETWEEN,
+  ListItem,
   SIZE_2,
-  ALIGN_CENTER,
+  SPACING,
+  StyledText,
+  TEXT_ALIGN_RIGHT,
+  TYPOGRAPHY,
 } from '@opentrons/components'
-import { ListItem } from '../../../atoms/ListItem'
 import { FlowRateEntry } from './FlowRate'
 import { PipettePath } from './PipettePath'
 

app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/index.tsx

@@ -1,27 +1,26 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  Flex,
-  SPACING,
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
-  TYPOGRAPHY,
   ALIGN_CENTER,
   COLORS,
-  TEXT_ALIGN_RIGHT,
-  StyledText,
+  DIRECTION_COLUMN,
+  Flex,
   Icon,
+  JUSTIFY_SPACE_BETWEEN,
+  ListItem,
   SIZE_2,
+  SPACING,
+  StyledText,
   TEXT_ALIGN_LEFT,
+  TEXT_ALIGN_RIGHT,
+  TYPOGRAPHY,
 } from '@opentrons/components'
-
-import type {
-  QuickTransferSummaryAction,
-  QuickTransferSummaryState,
-} from '../types'
+import {
+  TRASH_BIN_ADAPTER_FIXTURE,
+  WASTE_CHUTE_FIXTURES,
+} from '@opentrons/shared-data'
 import { ACTIONS } from '../constants'
 import { useToaster } from '../../../organisms/ToasterOven'
-import { ListItem } from '../../../atoms/ListItem'
 import { FlowRateEntry } from './FlowRate'
 import { PipettePath } from './PipettePath'
 import { TipPositionEntry } from './TipPosition'
@@ -30,11 +29,11 @@ import { Delay } from './Delay'
 import { TouchTip } from './TouchTip'
 import { AirGap } from './AirGap'
 import { BlowOut } from './BlowOut'
-import {
-  TRASH_BIN_ADAPTER_FIXTURE,
-  WASTE_CHUTE_FIXTURES,
-} from '@opentrons/shared-data'
 
+import type {
+  QuickTransferSummaryAction,
+  QuickTransferSummaryState,
+} from '../types'
 interface QuickTransferAdvancedSettingsProps {
   state: QuickTransferSummaryState
   dispatch: React.Dispatch<QuickTransferSummaryAction>

app/src/organisms/QuickTransferFlow/TipManagement/index.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  ALIGN_CENTER,
+  COLORS,
+  DIRECTION_COLUMN,
   Flex,
+  Icon,
+  JUSTIFY_SPACE_BETWEEN,
   LegacyStyledText,
+  ListItem,
+  SIZE_2,
   SPACING,
-  TYPOGRAPHY,
-  DIRECTION_COLUMN,
-  JUSTIFY_SPACE_BETWEEN,
-  COLORS,
   TEXT_ALIGN_RIGHT,
-  Icon,
-  SIZE_2,
-  ALIGN_CENTER,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import { TRASH_BIN_ADAPTER_FIXTURE } from '@opentrons/shared-data'
-import { ListItem } from '../../../atoms/ListItem'
 import { ChangeTip } from './ChangeTip'
 import { TipDropLocation } from './TipDropLocation'
 

app/src/atoms/ListItem/ListItem.stories.tsx → components/src/atoms/ListItem/ListItem.stories.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
-import {
-  DIRECTION_COLUMN,
-  Flex,
-  SPACING,
-  LegacyStyledText,
-  VIEWPORT,
-} from '@opentrons/components'
+
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
+import { DIRECTION_COLUMN } from '../../styles'
+import { Flex } from '../../primitives'
+import { LegacyStyledText } from '../StyledText'
+import { ListItemDescriptor } from './ListItemChildren/ListItemDescriptor'
 import { ListItem as ListItemComponent } from '.'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ListItemComponent> = {
-  title: 'ODD/Atoms/ListItem',
+  title: 'Library/Atoms/ListItem',
   component: ListItemComponent,
   argTypes: {
     type: {
@@ -45,3 +45,29 @@ export const ListItem: Story = {
     ),
   },
 }
+
+export const ListItemDescriptorDefault: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <ListItemDescriptor
+        type="default"
+        content={<div>mock content</div>}
+        description={<div>mock description</div>}
+      />
+    ),
+  },
+}
+
+export const ListItemDescriptorMini: Story = {
+  args: {
+    type: 'noActive',
+    children: (
+      <ListItemDescriptor
+        type="mini"
+        content={<div>mock content</div>}
+        description={<div>mock description</div>}
+      />
+    ),
+  },
+}

components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Flex } from '../../../primitives'
+import {
+  DIRECTION_ROW,
+  FLEX_AUTO,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../../styles'
+import { SPACING } from '../../../ui-style-constants'
+
+interface ListItemDescriptorProps {
+  type: 'default' | 'mini'
+  description: JSX.Element
+  content: JSX.Element
+}
+
+export const ListItemDescriptor = (
+  props: ListItemDescriptorProps
+): JSX.Element => {
+  const { description, content, type } = props
+  return (
+    <Flex
+      flexDirection={DIRECTION_ROW}
+      gridGap={SPACING.spacing8}
+      width="100%"
+      justifyContent={type === 'mini' ? JUSTIFY_SPACE_BETWEEN : 'none'}
+      padding={
+        type === 'mini'
+          ? `${SPACING.spacing4} ${SPACING.spacing8}`
+          : SPACING.spacing12
+      }
+    >
+      <Flex width={type === 'mini' ? FLEX_AUTO : '30%'}>{description}</Flex>
+      {content}
+    </Flex>
+  )
+}

app/src/atoms/ListItem/__tests__/ListItem.test.tsx → components/src/atoms/ListItem/__tests__/ListItem.test.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import { vi, describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
-import { BORDERS, COLORS, SPACING } from '@opentrons/components'
-import { renderWithProviders } from '../../../__testing-utils__'
+import { renderWithProviders } from '../../../testing/utils'
+import { BORDERS, COLORS } from '../../../helix-design-system'
 
 import { ListItem } from '..'
 
@@ -26,43 +26,35 @@ describe('ListItem', () => {
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_error')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red35}`)
-    expect(listItem).toHaveStyle(
-      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
-    )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
+    expect(listItem).toHaveStyle(`padding: 0`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should render correct style - noActive', () => {
     props.type = 'noActive'
     render(props)
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_noActive')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey35}`)
-    expect(listItem).toHaveStyle(
-      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
-    )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
+    expect(listItem).toHaveStyle(`padding: 0`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should render correct style - success', () => {
     props.type = 'success'
     render(props)
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_success')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green35}`)
-    expect(listItem).toHaveStyle(
-      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
-    )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
+    expect(listItem).toHaveStyle(`padding: 0`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should render correct style - warning', () => {
     props.type = 'warning'
     render(props)
     screen.getByText('mock listitem content')
     const listItem = screen.getByTestId('ListItem_warning')
     expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow35}`)
-    expect(listItem).toHaveStyle(
-      `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
-    )
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius12}`)
+    expect(listItem).toHaveStyle(`padding: 0`)
+    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
   })
   it('should call on click when pressed', () => {
     render(props)

app/src/atoms/ListItem/index.tsx → components/src/atoms/ListItem/index.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react'
-
-import { BORDERS, COLORS, Flex, SPACING } from '@opentrons/components'
-
-import type { StyleProps } from '@opentrons/components'
+import { css } from 'styled-components'
+import { Flex } from '../../primitives'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { FLEX_MAX_CONTENT } from '../../styles'
+import type { StyleProps } from '../../primitives'
 
 export type ListItemType = 'error' | 'noActive' | 'success' | 'warning'
 
@@ -32,19 +34,31 @@ const LISTITEM_PROPS_BY_TYPE: Record<
   },
 }
 
+/*
+  ListItem is used in ODD and helix
+**/
 export function ListItem(props: ListItemProps): JSX.Element {
   const { type, children, onClick, ...styleProps } = props
   const listItemProps = LISTITEM_PROPS_BY_TYPE[type]
 
+  const LIST_ITEM_STYLE = css`
+    background-color: ${listItemProps.backgroundColor};
+    width: 100%;
+    height: ${FLEX_MAX_CONTENT};
+    padding: 0;
+    border-radius: ${BORDERS.borderRadius4};
+
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      padding: ${SPACING.spacing16} ${SPACING.spacing24};
+      border-radius: ${BORDERS.borderRadius12};
+    }
+  `
+
   return (
     <Flex
       data-testid={`ListItem_${type}`}
-      width="100%"
-      height="max-content"
-      padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-      backgroundColor={listItemProps.backgroundColor}
-      borderRadius={BORDERS.borderRadius12}
       onClick={onClick}
+      css={LIST_ITEM_STYLE}
       {...styleProps}
     >
       {children}

components/src/atoms/index.ts

@@ -2,6 +2,7 @@ export * from './buttons'
 export * from './Checkbox'
 export * from './CheckboxField'
 export * from './Chip'
+export * from './ListItem'
 export * from './StepMeter'
 export * from './StepMeter'
 export * from './StyledText'