From 816ae3e2c95162fad26ce9b4adc39684f56c0672 Mon Sep 17 00:00:00 2001
From: Rares Herta <rares.herta@endava.com>
Date: Thu, 23 Mar 2023 15:00:50 +0200
Subject: [PATCH] feat: update comments

---
 packages/bee-q/src/components.d.ts             |  5 ++++-
 .../bee-q/src/components/dialog/bq-dialog.tsx  | 18 ++++++++++++------
 packages/bee-q/src/components/dialog/readme.md | 13 +++++++------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/bee-q/src/components.d.ts b/packages/bee-q/src/components.d.ts
index 4695c4c7b..c23a378fb 100644
--- a/packages/bee-q/src/components.d.ts
+++ b/packages/bee-q/src/components.d.ts
@@ -161,9 +161,12 @@ export namespace Components {
         "value": string;
     }
     interface BqDialog {
+        /**
+          * Hides  the dialog
+         */
         "close": () => Promise<void>;
         /**
-          * Method to be called to open the dialog
+          * Shows the dialog
          */
         "open": () => Promise<void>;
         /**
diff --git a/packages/bee-q/src/components/dialog/bq-dialog.tsx b/packages/bee-q/src/components/dialog/bq-dialog.tsx
index 78212dc2a..02b5e9475 100644
--- a/packages/bee-q/src/components/dialog/bq-dialog.tsx
+++ b/packages/bee-q/src/components/dialog/bq-dialog.tsx
@@ -3,6 +3,12 @@ import { h, Component, Prop, Element, Watch, State, Method, Host } from '@stenci
 import { validatePropValue } from '../../shared/utils';
 import { DIALOG_SIZE, DIALOG_FOOTER_VARIANT, TDialogSize, TDialogFooterVariant } from './bq-dialog.types';
 
+/**
+ * @part base - The component wrapper container inside the shadow DOM
+ * @part container - The `<div>` container that holds the dialog content
+ * @part icon-close - The icon that close the dialog on click
+ */
+
 @Component({
   tag: 'bq-dialog',
   styleUrl: './scss/bq-dialog.scss',
@@ -63,12 +69,13 @@ export class BqDialog {
   // Requires JSDocs for public API documentation.
   // ===============================================
 
-  /** Method to be called to open the dialog */
+  /** Shows the dialog */
   @Method()
   async open() {
     this.isOpen = true;
   }
 
+  /** Hides  the dialog */
   @Method()
   async close() {
     this.isOpen = false;
@@ -93,7 +100,7 @@ export class BqDialog {
 
   render() {
     return (
-      <Host class={{ 'is-open': this.isOpen }}>
+      <Host class={{ 'is-open': this.isOpen }} part="base">
         <div
           class="overlay fixed h-full w-full bg-bg-tertiary opacity-75"
           onClick={this.handleOverlayClick}
@@ -104,6 +111,7 @@ export class BqDialog {
             'z-10 m-auto flex flex-col rounded-s bg-bg-primary shadow-m': true,
             [`size--${this.size}`]: true,
           }}
+          part="container"
         >
           <header class="bq-header">
             <div class="bq-placeholder-info">
@@ -112,14 +120,12 @@ export class BqDialog {
               </div>
             </div>
             <div class="flex flex-col pl-4">
-              <h3>
-                <slot name="title" />
-              </h3>
+              <slot name="title" />
               <div class="bq-description">
                 <slot name="content" />
               </div>
             </div>
-            <bq-button class="cursor-auto" appearance="text" size="small" part="button-close">
+            <bq-button class="cursor-auto" appearance="text" size="small">
               <bq-icon
                 class="cursor-pointer"
                 name="x"
diff --git a/packages/bee-q/src/components/dialog/readme.md b/packages/bee-q/src/components/dialog/readme.md
index 7d9ed2e58..b3441c5b3 100644
--- a/packages/bee-q/src/components/dialog/readme.md
+++ b/packages/bee-q/src/components/dialog/readme.md
@@ -17,7 +17,7 @@
 
 ### `close() => Promise<void>`
 
-
+Hides  the dialog
 
 #### Returns
 
@@ -27,7 +27,7 @@ Type: `Promise<void>`
 
 ### `open() => Promise<void>`
 
-Method to be called to open the dialog
+Shows the dialog
 
 #### Returns
 
@@ -38,10 +38,11 @@ Type: `Promise<void>`
 
 ## Shadow Parts
 
-| Part             | Description |
-| ---------------- | ----------- |
-| `"button-close"` |             |
-| `"icon-close"`   |             |
+| Part           | Description                                           |
+| -------------- | ----------------------------------------------------- |
+| `"base"`       | The component wrapper container inside the shadow DOM |
+| `"container"`  | The `<div>` container that holds the dialog content   |
+| `"icon-close"` | The icon that close the dialog on click               |
 
 
 ## Dependencies