From c10ff7304f663daf5753ea94ad5fe0fa5279c791 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 15 Jul 2026 12:59:28 +0200 Subject: [PATCH 1/2] Required changes for the message input implementation --- .../components/select/code/SelectCodePage.tsx | 12 +++++++++++- packages/lib/src/select/Select.stories.tsx | 8 ++++++++ packages/lib/src/select/Select.tsx | 4 ++++ packages/lib/src/select/types.ts | 6 +++++- packages/lib/src/select/utils.ts | 1 + 5 files changed, 29 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx index d7887ff71c..a4e99c3a74 100644 --- a/apps/website/screens/components/select/code/SelectCodePage.tsx +++ b/apps/website/screens/components/select/code/SelectCodePage.tsx @@ -92,6 +92,16 @@ const sections = [ Helper text to be placed above the select. - + + hideBorder + + boolean + + If true, the select will not have a border in the default state. + + false + + label @@ -266,7 +276,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 097f1482c9..5e40f2edd3 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)"> @@ -358,6 +362,10 @@ const Select = () => ( <Title title="xxlarge margin" theme="light" level={4} /> <DxcSelect label="xxLarge" options={singleOptions} margin="xxlarge" /> </ExampleContainer> + <ExampleContainer> + <Title title="No border" theme="light" level={4} /> + <DxcSelect label="No border" options={singleOptions} hideBorder defaultValue="1" /> + </ExampleContainer> <ExampleContainer expanded> <Title title="Ellipsis" theme="light" level={2} /> <Title title="Multiple selection with ellipsis" theme="light" level={4} /> diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 0544cfb84e..3786490b91 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -66,6 +66,7 @@ const SelectContainer = styled.div<{ const Select = styled.div<{ disabled: Required<SelectPropsType>["disabled"]; error: boolean; + hideBorder: Required<SelectPropsType>["hideBorder"]; }>` position: relative; display: flex; @@ -75,6 +76,7 @@ const Select = styled.div<{ padding: var(--spacing-padding-none) var(--spacing-padding-xs); cursor: pointer; ${({ disabled, error }) => inputStylesByState(disabled, error, false)} + ${({ hideBorder }) => hideBorder && `border-color: transparent;`} /* Collapse indicator */ > div > span[role="img"] { @@ -182,6 +184,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>( enableSelectAll = false, error, helperText, + hideBorder = false, label, margin, multiple = false, @@ -523,6 +526,7 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>( aria-required={!disabled && !optional} disabled={disabled} error={!!error} + hideBorder={hideBorder} id={selectInputId} onBlur={handleOnBlur} onClick={handleOnClick} diff --git a/packages/lib/src/select/types.ts b/packages/lib/src/select/types.ts index adcea907f6..5a3d0973b0 100644 --- a/packages/lib/src/select/types.ts +++ b/packages/lib/src/select/types.ts @@ -54,6 +54,10 @@ type CommonProps = { * Helper text to be placed above the select. */ helperText?: string; + /** + * If true, the select will not have a border in the default state. + */ + hideBorder?: boolean; /** * Text to be placed above the select. */ @@ -100,7 +104,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 215c1b0d15..2b769157b5 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"]) => From e571a13a47acaa2bf45d97e79825e9d3bf888733 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso <pfelguerosogalguera@gmail.com> Date: Wed, 15 Jul 2026 13:15:08 +0200 Subject: [PATCH 2/2] Remove hideBorder --- .../screens/components/select/code/SelectCodePage.tsx | 10 ---------- packages/lib/src/select/Select.stories.tsx | 4 ---- packages/lib/src/select/Select.tsx | 4 ---- packages/lib/src/select/types.ts | 4 ---- 4 files changed, 22 deletions(-) diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx index a4e99c3a74..d86e67a699 100644 --- a/apps/website/screens/components/select/code/SelectCodePage.tsx +++ b/apps/website/screens/components/select/code/SelectCodePage.tsx @@ -92,16 +92,6 @@ const sections = [ <td>Helper text to be placed above the select.</td> <td>-</td> </tr> - <tr> - <td>hideBorder</td> - <td> - <TableCode>boolean</TableCode> - </td> - <td>If true, the select will not have a border in the default state.</td> - <td> - <TableCode>false</TableCode> - </td> - </tr> <tr> <td>label</td> <td> diff --git a/packages/lib/src/select/Select.stories.tsx b/packages/lib/src/select/Select.stories.tsx index 5e40f2edd3..400cfa234e 100644 --- a/packages/lib/src/select/Select.stories.tsx +++ b/packages/lib/src/select/Select.stories.tsx @@ -362,10 +362,6 @@ const Select = () => ( <Title title="xxlarge margin" theme="light" level={4} /> <DxcSelect label="xxLarge" options={singleOptions} margin="xxlarge" /> </ExampleContainer> - <ExampleContainer> - <Title title="No border" theme="light" level={4} /> - <DxcSelect label="No border" options={singleOptions} hideBorder defaultValue="1" /> - </ExampleContainer> <ExampleContainer expanded> <Title title="Ellipsis" theme="light" level={2} /> <Title title="Multiple selection with ellipsis" theme="light" level={4} /> diff --git a/packages/lib/src/select/Select.tsx b/packages/lib/src/select/Select.tsx index 3786490b91..0544cfb84e 100644 --- a/packages/lib/src/select/Select.tsx +++ b/packages/lib/src/select/Select.tsx @@ -66,7 +66,6 @@ const SelectContainer = styled.div<{ const Select = styled.div<{ disabled: Required<SelectPropsType>["disabled"]; error: boolean; - hideBorder: Required<SelectPropsType>["hideBorder"]; }>` position: relative; display: flex; @@ -76,7 +75,6 @@ const Select = styled.div<{ padding: var(--spacing-padding-none) var(--spacing-padding-xs); cursor: pointer; ${({ disabled, error }) => inputStylesByState(disabled, error, false)} - ${({ hideBorder }) => hideBorder && `border-color: transparent;`} /* Collapse indicator */ > div > span[role="img"] { @@ -184,7 +182,6 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>( enableSelectAll = false, error, helperText, - hideBorder = false, label, margin, multiple = false, @@ -526,7 +523,6 @@ const DxcSelect = forwardRef<RefType, SelectPropsType>( aria-required={!disabled && !optional} disabled={disabled} error={!!error} - hideBorder={hideBorder} id={selectInputId} onBlur={handleOnBlur} onClick={handleOnClick} diff --git a/packages/lib/src/select/types.ts b/packages/lib/src/select/types.ts index 5a3d0973b0..a3c81359a3 100644 --- a/packages/lib/src/select/types.ts +++ b/packages/lib/src/select/types.ts @@ -54,10 +54,6 @@ type CommonProps = { * Helper text to be placed above the select. */ helperText?: string; - /** - * If true, the select will not have a border in the default state. - */ - hideBorder?: boolean; /** * Text to be placed above the select. */