DEV: Introduce new component-based DModal API (#21304)

Ember 4.x will be removing the 'named outlet' feature, which were previously relying on to render modal 'controllers' and their associated templates. This commit updates the modal.show API to accept a component class, and also introduces a declarative API which can be used by including the <DModal component directly in your template.

For more information on the API design, and conversion instructions from the current API, see these Meta topics:

DModal API: https://meta.discourse.org/t/268304
Conversion: https://meta.discourse.org/t/268057

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.hbs

@@ -1,15 +1,57 @@
-<StyleguideExample @title="<DModal>">
-  <DModal
-    @closeModal={{@dummyAction}}
-    @modalStyle="inline-modal"
-    @title={{i18n "styleguide.sections.modal.header"}}
-  >
-    <DModalBody>
-      {{html-safe @dummy.lorem}}
-    </DModalBody>
+{{! template-lint-disable no-potential-path-strings}}
 
-    <div class="modal-footer">
-      {{i18n "styleguide.sections.modal.footer"}}
-    </div>
-  </DModal>
+<StyleguideExample @title="<DModal>">
+  <Styleguide::Component>
+    <DModal
+      @closeModal={{fn (mut this.inline) true}}
+      @inline={{this.inline}}
+      @title={{this.title}}
+      @subtitle={{this.subtitle}}
+      @flash={{this.flash}}
+      @flashType={{this.flashType}}
+      @errors={{this.errors}}
+      @dismissable={{this.dismissable}}
+    >
+      <:body>
+        {{this.body}}
+      </:body>
+
+      <:footer>
+        {{i18n "styleguide.sections.modal.footer"}}
+      </:footer>
+    </DModal>
+  </Styleguide::Component>
+
+  <Styleguide::Controls>
+    <Styleguide::Controls::Row @name="@inline">
+      <DToggleSwitch @state={{this.inline}} {{on "click" this.toggleInline}} />
+    </Styleguide::Controls::Row>
+    <Styleguide::Controls::Row @name="@dismissable">
+      <DToggleSwitch
+        @state={{this.dismissable}}
+        {{on "click" this.toggleDismissable}}
+      />
+    </Styleguide::Controls::Row>
+    <Styleguide::Controls::Row @name="@title">
+      <Input @value={{this.title}} />
+    </Styleguide::Controls::Row>
+    <Styleguide::Controls::Row @name="@subtitle">
+      <Input @value={{this.subtitle}} />
+    </Styleguide::Controls::Row>
+    <Styleguide::Controls::Row @name="<:body>">
+      <Textarea @value={{this.body}} />
+    </Styleguide::Controls::Row>
+    <Styleguide::Controls::Row @name="@flash">
+      <Input @value={{this.flash}} />
+    </Styleguide::Controls::Row>
+    <Styleguide::Controls::Row @name="@flashType">
+      <ComboBox
+        @value={{this.flashType}}
+        @content={{this.flashTypes}}
+        @onChange={{fn (mut this.flashType)}}
+        @valueProperty={{null}}
+        @nameProperty={{null}}
+      />
+    </Styleguide::Controls::Row>
+  </Styleguide::Controls>
 </StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/organisms/modal.js

@@ -0,0 +1,39 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import I18n from "I18n";
+
+export default class extends Component {
+  @tracked inline = true;
+  @tracked dismissable = true;
+  @tracked title = I18n.t("styleguide.sections.modal.header");
+  @tracked body = this.args.dummy.shortLorem;
+  @tracked subtitle = "";
+  @tracked flash = "";
+  @tracked flashType = "success";
+
+  flashTypes = ["success", "info", "warning", "error"];
+
+  @action
+  toggleInline() {
+    this.inline = !this.inline;
+    if (!this.inline) {
+      // Make sure there is a way to dismiss the modal
+      this.dismissable = true;
+    }
+  }
+
+  @action
+  toggleDismissable() {
+    this.dismissable = !this.dismissable;
+    if (!this.dismissable) {
+      // Make sure there is a way to dismiss the modal
+      this.inline = true;
+    }
+  }
+
+  @action
+  toggleShowFooter() {
+    this.showFooter = !this.showFooter;
+  }
+}

plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js

@@ -262,6 +262,8 @@ export function createData(store) {
     }),
 
     lorem: cooked,
+    shortLorem:
+      "Lorem ipsum dolor sit amet, et nec quis viderer prompta, ex omnium ponderum insolens eos, sed discere invenire principes in. Fuisset constituto per ad. Est no scripta propriae facilisis, viderer impedit deserunt in mel. Quot debet facilisis ne vix, nam in detracto tacimates. At quidam petentium vulputate pro. Alia iudico repudiandae ad vel, erat omnis epicuri eos id. Et illum dolor graeci vel, quo feugiat consulatu ei.",
 
     topicTimerUpdateDate: "2017-10-18 18:00",