fix(components,-protocol-designer): fix order and border radius logic…

… for DeckLabelSet This PR updates the order in which elements of a module/adapter/labware stack are displayed. The correct order should be top-down, reflecting the physical orientation of the elements on the deck. Also, this PR fixes the border radii of each label in the set according to designs. Closes RQA-3736
Opentrons · Jan 9, 2025 · de9dd63 · de9dd63
1 parent 784c622
commit de9dd63
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/components/src/organisms/DeckLabelSet/index.tsx b/components/src/organisms/DeckLabelSet/index.tsx
@@ -73,17 +73,17 @@ const StyledBox = styled(Box)<StyledBoxProps>`
 
 const LabelContainer = styled.div`
   padding-left: ${SPACING.spacing12};
-  & > *:not(:first-child):not(:last-child) {
+
+  & > *:first-child {
     border-bottom-right-radius: ${BORDERS.borderRadius4};
-    border-top-right-radius: ${BORDERS.borderRadius4};
   }
 
-  & > *:first-child {
+  & > *:not(:first-child) {
+    border-top-right-radius: ${BORDERS.borderRadius4};
     border-bottom-right-radius: ${BORDERS.borderRadius4};
   }
 
   & > *:last-child {
     border-bottom-left-radius: ${BORDERS.borderRadius4};
-    border-bottom-right-radius: ${BORDERS.borderRadius4};
   }
 `
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx b/protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx
@@ -71,14 +71,14 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
     <DeckLabelSet
       ref={labelContainerRef}
       deckLabels={[
+        ...labwareInfos,
         {
           text: labelName ?? def?.displayName,
           isSelected,
           isLast,
           moduleModel: def?.model,
           isZoomed: isZoomed,
         },
-        ...labwareInfos,
       ]}
       x={
         position[0] +

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx b/protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx
@@ -106,19 +106,20 @@ export const SelectedHoveredItems = (
   const labwareInfos: DeckLabelProps[] = []
 
   if (
-    selectedLabwareDefUri != null &&
-    (hoveredLabware == null || hoveredLabware !== selectedLabwareDefUri)
+    (hoveredLabware != null ||
+      selectedLabwareDefUri === hoveredLabware ||
+      selectedNestedLabwareDefUri === hoveredLabware) &&
+    hoveredLabwareDef != null
   ) {
-    const def =
-      defs[selectedLabwareDefUri] ?? customLabwareDefs[selectedLabwareDefUri]
-    const selectedLabwareLabel = {
-      text: def.metadata.displayName,
-      isSelected: true,
-      isLast: hoveredLabware == null && selectedNestedLabwareDefUri == null,
+    const hoverLabelLabel = {
+      text: hoveredLabwareDef.metadata.displayName,
+      isSelected: false,
+      isLast: true,
       isZoomed: true,
     }
-    labwareInfos.push(selectedLabwareLabel)
+    labwareInfos.push(hoverLabelLabel)
   }
+
   if (selectedNestedLabwareDef != null && hoveredLabware == null) {
     const selectedNestedLabwareLabel = {
       text: selectedNestedLabwareDef.metadata.displayName,
@@ -129,18 +130,18 @@ export const SelectedHoveredItems = (
     labwareInfos.push(selectedNestedLabwareLabel)
   }
   if (
-    (hoveredLabware != null ||
-      selectedLabwareDefUri === hoveredLabware ||
-      selectedNestedLabwareDefUri === hoveredLabware) &&
-    hoveredLabwareDef != null
+    selectedLabwareDefUri != null &&
+    (hoveredLabware == null || hoveredLabware !== selectedLabwareDefUri)
   ) {
-    const hoverLabelLabel = {
-      text: hoveredLabwareDef.metadata.displayName,
-      isSelected: false,
-      isLast: true,
+    const def =
+      defs[selectedLabwareDefUri] ?? customLabwareDefs[selectedLabwareDefUri]
+    const selectedLabwareLabel = {
+      text: def.metadata.displayName,
+      isSelected: true,
+      isLast: hoveredLabware == null && selectedNestedLabwareDefUri == null,
       isZoomed: true,
     }
-    labwareInfos.push(hoverLabelLabel)
+    labwareInfos.push(selectedLabwareLabel)
   }
 
   return (