diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx index f101237cb45..35ec0ea5088 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx @@ -2,7 +2,6 @@ import { useState } from 'react' import get from 'lodash/get' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' - import { ALIGN_CENTER, Btn, @@ -24,7 +23,7 @@ import { RenameStepModal } from '../../../../organisms/RenameStepModal' import { getFormWarningsForSelectedStep } from '../../../../dismiss/selectors' import { getTimelineWarningsForSelectedStep } from '../../../../top-selectors/timelineWarnings' import { getRobotStateTimeline } from '../../../../file-data/selectors' -import { BUTTON_LINK_STYLE } from '../../../../atoms' +import { BUTTON_LINK_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../../../atoms' import { CommentTools, HeaterShakerTools, @@ -208,8 +207,14 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { } title={ - - + + {i18n.format(t(formData.stepName), 'capitalize')} diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx index 0d78ea5dc08..b4d64fd19a9 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx @@ -5,23 +5,20 @@ import flatten from 'lodash/flatten' import last from 'lodash/last' import { ALIGN_CENTER, - BORDERS, - COLORS, DIRECTION_COLUMN, Flex, - FLEX_MAX_CONTENT, + ListItem, SPACING, StyledText, Tag, } from '@opentrons/components' import { getModuleDisplayName } from '@opentrons/shared-data' - import { getLabwareEntities, getModuleEntities, } from '../../../step-forms/selectors' import { getLabwareNicknamesById } from '../../../ui/labware/selectors' - +import { LINE_CLAMP_TEXT_STYLE } from '../../../atoms' import type { FormData } from '../../../form-types' interface StyledTransProps { @@ -29,11 +26,19 @@ interface StyledTransProps { tagText?: string values?: object } + function StyledTrans(props: StyledTransProps): JSX.Element { const { i18nKey, tagText, values } = props const { t } = useTranslation(['protocol_steps', 'application']) return ( - + {stepSummaryContent != null ? ( - - {stepSummaryContent} - + + {stepSummaryContent} + ) : null} {stepDetails != null && stepDetails !== '' ? ( - - {stepDetails} - + + + + {stepDetails} + + + ) : null} ) : null diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx index 039c09220c2..c869fdf72dd 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx @@ -30,6 +30,7 @@ import { populateForm, } from '../../../../ui/steps/actions/actions' import { getMultiSelectItemIds } from '../../../../ui/steps/selectors' +import { LINE_CLAMP_TEXT_STYLE } from '../../../../atoms' import { StepOverflowMenu } from './StepOverflowMenu' import { capitalizeFirstLetterAfterNumber } from './utils' @@ -217,9 +218,20 @@ export function StepContainer(props: StepContainerProps): JSX.Element { width="100%" > {iconName && ( - + )} - + {capitalizeFirstLetterAfterNumber(title)}