Removed {{action}} helper from docs-app (#410)

* feature: Created <DemoModal> component to standardize demos * refactor: Consumed <DemoModal> component (index) * refactor: Consumed <DemoModal> component (animatable) * refactor: Consumed <DemoModal> component (tethered) * refactor: Consumed <DemoModal> component (tethered-animatable) * chore: Removed unused code * chore: Removed unused configuration --------- Co-authored-by: ijlee2 <[email protected]>
yapplabs · Dec 5, 2024 · d7c0e58 · d7c0e58
1 parent f3c8301
commit d7c0e58
Show file tree

Hide file tree

Showing 21 changed files with 1,152 additions and 1,701 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -29,7 +29,6 @@ module.exports = {
   },
   rules: {
     'no-setter-return': 'off',
-    'ember/classic-decorator-no-classic-methods': 'warn',
     'ember/classic-decorator-hooks': 'warn',
     'ember/no-classic-classes': 'warn',
     'ember/no-classic-components': 'warn',

diff --git a/tests/acceptance/basic-test.js b/tests/acceptance/basic-test.js
@@ -27,26 +27,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-basic button',
       dialogText: 'Basic',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-basic button',
       dialogText: 'Basic',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -55,26 +41,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -83,26 +55,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-without-overlay button',
       dialogText: 'Without Overlay',
       closeSelector: '#example-without-overlay',
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-without-overlay button',
       dialogText: 'Without Overlay',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -111,26 +69,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -139,26 +83,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-overlay-sibling button',
       dialogText: 'With Translucent Overlay as Sibling',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-overlay-sibling button',
       dialogText: 'With Translucent Overlay as Sibling',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -191,24 +121,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
             'custom-styles-modal-container',
             'has provided container-class',
           );
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
     await assert.dialogOpensAndCloses({
       openSelector: '#example-custom-styles button',
       dialogText: 'Custom Styles',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -224,11 +142,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
             'ember-modal-dialog-target-attachment-left',
             'has targetAttachment class name',
           );
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
   });
@@ -238,13 +151,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-target-element button',
       dialogText: 'Target - Element',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -257,11 +163,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
         assert
           .dom(dialogSelector)
           .hasClass('my-cool-modal', 'has provided containerClassNames');
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
   });
@@ -278,11 +179,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
         assert
           .dom(dialogSelector)
           .hasClass('my-cool-modal-2', 'has provided containerClassNames');
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
   });
@@ -302,11 +198,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
     assert
       .dom(inPlaceDialogSelector)
       .hasClass('my-custom-class', 'has provided containerClass');
-    assert.hasDataTest(
-      inPlaceDialogSelector,
-      'my-data-test',
-      'dialog has data-test attribute',
-    );
     assert.strictEqual(
       getComputedStyle(dialogElement).getPropertyValue('position'),
       'static',
@@ -356,11 +247,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
     assert
       .dom(inPlaceDialogSelector)
       .hasClass('my-custom-class-2', 'has provided containerClassNames');
-    assert.hasDataTest(
-      inPlaceDialogSelector,
-      'my-data-test',
-      'dialog has data-test attribute',
-    );
     await click(inPlaceCloseButton);
   });
 });
diff --git a/tests/dummy/app/components/component-that-uses-modal-dialog.hbs b/tests/dummy/app/components/component-that-uses-modal-dialog.hbs
diff --git a/tests/dummy/app/components/component-that-uses-modal-dialog.js b/tests/dummy/app/components/component-that-uses-modal-dialog.js
diff --git a/tests/dummy/app/components/demo-modal.hbs b/tests/dummy/app/components/demo-modal.hbs
@@ -0,0 +1,34 @@
+<div class="example" id={{@id}}>
+  <h2>{{@title}}</h2>
+
+  <div>
+    {{yield
+      (hash
+        OpenButton=(component
+          "demo-modal/button"
+          label="Open"
+          onClick=this.openModal
+        )
+      )
+      to="menu"
+    }}
+  </div>
+
+  <div>
+    {{yield to="code"}}
+  </div>
+
+  <div>
+    {{yield
+      (hash
+        CloseButton=(component
+          "demo-modal/button"
+          label="Close"
+          onClick=this.closeModal
+        )
+        closeModal=this.closeModal
+        isModalOpen=this.isModalOpen
+      )
+    }}
+  </div>
+</div>
diff --git a/tests/dummy/app/components/demo-modal.js b/tests/dummy/app/components/demo-modal.js
@@ -0,0 +1,19 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoModal extends Component {
+  @tracked isModalOpen = false;
+
+  @action closeModal() {
+    this.isModalOpen = false;
+
+    this.args.onClose?.();
+  }
+
+  @action openModal() {
+    this.isModalOpen = true;
+
+    this.args.onOpen?.();
+  }
+}
diff --git a/tests/dummy/app/components/demo-modal/button.hbs b/tests/dummy/app/components/demo-modal/button.hbs
@@ -0,0 +1,8 @@
+<button
+  data-test-button={{@label}}
+  type="button"
+  {{on "click" @onClick}}
+  ...attributes
+>
+  {{@label}}
+</button>
diff --git a/tests/dummy/app/components/demo-modal/button.js b/tests/dummy/app/components/demo-modal/button.js
@@ -0,0 +1,5 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+const DemoModalButton = templateOnlyComponent();
+
+export default DemoModalButton;