From a8f4c4f2e482e361fdc9f95485aa7dbf6d01f907 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Tue, 7 May 2024 11:21:36 +0200 Subject: [PATCH 1/3] feat(core/date-dropdown): add disabled property --- .changeset/dry-avocados-sneeze.md | 5 +++++ packages/core/src/components.d.ts | 10 ++++++++++ .../src/components/date-dropdown/date-dropdown.tsx | 14 ++++++++++++++ .../date-dropdown/test/date-dropdown.ct.ts | 11 +++++++++++ 4 files changed, 40 insertions(+) create mode 100644 .changeset/dry-avocados-sneeze.md diff --git a/.changeset/dry-avocados-sneeze.md b/.changeset/dry-avocados-sneeze.md new file mode 100644 index 00000000000..41b44f0c6a1 --- /dev/null +++ b/.changeset/dry-avocados-sneeze.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': minor +--- + +feat(core/date-dropdown): add disabled property diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 31d4e8c3894..5d08dfd27a0 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -531,6 +531,11 @@ export namespace Components { * An array of predefined date range options for the date picker. Each option is an object with a label describing the range and a function that returns the start and end dates of the range as a DateRangeOption object. Example format: { id: 'some unique id', label: 'Name of the range', from: undefined, to: '2023/03/29' }, // ... other predefined date range options ... */ "dateRangeOptions": DateDropdownOption[]; + /** + * Disable the button that opens the dropdown containing the date picker. + * @since 2.3.0 + */ + "disabled": boolean; /** * Date format string. See * @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. @@ -4591,6 +4596,11 @@ declare namespace LocalJSX { * An array of predefined date range options for the date picker. Each option is an object with a label describing the range and a function that returns the start and end dates of the range as a DateRangeOption object. Example format: { id: 'some unique id', label: 'Name of the range', from: undefined, to: '2023/03/29' }, // ... other predefined date range options ... */ "dateRangeOptions"?: DateDropdownOption[]; + /** + * Disable the button that opens the dropdown containing the date picker. + * @since 2.3.0 + */ + "disabled"?: boolean; /** * Date format string. See * @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. diff --git a/packages/core/src/components/date-dropdown/date-dropdown.tsx b/packages/core/src/components/date-dropdown/date-dropdown.tsx index 6eb5e12842a..9df4717b367 100644 --- a/packages/core/src/components/date-dropdown/date-dropdown.tsx +++ b/packages/core/src/components/date-dropdown/date-dropdown.tsx @@ -46,6 +46,13 @@ export type DateRangeChangeEvent = { export class DateDropdown { @Element() hostElement: HTMLIxDateDropdownElement; + /** + * Disable the button that opens the dropdown containing the date picker. + * + * @since 2.3.0 + */ + @Prop() disabled = false; + /** * Date format string. * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens. @@ -166,6 +173,12 @@ export class DateDropdown { }; @State() private triggerRef: HTMLElement; + @Watch('disabled') + onDisabledChange() { + if (this.disabled) { + this.closeDropdown(); + } + } private datePickerTouched = false; componentWillLoad() { @@ -289,6 +302,7 @@ export class DateDropdown { variant="primary" icon="history" ref={(ref) => (this.triggerRef = ref)} + disabled={this.disabled} > {this.getButtonLabel()} diff --git a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts index 9e4b0c99823..c744785c1e4 100644 --- a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts +++ b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts @@ -215,3 +215,14 @@ test('set date from a button', async ({ mount, page }) => { const button = dateDropdown.locator('[data-date-dropdown-trigger]'); await expect(button).toHaveText(/2024\/02\/17 \- 2024\/02\/27/); }); + +test('disabled', async ({ mount, page }) => { + await mount(``); + const dateDropdown = page.locator('ix-date-dropdown'); + await dateDropdown.click(); + await dateDropdown.evaluate((dd) => { + dd.disabled = true; + }); + const dropdown = dateDropdown.locator('[data-date-dropdown]'); + await expect(dropdown).not.toBeVisible(); +}); From 182d6c75a8673ff467aed0b95370f7fd5323b429 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Tue, 7 May 2024 11:51:26 +0200 Subject: [PATCH 2/3] fix(core/date-dropdown): update test and add meta data --- packages/angular/src/components.ts | 4 +-- packages/core/component-doc.json | 27 +++++++++++++++++++ .../date-dropdown/test/date-dropdown.ct.ts | 2 +- packages/vue/src/components.ts | 1 + 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 964f1e9ba46..e11111c66b8 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -482,7 +482,7 @@ export declare interface IxContentHeader extends Components.IxContentHeader { @ProxyCmp({ - inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], + inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], methods: ['getDateRange'] }) @Component({ @@ -490,7 +490,7 @@ export declare interface IxContentHeader extends Components.IxContentHeader { changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], + inputs: ['customRangeAllowed', 'dateRangeId', 'dateRangeOptions', 'disabled', 'format', 'from', 'i18nCustomItem', 'i18nDone', 'i18nNoRange', 'maxDate', 'minDate', 'range', 'to'], }) export class IxDateDropdown { protected el: HTMLElement; diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index f23cb421b05..637b0b308c2 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -3333,6 +3333,33 @@ "optional": false, "required": false }, + { + "name": "disabled", + "type": "boolean", + "complexType": { + "original": "boolean", + "resolved": "boolean", + "references": {} + }, + "mutable": false, + "attr": "disabled", + "reflectToAttr": false, + "docs": "Disable the button that opens the dropdown containing the date picker.", + "docsTags": [ + { + "name": "since", + "text": "2.3.0" + } + ], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "format", "type": "string", diff --git a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts index c744785c1e4..a5dfd0e4921 100644 --- a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts +++ b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts @@ -220,7 +220,7 @@ test('disabled', async ({ mount, page }) => { await mount(``); const dateDropdown = page.locator('ix-date-dropdown'); await dateDropdown.click(); - await dateDropdown.evaluate((dd) => { + await dateDropdown.evaluate((dd: HTMLIxDateDropdownElement) => { dd.disabled = true; }); const dropdown = dateDropdown.locator('[data-date-dropdown]'); diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 08e88decf9d..93e807741a9 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -273,6 +273,7 @@ export const IxContentHeader = /*@__PURE__*/ defineContainer('ix-date-dropdown', defineIxDateDropdown, [ + 'disabled', 'format', 'range', 'from', From 41fb742029d9872d198501be101b81b3f3df3a2b Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Wed, 8 May 2024 10:02:02 +0200 Subject: [PATCH 3/3] test: add disable testcase --- .../date-dropdown/test/date-dropdown.ct.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts index a5dfd0e4921..d6f71c66305 100644 --- a/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts +++ b/packages/core/src/components/date-dropdown/test/date-dropdown.ct.ts @@ -216,7 +216,23 @@ test('set date from a button', async ({ mount, page }) => { await expect(button).toHaveText(/2024\/02\/17 \- 2024\/02\/27/); }); -test('disabled', async ({ mount, page }) => { +test('disable', async ({ mount, page }) => { + await mount(``); + const dateDropdown = page.locator('ix-date-dropdown'); + + const trigger = page.locator('[data-date-dropdown-trigger]'); + await expect(trigger).toHaveAttribute('disabled'); + + await dateDropdown.click(); + + const dropdown = dateDropdown.locator('[data-date-dropdown]'); + await expect(dropdown).not.toBeVisible(); +}); + +test('close dropdown after disabled property = true', async ({ + mount, + page, +}) => { await mount(``); const dateDropdown = page.locator('ix-date-dropdown'); await dateDropdown.click();