fix: modal 10-30 updates

packages/core/src/components/cv-modal/cv-modal-notes.md

@@ -29,7 +29,8 @@ When the modal dialog is shown focus is set to the first interactive element fou
 1. To the first element with a 'data-modal-primary-focus' attribute.
 2. To the primary button if shown
 3. To the secondary button if shown
-4. To the close button
+4. To the other button if shown
+5. To the close button
 
 This is done after the modal transitions into its visible state, which is triggered by either changing the visible property to true or mounting with the visible property set to true.
 
@@ -52,11 +53,12 @@ This is done after the modal transitions into its visible state, which is trigge
 - content: optional
 - primary-button: optional, no primary button if not specified
 - secondary-button: optional, no secondary button if not specified
+- other-button: optional, not shown if not specified
 
 ### NOTE: primary and secondary buttons
 
-1. If no primary or secondary button is specified then no footer is shown.
-2. If no listener is created for 'primary-click' or 'secondary-click' the associated event will cause the modal to close
+1. If no primary, secondary or other button is specified then no footer is shown.
+2. If no listener is created for 'primary-click', 'secondary-click' or 'other-btn-click' the associated event will cause the modal to close
 
 ## Methods
 
@@ -67,7 +69,8 @@ This is done after the modal transitions into its visible state, which is trigge
 
 - modal-shown
 - modal-hidden
-- modal-hide-request - emitted when 'auto-hide-off' is set to true. Raw event with the additional attribute 'cv:reason' set to 'primary-click', 'secondary-click', 'escape-press', 'external-click' or 'close-click'
+- modal-hide-request - emitted when 'auto-hide-off' is set to true. Raw event with the additional attribute 'cv:reason' set to 'primary-click', 'secondary-click', 'other-btn-click', 'escape-press', 'external-click' or 'close-click'
 - after-modal-hidden - emitted only after the modal hide transition is finished. It will NOT fire if the modal is hidden when it's not visible
 - primary-click
 - secondary-click
+- other-btn-click

packages/core/src/components/cv-modal/cv-modal.vue

@@ -54,7 +54,13 @@
         <slot name="content"></slot>
       </div>
 
-      <cv-button-set :class="`${carbonPrefix}--modal-footer`" v-if="hasFooter">
+      <cv-button-set
+        :class="[
+          `${carbonPrefix}--modal-footer`,
+          { [`${carbonPrefix}--modal-footer--three-button`]: hasPrimary && hasSecondary && hasOtherBtn },
+        ]"
+        v-if="hasFooter"
+      >
         <cv-button type="button" kind="secondary" @click="onOtherBtnClick" v-if="hasOtherBtn" ref="otherBtn">
           <slot name="other-button">Other button</slot>
         </cv-button>
@@ -142,7 +148,7 @@ export default {
   },
   computed: {
     dialogAttrs() {
-      const passive = !(this.hasPrimary || this.hasSecondary || this.hasOtherBtn);
+      const passive = !this.hasFooter;
       const attrs = { role: 'dialog' };
 
       if (this.alert) {
@@ -182,7 +188,11 @@ export default {
   methods: {
     checkSlots() {
       // NOTE: this.$slots is not reactive so needs to be managed on updated
-      this.hasFooter = !!(this.$slots['primary-button'] || this.$slots['secondary-button']);
+      this.hasFooter = !!(
+        this.$slots['primary-button'] ||
+        this.$slots['secondary-button'] ||
+        this.$slots['other-button']
+      );
       this.hasHeaderLabel = !!this.$slots.label;
       this.hasPrimary = !!this.$slots['primary-button'];
       this.hasSecondary = !!this.$slots['secondary-button'];

storybook/stories/cv-modal-story.js

@@ -103,6 +103,11 @@ const preKnobs = {
     Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
     `,
   },
+  otherButton: {
+    group: 'content',
+    slot: 'other-button',
+    value: 'other',
+  },
   secondaryButton: {
     group: 'content',
     slot: 'secondary-button',
@@ -132,12 +137,19 @@ const preKnobs = {
   @modal-hide-request="actionHideRequest"
   @after-modal-hidden="actionAfterHidden"`,
   },
-  primarySecondaryEvents: {
+  twoButtonFooterEvents: {
     group: 'attr',
     value: `
     @primary-click="actionPrimary"
     @secondary-click="actionSecondary"`,
   },
+  threeButtonFooterEvents: {
+    group: 'attr',
+    value: `
+    @primary-click="actionPrimary"
+    @secondary-click="actionSecondary"
+    @other-btn-click="actionOther"`,
+  },
   autoHideOff: {
     group: 'attr',
     type: boolean,
@@ -179,7 +191,24 @@ const variants = [
       'primaryButtonDisabled',
       'secondaryButton',
       'events',
-      'primarySecondaryEvents',
+      'twoBbuttonFooterEvents',
+      'autoHideOff',
+    ],
+  },
+  {
+    name: 'three buttons with listeners',
+    includes: [
+      'closeAriaLabel',
+      'label',
+      'title',
+      'content',
+      'size',
+      'primaryButton',
+      'primaryButtonDisabled',
+      'secondaryButton',
+      'otherButton',
+      'events',
+      'threeBbuttonFooterEvents',
       'autoHideOff',
     ],
   },