fix(go-dialog): preserve attributes

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

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/packages/core/src/components/go-dialog/go-dialog.tsx b/packages/core/src/components/go-dialog/go-dialog.tsx
@@ -1,6 +1,5 @@
 import { Component, h, Element, Prop, Method, Watch } from '@stencil/core';
 import { uniqueId } from 'lodash-es';
-import { inheritAttributes } from '../../utils/helper';
 
 @Component({
   tag: 'go-dialog',
@@ -28,12 +27,6 @@ export class GoDialog {
 
   overlayEl: HTMLElement;
 
-  // Store attributes inherited from the host element
-  private inheritedAttrs = {};
-  componentWillLoad() {
-    this.inheritedAttrs = inheritAttributes(this.el, ['class', 'style']);
-  }
-
   @Method()
   async close() {
     this.active = false;
@@ -59,7 +52,7 @@ export class GoDialog {
   }
 
   render() {
-    const { active, heading, persistent, headingId, inheritedAttrs } = this;
+    const { active, heading, persistent, headingId } = this;
     return (
       <go-overlay
         class="go-dialog"
@@ -70,15 +63,22 @@ export class GoDialog {
         active={active}
         aria-hidden={active ? 'false' : 'true'}
         ref={(el) => (this.overlayEl = el)}
-        onOverlayClose={() => this.handleOverlayClose()}
-        {...inheritedAttrs}>
+        onOverlayClose={() => this.handleOverlayClose()}>
         <div class="overlay-heading" id={headingId}>
           <slot name="heading">
             <h3>{heading}</h3>
           </slot>
           {!persistent ? (
-            <go-button class="close-btn" flat stack color="tertiary" compact onClick={() => this.close()}>
+            <go-button
+              class="close-btn"
+              flat
+              icon
+              stack
+              variant="text"
+              onClick={() => this.close()}
+              aria-label="Close dialog">
               <svg
+                aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 stroke="currentColor"
@@ -88,7 +88,6 @@ export class GoDialog {
                 viewBox="0 0 24 24">
                 <path d="M18 6 6 18M6 6l12 12" />
               </svg>
-              <span>Close</span>
             </go-button>
           ) : null}
         </div>

diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -1,6 +1,6 @@
 <!-- Used in Docusaurus demo component -->
 <!DOCTYPE html>
-<html dir="ltr" lang="en">
+<html dir="ltr" lang="en" data-theme="light">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
@@ -21,6 +21,15 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <go-main-nav id="main-nav"></go-main-nav>
     <go-nav-list block id="nav-list"></go-nav-list>
+
+    <go-dialog heading="Dialog content" active>
+      <p>demo</p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem aut laudantium sint perspiciatis fugit,
+        quos voluptatum facilis. Delectus fugiat deserunt cumque adipisci alias voluptates, atque facere beatae
+        aspernatur nihil!
+      </p>
+    </go-dialog>
     <script>
       const mainNav = document.getElementById('main-nav');
       const navList = document.getElementById('nav-list');

diff --git a/packages/vue/index.html b/packages/vue/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/packages/vue/src/demo/App.vue b/packages/vue/src/demo/App.vue
@@ -9,9 +9,14 @@
       </div>
     </div>
   </main>
+
+  <!-- quickSaveDialog -->
+  <GoDialog ref="quickSaveDialog" heading="Quick save" active>
+    <h1>demo</h1>
+  </GoDialog>
 </template>
 
 <script setup lang="ts">
-import { GoToc } from '@';
+import { GoToc, GoDialog } from '@';
 import FormSections from './components/FormSections.vue';
 </script>