fix(app): fix choose csv file radio button size and text display issue (

#16004) * fix(app): fix choose csv file radio button size and text display issue
Opentrons · Aug 15, 2024 · 62ca39e · 62ca39e
1 parent 0a0bcb4
commit 62ca39e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx
@@ -21,6 +21,7 @@ interface RadioButtonProps extends StyleProps {
   radioButtonType?: 'large' | 'small'
   subButtonLabel?: string
   id?: string
+  maxLines?: number | null
 }
 
 export function RadioButton(props: RadioButtonProps): JSX.Element {
@@ -33,6 +34,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     radioButtonType = 'large',
     subButtonLabel,
     id = buttonLabel,
+    maxLines = null,
   } = props
 
   const isLarge = radioButtonType === 'large'
@@ -77,6 +79,9 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
 
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
         cursor: default;
+        display: ${maxLines != null ? '-webkit-box' : undefined};
+        -webkit-line-clamp: ${maxLines ?? undefined};
+        -webkit-box-orient: ${maxLines != null ? 'vertical' : undefined};
       }
     }
   `

diff --git a/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx b/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx
@@ -12,6 +12,7 @@ import {
   Flex,
   LegacyStyledText,
   SPACING,
+  truncateString,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { useAllCsvFilesQuery } from '@opentrons/react-api-client'
@@ -27,6 +28,8 @@ import type {
 } from '@opentrons/shared-data'
 import type { CsvFileData } from '@opentrons/api-client'
 
+const MAX_CHARS = 52
+const CSV_FILENAME_BREAK_POINT = 46
 interface ChooseCsvFileProps {
   protocolId: string
   handleGoBack: () => void
@@ -118,13 +121,18 @@ export function ChooseCsvFile({
                 csvFilesOnRobot.map((csv: CsvFileData) => (
                   <React.Fragment key={csv.id}>
                     <RadioButton
-                      buttonLabel={csv.name}
+                      buttonLabel={truncateString(
+                        csv.name,
+                        MAX_CHARS,
+                        CSV_FILENAME_BREAK_POINT
+                      )}
                       buttonValue={csv.id}
                       onChange={() => {
                         setCsvFileSelected({ id: csv.id, fileName: csv.name })
                       }}
                       id={`${csv.id}-on-robot`}
                       isSelected={csvFileSelected?.id === csv.id}
+                      maxLines={3}
                     />
                   </React.Fragment>
                 ))
@@ -145,7 +153,11 @@ export function ChooseCsvFile({
                     <React.Fragment key={fileName}>
                       {csvFilePath.length !== 0 && fileName !== undefined ? (
                         <RadioButton
-                          buttonLabel={fileName}
+                          buttonLabel={truncateString(
+                            fileName,
+                            MAX_CHARS,
+                            CSV_FILENAME_BREAK_POINT
+                          )}
                           buttonValue={csvFilePath}
                           onChange={() => {
                             setCsvFileSelected({
@@ -155,6 +167,7 @@ export function ChooseCsvFile({
                           }}
                           id={`${csvFilePath.replace('/', '-')}}-on-usb`}
                           isSelected={csvFileSelected?.filePath === csvFilePath}
+                          maxLines={3}
                         />
                       ) : null}
                     </React.Fragment>
@@ -180,7 +193,7 @@ const HEADER_TEXT_STYLE = css`
 const CONTAINER_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
   grid-gap: ${SPACING.spacing16};
-  flex: 1;
+  width: 28rem;
 `
 
 const LIST_CONTAINER_STYLE = css`