fix(protocol-designer): update line clamp style for title (#17309)

* fix(protocol-designer): update line clamp style for title
Opentrons · Jan 21, 2025 · 1ba7b0f · 1ba7b0f
1 parent e837257
commit 1ba7b0f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/protocol-designer/src/atoms/constants.ts b/protocol-designer/src/atoms/constants.ts
@@ -25,15 +25,18 @@ export const LINK_BUTTON_STYLE = css`
 `
 
 export const LINE_CLAMP_TEXT_STYLE = (
-  lineClamp: number
+  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: ${lineClamp};
-  word-break: break-all; // for a non word case like aaaaaaaa
+  word-break: ${title === true
+    ? 'normal'
+    : 'break-all'}; // normal for tile and break-all for a non word case like aaaaaaaa
 `
 
 const MIN_OVERVIEW_WIDTH = '64rem'

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -276,6 +276,8 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
     }
   }
 
+  console.log('stepName', formData.stepName)
+
   return (
     <>
       {isRename ? (
@@ -348,7 +350,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
             <Icon size="1rem" name={icon} minWidth="1rem" />
             <StyledText
               desktopStyle="bodyLargeSemiBold"
-              css={LINE_CLAMP_TEXT_STYLE(2)}
+              css={LINE_CLAMP_TEXT_STYLE(2, true)}
             >
               {capitalizeFirstLetter(String(formData.stepName))}
             </StyledText>

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
@@ -1,6 +1,7 @@
 import difference from 'lodash/difference'
 import isEqual from 'lodash/isEqual'
 import without from 'lodash/without'
+import startCase from 'lodash/startCase'
 import {
   SOURCE_WELL_BLOWOUT_DESTINATION,
   DEST_WELL_BLOWOUT_DESTINATION,
@@ -338,6 +339,9 @@ export const getSaveStepSnackbarText = (
 }
 
 export const capitalizeFirstLetter = (stepName: string): string => {
+  // Note - this is a special case
+  if (stepName === 'absorbance plate reader') return startCase(stepName)
+
   // Note - check is for heater-shaker
   if (stepName.includes('-')) {
     return stepName