fix(components, protocol-designer): fix word break in dropdown menu (#…

…17456) 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-3950
Opentrons · Feb 6, 2025 · 632eb64 · 632eb64
1 parent 7e160c1
commit 632eb64
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -330,7 +330,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                     >
                       <StyledText
                         desktopStyle="captionRegular"
-                        css={LINE_CLAMP_TEXT_STYLE(3)}
+                        css={LINE_CLAMP_TEXT_STYLE(3, true)}
                       >
                         {option.name}
                       </StyledText>
@@ -369,15 +369,15 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
 
 export const LINE_CLAMP_TEXT_STYLE = (
   lineClamp?: number,
-  title?: boolean
+  wordBreak?: boolean
 ): FlattenSimpleInterpolation => css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: ${OVERFLOW_HIDDEN};
   text-overflow: ellipsis;
   word-wrap: break-word;
   -webkit-line-clamp: ${lineClamp ?? 1};
-  word-break: ${title === true
+  word-break: ${wordBreak === 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
@@ -125,7 +125,7 @@ export function DropdownStepFormField(
               >
                 <StyledText
                   desktopStyle="captionRegular"
-                  css={LINE_CLAMP_TEXT_STYLE(3)}
+                  css={LINE_CLAMP_TEXT_STYLE(3, true)}
                 >
                   {options[0].name}
                 </StyledText>