File inputs display filenames with text-overflow: ellipsis to appear …

…with fixed height on a single line
0xsequence · Dec 18, 2023 · 69f78c3 · 69f78c3
1 parent 499735b
commit 69f78c3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/components/FileInput/FileInput.tsx b/src/components/FileInput/FileInput.tsx
@@ -93,25 +93,32 @@ export const FileInput: PolymorphicComponent<FileInputProps, 'input'> =
           label={label}
           labelLocation={labelLocation}
         >
-          <Box width="full">
+          <Box width="full" minWidth="0">
             <Box
+              width="full"
+              minWidth="0"
               justifyContent={fileData ? 'space-between' : 'flex-start'}
-              gap={'1.5'}
+              gap="2"
               color={fileData ? 'text100' : 'text50'}
               className={clsx(
                 styles.wrap,
                 styles.wrapVariants({ borderRadius })
               )}
             >
               {fileData ? (
-                <Box flexDirection="row" gap="2" alignItems="center">
-                  <Text className={styles.fileName}>{fileData.name}</Text>
-                  <Text color="text50" variant="xsmall">
+                <Box
+                  flexDirection="row"
+                  gap="2"
+                  alignItems="center"
+                  minWidth="0"
+                >
+                  <Text ellipsis>{fileData.name}</Text>
+                  <Text color="text50" variant="xsmall" whiteSpace="nowrap">
                     {fileData.size.toFixed(2)} kb
                   </Text>
                 </Box>
               ) : (
-                <Text>{placeholder}</Text>
+                <Text ellipsis>{placeholder}</Text>
               )}
 
               <Box

diff --git a/src/components/FileInput/styles.css.ts b/src/components/FileInput/styles.css.ts
@@ -19,7 +19,7 @@ export const wrap = style([
     position: 'relative',
   }),
   {
-    minHeight: 52,
+    height: 52,
 
     selectors: {
       '&:has(:disabled), &:has(:disabled):hover': {
@@ -64,7 +64,3 @@ export const input = style([
     focusRing: 'none',
   }),
 ])
-
-export const fileName = style({
-  wordBreak: 'break-all',
-})