feat(modal): add options to disable buttons (#563)

juntossomosmais · Sep 12, 2024 · 90ee9b5 · 90ee9b5
1 parent 99c227b
commit 90ee9b5
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 18 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -160,9 +160,11 @@ export namespace Components {
     }
     interface AtomModal {
         "alertType"?: 'alert' | 'error';
-        "hasDivider"?: boolean;
-        "hasFooter"?: boolean;
-        "headerTitle"?: string;
+        "disablePrimary": boolean;
+        "disableSecondary": boolean;
+        "hasDivider": boolean;
+        "hasFooter": boolean;
+        "headerTitle": string;
         "primaryText"?: string;
         "progress"?: number;
         "secondaryText"?: string;
@@ -696,6 +698,8 @@ declare namespace LocalJSX {
     }
     interface AtomModal {
         "alertType"?: 'alert' | 'error';
+        "disablePrimary"?: boolean;
+        "disableSecondary"?: boolean;
         "hasDivider"?: boolean;
         "hasFooter"?: boolean;
         "headerTitle"?: string;

diff --git a/packages/core/src/components/modal/modal.spec.ts b/packages/core/src/components/modal/modal.spec.ts
@@ -12,7 +12,8 @@ describe('atom-modal', () => {
         <atom-modal
           trigger="button"
           primary-text="Primary"
-          secondary-text="Secondary" 
+          secondary-text="Secondary"
+          disable-primary="true"
         >
           Modal content
         </atom-modal>`,
@@ -21,22 +22,22 @@ describe('atom-modal', () => {
 
   it('should render modal with default values', async () => {
     expect(page.root).toEqualHtml(`
-      <atom-modal primary-text="Primary" secondary-text="Secondary" trigger="button">
+      <atom-modal primary-text="Primary" secondary-text="Secondary" trigger="button" disable-primary="true">
         <ion-modal aria-describedby="atom-modal__content" aria-labelledby="atom-modal__header-title" class="atom-modal" trigger="button">
-          <header class="atom-modal__header">
+          <header class="atom-modal__header" part="header">
             <div id="atom-modal__header-title"></div>
             <atom-button aria-label="close" class="atom-modal__close" fill="clear" shape="circle">
               <atom-icon aria-hidden="true" class="atom-modal__close-icon" icon="close"></atom-icon>
             </atom-button>
           </header>
-          <div class="atom-modal__content" id="atom-modal__content">
+          <div class="atom-modal__content" id="atom-modal__content" part="content">
             Modal content
           </div>
-          <footer class="atom-modal__footer">
+          <footer class="atom-modal__footer" part="footer">
             <atom-button class="atom-modal__btn-action atom-modal__btn-action--secondary" color="secondary" fill="outline">
               Secondary
             </atom-button>
-            <atom-button class="atom-modal__btn-action atom-modal__btn-action--primary" color="primary">
+            <atom-button class="atom-modal__btn-action atom-modal__btn-action--primary" color="primary" disabled="">
               Primary
             </atom-button>
           </footer>
@@ -116,6 +117,7 @@ describe('atom-modal', () => {
 
     page.rootInstance.modal = {
       dismiss: jest.fn(),
+      close: jest.fn(),
     }
     page.root?.addEventListener('atomCloseClick', spyClose)
     page.root?.addEventListener('atomPrimaryClick', spyPrimary)

diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
@@ -9,6 +9,8 @@ type AlertType = Record<'alert' | 'error', { icon: IconProps; color: string }>
  */
 const BACKDROP_NO_SCROLL = 'backdrop-no-scroll'
 
+type HTMLAtomModalElement = HTMLIonModalElement & { close: () => Promise<void> }
+
 @Component({
   tag: 'atom-modal',
   styleUrl: 'modal.scss',
@@ -17,21 +19,23 @@ const BACKDROP_NO_SCROLL = 'backdrop-no-scroll'
 })
 export class AtomModal {
   @Prop() trigger?: string
-  @Prop() headerTitle?: string = ''
+  @Prop() headerTitle = ''
   @Prop() primaryText?: string
   @Prop() secondaryText?: string
-  @Prop() hasDivider?: boolean = false
+  @Prop() hasDivider = false
   @Prop() alertType?: 'alert' | 'error'
   @Prop() progress?: number
-  @Prop() hasFooter?: boolean = true
+  @Prop() hasFooter = true
+  @Prop() disablePrimary = false
+  @Prop() disableSecondary = false
 
   @Event() atomCloseClick: EventEmitter
   @Event() atomDidDismiss: EventEmitter
   @Event() atomDidPresent: EventEmitter
   @Event() atomPrimaryClick: EventEmitter
   @Event() atomSecondaryClick: EventEmitter
 
-  private modal: HTMLIonModalElement
+  private modal: HTMLAtomModalElement
 
   private alertMap: AlertType = {
     alert: {
@@ -46,6 +50,12 @@ export class AtomModal {
 
   componentDidLoad() {
     document.body.classList.remove(BACKDROP_NO_SCROLL)
+
+    this.modal.close = async () => {
+      await this.modal.dismiss()
+
+      document.body.classList.remove(BACKDROP_NO_SCROLL)
+    }
   }
 
   private handleDidDimiss = () => {
@@ -58,8 +68,7 @@ export class AtomModal {
 
   private handleCloseClick = async () => {
     this.atomCloseClick.emit(this.modal)
-    await this.modal.dismiss()
-    document.body.classList.remove(BACKDROP_NO_SCROLL)
+    this.modal.close()
   }
 
   private handleSecondaryClick = () => {
@@ -78,7 +87,7 @@ export class AtomModal {
         <ion-modal
           aria-labelledby='atom-modal__header-title'
           aria-describedby='atom-modal__content'
-          ref={(el) => (this.modal = el as HTMLIonModalElement)}
+          ref={(el) => (this.modal = el as HTMLAtomModalElement)}
           trigger={this.trigger}
           class={{
             'atom-modal': true,
@@ -87,7 +96,7 @@ export class AtomModal {
           onIonModalDidDismiss={this.handleDidDimiss}
           onDidPresent={this.handleDidPresent}
         >
-          <header class='atom-modal__header'>
+          <header part='header' class='atom-modal__header'>
             {iconType && (
               <atom-icon
                 aria-hidden='true'
@@ -121,6 +130,7 @@ export class AtomModal {
           )}
           <div
             id='atom-modal__content'
+            part='content'
             class={{
               'atom-modal__content': true,
               'atom-modal__content--divided': this.hasDivider,
@@ -129,9 +139,10 @@ export class AtomModal {
             <slot />
           </div>
           {this.hasFooter && (
-            <footer class='atom-modal__footer'>
+            <footer part='footer' class='atom-modal__footer'>
               <atom-button
                 color='secondary'
+                disabled={this.disableSecondary}
                 fill='outline'
                 class='atom-modal__btn-action atom-modal__btn-action--secondary'
                 onClick={this.handleSecondaryClick}
@@ -140,6 +151,7 @@ export class AtomModal {
               </atom-button>
               <atom-button
                 color='primary'
+                disabled={this.disablePrimary}
                 class='atom-modal__btn-action atom-modal__btn-action--primary'
                 onClick={this.handlePrimaryClick}
               >

diff --git a/packages/core/src/components/modal/stories/modal.args.ts b/packages/core/src/components/modal/stories/modal.args.ts
@@ -80,6 +80,22 @@ export const ModalStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    disableSecondary: {
+      control: 'boolean',
+      description:
+        'If true, the secondary button will be disabled. Default is false',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    disablePrimary: {
+      control: 'boolean',
+      description:
+        'If true, the primary button will be disabled. Default is false',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     atomCloseClick: {
       action: 'atomCloseClick',
       description:
@@ -143,4 +159,6 @@ export const ModalComponentArgs = {
   primaryText: 'Primary',
   secondaryText: 'Secondary',
   hasDivider: false,
+  disableSecondary: false,
+  disablePrimary: false,
 }
diff --git a/packages/core/src/components/modal/stories/modal.core.stories.tsx b/packages/core/src/components/modal/stories/modal.core.stories.tsx
@@ -21,6 +21,8 @@ const createModal = (args) => {
         progress="${args.progress}"
         has-footer="${args.hasFooter}"
         header-title="${args.headerTitle}"
+        disable-secondary="${args.disableSecondary}"
+        disable-primary="${args.disablePrimary}"
       >
         <div slot="header">Custom Header</div>
         <p>Modal Content</p>

diff --git a/packages/core/src/components/modal/stories/modal.react.stories.tsx b/packages/core/src/components/modal/stories/modal.react.stories.tsx
@@ -20,6 +20,8 @@ const createModal = (args) => (
       secondaryText={args.secondaryText}
       trigger='open-modal'
       progress={args.progress}
+      disablePrimary={args.disablePrimary}
+      disableSecondary={args.disableSecondary}
     >
       <div slot='header'>Custom Header</div>
       <p>Modal Content</p>

diff --git a/packages/core/src/components/modal/stories/modal.vue.stories.tsx b/packages/core/src/components/modal/stories/modal.vue.stories.tsx
@@ -23,6 +23,8 @@ const createModal = (args, themeColor = 'light') => ({
         secondary-text="${args.secondaryText}"
         trigger="open-modal"
         progress="${args.progress}"
+        disable-primary="${args.disablePrimary}"
+        disable-secondary="${args.disableSecondary}"
       >
         {{ args.label }}
       </AtomModal>