youri's magic made the overflow turn into dots

atelier-saulx · Nov 8, 2024 · db3e3be · db3e3be
1 parent 86174aa
commit db3e3be
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -60,11 +60,22 @@ const Dropdown = forwardRef<HTMLButtonElement, DropdownProps>(
         }}
       >
         {leadIcon && <Icon variant={leadIcon} />}
-        <Text color="inherit">{!value ? placeholder : value}</Text>
+        <div
+          style={{
+            flexGrow: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            textAlign: 'left',
+          }}
+        >
+          <Text color="inherit">{!value ? placeholder : value}</Text>
+        </div>
         <div
           style={{
             marginLeft: 'auto',
             display: 'flex',
+            flexShrink: 0,
             color: open ? colors.neutral100 : colors.neutral60,
             ...(open && {
               transform: 'rotate(180deg)',

diff --git a/src/components/MultiSelect/MultiSelect.stories.tsx b/src/components/MultiSelect/MultiSelect.stories.tsx
@@ -18,6 +18,8 @@ export const String = () => {
       options={[
         { label: 'Automatic', value: 'auto' },
         { label: 'Manual', value: 'manual' },
+        { label: 'Automatic1', value: 'a1' },
+        { label: 'Automatic', value: 'a2' },
       ]}
       placeholder="Placeholder"
     />

diff --git a/src/components/MultiSelect/index.tsx b/src/components/MultiSelect/index.tsx
@@ -49,27 +49,16 @@ function MultiSelect({
             leadIcon={leadIcon}
             disabled={disabled}
             placeholder={placeholder}
-            value={
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  marginRight: 4,
-                }}
-              >
-                {options
-                  .filter((v) => values.includes(v.value))
-                  .map((v) => (
-                    <div
-                      style={{
-                        marginRight: 8,
-                      }}
-                    >
-                      <Badge color="neutral-subtle">{v.label}</Badge>
-                    </div>
-                  ))}
-              </div>
-            }
+            value={options
+              .filter((v) => values.includes(v.value))
+              .map((v) => (
+                <div
+                  key={v.value}
+                  style={{ display: 'inline-block', paddingRight: 8 }}
+                >
+                  <Badge color="neutral-subtle">{v.label}</Badge>
+                </div>
+              ))}
           />
         )}
       </Menu.Trigger>

diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
@@ -33,6 +33,9 @@ function Text({
   maxWidth,
   singleLine,
 }: TextProps) {
+  if (typeof children === 'object') {
+    return children
+  }
   return (
     <div
       style={{