Merge pull request #3900 from kiwicom/fix/select-label

Fix/select label
kiwicom · Jun 26, 2023 · fb3d12a · fb3d12a
2 parents 54f2eec + 6dccd7a
commit fb3d12a
Show file tree

Hide file tree

Showing 2 changed files with 32 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;
     }
   `}
 `;
@@ -201,6 +205,14 @@ export const SelectContainer = styled.div<{ disabled?: boolean; error?: boolean
         error ? theme.orbit.borderColorInputErrorHover : theme.orbit.borderColorInputHover
       }`};
     }
+
+    &:focus-within {
+      outline: none;
+
+      ${FakeInput} {
+        ${formElementFocus}
+      }
+    }
   `}
 `;