[CL-166] add title and subtitle inputs to bit-dialog (#7597)

libs/components/src/dialog/dialog.module.ts

@@ -6,6 +6,7 @@ import { AsyncActionsModule } from "../async-actions";
 import { ButtonModule } from "../button";
 import { IconButtonModule } from "../icon-button";
 import { SharedModule } from "../shared";
+import { TypographyModule } from "../typography";
 
 import { DialogComponent } from "./dialog/dialog.component";
 import { DialogService } from "./dialog.service";
@@ -22,6 +23,7 @@ import { IconDirective, SimpleDialogComponent } from "./simple-dialog/simple-dia
     CdkDialogModule,
     IconButtonModule,
     ReactiveFormsModule,
+    TypographyModule,
   ],
   declarations: [
     DialogCloseDirective,

libs/components/src/dialog/dialog.service.stories.ts

@@ -35,8 +35,7 @@ class StoryDialogComponent {
 
 @Component({
   template: `
-    <bit-dialog dialogSize="large">
-      <span bitDialogTitle>Dialog Title</span>
+    <bit-dialog title="Dialog Title" dialogSize="large">
       <span bitDialogContent>
         Dialog body text goes here.
         <br />

libs/components/src/dialog/dialog/dialog.component.html

@@ -1,12 +1,16 @@
-<div
+<section
   class="tw-flex tw-w-full tw-flex-col tw-self-center tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-text-main"
   [ngClass]="width"
   @fadeIn
 >
-  <div
-    class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
+  <header
+    class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
   >
-    <h1 bitDialogTitleContainer class="tw-mb-0 tw-grow tw-truncate tw-text-lg">
+    <h1 bitDialogTitleContainer bitTypography="h3" noMargin class="tw-mb-0 tw-truncate">
+      {{ title }}
+      <span *ngIf="subtitle" class="tw-text-muted tw-font-normal tw-text-sm">
+        {{ subtitle }}
+      </span>
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h1>
     <button
@@ -18,7 +22,7 @@
       [attr.title]="'close' | i18n"
       [attr.aria-label]="'close' | i18n"
     ></button>
-  </div>
+  </header>
 
   <div class="tw-relative tw-flex tw-flex-col tw-overflow-hidden">
     <div
@@ -39,9 +43,9 @@
     </div>
   </div>
 
-  <div
+  <footer
     class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-4"
   >
     <ng-content select="[bitDialogFooter]"></ng-content>
-  </div>
-</div>
+  </footer>
+</section>

libs/components/src/dialog/dialog/dialog.component.ts

@@ -14,6 +14,16 @@ export class DialogComponent {
    */
   @Input() dialogSize: "small" | "default" | "large" = "default";
 
+  /**
+   * Title to show in the dialog's header
+   */
+  @Input() title: string;
+
+  /**
+   * Subtitle to show in the dialog's header
+   */
+  @Input() subtitle: string;
+
   private _disablePadding = false;
   /**
    * Disable the built-in padding on the dialog, for use with tabbed dialogs.

libs/components/src/dialog/dialog/dialog.stories.ts

@@ -1,3 +1,4 @@
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -7,8 +8,7 @@ import { IconButtonModule } from "../../icon-button";
 import { SharedModule } from "../../shared";
 import { TabsModule } from "../../tabs";
 import { I18nMockService } from "../../utils/i18n-mock.service";
-import { DialogCloseDirective } from "../directives/dialog-close.directive";
-import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
+import { DialogModule } from "../dialog.module";
 
 import { DialogComponent } from "./dialog.component";
 
@@ -17,8 +17,14 @@ export default {
   component: DialogComponent,
   decorators: [
     moduleMetadata({
-      imports: [ButtonModule, SharedModule, IconButtonModule, TabsModule],
-      declarations: [DialogTitleContainerDirective, DialogCloseDirective],
+      imports: [
+        DialogModule,
+        ButtonModule,
+        SharedModule,
+        IconButtonModule,
+        TabsModule,
+        NoopAnimationsModule,
+      ],
       providers: [
         {
           provide: I18nService,
@@ -56,8 +62,7 @@ export const Default: Story = {
   render: (args: DialogComponent) => ({
     props: args,
     template: `
-      <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
-        <span bitDialogTitle>{{title}}</span>
+      <bit-dialog [dialogSize]="dialogSize" [title]="title" [subtitle]="subtitle" [loading]="loading" [disablePadding]="disablePadding">
         <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
         <ng-container bitDialogFooter>
           <button bitButton buttonType="primary" [disabled]="loading">Save</button>
@@ -77,6 +82,7 @@ export const Default: Story = {
   args: {
     dialogSize: "default",
     title: "Default",
+    subtitle: "Subtitle",
   },
 };
 
@@ -117,8 +123,7 @@ export const ScrollingContent: Story = {
   render: (args: DialogComponent) => ({
     props: args,
     template: `
-      <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
-        <span bitDialogTitle>Scrolling Example</span>
+      <bit-dialog title="Scrolling Example" [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
         <span bitDialogContent>
           Dialog body text goes here.<br>
           <ng-container *ngFor="let _ of [].constructor(100)">
@@ -142,8 +147,7 @@ export const TabContent: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
-        <span bitDialogTitle>Tab Content Example</span>
+      <bit-dialog title="Tab Content Example" [dialogSize]="dialogSize" [disablePadding]="disablePadding">
         <span bitDialogContent>
           <bit-tab-group>
               <bit-tab label="First Tab">First Tab Content</bit-tab>