fix: refactor select layout to deal with long label text and overflow

washingtonpost · Nov 21, 2023 · d16e647 · d16e647 · vercel · Nov 21, 2023
1 parent 7d1b8e4
commit d16e647
Showing 4 changed files with 134 additions and 55 deletions.
diff --git a/ui/select/src/SelectLabel.tsx b/ui/select/src/SelectLabel.tsx
@@ -7,14 +7,18 @@ import { InputLabel } from "@washingtonpost/wpds-input-label";
 import type * as WPDS from "@washingtonpost/wpds-theme";
 
 const LabelInputWrapper = styled("div", {
-  flex: 1,
   position: "relative",
+  gridArea: "label",
+  minWidth: 0,
 });
 
 // occupy space in the DOM so that the container
 // knows to take up the same space as the absolutely positioned label
 const HiddenSpanToOccupySpace = styled("span", {
+  maxWidth: "100%",
+  overflow: "hidden",
   visibility: "hidden",
+  whiteSpace: "nowrap",
 });
 
 const RequiredTag = styled("span", {
@@ -24,8 +28,12 @@ const RequiredTag = styled("span", {
 const TextInputLabel = styled(InputLabel, {
   whiteSpace: "nowrap",
   insetBlockStart: "0",
+  insetInlineStart: "0",
+  maxWidth: "100%",
+  overflow: "hidden",
   position: "absolute",
   cursor: "pointer",
+  textOverflow: "ellipsis",
   transform: `translateY(${theme.space["100"]})`,
   transition: theme.transitions.allFast,
   "@reducedMotion": {
@@ -39,7 +47,7 @@ const TextInputLabel = styled(InputLabel, {
     transform: `translateY(${theme.space["050"]})`,
 
     [`& + ${HiddenSpanToOccupySpace}`]: {
-      display: "none",
+      fontSize: theme.fontSizes["075"],
     },
   },
 
@@ -68,6 +76,8 @@ type SelectLabelProps = SelectLabelVariants & {
   children?: React.ReactNode;
   /** Overrides for the input text styles. Padding overrides affect the input container and  */
   css?: WPDS.CSS;
+  //** Used to provide tooltip for long labels that get truncated */
+  title?: string;
 };
 
 export const SelectLabel = ({ children, ...props }: SelectLabelProps) => {

diff --git a/ui/select/src/SelectTrigger.tsx b/ui/select/src/SelectTrigger.tsx
@@ -20,8 +20,10 @@ import { SelectContext } from "./Select";
 const StyledTrigger = styled(SelectPrimitive.Trigger, {
   ...sharedInputStyles,
 
-  display: "flex",
-  justifyContent: "space-between",
+  display: "grid",
+  gridTemplateAreas: "'label icon' 'value icon'",
+  gridTemplateColumns: "1fr auto",
+  gridTemplateRows: "0px auto",
   width: "100%",
 
   "&:focus-within": {
@@ -67,6 +69,7 @@ const IconWrapper = styled("div", {
       },
     },
   },
+  gridArea: "icon",
 });
 
 type SelectTriggerVariants = WPDS.VariantProps<typeof StyledTrigger>;

diff --git a/ui/select/src/SelectValue.tsx b/ui/select/src/SelectValue.tsx
@@ -17,6 +17,7 @@ const StyledValue = styled("div", {
   whiteSpace: "nowrap",
   overflow: "hidden",
   paddingInline: "none",
+  gridArea: "value",
 
   variants: {
     isDisabled: {

diff --git a/ui/select/src/play.stories.tsx b/ui/select/src/play.stories.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
 import { Select } from "./";
+import { Button, Icon, Tooltip, theme } from "@washingtonpost/wpds-ui-kit";
+import { Info } from "@washingtonpost/wpds-assets";
 
 import type { ComponentStory } from "@storybook/react";
 
@@ -133,62 +135,125 @@ export const SelectsInARow = () => {
         flexDirection: "row",
       }}
     >
-      <Select.Root>
-        <Select.Trigger aria-label="example-1">
-          <Select.Label>Label/Placeholder</Select.Label>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="1">Option 1 value</Select.Item>
-          <Select.Item value="2">Option 2 value</Select.Item>
-          <Select.Item value="3">Option 3 value</Select.Item>
-          <Select.Item value="4">Option 4 value</Select.Item>
-          <Select.Item value="5">Option 5 value</Select.Item>
-          <Select.Item value="6">Option 6 value</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root>
-        <Select.Trigger aria-label="example-1">
-          <Select.Label>Label/Placeholder</Select.Label>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="1">Option 1 value</Select.Item>
-          <Select.Item value="2">Option 2 value</Select.Item>
-          <Select.Item value="3">Option 3 value</Select.Item>
-          <Select.Item value="4">Option 4 value</Select.Item>
-          <Select.Item value="5">Option 5 value</Select.Item>
-          <Select.Item value="6">Option 6 value</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root>
-        <Select.Trigger aria-label="example-1">
-          <Select.Label>Label/Placeholder</Select.Label>
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="1">Option 1 value</Select.Item>
-          <Select.Item value="2">Option 2 value</Select.Item>
-          <Select.Item value="3">Option 3 value</Select.Item>
-          <Select.Item value="4">Option 4 value</Select.Item>
-          <Select.Item value="5">Option 5 value</Select.Item>
-          <Select.Item value="6">Option 6 value</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Select.Root>
-        <Select.Trigger aria-label="example-1">
-          <Select.Label>Label/Placeholder</Select.Label>
+      <div>
+        <Select.Root>
+          <Select.Trigger aria-label="example-1">
+            <Select.Label>Label/Placeholder</Select.Label>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="1">Option 1 value</Select.Item>
+            <Select.Item value="2">Option 2 value</Select.Item>
+            <Select.Item value="3">Option 3 value</Select.Item>
+            <Select.Item value="4">Option 4 value</Select.Item>
+            <Select.Item value="5">Option 5 value</Select.Item>
+            <Select.Item value="6">Option 6 value</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </div>
+      <div>
+        <Select.Root helperText="Helper text">
+          <Select.Trigger aria-label="example-1">
+            <Select.Label>Label/Placeholder</Select.Label>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="1">Option 1 value</Select.Item>
+            <Select.Item value="2">Option 2 value</Select.Item>
+            <Select.Item value="3">Option 3 value</Select.Item>
+            <Select.Item value="4">Option 4 value</Select.Item>
+            <Select.Item value="5">Option 5 value</Select.Item>
+            <Select.Item value="6">Option 6 value</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </div>
+      <div>
+        <Select.Root error errorMessage="Error text">
+          <Select.Trigger aria-label="example-1">
+            <Select.Label>Label/Placeholder</Select.Label>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="1">Option 1 value</Select.Item>
+            <Select.Item value="2">Option 2 value</Select.Item>
+            <Select.Item value="3">Option 3 value</Select.Item>
+            <Select.Item value="4">Option 4 value</Select.Item>
+            <Select.Item value="5">Option 5 value</Select.Item>
+            <Select.Item value="6">Option 6 value</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </div>
+      <div>
+        <Select.Root
+          helperText={
+            <Tooltip.Provider>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant="primary"
+                    isOutline
+                    icon="left"
+                    density="compact"
+                    css={{
+                      border: "none",
+                      color: theme.colors.cta,
+                      fontSize: theme.fontSizes["075"],
+                      fontWeight: 100,
+                      marginBlockStart: "0.125rem",
+                      marginInlineStart: `calc(-1*${theme.space["025"]})`,
+                      paddingBlock: "0.125rem",
+                      paddingInline: theme.space["025"],
+                    }}
+                  >
+                    <Icon label="">
+                      <Info />
+                    </Icon>{" "}
+                    Info
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side="bottom">
+                  Detail about select
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </Tooltip.Provider>
+          }
+        >
+          <Select.Trigger aria-label="example-1">
+            <Select.Label>Label/Placeholder</Select.Label>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="1">Option 1 value</Select.Item>
+            <Select.Item value="2">Option 2 value</Select.Item>
+            <Select.Item value="3">Option 3 value</Select.Item>
+            <Select.Item value="4">Option 4 value</Select.Item>
+            <Select.Item value="5">Option 5 value</Select.Item>
+            <Select.Item value="6">Option 6 value</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </div>
+    </div>
+  );
+};
+
+const LabelOverflowTemplate: ComponentStory<typeof Select.Root> = (args) => {
+  return (
+    <div style={{ maxWidth: "300px" }}>
+      <Select.Root {...args}>
+        <Select.Trigger>
+          <Select.Label title="This is a long label for the select causing text overflow">
+            This is a long label for the select causing text overflow
+          </Select.Label>
           <Select.Value />
         </Select.Trigger>
         <Select.Content>
-          <Select.Item value="1">Option 1 value</Select.Item>
-          <Select.Item value="2">Option 2 value</Select.Item>
-          <Select.Item value="3">Option 3 value</Select.Item>
-          <Select.Item value="4">Option 4 value</Select.Item>
-          <Select.Item value="5">Option 5 value</Select.Item>
-          <Select.Item value="6">Option 6 value</Select.Item>
+          <Select.Item value="one">Item One</Select.Item>
+          <Select.Item value="two">Item Two</Select.Item>
+          <Select.Item value="three">Item Three</Select.Item>
         </Select.Content>
       </Select.Root>
     </div>
   );
 };
+
+export const LabelOverflow = LabelOverflowTemplate.bind({});