Skip to content

Commit

Permalink
fix(protocol-designer): fix ListItemDescriptor content and descriptio…
Browse files Browse the repository at this point in the history 
…n alignment issue (#16588)

fix ListItemDescriptor content and description alignment issue
  • Loading branch information
@koji
koji authored Oct 24, 2024
1 parent 1d7b1f7 commit 5c04eab
Show file tree
Hide file tree
Showing 8 changed files with 194 additions and 89 deletions.
13 changes: 5 additions & 8 deletions components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,14 @@ import { SPACING } from '../../../ui-style-constants'

interface ListItemDescriptorProps {
type: 'default' | 'large'
description: JSX.Element | string
content: JSX.Element | string
isInSlideout?: boolean
description: JSX.Element
content: JSX.Element
}

export const ListItemDescriptor = (
props: ListItemDescriptorProps
): JSX.Element => {
const { description, content, type, isInSlideout = false } = props
const { description, content, type } = props
return (
<Flex
flexDirection={DIRECTION_ROW}
Expand All @@ -26,10 +25,8 @@ export const ListItemDescriptor = (
justifyContent={type === 'default' ? JUSTIFY_SPACE_BETWEEN : 'none'}
padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
>
<Flex minWidth={isInSlideout ? undefined : '13.75rem'}>
{description}
</Flex>
<Flex width="100%">{content}</Flex>
{description}
{content}
</Flex>
)
}
80 changes: 49 additions & 31 deletions protocol-designer/src/organisms/MaterialsListModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
DIRECTION_ROW,
Flex,
InfoScreen,
JUSTIFY_SPACE_BETWEEN,
LiquidIcon,
ListItem,
ListItemDescriptor,
Expand All @@ -32,13 +31,14 @@ import { getInitialDeckSetup } from '../../step-forms/selectors'
import { getTopPortalEl } from '../../components/portals/TopPortal'
import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
import { HandleEnter } from '../../atoms/HandleEnter'
import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'

import type { AdditionalEquipmentName } from '@opentrons/step-generation'
import type { LabwareOnDeck, ModuleOnDeck } from '../../step-forms'
import type { OrderedLiquids } from '../../labware-ingred/types'

// ToDo (kk:09/04/2024) this should be removed when break-point is set up
const MODAL_MIN_WIDTH = '36.1875rem'
const MODAL_MIN_WIDTH = '37.125rem'

export interface FixtureInList {
name: AdditionalEquipmentName
Expand Down Expand Up @@ -82,6 +82,7 @@ export function MaterialsListModal({
title={t('materials_list')}
marginLeft="0rem"
minWidth={MODAL_MIN_WIDTH}
childrenPadding={SPACING.spacing24}
>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
Expand All @@ -95,13 +96,18 @@ export function MaterialsListModal({
<ListItemDescriptor
type="large"
description={
fixture.location != null ? (
<DeckInfoLabel
deckLabel={fixture.location.replace('cutout', '')}
/>
) : (
''
)
<Flex minWidth="13.75rem">
{fixture.location != null ? (
<DeckInfoLabel
deckLabel={fixture.location.replace(
'cutout',
''
)}
/>
) : (
''
)}
</Flex>
}
content={
<Flex
Expand Down Expand Up @@ -130,7 +136,11 @@ export function MaterialsListModal({
<ListItemDescriptor
type="large"
description={
<DeckInfoLabel deckLabel={formatLocation(hw.slot)} />
<Flex minWidth="13.75rem">
<DeckInfoLabel
deckLabel={formatLocation(hw.slot)}
/>
</Flex>
}
content={
<Flex
Expand Down Expand Up @@ -189,9 +199,15 @@ export function MaterialsListModal({
<ListItemDescriptor
type="large"
description={
<DeckInfoLabel deckLabel={deckLabelSlot} />
<Flex minWidth="13.75rem">
<DeckInfoLabel deckLabel={deckLabelSlot} />
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{lw.def.metadata.displayName}
</StyledText>
}
content={lw.def.metadata.displayName}
/>
</ListItem>
)
Expand Down Expand Up @@ -246,29 +262,31 @@ export function MaterialsListModal({
} else {
return (
<ListItem type="noActive" key={`liquid_${id}`}>
<Flex
justifyContent={JUSTIFY_SPACE_BETWEEN}
width="100%"
padding={SPACING.spacing12}
>
<Flex
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
flex="1"
>
<LiquidIcon color={liquid.displayColor ?? ''} />
<StyledText desktopStyle="bodyDefaultRegular">
{liquid.name ?? t('n/a')}
</StyledText>
</Flex>

<Flex flex="1.27">
<ListItemDescriptor
type="large"
description={
<Flex
minWidth="13.75rem"
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
width="13.75rem"
>
<LiquidIcon color={liquid.displayColor ?? ''} />
<StyledText
desktopStyle="bodyDefaultRegular"
css={LINE_CLAMP_TEXT_STYLE(3)}
>
{liquid.name ?? t('n/a')}
</StyledText>
</Flex>
}
content={
<Tag
text={`${totalVolume.toString()} uL`}
type="default"
/>
</Flex>
</Flex>
}
/>
</ListItem>
)
}
Expand Down
26 changes: 11 additions & 15 deletions protocol-designer/src/organisms/SlotInformation/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type * as React from 'react'
import { useTranslation } from 'react-i18next'
import { useLocation } from 'react-router-dom'
import {
Expand All @@ -12,6 +11,7 @@ import {
StyledText,
TYPOGRAPHY,
} from '@opentrons/components'
import type { FC } from 'react'
import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
import type { RobotType } from '@opentrons/shared-data'

Expand All @@ -25,7 +25,7 @@ interface SlotInformationProps {
fixtures?: string[]
}

export const SlotInformation: React.FC<SlotInformationProps> = ({
export const SlotInformation: FC<SlotInformationProps> = ({
location,
robotType,
liquids = [],
Expand All @@ -50,10 +50,10 @@ export const SlotInformation: React.FC<SlotInformationProps> = ({
</Flex>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
{liquids.length > 1 ? (
<ListItem type="noActive">
<ListItem type="noActive" width="max-content">
<ListItemDescriptor
type="default"
content={liquids.join(', ')}
content={<StyledText>{liquids.join(', ')}</StyledText>}
description={t('liquid')}
/>
</ListItem>
Expand Down Expand Up @@ -115,18 +115,14 @@ function StackInfo({ title, stackInformation }: StackInfoProps): JSX.Element {
<ListItemDescriptor
type="default"
content={
stackInformation != null ? (
<StyledText
desktopStyle="bodyDefaultRegular"
textAlign={TYPOGRAPHY.textAlignRight}
>
{stackInformation}
</StyledText>
) : (
t('none')
)
<StyledText
desktopStyle="bodyDefaultRegular"
textAlign={TYPOGRAPHY.textAlignRight}
>
{stackInformation ?? t('none')}
</StyledText>
}
description={title}
description={<Flex width="7.40625rem">{title}</Flex>}
/>
</ListItem>
)
Expand Down
1 change: 0 additions & 1 deletion protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
<ListItem type="noActive">
<ListItemDescriptor
type="large"
isInSlideout
content={
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
<StyledText
Expand Down
83 changes: 69 additions & 14 deletions protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { useTranslation } from 'react-i18next'

import {
Flex,
StyledText,
Btn,
COLORS,
DIRECTION_COLUMN,
SPACING,
Flex,
JUSTIFY_SPACE_BETWEEN,
TYPOGRAPHY,
ListItem,
ListItemDescriptor,
SPACING,
StyledText,
TYPOGRAPHY,
} from '@opentrons/components'
import { getPipetteSpecsV2, FLEX_ROBOT_TYPE } from '@opentrons/shared-data'

Expand Down Expand Up @@ -93,34 +94,88 @@ export function InstrumentsInfo({
<ListItem type="noActive" key={`ProtocolOverview_robotType`}>
<ListItemDescriptor
type="large"
description={t('robotType')}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('robotType')}
</StyledText>
</Flex>
}
content={
robotType === FLEX_ROBOT_TYPE
? t('shared:opentrons_flex')
: t('shared:ot2')
<StyledText desktopStyle="bodyDefaultRegular">
{robotType === FLEX_ROBOT_TYPE
? t('shared:opentrons_flex')
: t('shared:ot2')}
</StyledText>
}
/>
</ListItem>
<ListItem type="noActive" key={`ProtocolOverview_left`}>
<ListItemDescriptor
type="large"
description={t('left_pip')}
content={pipetteInfo(leftPipette)}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('left_pip')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{pipetteInfo(leftPipette)}
</StyledText>
}
/>
</ListItem>
<ListItem type="noActive" key={`ProtocolOverview_right`}>
<ListItemDescriptor
type="large"
description={t('right_pip')}
content={pipetteInfo(rightPipette)}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('right_pip')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{pipetteInfo(rightPipette)}
</StyledText>
}
/>
</ListItem>
{robotType === FLEX_ROBOT_TYPE ? (
<ListItem type="noActive" key={`ProtocolOverview_gripper`}>
<ListItemDescriptor
type="large"
description={t('extension')}
content={isGripperAttached ? t('gripper') : t('na')}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('extension')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{isGripperAttached ? t('gripper') : t('na')}
</StyledText>
}
/>
</ListItem>
) : null}
Expand Down
17 changes: 14 additions & 3 deletions protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,30 @@ export function LiquidDefinitions({
<ListItemDescriptor
type="large"
description={
<Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
<Flex
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
minWidth="13.75rem"
width="13.75rem"
>
<LiquidIcon color={liquid.displayColor} />
<StyledText
desktopStyle="bodyDefaultRegular"
overflowWrap="anywhere"
id="liquid-name"
css={LINE_CLAMP_TEXT_STYLE(3)}
>
{liquid.name}
</StyledText>
</Flex>
}
content={liquid.description ?? t('na')}
content={
<StyledText
desktopStyle="bodyDefaultRegular"
css={LINE_CLAMP_TEXT_STYLE(10)}
>
{liquid.description ?? t('na')}
</StyledText>
}
/>
</ListItem>
))
Expand Down
Loading

0 comments on commit 5c04eab

Please sign in to comment.