From 9cb525cc7e550b7a902606a14e506a77e8361055 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 27 Jan 2025 08:45:12 +0100 Subject: [PATCH 01/11] fix(ix-select): limit dropdown width to 100% --- packages/core/src/components/select/select.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss index fa67416fd4e..297cddd8ca0 100644 --- a/packages/core/src/components/select/select.scss +++ b/packages/core/src/components/select/select.scss @@ -160,6 +160,10 @@ } } + ix-dropdown { + max-width: 100%; + } + .dropdown-visible { --ix-icon-button-color: var(--theme-color-dynamic--hover); } From 98acbd5a96cafcc9a134bcf5c19a2109087f933e Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Mon, 27 Jan 2025 14:57:05 +0100 Subject: [PATCH 02/11] fix(select): add parameters to set dropdown width + max width; add storybook story --- packages/angular/src/components.ts | 4 +- packages/core/component-doc.json | 48 +++++++++++++++++++ packages/core/src/components.d.ts | 16 +++++++ .../core/src/components/select/select.tsx | 13 +++++ .../src/stories/select.stories.ts | 30 ++++++++++++ packages/vue/src/components.ts | 2 + 6 files changed, 111 insertions(+), 2 deletions(-) diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 6a754c87c37..626a4479a6f 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -2186,7 +2186,7 @@ export declare interface IxRow extends Components.IxRow {} @ProxyCmp({ - inputs: ['allowClear', 'disabled', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'], + inputs: ['allowClear', 'disabled', 'dropdownMaxWidth', 'dropdownWidth', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'], methods: ['getNativeInputElement', 'focusInput'] }) @Component({ @@ -2194,7 +2194,7 @@ export declare interface IxRow extends Components.IxRow {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['allowClear', 'disabled', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'], + inputs: ['allowClear', 'disabled', 'dropdownMaxWidth', 'dropdownWidth', 'editable', 'helperText', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'infoText', 'invalidText', 'label', 'mode', 'name', 'readonly', 'required', 'selectedIndices', 'showTextAsTooltip', 'validText', 'value', 'warningText'], }) export class IxSelect { protected el: HTMLElement; diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 0de1f7d9fa8..40ff2e5fdf8 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -16946,6 +16946,54 @@ "optional": false, "required": false }, + { + "name": "dropdownMaxWidth", + "type": "number | undefined", + "complexType": { + "original": "number", + "resolved": "number | undefined", + "references": {} + }, + "mutable": false, + "attr": "dropdown-max-width", + "reflectToAttr": false, + "docs": "Optional paramater to set the maximum width of the dropdown element in rem.\nBy default the maximum width of the dropdown element is set to 100%.", + "docsTags": [], + "values": [ + { + "type": "number" + }, + { + "type": "undefined" + } + ], + "optional": true, + "required": false + }, + { + "name": "dropdownWidth", + "type": "number | undefined", + "complexType": { + "original": "number", + "resolved": "number | undefined", + "references": {} + }, + "mutable": false, + "attr": "dropdown-width", + "reflectToAttr": false, + "docs": "Optional paramater to set the width of the dropdown element in rem.", + "docsTags": [], + "values": [ + { + "type": "number" + }, + { + "type": "undefined" + } + ], + "optional": true, + "required": false + }, { "name": "editable", "type": "boolean", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 6e0f414b7f6..35c81b1e7c4 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2461,6 +2461,14 @@ export namespace Components { * If true the select will be in disabled state */ "disabled": boolean; + /** + * Optional paramater to set the maximum width of the dropdown element in rem. By default the maximum width of the dropdown element is set to 100%. + */ + "dropdownMaxWidth"?: number; + /** + * Optional paramater to set the width of the dropdown element in rem. + */ + "dropdownWidth"?: number; /** * Select is extendable */ @@ -7685,6 +7693,14 @@ declare namespace LocalJSX { * If true the select will be in disabled state */ "disabled"?: boolean; + /** + * Optional paramater to set the maximum width of the dropdown element in rem. By default the maximum width of the dropdown element is set to 100%. + */ + "dropdownMaxWidth"?: number; + /** + * Optional paramater to set the width of the dropdown element in rem. + */ + "dropdownWidth"?: number; /** * Select is extendable */ diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 4d9e1293471..ebbfaccd992 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -179,6 +179,17 @@ export class Select implements IxInputFieldComponent { */ @Prop() hideListHeader = false; + /** + * Optional paramater to set the width of the dropdown element in rem. + */ + @Prop() dropdownWidth?: number; + + /** + * Optional paramater to set the maximum width of the dropdown element in rem. + * By default the maximum width of the dropdown element is set to 100%. + */ + @Prop() dropdownMaxWidth?: number; + /** * Value changed * @since 2.0.0 @@ -960,6 +971,8 @@ export class Select implements IxInputFieldComponent { return { minWidth: `${minWidth}px`, + width: `${this.dropdownWidth}rem`, + maxWidth: `${this.dropdownMaxWidth}rem`, }; }} > diff --git a/packages/storybook-docs/src/stories/select.stories.ts b/packages/storybook-docs/src/stories/select.stories.ts index 958ec8a2813..1360a6b1130 100644 --- a/packages/storybook-docs/src/stories/select.stories.ts +++ b/packages/storybook-docs/src/stories/select.stories.ts @@ -54,3 +54,33 @@ export const editableSelect: Story = { disabled: false, }, }; + +export const editable_with_dropdown_width: Story = { + render: ({ + editable, + disabled, + dropdownWidth, + dropdownMaxWidth, + }) => { + return html` + + + + + `; + }, + args: { + editable: true, + disabled: false, + dropdownWidth: 35, + dropdownMaxWidth: 25, + }, +}; diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index c68c8337600..89c9d8ff361 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -986,6 +986,8 @@ export const IxSelect = /*@__PURE__*/ defineContainer Date: Tue, 28 Jan 2025 09:32:39 +0100 Subject: [PATCH 03/11] test(select): add component tests for select dropdown width --- .../src/components/select/test/select.ct.ts | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/packages/core/src/components/select/test/select.ct.ts b/packages/core/src/components/select/test/select.ct.ts index 99f20007442..8b828faa295 100644 --- a/packages/core/src/components/select/test/select.ct.ts +++ b/packages/core/src/components/select/test/select.ct.ts @@ -505,3 +505,102 @@ test('async set content and check input value', async ({ mount, page }) => { const input = page.locator('input'); await expect(input).toHaveValue('Item 1'); }); + +test.describe('Dropdown width', () => { + test('should be 25rem when dropdown-width is set to 35rem and dropdown-max-width to 25rem', async ({ + mount, + page, + }) => { + await mount(` + + `); + + const select = page.locator('ix-select'); + + await page.locator('[data-select-dropdown]').click(); + + const dropdown = select.locator('ix-dropdown'); + await expect(dropdown).toBeVisible(); + + const box = await dropdown.boundingBox(); + expect(box?.width).toBe(16 * 25); + }); + + test('should be 25rem when dropdown-width is set to 25 and dropdown-max-width to 35rem', async ({ + mount, + page, + }) => { + await mount(` + + `); + + const select = page.locator('ix-select'); + + await page.locator('[data-select-dropdown]').click(); + + const dropdown = select.locator('ix-dropdown'); + await expect(dropdown).toBeVisible(); + + const box = await dropdown.boundingBox(); + expect(box?.width).toBe(16 * 25); + }); + + test('should be 25rem when dropdown-width is set to 25 and dropdown-max-width is not set', async ({ + mount, + page, + }) => { + await mount(` + + `); + + const select = page.locator('ix-select'); + + await page.locator('[data-select-dropdown]').click(); + + const dropdown = select.locator('ix-dropdown'); + await expect(dropdown).toBeVisible(); + + const box = await dropdown.boundingBox(); + expect(box?.width).toBe(16 * 25); + }); + + test('should be 35rem when dropdown-width is not set and dropdown-max-width is set to 35rem', async ({ + mount, + page, + }) => { + await mount(` + + `); + + const select = page.locator('ix-select'); + + await page.locator('[data-select-dropdown]').click(); + + const dropdown = select.locator('ix-dropdown'); + await expect(dropdown).toBeVisible(); + + const box = await dropdown.boundingBox(); + expect(box?.width).toBe(16 * 35); + }); + + test('should be 100% when dropdown-width and dropdown-max-width are not set', async ({ + mount, + page, + }) => { + await mount(` + + `); + + const select = page.locator('ix-select'); + + await page.locator('[data-select-dropdown]').click(); + + const dropdown = select.locator('ix-dropdown'); + await expect(dropdown).toBeVisible(); + + const box = await dropdown.boundingBox(); + const pageWidth = page.viewportSize()?.width; + + expect(box?.width).toBe(pageWidth); + }); +}); From f57a0f9679deb250fd7312f50f47f0bbd59e77d2 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 28 Jan 2025 09:44:36 +0100 Subject: [PATCH 04/11] docs(select): update select styleguide with dropdown width information --- packages/documentation/docs/controls/_select_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md index f27e66d8a2f..7b1b7133858 100644 --- a/packages/documentation/docs/controls/_select_styleguide.md +++ b/packages/documentation/docs/controls/_select_styleguide.md @@ -42,7 +42,7 @@ A select component allows users to choose from a list of options. It supports si - **Overflow:** - The text in an input field is truncated with the length of the container. - On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines. - - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. + - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. The maximum width of the dropdown is set to 100% by default. Both the width and maximum width of the dropdown can be defined in rem. - **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number inputs](input-number.mdx). ### States From ea16953394d3941a27e25ba6be859b4bcffd158b Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 28 Jan 2025 10:23:41 +0100 Subject: [PATCH 05/11] docs(select): add since to dropdown width properties for the most likely release version (2.7.0) --- packages/core/component-doc.json | 14 ++++++++++++-- packages/core/src/components.d.ts | 4 ++++ packages/core/src/components/select/select.tsx | 5 +++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 40ff2e5fdf8..8fece4277af 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -16958,7 +16958,12 @@ "attr": "dropdown-max-width", "reflectToAttr": false, "docs": "Optional paramater to set the maximum width of the dropdown element in rem.\nBy default the maximum width of the dropdown element is set to 100%.", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "2.7.0" + } + ], "values": [ { "type": "number" @@ -16982,7 +16987,12 @@ "attr": "dropdown-width", "reflectToAttr": false, "docs": "Optional paramater to set the width of the dropdown element in rem.", - "docsTags": [], + "docsTags": [ + { + "name": "since", + "text": "2.7.0" + } + ], "values": [ { "type": "number" diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 35c81b1e7c4..0407d941adf 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2463,10 +2463,12 @@ export namespace Components { "disabled": boolean; /** * Optional paramater to set the maximum width of the dropdown element in rem. By default the maximum width of the dropdown element is set to 100%. + * @since 2.7.0 */ "dropdownMaxWidth"?: number; /** * Optional paramater to set the width of the dropdown element in rem. + * @since 2.7.0 */ "dropdownWidth"?: number; /** @@ -7695,10 +7697,12 @@ declare namespace LocalJSX { "disabled"?: boolean; /** * Optional paramater to set the maximum width of the dropdown element in rem. By default the maximum width of the dropdown element is set to 100%. + * @since 2.7.0 */ "dropdownMaxWidth"?: number; /** * Optional paramater to set the width of the dropdown element in rem. + * @since 2.7.0 */ "dropdownWidth"?: number; /** diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index ebbfaccd992..79eb1cd18e8 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -181,12 +181,17 @@ export class Select implements IxInputFieldComponent { /** * Optional paramater to set the width of the dropdown element in rem. + * + * @since 2.7.0 */ @Prop() dropdownWidth?: number; /** * Optional paramater to set the maximum width of the dropdown element in rem. * By default the maximum width of the dropdown element is set to 100%. + * + * @since 2.7.0 + * */ @Prop() dropdownMaxWidth?: number; From 25610cb8ab15990e1858f1ee764435bd2ed809cc Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 28 Jan 2025 11:06:42 +0100 Subject: [PATCH 06/11] docs(select): add changeset --- .changeset/orange-geckos-hide.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/orange-geckos-hide.md diff --git a/.changeset/orange-geckos-hide.md b/.changeset/orange-geckos-hide.md new file mode 100644 index 00000000000..5de29246942 --- /dev/null +++ b/.changeset/orange-geckos-hide.md @@ -0,0 +1,7 @@ +--- +'@siemens/ix-angular': minor +'@siemens/ix': minor +'@siemens/ix-vue': minor +--- + +Prevent `ix-select` list items to expand beyond screen width and add properties: dropdown-width + dropdown-max-width From 0f02686c24286e5f05fc7c039bd0bee171134e61 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 28 Jan 2025 13:17:21 +0100 Subject: [PATCH 07/11] docs(select): adjust styleguide description of dropdown list width --- packages/documentation/docs/controls/_select_styleguide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/docs/controls/_select_styleguide.md b/packages/documentation/docs/controls/_select_styleguide.md index 7b1b7133858..5c9475d8f54 100644 --- a/packages/documentation/docs/controls/_select_styleguide.md +++ b/packages/documentation/docs/controls/_select_styleguide.md @@ -42,7 +42,7 @@ A select component allows users to choose from a list of options. It supports si - **Overflow:** - The text in an input field is truncated with the length of the container. - On the multiselect, the selected items break into a second line and then show a scrollbar if it extends beyond two lines. - - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. The maximum width of the dropdown is set to 100% by default. Both the width and maximum width of the dropdown can be defined in rem. + - The dropdown list is scrollable when the list exceeds the container height. Its width is defined by the longest item. The maximum width of the dropdown list is set to 100% by default. Use the properties `dropdownWidth` and `dropdownMaxWidth` to customize the dimensions. - **Alignment:** Selects are always aligned to the left, while right alignment is reserved exclusively for [number inputs](input-number.mdx). ### States From 2d43ab57b98d94a77a4b83a09a76fbd712336e70 Mon Sep 17 00:00:00 2001 From: Andreas Berliner Date: Tue, 28 Jan 2025 15:04:29 +0100 Subject: [PATCH 08/11] refactor(select): change dropdownWidth + dropdownMaxWidth from number to string for more flexibility --- packages/core/component-doc.json | 20 +++++++++---------- packages/core/src/components.d.ts | 16 +++++++-------- .../core/src/components/select/select.tsx | 12 +++++------ .../src/components/select/test/select.ct.ts | 8 ++++---- .../src/stories/select.stories.ts | 11 +++------- 5 files changed, 31 insertions(+), 36 deletions(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 8fece4277af..e397af89e91 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -16948,16 +16948,16 @@ }, { "name": "dropdownMaxWidth", - "type": "number | undefined", + "type": "string | undefined", "complexType": { - "original": "number", - "resolved": "number | undefined", + "original": "string", + "resolved": "string | undefined", "references": {} }, "mutable": false, "attr": "dropdown-max-width", "reflectToAttr": false, - "docs": "Optional paramater to set the maximum width of the dropdown element in rem.\nBy default the maximum width of the dropdown element is set to 100%.", + "docs": "The maximum width of the dropdown element (e.g. \"200px\").\nBy default the maximum width of the dropdown element is set to 100%.", "docsTags": [ { "name": "since", @@ -16966,7 +16966,7 @@ ], "values": [ { - "type": "number" + "type": "string" }, { "type": "undefined" @@ -16977,16 +16977,16 @@ }, { "name": "dropdownWidth", - "type": "number | undefined", + "type": "string | undefined", "complexType": { - "original": "number", - "resolved": "number | undefined", + "original": "string", + "resolved": "string | undefined", "references": {} }, "mutable": false, "attr": "dropdown-width", "reflectToAttr": false, - "docs": "Optional paramater to set the width of the dropdown element in rem.", + "docs": "The width of the dropdown element (e.g. \"200px\").", "docsTags": [ { "name": "since", @@ -16995,7 +16995,7 @@ ], "values": [ { - "type": "number" + "type": "string" }, { "type": "undefined" diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 0407d941adf..3d12bf4f52c 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2462,15 +2462,15 @@ export namespace Components { */ "disabled": boolean; /** - * Optional paramater to set the maximum width of the dropdown element in rem. By default the maximum width of the dropdown element is set to 100%. + * The maximum width of the dropdown element (e.g. "200px"). By default the maximum width of the dropdown element is set to 100%. * @since 2.7.0 */ - "dropdownMaxWidth"?: number; + "dropdownMaxWidth"?: string; /** - * Optional paramater to set the width of the dropdown element in rem. + * The width of the dropdown element (e.g. "200px"). * @since 2.7.0 */ - "dropdownWidth"?: number; + "dropdownWidth"?: string; /** * Select is extendable */ @@ -7696,15 +7696,15 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * Optional paramater to set the maximum width of the dropdown element in rem. By default the maximum width of the dropdown element is set to 100%. + * The maximum width of the dropdown element (e.g. "200px"). By default the maximum width of the dropdown element is set to 100%. * @since 2.7.0 */ - "dropdownMaxWidth"?: number; + "dropdownMaxWidth"?: string; /** - * Optional paramater to set the width of the dropdown element in rem. + * The width of the dropdown element (e.g. "200px"). * @since 2.7.0 */ - "dropdownWidth"?: number; + "dropdownWidth"?: string; /** * Select is extendable */ diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index 79eb1cd18e8..f8f55752806 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -180,20 +180,20 @@ export class Select implements IxInputFieldComponent { @Prop() hideListHeader = false; /** - * Optional paramater to set the width of the dropdown element in rem. + * The width of the dropdown element (e.g. "200px"). * * @since 2.7.0 */ - @Prop() dropdownWidth?: number; + @Prop() dropdownWidth?: string; /** - * Optional paramater to set the maximum width of the dropdown element in rem. + * The maximum width of the dropdown element (e.g. "200px"). * By default the maximum width of the dropdown element is set to 100%. * * @since 2.7.0 * */ - @Prop() dropdownMaxWidth?: number; + @Prop() dropdownMaxWidth?: string; /** * Value changed @@ -976,8 +976,8 @@ export class Select implements IxInputFieldComponent { return { minWidth: `${minWidth}px`, - width: `${this.dropdownWidth}rem`, - maxWidth: `${this.dropdownMaxWidth}rem`, + width: this.dropdownWidth, + maxWidth: this.dropdownMaxWidth, }; }} > diff --git a/packages/core/src/components/select/test/select.ct.ts b/packages/core/src/components/select/test/select.ct.ts index 8b828faa295..4c313715c8a 100644 --- a/packages/core/src/components/select/test/select.ct.ts +++ b/packages/core/src/components/select/test/select.ct.ts @@ -511,7 +511,7 @@ test.describe('Dropdown width', () => { mount, page, }) => { - await mount(` + await mount(` `); @@ -530,7 +530,7 @@ test.describe('Dropdown width', () => { mount, page, }) => { - await mount(` + await mount(` `); @@ -549,7 +549,7 @@ test.describe('Dropdown width', () => { mount, page, }) => { - await mount(` + await mount(` `); @@ -568,7 +568,7 @@ test.describe('Dropdown width', () => { mount, page, }) => { - await mount(` + await mount(` `); diff --git a/packages/storybook-docs/src/stories/select.stories.ts b/packages/storybook-docs/src/stories/select.stories.ts index 1360a6b1130..2ec24ec80e7 100644 --- a/packages/storybook-docs/src/stories/select.stories.ts +++ b/packages/storybook-docs/src/stories/select.stories.ts @@ -56,12 +56,7 @@ export const editableSelect: Story = { }; export const editable_with_dropdown_width: Story = { - render: ({ - editable, - disabled, - dropdownWidth, - dropdownMaxWidth, - }) => { + render: ({ editable, disabled, dropdownWidth, dropdownMaxWidth }) => { return html` Date: Wed, 29 Jan 2025 11:31:28 +0100 Subject: [PATCH 09/11] fix(select): adjust logic to apply dropdownWidth and dropdownMaxWidth styles --- packages/core/component-doc.json | 4 ++-- packages/core/src/components.d.ts | 8 ++++---- packages/core/src/components/select/select.tsx | 14 +++++++++----- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index e397af89e91..13722912898 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -16957,7 +16957,7 @@ "mutable": false, "attr": "dropdown-max-width", "reflectToAttr": false, - "docs": "The maximum width of the dropdown element (e.g. \"200px\").\nBy default the maximum width of the dropdown element is set to 100%.", + "docs": "The maximum width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\nBy default the maximum width of the dropdown element is set to 100%.", "docsTags": [ { "name": "since", @@ -16986,7 +16986,7 @@ "mutable": false, "attr": "dropdown-width", "reflectToAttr": false, - "docs": "The width of the dropdown element (e.g. \"200px\").", + "docs": "The width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").", "docsTags": [ { "name": "since", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 3d12bf4f52c..1f7b1d41d93 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2462,12 +2462,12 @@ export namespace Components { */ "disabled": boolean; /** - * The maximum width of the dropdown element (e.g. "200px"). By default the maximum width of the dropdown element is set to 100%. + * The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). By default the maximum width of the dropdown element is set to 100%. * @since 2.7.0 */ "dropdownMaxWidth"?: string; /** - * The width of the dropdown element (e.g. "200px"). + * The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). * @since 2.7.0 */ "dropdownWidth"?: string; @@ -7696,12 +7696,12 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * The maximum width of the dropdown element (e.g. "200px"). By default the maximum width of the dropdown element is set to 100%. + * The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). By default the maximum width of the dropdown element is set to 100%. * @since 2.7.0 */ "dropdownMaxWidth"?: string; /** - * The width of the dropdown element (e.g. "200px"). + * The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). * @since 2.7.0 */ "dropdownWidth"?: string; diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index f8f55752806..b9fab30024c 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -180,14 +180,14 @@ export class Select implements IxInputFieldComponent { @Prop() hideListHeader = false; /** - * The width of the dropdown element (e.g. "200px"). + * The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). * * @since 2.7.0 */ @Prop() dropdownWidth?: string; /** - * The maximum width of the dropdown element (e.g. "200px"). + * The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem"). * By default the maximum width of the dropdown element is set to 100%. * * @since 2.7.0 @@ -976,9 +976,13 @@ export class Select implements IxInputFieldComponent { return { minWidth: `${minWidth}px`, - width: this.dropdownWidth, - maxWidth: this.dropdownMaxWidth, - }; + ...(this.dropdownWidth && { + width: `min(${this.dropdownWidth}, 100%)`, + }), + ...(this.dropdownMaxWidth && { + 'max-width': `min(${this.dropdownMaxWidth}, 100%)`, + }), + } as CSSStyleDeclaration; }} >
Date: Wed, 29 Jan 2025 13:31:16 +0100 Subject: [PATCH 10/11] refactor(select): apply review changes to improve code readability --- .../core/src/components/select/select.tsx | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx index b9fab30024c..1f3086b0208 100644 --- a/packages/core/src/components/select/select.tsx +++ b/packages/core/src/components/select/select.tsx @@ -970,19 +970,25 @@ export class Select implements IxInputFieldComponent { onShowChanged={(e) => this.dropdownVisibilityChanged(e)} placement="bottom-start" overwriteDropdownStyle={async () => { + const styleOverwrites: Partial = {}; + const minWidth = this.hostElement.shadowRoot ?.querySelector('.select') ?.getBoundingClientRect().width; - return { - minWidth: `${minWidth}px`, - ...(this.dropdownWidth && { - width: `min(${this.dropdownWidth}, 100%)`, - }), - ...(this.dropdownMaxWidth && { - 'max-width': `min(${this.dropdownMaxWidth}, 100%)`, - }), - } as CSSStyleDeclaration; + if (minWidth) { + styleOverwrites.minWidth = `${minWidth}px`; + } + + if (this.dropdownWidth) { + styleOverwrites.width = `min(${this.dropdownWidth}, 100%)`; + } + + if (this.dropdownMaxWidth) { + styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`; + } + + return styleOverwrites; }} >
Date: Wed, 29 Jan 2025 13:38:32 +0100 Subject: [PATCH 11/11] test(select): add component test for dropdown-max-width greater than viewport --- .../src/components/select/test/select.ct.ts | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/core/src/components/select/test/select.ct.ts b/packages/core/src/components/select/test/select.ct.ts index 4c313715c8a..e117410452b 100644 --- a/packages/core/src/components/select/test/select.ct.ts +++ b/packages/core/src/components/select/test/select.ct.ts @@ -604,3 +604,24 @@ test.describe('Dropdown width', () => { expect(box?.width).toBe(pageWidth); }); }); + +test('should be 100% when dropdown-max-width is greater than the viewport width', async ({ + mount, + page, +}) => { + await mount(` + + `); + + const select = page.locator('ix-select'); + + await page.locator('[data-select-dropdown]').click(); + + const dropdown = select.locator('ix-dropdown'); + await expect(dropdown).toBeVisible(); + + const box = await dropdown.boundingBox(); + const pageWidth = page.viewportSize()?.width; + + expect(box?.width).toBe(pageWidth); +});