feat(core/date-dropdown): add disabled property (#1264)

Co-authored-by: Daniel Leroux <[email protected]>
siemens · May 8, 2024 · 57fa028 · 57fa028
1 parent 90a7b71
commit 57fa028
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 2 deletions.
diff --git a/.changeset/dry-avocados-sneeze.md b/.changeset/dry-avocados-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+feat(core/date-dropdown): add disabled property
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -482,15 +482,15 @@ 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({
   selector: 'ix-date-dropdown',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // 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
@@ -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.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
@@ -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()}
         </ix-button>

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
@@ -215,3 +215,30 @@ 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('disable', async ({ mount, page }) => {
+  await mount(`<ix-date-dropdown disabled></ix-date-dropdown>`);
+  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(`<ix-date-dropdown></ix-date-dropdown>`);
+  const dateDropdown = page.locator('ix-date-dropdown');
+  await dateDropdown.click();
+  await dateDropdown.evaluate((dd: HTMLIxDateDropdownElement) => {
+    dd.disabled = true;
+  });
+  const dropdown = dateDropdown.locator('[data-date-dropdown]');
+  await expect(dropdown).not.toBeVisible();
+});
diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -273,6 +273,7 @@ export const IxContentHeader = /*@__PURE__*/ defineContainer<JSX.IxContentHeader
 
 
 export const IxDateDropdown = /*@__PURE__*/ defineContainer<JSX.IxDateDropdown>('ix-date-dropdown', defineIxDateDropdown, [
+  'disabled',
   'format',
   'range',
   'from',