fix(Select): long inline label now truncates

kiwicom · Jun 23, 2023 · 17758b4 · 17758b4
1 parent 54f2eec
commit 17758b4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/packages/orbit-components/src/Select/Select.stories.tsx b/packages/orbit-components/src/Select/Select.stories.tsx
@@ -66,6 +66,26 @@ WithCountryFlagPrefix.story = {
   },
 };
 
+export const WithLongLabel = () => {
+  const inlineLabel = boolean("inlineLabel", true);
+  return (
+    <Select
+      label="Select box (with long label)"
+      options={objectOptions}
+      onChange={action("onChange")}
+      inlineLabel={inlineLabel}
+    />
+  );
+};
+
+WithLongLabel.story = {
+  name: "With long label",
+
+  parameters: {
+    info: "Long labels truncate automatically when inline.",
+  },
+};
+
 export const WithPlaceholder = () => {
   const placeholder = text("Placeholder", "Select value from list");
   return (

diff --git a/packages/orbit-components/src/Select/index.tsx b/packages/orbit-components/src/Select/index.tsx
@@ -44,10 +44,14 @@ const StyledInlineLabel = styled.div<{ hasFeedback?: boolean }>`
     )};
 
     ${FormLabel} {
+      display: inline-block;
       margin-bottom: 0;
       font-size: ${theme.orbit.fontSizeInputNormal};
       line-height: ${theme.orbit.lineHeightTextNormal};
+      text-overflow: ellipsis;
       white-space: nowrap;
+      overflow: hidden;
+      max-width: 20ch;
     }
   `}
 `;