feat(go-dialog): allow custom heading tag

getgoui · Nov 25, 2023 · a41c09a · a41c09a
1 parent c381a40
commit a41c09a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -448,6 +448,10 @@ export namespace Components {
           * Heading of the overlay content
          */
         "heading"?: string;
+        /**
+          * HTML tag for the heading
+         */
+        "headingTag"?: string;
         "open": () => Promise<void>;
         /**
           * If persistent, the overlay will not be closed when the user clicks outside of it or presses the escape key.
@@ -2087,6 +2091,10 @@ declare namespace LocalJSX {
           * Heading of the overlay content
          */
         "heading"?: string;
+        /**
+          * HTML tag for the heading
+         */
+        "headingTag"?: string;
         /**
           * If persistent, the overlay will not be closed when the user clicks outside of it or presses the escape key.
          */

diff --git a/packages/core/src/components/go-dialog/go-dialog.scss b/packages/core/src/components/go-dialog/go-dialog.scss
@@ -28,7 +28,11 @@ go-overlay.go-dialog {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    flex: 1;
+    .heading{
+      font-size: var(--go-size-3);
+      font-weight: 500;
+      line-height: 1.5;
+    }
     .close-btn {
       flex: 0;
     }

diff --git a/packages/core/src/components/go-dialog/go-dialog.tsx b/packages/core/src/components/go-dialog/go-dialog.tsx
@@ -22,6 +22,11 @@ export class GoDialog {
    */
   @Prop() heading?: string;
 
+  /**
+   * HTML tag for the heading
+   */
+  @Prop() headingTag?: string = 'h2';
+
   // aria-labelledby https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
   headingId: string = uniqueId('overlay-label-');
 
@@ -52,7 +57,7 @@ export class GoDialog {
   }
 
   render() {
-    const { active, heading, persistent, headingId } = this;
+    const { active, heading, persistent, headingId, headingTag: H } = this;
     return (
       <go-overlay
         class="go-dialog"
@@ -66,7 +71,7 @@ export class GoDialog {
         onOverlayClose={() => this.handleOverlayClose()}>
         <div class="overlay-heading" id={headingId}>
           <slot name="heading">
-            <h3>{heading}</h3>
+            <H class="heading">{heading}</H>
           </slot>
           {!persistent ? (
             <go-button