-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(components, protocol-designer): Fix text wrap issues in PD (#16385)
* fix(components, protocol-designer): Fix text wrap issues in PD
- Loading branch information
Showing
6 changed files
with
179 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { useTranslation } from 'react-i18next' | ||
| import { css } from 'styled-components' | ||
| import { | ||
| ALIGN_CENTER, | ||
| DIRECTION_COLUMN, | ||
| Flex, | ||
| InfoScreen, | ||
| LiquidIcon, | ||
| ListItem, | ||
| ListItemDescriptor, | ||
| OVERFLOW_HIDDEN, | ||
| SPACING, | ||
| StyledText, | ||
| } from '@opentrons/components' | ||
|
|
||
| import type { AllIngredGroupFields } from '../../labware-ingred/types' | ||
|
|
||
| interface LiquidDefinitionsProps { | ||
| allIngredientGroupFields: AllIngredGroupFields | ||
| } | ||
|
|
||
| export function LiquidDefinitions({ | ||
| allIngredientGroupFields, | ||
| }: LiquidDefinitionsProps): JSX.Element { | ||
| const { t } = useTranslation('protocol_overview') | ||
| return ( | ||
| <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}> | ||
| <StyledText desktopStyle="headingSmallBold"> | ||
| {t('liquid_defs')} | ||
| </StyledText> | ||
| <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}> | ||
| {Object.keys(allIngredientGroupFields).length > 0 ? ( | ||
| Object.values(allIngredientGroupFields).map((liquid, index) => ( | ||
| <ListItem | ||
| type="noActive" | ||
| key={`${liquid.name}_${liquid.displayColor}_${index}`} | ||
| > | ||
| <ListItemDescriptor | ||
| type="default" | ||
| description={ | ||
| <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}> | ||
| <LiquidIcon color={liquid.displayColor} /> | ||
| <StyledText | ||
| desktopStyle="bodyDefaultRegular" | ||
| overflowWrap="anywhere" | ||
| id="liquid-name" | ||
| css={LIQUID_DEFINITION_TEXT} | ||
| > | ||
| {liquid.name} | ||
| </StyledText> | ||
| </Flex> | ||
| } | ||
| content={liquid.description ?? t('na')} | ||
| /> | ||
| </ListItem> | ||
| )) | ||
| ) : ( | ||
| <InfoScreen content={t('no_liquids_defined')} /> | ||
| )} | ||
| </Flex> | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| const LIQUID_DEFINITION_TEXT = css` | ||
| display: -webkit-box; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-line-clamp: 3; | ||
| overflow: ${OVERFLOW_HIDDEN}; | ||
| text-overflow: ellipsis; | ||
| ` |
78 changes: 78 additions & 0 deletions
78
protocol-designer/src/pages/ProtocolOverview/__tests__/LiquidDefinitions.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { describe, it, vi, beforeEach } from 'vitest' | ||
| import { screen } from '@testing-library/react' | ||
|
|
||
| import { renderWithProviders } from '../../../__testing-utils__' | ||
| import { i18n } from '../../../assets/localization' | ||
| import { LiquidDefinitions } from '../LiquidDefinitions' | ||
|
|
||
| import type { ComponentProps } from 'react' | ||
| import type { InfoScreen } from '@opentrons/components' | ||
|
|
||
| vi.mock('@opentrons/components', async importOriginal => { | ||
| const actual = await importOriginal<typeof InfoScreen>() | ||
| return { | ||
| ...actual, | ||
| InfoScreen: () => <div>mock InfoScreen</div>, | ||
| } | ||
| }) | ||
|
|
||
| const mockAllIngredientGroupFields = { | ||
| '0': { | ||
| name: 'EtOH', | ||
| displayColor: '#b925ff', | ||
| description: 'Immer fisch Hergestllter EtOH', | ||
| serialize: false, | ||
| liquidGroupId: '0', | ||
| }, | ||
| '1': { | ||
| name: '10mM Tris pH8,5', | ||
| displayColor: '#ffd600', | ||
| description: null, | ||
| serialize: false, | ||
| liquidGroupId: '1', | ||
| }, | ||
| '2': { | ||
| name: 'Amplicon PCR sample + AMPure XP beads', | ||
| displayColor: '#9dffd8', | ||
| description: '25µl Amplicon PCR + 20 µl AMPure XP beads', | ||
| serialize: false, | ||
| liquidGroupId: '2', | ||
| }, | ||
| } | ||
|
|
||
| const render = (props: ComponentProps<typeof LiquidDefinitions>) => { | ||
| return renderWithProviders(<LiquidDefinitions {...props} />, { | ||
| i18nInstance: i18n, | ||
| }) | ||
| } | ||
|
|
||
| describe('LiquidDefinitions', () => { | ||
| let props: ComponentProps<typeof LiquidDefinitions> | ||
|
|
||
| beforeEach(() => { | ||
| props = { | ||
| allIngredientGroupFields: {}, | ||
| } | ||
| }) | ||
|
|
||
| it('should render text and InfoScreen if no liquid', () => { | ||
| render(props) | ||
| screen.getByText('Liquid Definitions') | ||
| screen.getByText('mock InfoScreen') | ||
| }) | ||
|
|
||
| it('should render liquid information if there are liquids', () => { | ||
| props = { | ||
| allIngredientGroupFields: mockAllIngredientGroupFields, | ||
| } | ||
| render(props) | ||
| screen.getByText('EtOH') | ||
| screen.getByText('Immer fisch Hergestllter EtOH') | ||
|
|
||
| screen.getByText('10mM Tris pH8,5') | ||
| screen.getByText('N/A') | ||
|
|
||
| screen.getByText('Amplicon PCR sample + AMPure XP beads') | ||
| screen.getByText('25µl Amplicon PCR + 20 µl AMPure XP beads') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters