Select: add useFullWidthItems to allow dropdown with to expand (#462)

ClickHouse · Aug 13, 2024 · 8466105 · 8466105
1 parent 8cbdcbc
commit 8466105
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 3 deletions.
diff --git a/src/components/Select/SingleSelect.stories.tsx b/src/components/Select/SingleSelect.stories.tsx
@@ -1,7 +1,10 @@
-import { Select, SelectProps } from "./SingleSelect";
 import { Preview } from "@storybook/react";
-import { selectOptions } from "./selectOptions";
+import { Select, SelectProps } from "@/components/Select/SingleSelect";
+import { selectOptions } from "@/components/Select/selectOptions";
 import { useEffect, useState } from "react";
+import { Container } from "@/components/Container/Container";
+import { Panel } from "@/components/Panel/Panel";
+import { Title } from "@/components/Typography/Title/Title";
 interface Props extends SelectProps {
   childrenType: "children" | "options";
 }
@@ -67,6 +70,8 @@ export default {
     orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
     dir: { control: "inline-radio", options: ["start", "end"] },
     childrenType: { control: "inline-radio", options: ["children", "options"] },
+    useFullWidthItems: { control: "boolean" },
+    itemCharacterLimit: { control: "text" },
   },
 };
 
@@ -123,3 +128,63 @@ ${
     },
   },
 };
+
+export const UseFullWidth = {
+  args: {},
+  render: () => {
+    return (
+      <Container fillWidth>
+        <Panel width="200px">
+          <Title type="h2">Full width items</Title>
+          <Select useFullWidthItems>
+            <Select.Item value="item 1">
+              Ask and it will be given to you; seek and you will find; knock and the door
+              will be opened to you.
+            </Select.Item>
+            <Select.Item value="item 2">
+              For everyone who asks receives; the one who seeks finds; and to the one who
+              knocks, the door will be opened.
+            </Select.Item>
+            <Select.Item value="item 3">
+              Which of you, if your son asks for bread, will give him a stone?
+            </Select.Item>
+          </Select>
+
+          <Title type="h2">Larger itemCharacterLimit</Title>
+          <Select
+            useFullWidthItems
+            itemCharacterLimit="90ch"
+          >
+            <Select.Item value="item 1">
+              Ask and it will be given to you; seek and you will find; knock and the door
+              will be opened to you.
+            </Select.Item>
+            <Select.Item value="item 2">
+              For everyone who asks receives; the one who seeks finds; and to the one who
+              knocks, the door will be opened.
+            </Select.Item>
+            <Select.Item value="item 3">
+              Which of you, if your son asks for bread, will give him a stone?
+            </Select.Item>
+          </Select>
+
+          <Title type="h2">Not full width items</Title>
+          <Select>
+            <Select.Item value="item 1">
+              Ask and it will be given to you; seek and you will find; knock and the door
+              will be opened to you.
+            </Select.Item>
+            <Select.Item value="item 2">
+              For everyone who asks receives; the one who seeks finds; and to the one who
+              knocks, the door will be opened.
+            </Select.Item>
+            <Select.Item value="item 3">
+              Which of you, if your son asks for bread, will give him a stone?
+            </Select.Item>
+          </Select>
+        </Panel>
+      </Container>
+    );
+  },
+  tags: ["form-field", "select", "autodocs"],
+};
diff --git a/src/components/Select/SingleSelect.tsx b/src/components/Select/SingleSelect.tsx
@@ -12,6 +12,8 @@ export interface SelectProps
   value?: string;
   placeholder?: string;
   onOpenChange?: (open: boolean) => void;
+  useFullWidthItems?: boolean;
+  itemCharacterLimit?: string;
 }
 
 export const Select = ({

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
@@ -118,6 +118,8 @@ export const InternalSelect = ({
   selectLabel,
   showSearch = false,
   container,
+  useFullWidthItems = false,
+  itemCharacterLimit = "64ch",
   ...props
 }: SelectContainerProps) => {
   const defaultId = useId();
@@ -380,6 +382,8 @@ export const InternalSelect = ({
                 setHighlighted(visibleList.current[0]);
               }}
               align="start"
+              $useFullWidthItems={useFullWidthItems}
+              $itemCharacterLimit={itemCharacterLimit}
             >
               <SelectList>
                 <SearchBarContainer $showSearch={showSearch}>

diff --git a/src/components/Select/common/SelectStyled.tsx b/src/components/Select/common/SelectStyled.tsx
@@ -81,12 +81,27 @@ export const StyledSelectTrigger = styled(Trigger)<{ $error: boolean }>`
   }
 `;
 
-export const SelectPopoverContent = styled(Content)`
+export const SelectPopoverContent = styled(Content)<{
+  $useFullWidthItems: boolean;
+  $itemCharacterLimit?: string;
+}>`
   width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
   border-radius: 0.25rem;
   pointer-events: auto;
 
+  ${({ $useFullWidthItems, $itemCharacterLimit }) => `
+    ${
+      $useFullWidthItems
+        ? `
+      max-width: ${$itemCharacterLimit};
+      min-width: var(--radix-popover-trigger-width);
+      width: 100%;
+    `
+        : "width: var(--radix-popover-trigger-width)"
+    };
+  `}
+
   ${({ theme }) => `
     border: 1px solid ${theme.click.genericMenu.item.color.stroke.default};
     background: ${theme.click.genericMenu.item.color.background.default};

diff --git a/src/components/Select/common/types.ts b/src/components/Select/common/types.ts
@@ -82,6 +82,8 @@ interface InternalSelectProps
   showSearch?: boolean;
   customText?: string;
   container?: HTMLElement;
+  useFullWidthItems?: boolean;
+  itemCharacterLimit?: string;
 }
 
 export type SelectOptionProp = SelectOptionType | SelectChildrenType;