fix(components,-protocol-designer): fix lineclamp for dropdown menu

According to designs, the main text for a dropdown option should be clamped to 3 lines maximum. In the event that only one option is produced in DropDownStepFormField, the line clamp should also apply to the returned styled text. Closes RQA-3945
Opentrons · Feb 6, 2025 · f4440fa · f4440fa
1 parent 78848e5
commit f4440fa
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -27,6 +27,7 @@ import { LiquidIcon } from '../LiquidIcon'
 import { DeckInfoLabel } from '../DeckInfoLabel'
 
 import type { FocusEventHandler } from 'react'
+import type { FlattenSimpleInterpolation } from 'styled-components'
 
 export interface DropdownOption {
   name: string
@@ -268,7 +269,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             >
               <StyledText
                 desktopStyle="captionRegular"
-                css={LINE_CLAMP_TEXT_STYLE}
+                css={LINE_CLAMP_TEXT_STYLE(1)}
               >
                 {currentOption.name}
               </StyledText>
@@ -327,7 +328,10 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                       flexDirection={DIRECTION_COLUMN}
                       gridGap={option.subtext != null ? SPACING.spacing4 : '0'}
                     >
-                      <StyledText desktopStyle="captionRegular">
+                      <StyledText
+                        desktopStyle="captionRegular"
+                        css={LINE_CLAMP_TEXT_STYLE(3)}
+                      >
                         {option.name}
                       </StyledText>
                       <StyledText
@@ -363,12 +367,17 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
   )
 }
 
-const LINE_CLAMP_TEXT_STYLE = css`
+export const LINE_CLAMP_TEXT_STYLE = (
+  lineClamp?: number,
+  title?: boolean
+): FlattenSimpleInterpolation => css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: ${OVERFLOW_HIDDEN};
   text-overflow: ellipsis;
   word-wrap: break-word;
-  -webkit-line-clamp: 1;
-  word-break: break-all;
+  -webkit-line-clamp: ${lineClamp ?? 1};
+  word-break: ${title === true
+    ? 'normal'
+    : 'break-all'}; // normal for tile and break-all for a non word case like aaaaaaaa
 `
diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -7,6 +7,7 @@ import {
   DeckInfoLabel,
   DropdownMenu,
   Flex,
+  LINE_CLAMP_TEXT_STYLE,
   ListItem,
   SPACING,
   StyledText,
@@ -122,7 +123,10 @@ export function DropdownStepFormField(
                 flexDirection={DIRECTION_COLUMN}
                 gridGap={options[0].subtext != null ? SPACING.spacing4 : '0'}
               >
-                <StyledText desktopStyle="captionRegular">
+                <StyledText
+                  desktopStyle="captionRegular"
+                  css={LINE_CLAMP_TEXT_STYLE(3)}
+                >
                   {options[0].name}
                 </StyledText>
                 <StyledText