diff --git a/src/components/Select/SingleSelect.stories.tsx b/src/components/Select/SingleSelect.stories.tsx index b9926453..d1ff13b2 100644 --- 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 ( + + + Full width items + + + Larger itemCharacterLimit + + + Not full width items + + + + ); + }, + tags: ["form-field", "select", "autodocs"], +}; diff --git a/src/components/Select/SingleSelect.tsx b/src/components/Select/SingleSelect.tsx index 14c30d37..6d58cf82 100644 --- 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 index 0b64db2c..83cde9f2 100644 --- 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} > diff --git a/src/components/Select/common/SelectStyled.tsx b/src/components/Select/common/SelectStyled.tsx index a25abcad..80366c75 100644 --- 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 index e8a5d8e4..9638ddf8 100644 --- 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;