feat: add new width properties to Select component

Localitos · Sep 26, 2024 · 9819bd1 · 9819bd1
1 parent 2888b43
commit 9819bd1
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 4 deletions.
diff --git a/.changeset/unlucky-carrots-shop.md b/.changeset/unlucky-carrots-shop.md
@@ -0,0 +1,9 @@
+---
+"@localyze-pluto/components": minor
+---
+
+[Select] Add width properties so it's easier to set width for the SelectPopover:
+
+- `sameWidth` to make the popover the same width as the select
+- `popoverMaxWidth` to set a max width for the popover
+- `popoverWidth` to set a fixed width for the popover
diff --git a/packages/components/src/components/Select/Select.stories.tsx b/packages/components/src/components/Select/Select.stories.tsx
@@ -65,6 +65,61 @@ export const Default = (): JSX.Element => {
   );
 };
 
+export const SameWidth = (): JSX.Element => {
+  const selectID = useUID();
+  const helpTextID = useUID();
+  return (
+    <Box.form w="250px">
+      <Label htmlFor={selectID}>Choose One</Label>
+      <Select
+        aria-describedby={helpTextID}
+        id={selectID}
+        items={selectItems}
+        name="select"
+        sameWidth
+      />
+      <HelpText id={helpTextID}>Please choose one of the values.</HelpText>
+    </Box.form>
+  );
+};
+
+export const CustomWidth = (): JSX.Element => {
+  const selectID = useUID();
+  const helpTextID = useUID();
+  return (
+    <Box.form w="250px">
+      <Label htmlFor={selectID}>Choose One</Label>
+      <Select
+        aria-describedby={helpTextID}
+        id={selectID}
+        items={selectItems}
+        name="select"
+        popoverWidth="300px"
+      />
+      <HelpText id={helpTextID}>Please choose one of the values.</HelpText>
+    </Box.form>
+  );
+};
+
+export const WithMaxWidth = (): JSX.Element => {
+  const selectID = useUID();
+  const helpTextID = useUID();
+  return (
+    <Box.form w="250px">
+      <Label htmlFor={selectID}>Choose One</Label>
+      <Select
+        aria-describedby={helpTextID}
+        id={selectID}
+        items={selectItems}
+        name="select"
+        popoverMaxWidth="400px"
+        popoverWidth="500px"
+      />
+      <HelpText id={helpTextID}>Please choose one of the values.</HelpText>
+    </Box.form>
+  );
+};
+
 export const Large = (): JSX.Element => {
   const selectID = useUID();
   const helpTextID = useUID();

diff --git a/packages/components/src/components/Select/Select.tsx b/packages/components/src/components/Select/Select.tsx
@@ -10,7 +10,7 @@ import {
 import type { SelectProps as SelectPrimitiveProps } from "@ariakit/react/select";
 import type { SystemProp, Theme } from "@xstyled/styled-components";
 import isArray from "lodash/isArray";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 import { Text } from "../../primitives/Text";
 import { Icon } from "../Icon";
 import { SelectItem } from "./SelectItem";
@@ -59,6 +59,12 @@ export interface SelectProps
   size?: "large" | "small";
   /** The selected option of the select. */
   value?: string[] | string;
+  /** The width of the select popover. */
+  popoverWidth?: BoxProps["w"];
+  /** The max width of the select popover. */
+  popoverMaxWidth?: BoxProps["maxW"];
+  /** Sets the select popover to be the same width as the select. */
+  sameWidth?: boolean;
 }
 
 const getSelectStyles = (
@@ -140,6 +146,9 @@ const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
       setValue,
       size = "small",
       value,
+      sameWidth,
+      popoverWidth,
+      popoverMaxWidth,
       ...props
     },
     ref,
@@ -231,7 +240,14 @@ const Select = React.forwardRef<HTMLButtonElement, SelectProps>(
             />
           </Box.div>
         </Box.button>
-        <SelectPopover gutter={4} hideOnInteractOutside sameWidth store={store}>
+        <SelectPopover
+          gutter={4}
+          hideOnInteractOutside
+          maxW={popoverMaxWidth}
+          sameWidth={sameWidth}
+          store={store}
+          w={popoverWidth}
+        >
           {map(items, (item) => (
             <SelectItem
               disabled={item.disabled}

diff --git a/packages/components/src/components/Select/SelectPopover.tsx b/packages/components/src/components/Select/SelectPopover.tsx
@@ -1,17 +1,19 @@
 import React from "react";
 import { SelectPopover as SelectPopoverPrimitive } from "@ariakit/react/select";
 import type { SelectPopoverProps as SelectPopoverPrimitiveProps } from "@ariakit/react/select";
-import { Box } from "../../primitives/Box";
+import { Box, BoxProps } from "../../primitives/Box";
 
 export interface SelectPopoverProps
   extends Omit<SelectPopoverPrimitiveProps, "nonce"> {
   /** The valid contents of the listbox, i.e. SelectItem. */
   children: NonNullable<React.ReactNode>;
+  w?: BoxProps["w"];
+  maxW?: BoxProps["maxW"];
 }
 
 /** A select popover is a styled dropdown element that contains a list of select options. */
 const SelectPopover = React.forwardRef<HTMLDivElement, SelectPopoverProps>(
-  ({ children, store, gutter, sameWidth, ...props }, ref) => {
+  ({ children, store, gutter, sameWidth, w, maxW, ...props }, ref) => {
     return (
       <Box.div
         as={SelectPopoverPrimitive}
@@ -22,6 +24,7 @@ const SelectPopover = React.forwardRef<HTMLDivElement, SelectPopoverProps>(
         flexDirection="column"
         gutter={gutter}
         maxHeight="250px"
+        maxW={maxW}
         outlineColor={{ focus: "colorBorderPrimary" }}
         outlineStyle={{ focus: "solid" }}
         outlineWidth={{ focus: "borderWidth10" }}
@@ -33,6 +36,7 @@ const SelectPopover = React.forwardRef<HTMLDivElement, SelectPopoverProps>(
         ref={ref}
         sameWidth={sameWidth}
         store={store}
+        w={w}
         zIndex="zIndex50"
         {...props}
       >