-
Notifications
You must be signed in to change notification settings - Fork 179
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
Conversation
…atest design update ListItemDescriptor to align with the latest design close AUTH-895
</Flex> | ||
} | ||
description={ | ||
<Flex width="2.875rem"> |
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.
this width is a request from Mel (46px)
@@ -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 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!
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.
left a comment on retrieving nicknames. let me know what you think, but we can push that to later
@@ -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 comment
The reason will be displayed to describe this comment to others. Learn more.
can remove
|
||
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 comment
The reason will be displayed to describe this comment to others. Learn more.
👍
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.
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:
const timeline = useSelector(getRobotStateAtActiveItem)
const labware = timeline?.labware ?? {}
let labwareOnModuleId: string | null = null
for (const [id, lw] of Object.entries(labware)) {
if (lw.slot === formData.moduleId) {
labwareOnModuleId = id
break
}
}
const nickname =
labwareOnModuleId != null
? useSelector(getLabwareNicknamesById)[labwareOnModuleId ?? '']
: null
const moduleDisplayName = getModuleDisplayName(moduleModel)
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 comment
The reason will be displayed to describe this comment to others. Learn more.
@ncdiehl11 I think we can do that in another PR.
Overview
update ListItemDescriptor to align with the latest design
design
https://www.figma.com/design/WbkiUyU8VhtKz0JSuIFA45/Feature%3A-Protocol-Designer-Phase-1?node-id=10092-334055&m=dev
previous
default
->large
previous
mini
->default
add a CSS style to atoms for line clamp.
close AUTH-895
Test Plan and Hands on Testing
Changelog
Review requests
Risk assessment
low