diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx index d7887ff71..d86e67a69 100644 --- a/apps/website/screens/components/select/code/SelectCodePage.tsx +++ b/apps/website/screens/components/select/code/SelectCodePage.tsx @@ -266,7 +266,7 @@ const sections = [ size - 'small' | 'medium' | 'large' | 'fillParent' + 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' Size of the component. diff --git a/packages/lib/src/select/Select.stories.tsx b/packages/lib/src/select/Select.stories.tsx index 097f1482c..400cfa234 100644 --- a/packages/lib/src/select/Select.stories.tsx +++ b/packages/lib/src/select/Select.stories.tsx @@ -321,6 +321,10 @@ const Select = () => ( <DxcSelect label="Fillparent" options={singleOptions} size="fillParent" /> </ExampleContainer> + <ExampleContainer> + <Title title="FitContent size" theme="light" level={4} /> + <DxcSelect label="FitContent" options={singleOptions} defaultValue="1" size="fitContent" /> + </ExampleContainer> <ExampleContainer> <Title title="Different sizes inside a flex" theme="light" level={4} /> <DxcFlex justifyContent="space-between" gap="var(--spacing-gap-ml)"> diff --git a/packages/lib/src/select/types.ts b/packages/lib/src/select/types.ts index adcea907f..a3c81359a 100644 --- a/packages/lib/src/select/types.ts +++ b/packages/lib/src/select/types.ts @@ -100,7 +100,7 @@ type CommonProps = { /** * Size of the component. */ - size?: "small" | "medium" | "large" | "fillParent"; + size?: "small" | "medium" | "large" | "fillParent" | "fitContent"; /** * Value of the tabindex attribute. */ diff --git a/packages/lib/src/select/utils.ts b/packages/lib/src/select/utils.ts index 215c1b0d1..2b769157b 100644 --- a/packages/lib/src/select/utils.ts +++ b/packages/lib/src/select/utils.ts @@ -7,6 +7,7 @@ const sizes = { medium: "360px", large: "480px", fillParent: "100%", + fitContent: "fit-content", }; export const calculateWidth = (margin: SelectPropsType["margin"], size: SelectPropsType["size"]) =>