Merge pull request #2485 from hashicorp/showcase-modal-flyout-isDismissDisabled-demo

`Modal` - Fix  functionality for `isDismissDisabled`

Author: didoo

.changeset/eighty-geese-camp.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Modal` - Fixed `isDismissDisabled` functionality
+`Flyout` - Removed `isDismissDisabled` from signature (not an actual argument)

packages/components/src/components/hds/flyout/index.ts

@@ -27,7 +27,6 @@ export const SIZES: string[] = Object.values(HdsFlyoutSizesValues);
 
 export interface HdsFlyoutSignature {
   Args: {
-    isDismissDisabled?: boolean;
     size?: HdsFlyoutSizes;
     onOpen?: () => void;
     onClose?: (event: Event) => void;

packages/components/src/components/hds/modal/index.ts

@@ -57,19 +57,14 @@ export interface HdsModalSignature {
 
 export default class HdsModal extends Component<HdsModalSignature> {
   @tracked isOpen = false;
-  @tracked isDismissDisabled = this.args.isDismissDisabled ?? false;
   element!: HTMLDialogElement;
   body!: HTMLElement;
   bodyInitialOverflowValue = '';
 
-  /**
-   * Sets the size of the modal dialog
-   * Accepted values: small, medium, large
-   *
-   * @param size
-   * @type {string}
-   * @default 'medium'
-   */
+  get isDismissDisabled(): boolean {
+    return this.args.isDismissDisabled ?? false;
+  }
+
   get size(): HdsModalSizes {
     const { size = DEFAULT_SIZE } = this.args;
 
@@ -83,14 +78,6 @@ export default class HdsModal extends Component<HdsModalSignature> {
     return size;
   }
 
-  /**
-   * Sets the color of the modal dialog
-   * Accepted values: neutral, warning, critical
-   *
-   * @param color
-   * @type {string}
-   * @default 'neutral'
-   */
   get color(): HdsModalColors {
     const { color = DEFAULT_COLOR } = this.args;
 
@@ -104,18 +91,10 @@ export default class HdsModal extends Component<HdsModalSignature> {
     return color;
   }
 
-  /**
-   * Calculates the unique ID to assign to the title
-   */
   get id(): string {
     return getElementId(this);
   }
 
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
   get classNames(): string {
     const classes = ['hds-modal'];
 

showcase/app/controllers/components/modal.js

@@ -16,14 +16,29 @@ export default class ModalController extends Controller {
   @tracked superselectModalActive1 = false;
   @tracked superselectModalActive2 = false;
   @tracked superselectModalActive3 = false;
+  @tracked dismissDisabledModalActive = false;
+  @tracked isDismissDisabled;
 
   @action
   activateModal(modal) {
     this[modal] = true;
+
+    if (modal === 'dismissDisabledModalActive') {
+      this.isDismissDisabled = true;
+    }
   }
 
   @action
   deactivateModal(modal) {
     this[modal] = false;
+
+    if (modal === 'dismissDisabledModalActive') {
+      this.isDismissDisabled = undefined;
+    }
+  }
+
+  @action
+  resetIsDismissDisabled() {
+    this.isDismissDisabled = false;
   }
 }

showcase/app/templates/components/modal.hbs

@@ -468,5 +468,46 @@
     </Hds::Modal>
   {{/if}}
 
+  <br />
+  <br />
+
+  <button type="button" {{on "click" (fn this.activateModal "dismissDisabledModalActive")}}>Open non-dismissable modal</button>
+
+  {{#if this.dismissDisabledModalActive}}
+    <Hds::Modal
+      id="dismiss-disabled-modal"
+      @isDismissDisabled={{this.isDismissDisabled}}
+      @onClose={{fn this.deactivateModal "dismissDisabledModalActive"}}
+      as |M|
+    >
+      <M.Header>
+        Try to close this modal
+      </M.Header>
+      <M.Body>
+        <p class="hds-typography-body-200 hds-foreground-primary" {{style margin-bottom="12px"}}>When this modal is
+          opened, the
+          <code>isDismissDisabled</code>
+          argument is set to
+          <code>true</code>, so it can't be dismissed (not by clicking the cancel button or the close button, nor
+          clicking on the overlay area or via
+          <code>esc</code>
+          key).</p>
+        <p class="hds-typography-body-200 hds-foreground-primary" {{style margin="12px 0"}}>Click this button to reset
+          the variable to
+          <code>false</code>
+          and go back to its normal state, where you should be able to close it.</p>
+        <button type="button" {{style padding=".25rem"}} {{on "click" this.resetIsDismissDisabled}}>Reset
+          <code>isDismissDisabled</code></button>
+        <pre>this.isDismissDisabled = {{this.isDismissDisabled}}</pre>
+      </M.Body>
+      <M.Footer as |F|>
+        <Hds::ButtonSet>
+          <Hds::Button type="button" @text="Confirm" {{on "click" F.close}} />
+          <Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+        </Hds::ButtonSet>
+      </M.Footer>
+    </Hds::Modal>
+  {{/if}}
+
 </section>
 {{! template-lint-enable no-autofocus-attribute }}

showcase/tests/integration/components/hds/modal/index-test.js

@@ -8,6 +8,8 @@ import { setupRenderingTest } from 'ember-qunit';
 import {
   click,
   render,
+  rerender,
+  triggerKeyEvent,
   resetOnerror,
   setupOnerror,
   settled,
@@ -138,11 +140,33 @@ module('Integration | Component | hds/modal/index', function (hooks) {
     assert.dom('#test-modal').isNotVisible();
   });
   test('it should not close the modal when `@isDismissDisabled` is `true`', async function (assert) {
+    this.set('isDismissDisabled', true);
     await render(
-      hbs`<Hds::Modal @isDismissDisabled={{true}} id="test-modal" as |M|><M.Header>Title</M.Header></Hds::Modal>`
+      hbs`<Hds::Modal @isDismissDisabled={{this.isDismissDisabled}} id="test-modal" as |M|>
+            <M.Header>Title</M.Header>
+            <M.Footer as |F|>
+              <Hds::Button id="cancel-button" type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
+            </M.Footer>
+          </Hds::Modal>`
     );
+    // top right dismiss button
     await click('button.hds-modal__dismiss');
-    assert.dom('#test-modal').exists();
+    assert.dom('#test-modal').isVisible();
+    // cancel button with yielded "close" callback
+    await click('#cancel-button');
+    assert.dom('#test-modal').isVisible();
+    // click on overlay
+    await click('.hds-modal__overlay');
+    assert.dom('#test-modal').isVisible();
+    // "esc" key
+    await triggerKeyEvent('.hds-modal', 'keydown', 'Escape');
+    assert.dom('#test-modal').isVisible();
+
+    // now let's check that the state is reset and it can be closed
+    this.set('isDismissDisabled', false);
+    await rerender();
+    await click('button.hds-modal__dismiss');
+    assert.dom('#test-modal').isNotVisible();
   });
 
   // ACCESSIBILITY