Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(protocol-designer): fix long step name, step details, and step summary layout issue #16547

Merged
merged 9 commits into from
Oct 24, 2024
Merged

fix(protocol-designer): fix long step name, step details, and step summary layout issue #16547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
daf5256
fix(protocol-designer): fix long step name layout issue
Oct 21, 2024
dc5f7b0
update StepContainer
Oct 21, 2024
f197088
update StepSummary to have long step details display a max of 4 lines
Oct 22, 2024
dc068d6
Merge branch 'edge' into protocol_designer-fix-step-name
syao1226 Oct 22, 2024
4a52893
format import
Oct 22, 2024
313b519
use minWidth
Oct 23, 2024
6bdcfbe
Merge branch 'edge' into protocol_designer-fix-step-name
Oct 23, 2024
91cbd31
use LINE_CLAMP_TEXT_STYLE
Oct 23, 2024
763477b
update stepSummary to use flex-wrap
Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -208,8 +207,14 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
}
title={
<Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
<Icon size="1rem" name={icon} />
<StyledText desktopStyle="bodyLargeSemiBold">
<Icon size="1rem" name={icon} minWidth="1rem" />
<StyledText
desktopStyle="bodyLargeSemiBold"
css={`
${LINE_CLAMP_TEXT_STYLE(2)}
word-break: break-all
Copy link
Contributor

@koji koji Oct 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

word-wrap: break-word; didn't work?

Copy link
Collaborator Author

@syao1226 syao1226 Oct 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i added break-all to handle case of very long words or words connected by symbols like underscore.
Screenshot 2024-10-23 at 1 53 46 PM
Screenshot 2024-10-23 at 1 54 49 PM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!

`}
>
{i18n.format(t(formData.stepName), 'capitalize')}
</StyledText>
</Flex>
Expand Down
47 changes: 24 additions & 23 deletions protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,40 @@ 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 {
i18nKey: string
tagText?: string
values?: object
}

function StyledTrans(props: StyledTransProps): JSX.Element {
const { i18nKey, tagText, values } = props
const { t } = useTranslation(['protocol_steps', 'application'])
return (
<Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
<Flex
gridGap={SPACING.spacing4}
alignItems={ALIGN_CENTER}
css={`
flex-wrap: wrap;
word-break: break-word;
`}
>
<Trans
t={t}
i18nKey={i18nKey}
Expand Down Expand Up @@ -388,25 +393,21 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
width="100%"
>
{stepSummaryContent != null ? (
<Flex
backgroundColor={COLORS.grey30}
padding={SPACING.spacing12}
borderRadius={BORDERS.borderRadius4}
width={FLEX_MAX_CONTENT}
minWidth="100%"
>
{stepSummaryContent}
</Flex>
<ListItem type="noActive">
<Flex padding={SPACING.spacing12}>{stepSummaryContent}</Flex>
</ListItem>
) : null}
{stepDetails != null && stepDetails !== '' ? (
<StyledText
backgroundColor={COLORS.grey30}
padding={SPACING.spacing12}
borderRadius={BORDERS.borderRadius4}
desktopStyle="bodyDefaultRegular"
>
{stepDetails}
</StyledText>
<ListItem type="noActive">
<Flex padding={SPACING.spacing12}>
<StyledText
desktopStyle="bodyDefaultRegular"
css={LINE_CLAMP_TEXT_STYLE(3)}
>
{stepDetails}
</StyledText>
</Flex>
</ListItem>
) : null}
</Flex>
) : null
Expand Down
16 changes: 14 additions & 2 deletions protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -217,9 +218,20 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
width="100%"
>
{iconName && (
<Icon size="1rem" name={iconName} color={iconColor ?? color} />
<Icon
size="1rem"
name={iconName}
color={iconColor ?? color}
minWidth="1rem"
/>
)}
<StyledText desktopStyle="bodyDefaultRegular">
<StyledText
desktopStyle="bodyDefaultRegular"
css={`
${LINE_CLAMP_TEXT_STYLE(1)}
word-break: break-all
`}
>
{capitalizeFirstLetterAfterNumber(title)}
</StyledText>
</Flex>
Expand Down
Loading