fix(app): fix csv filename wrapping (#16156)

Wrap long CSV file names in `ChooseCsvFile` component to maintain style of selection screen Closes RQA-3003
Opentrons · Sep 3, 2024 · 2461723 · 2461723
1 parent 933175f
commit 2461723
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx
@@ -82,6 +82,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         display: ${maxLines != null ? '-webkit-box' : undefined};
         -webkit-line-clamp: ${maxLines ?? undefined};
         -webkit-box-orient: ${maxLines != null ? 'vertical' : undefined};
+        word-wrap: break-word;
       }
     }
   `

diff --git a/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx b/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx
@@ -29,7 +29,7 @@ import type {
 import type { CsvFileData } from '@opentrons/api-client'
 
 const MAX_CHARS = 52
-const CSV_FILENAME_BREAK_POINT = 46
+const CSV_FILENAME_BREAK_POINT = 42
 interface ChooseCsvFileProps {
   protocolId: string
   handleGoBack: () => void

diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx
@@ -17,10 +17,11 @@ import {
   Icon,
   JUSTIFY_END,
   JUSTIFY_SPACE_BETWEEN,
+  LegacyStyledText,
+  NO_WRAP,
   OVERFLOW_WRAP_ANYWHERE,
   POSITION_STICKY,
   SPACING,
-  LegacyStyledText,
   TEXT_ALIGN_RIGHT,
   truncateString,
   TYPOGRAPHY,
@@ -115,6 +116,8 @@ interface ProtocolSetupStepProps {
   title: string
   // first line of detail text
   detail?: string | null
+  // clip detail text overflow with ellipsis
+  clipDetail?: boolean
   // second line of detail text
   subDetail?: string | null
   // disallow click handler, disabled styling
@@ -140,6 +143,7 @@ export function ProtocolSetupStep({
   detail,
   subDetail,
   disabled = false,
+  clipDetail = false,
   interactionDisabled = false,
   disabledReason,
   description,
@@ -250,6 +254,7 @@ export function ProtocolSetupStep({
             textAlign={TEXT_ALIGN_RIGHT}
             color={interactionDisabled ? COLORS.grey50 : COLORS.black90}
             maxWidth="20rem"
+            css={clipDetail ? CLIPPED_TEXT_STYLE : undefined}
           >
             {detail}
             {subDetail != null && detail != null ? <br /> : null}
@@ -1075,3 +1080,9 @@ export function ProtocolSetup(): JSX.Element {
     </>
   )
 }
+
+const CLIPPED_TEXT_STYLE = css`
+  white-space: ${NO_WRAP};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`