fix(select2): fix select2 styling to show the main selected text (#530)

It used to show the secondary text as full and the main text with ellipsis
logicalclocks · Oct 25, 2023 · f82a2dc · f82a2dc
1 parent 39598a0
commit f82a2dc
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 29 deletions.
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -51691,8 +51691,22 @@ const pfe = ({
           ] }) : /* @__PURE__ */ f.jsxs(G, { children: [
             /* @__PURE__ */ f.jsx(be, { minWidth: "max-content", gray: !0, children: g }),
             /* @__PURE__ */ f.jsxs(G, { children: [
-              /* @__PURE__ */ f.jsx(be, { px: "5px", sx: Uw, children: Yw(i, O, o) }),
-              !o && ((m = i[0]) == null ? void 0 : m.additionalText) && u && /* @__PURE__ */ f.jsx(be, { gray: !0, children: i[0].additionalText })
+              /* @__PURE__ */ f.jsx(
+                be,
+                {
+                  px: "5px",
+                  sx: { ...Uw, flex: "none", maxWidth: "100px" },
+                  children: Yw(i, O, o)
+                }
+              ),
+              !o && ((m = i[0]) == null ? void 0 : m.additionalText) && u && /* @__PURE__ */ f.jsx(
+                be,
+                {
+                  gray: !0,
+                  sx: { overflow: "hidden", textOverflow: "ellipsis" },
+                  children: i[0].additionalText
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ f.jsxs(G, { children: [

diff --git a/src/components/select2/label.tsx b/src/components/select2/label.tsx
@@ -94,11 +94,19 @@ const SelectLabel = forwardRef(
               {content}
             </Labeling>
             <Flex>
-              <Labeling px="5px" sx={valueStyles}>
+              <Labeling
+                px="5px"
+                sx={{ ...valueStyles, flex: 'none', maxWidth: '100px' }}
+              >
                 {getLabelText(value, options, isMulti)}
               </Labeling>
               {!isMulti && value[0]?.additionalText && needSecondaryText && (
-                <Labeling gray>{value[0].additionalText}</Labeling>
+                <Labeling
+                  gray
+                  sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+                >
+                  {value[0].additionalText}
+                </Labeling>
               )}
             </Flex>
           </Flex>

diff --git a/src/components/select2/stories.tsx b/src/components/select2/stories.tsx
@@ -4,7 +4,7 @@ import { StoryObj, Meta } from '@storybook/react';
 
 import { Box } from 'rebass';
 import Select from './index';
-import { Button, Popup, RadioGroup, Value } from '../../index';
+import { Button, RadioGroup, Value } from '../../index';
 import Labeling from '../typography/labeling';
 import { SelectOpt } from './types';
 
@@ -134,11 +134,15 @@ const options = [
       </Labeling>
     ),
   },
-  { key: 3, label: 'Three', additionalText: 'add_three' },
+  {
+    key: 3,
+    label: 'Three_Thats_loooong',
+    additionalText: 'add_three_thats_veryyyyy_loooooong',
+  },
   {
     key: 4,
     label: 'Four',
-    additionalText: 'add_four',
+    additionalText: 'add_four_thats_veryyyyy_loooooong',
     additionalComponent: <Value>text</Value>,
   },
 ] as SelectOpt[];
@@ -190,28 +194,27 @@ export const Default: StoryObj<typeof Select> = {
     };
 
     return (
-      <Popup isOpen onClose={() => {}}>
-        <Box height="60px" m="20px">
-          <Select
-            {...props}
-            value={val}
-            maxListHeight="initial"
-            options={customOptions}
-            onChange={handleChange}
-            customFilter={
-              // eslint-disable-next-line react/jsx-wrap-multilines
-              <RadioGroup
-                ml="10px"
-                value={selected}
-                flexDirection="row"
-                onChange={handleChangeFilter}
-                onClick={(e) => e.stopPropagation()}
-                options={['all', 'matching feature only']}
-              />
-            }
-          />
-        </Box>
-      </Popup>
+      <Box height="60px" m="20px">
+        <Select
+          {...props}
+          width="200px"
+          value={val}
+          maxListHeight="initial"
+          options={customOptions}
+          onChange={handleChange}
+          customFilter={
+            // eslint-disable-next-line react/jsx-wrap-multilines
+            <RadioGroup
+              ml="10px"
+              value={selected}
+              flexDirection="row"
+              onChange={handleChangeFilter}
+              onClick={(e) => e.stopPropagation()}
+              options={['all', 'matching feature only']}
+            />
+          }
+        />
+      </Box>
     );
   },
 };