-
Notifications
You must be signed in to change notification settings - Fork 178
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.
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): update ListItemDescriptor to align with the latest design #16563
Changes from 3 commits
fccc98b
8175add
43f721a
7b3cd44
f6ed709
512bb8d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,43 +2,35 @@ import { Flex } from '../../../primitives' | |
import { | ||
ALIGN_FLEX_START, | ||
DIRECTION_ROW, | ||
FLEX_AUTO, | ||
// FLEX_AUTO, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can remove |
||
JUSTIFY_SPACE_BETWEEN, | ||
} from '../../../styles' | ||
import { SPACING } from '../../../ui-style-constants' | ||
|
||
interface ListItemDescriptorProps { | ||
type: 'default' | 'mini' | ||
type: 'default' | 'large' | ||
description: JSX.Element | string | ||
content: JSX.Element | string | ||
isInSlideout?: boolean | ||
} | ||
|
||
export const ListItemDescriptor = ( | ||
props: ListItemDescriptorProps | ||
): JSX.Element => { | ||
const { description, content, type } = props | ||
const { description, content, type, isInSlideout = false } = props | ||
return ( | ||
<Flex | ||
flexDirection={DIRECTION_ROW} | ||
gridGap={SPACING.spacing8} | ||
width="100%" | ||
alignItems={ALIGN_FLEX_START} | ||
justifyContent={type === 'mini' ? JUSTIFY_SPACE_BETWEEN : 'none'} | ||
padding={ | ||
type === 'mini' | ||
? `${SPACING.spacing4} ${SPACING.spacing8}` | ||
: SPACING.spacing12 | ||
} | ||
justifyContent={type === 'default' ? JUSTIFY_SPACE_BETWEEN : 'none'} | ||
padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12} | ||
> | ||
<Flex | ||
flex={type === 'default' && '1'} | ||
width={type === 'mini' ? FLEX_AUTO : '40%'} | ||
> | ||
<Flex minWidth={isInSlideout ? undefined : '13.75rem'}> | ||
{description} | ||
</Flex> | ||
<Flex flex={type === 'default' && '1.95'} overflowWrap="anywhere"> | ||
{content} | ||
</Flex> | ||
<Flex width="100%">{content}</Flex> | ||
</Flex> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,21 @@ | ||
import { css } from 'styled-components' | ||
import { COLORS } from '@opentrons/components' | ||
import { COLORS, OVERFLOW_HIDDEN } from '@opentrons/components' | ||
import type { FlattenSimpleInterpolation } from 'styled-components' | ||
|
||
export const BUTTON_LINK_STYLE = css` | ||
color: ${COLORS.grey60}; | ||
&:hover { | ||
color: ${COLORS.grey40}; | ||
} | ||
` | ||
|
||
export const LINE_CLAMP_TEXT_STYLE = ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
lineClamp: number | ||
): FlattenSimpleInterpolation => css` | ||
display: -webkit-box; | ||
-webkit-box-orient: vertical; | ||
overflow: ${OVERFLOW_HIDDEN}; | ||
text-overflow: ellipsis; | ||
word-wrap: break-word; | ||
-webkit-line-clamp: ${lineClamp}; | ||
` |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This may be overkill, but I am thinking of a more robust way to retrieve labware name on a module better than simply splitting on "on". Maybe:
can work, and we can use an escape hatch if this returns null. I also think this may be beyond the scope of this PR's intention, and I am happy to address it later There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @ncdiehl11 I think we can do that in another PR. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,11 +2,12 @@ import { useSelector } from 'react-redux' | |
import { useTranslation } from 'react-i18next' | ||
import { | ||
COLORS, | ||
DIRECTION_COLUMN, | ||
DeckInfoLabel, | ||
DIRECTION_COLUMN, | ||
Divider, | ||
Flex, | ||
ListItem, | ||
ListItemDescriptor, | ||
SPACING, | ||
StyledText, | ||
} from '@opentrons/components' | ||
|
@@ -30,6 +31,7 @@ import { | |
getModuleEntities, | ||
} from '../../../../../../step-forms/selectors' | ||
import { getModulesOnDeckByType } from '../../../../../../ui/modules/utils' | ||
import { LINE_CLAMP_TEXT_STYLE } from '../../../../../../atoms' | ||
|
||
import type { StepFormProps } from '../../types' | ||
|
||
|
@@ -80,22 +82,31 @@ export function MagnetTools(props: StepFormProps): JSX.Element { | |
{t('protocol_steps:module')} | ||
</StyledText> | ||
<ListItem type="noActive"> | ||
<Flex padding={SPACING.spacing12} gridGap={SPACING.spacing32}> | ||
<Flex> | ||
<DeckInfoLabel deckLabel={slotLocation} /> | ||
</Flex> | ||
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}> | ||
<StyledText desktopStyle="bodyDefaultRegular"> | ||
{slotInfo[0]} | ||
</StyledText> | ||
<StyledText | ||
desktopStyle="bodyDefaultRegular" | ||
color={COLORS.grey60} | ||
> | ||
{slotInfo[1]} | ||
</StyledText> | ||
</Flex> | ||
</Flex> | ||
<ListItemDescriptor | ||
type="large" | ||
isInSlideout | ||
content={ | ||
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}> | ||
<StyledText | ||
desktopStyle="bodyDefaultRegular" | ||
css={LINE_CLAMP_TEXT_STYLE(2)} | ||
> | ||
{slotInfo[0]} | ||
</StyledText> | ||
<StyledText | ||
desktopStyle="bodyDefaultRegular" | ||
color={COLORS.grey60} | ||
> | ||
{slotInfo[1]} | ||
</StyledText> | ||
</Flex> | ||
} | ||
description={ | ||
<Flex width="2.875rem"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this width is a request from Mel (46px) |
||
<DeckInfoLabel deckLabel={slotLocation} /> | ||
</Flex> | ||
} | ||
/> | ||
</ListItem> | ||
</Flex> | ||
<Divider marginY="0" /> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
do you still need this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good catch!