refactor(components): dlt-3282 renamed show prop to open

Author: iropolo

packages/dialtone-vue/components/modal/modal.stories.js

@@ -18,7 +18,7 @@ maximus ipsum ex. Curabitur elementum luctus augue, quis eleifend tortor feugiat
 Maecenas maximus, ipsum et laoreet congue, diam massa aliquam libero, at pellentesque \
 orci ipsum et velit.`,
   title: 'Example Title',
-  onClose: action('update:show'),
+  onClose: action('update:open'),
 };
 
 export const argTypesData = {
@@ -103,7 +103,7 @@ export const argTypesData = {
       type: 'boolean',
     },
   },
-  show: {
+  open: {
     control: {
       type: 'boolean',
     },
@@ -116,7 +116,7 @@ export const argTypesData = {
   },
 
   // Events
-  'update:show': {
+  'update:open': {
     description: `The modal will emit a "false" boolean value for this event when the \
 user performs a modal-closing action.  Parent components can sync on this value to create \
 a 2-way binding to control modal visibility.`,
@@ -151,7 +151,7 @@ export const Default = {
   parameters: {
     percy: {
       args: {
-        show: true,
+        open: true,
       },
     },
   },

packages/dialtone-vue/components/modal/modal.test.js

@@ -1,7 +1,7 @@
 import { DtModal, MODAL_BANNER_KINDS } from '@/components/modal';
 import { mount } from '@vue/test-utils';
 
-const SYNC_EVENT_NAME = 'update:show';
+const SYNC_EVENT_NAME = 'update:open';
 
 const MOCK_MODAL_COPY = 'test modal copy';
 const MOCK_MODAL_TITLE = 'test modal title';
@@ -14,7 +14,7 @@ const baseProps = {
   title: MOCK_MODAL_TITLE,
   copy: MOCK_MODAL_COPY,
   bannerTitle: MOCK_MODAL_BANNER,
-  show: true,
+  open: true,
 };
 
 const baseSlots = {};
@@ -222,7 +222,7 @@ describe('DtModal Tests', () => {
       const bannerTitle = 'title';
 
       await wrapper.setProps({
-        show: true,
+        open: true,
         bannerTitle,
         bannerClass,
       });
@@ -234,7 +234,7 @@ describe('DtModal Tests', () => {
 
     it('Should apply banner kind', async () => {
       await wrapper.setProps({
-        show: true,
+        open: true,
         bannerKind: 'info',
         bannerTitle: 'title',
       });

packages/dialtone-vue/components/modal/modal.vue

@@ -21,7 +21,7 @@
       @keydown="onKeydown"
     >
       <div
-        v-if="show && (hasSlotContent($slots.banner) || bannerTitle)"
+        v-if="open && (hasSlotContent($slots.banner) || bannerTitle)"
         data-qa="dt-modal-banner"
         :class="[
           'd-modal__banner',
@@ -35,13 +35,13 @@
         </slot>
       </div>
       <transition
-        :appear="show"
+        :appear="open"
         name="d-modal__dialog"
         @after-enter="onAfterEnter"
         @after-leave="onAfterLeave"
       >
         <div
-          v-show="show"
+          v-show="open"
           :class="[
             'd-modal__dialog',
             { 'd-modal__dialog--scrollable': fixedHeaderFooter },
@@ -195,7 +195,7 @@ export default {
      * Parent component can sync on this value to control the modal's visibility.
      * @values true, false
      */
-    show: {
+    open: {
       type: Boolean,
       default: false,
     },
@@ -362,10 +362,10 @@ export default {
      * The modal will emit a "false" boolean value for this event when the user performs a modal-closing action.
      * Parent components can sync on this value to create a 2-way binding to control modal visibility.
      *
-     * @event update:show
+     * @event update:open
      * @type {Boolean}
      */
-    'update:show',
+    'update:open',
   ],
 
   data () {
@@ -393,13 +393,13 @@ export default {
   },
 
   watch: {
-    show (isShowing) {
+    open (isShowing) {
       this.syncDialogState(isShowing);
     },
   },
 
   mounted () {
-    if (this.show) {
+    if (this.open) {
       this.syncDialogState(true);
     }
   },
@@ -436,7 +436,7 @@ export default {
     },
 
     close () {
-      this.$emit('update:show', false);
+      this.$emit('update:open', false);
     },
 
     onBackdropClick (event) {
@@ -451,7 +451,7 @@ export default {
     },
 
     async onAfterEnter () {
-      this.$emit('update:show', true);
+      this.$emit('update:open', true);
       await this.setFocusAfterTransition();
     },
 

packages/dialtone-vue/components/modal/modal_default.story.vue

@@ -3,7 +3,7 @@
     <dt-modal
       :title="$attrs.title"
       :banner-title="$attrs.bannerTitle"
-      :show="isOpen"
+      :open="isOpen"
       :kind="$attrs.kind"
       :size="$attrs.size"
       :copy="$attrs.copy"
@@ -18,7 +18,7 @@
       :close-on-click="$attrs.closeOnClick"
       :append-to="$attrs.appendTo"
       :content-mode="$attrs.contentMode"
-      @update:show="close"
+      @update:open="close"
     >
       <template
         v-if="$attrs.banner"
@@ -92,7 +92,7 @@ export default {
 
   data () {
     return {
-      isOpen: this.$attrs.show,
+      isOpen: this.$attrs.open,
     };
   },
 
@@ -103,9 +103,9 @@ export default {
   },
 
   watch: {
-    show: {
+    open: {
       handler () {
-        this.isOpen = this.$attrs.show;
+        this.isOpen = this.$attrs.open;
       },
     },
   },

packages/dialtone-vue/components/popover/popover_variants.story.vue

@@ -377,7 +377,7 @@
           <p>
             {{ sampleText }}
           </p>
-          <dt-tooltip :show="$attrs.open">
+          <dt-tooltip :open="$attrs.open">
             <template #anchor>
               <dt-button>
                 Hover me

packages/dialtone-vue/components/toast/toast.stories.js

@@ -79,7 +79,7 @@ export const argTypesData = {
       type: 'select',
     },
   },
-  show: {
+  open: {
     table: {
       defaultValue: {
         summary: 'false',
@@ -156,7 +156,7 @@ export const Default = {
   parameters: {
     percy: {
       args: {
-        show: true,
+        open: true,
       },
     },
   },

packages/dialtone-vue/components/toast/toast.test.js

@@ -5,7 +5,7 @@ import DtNoticeAction from '../notice/notice_action.vue';
 import DtNoticeContent from '../notice/notice_content.vue';
 import DtNoticeIcon from '../notice/notice_icon.vue';
 
-const baseProps = { title: '', show: true };
+const baseProps = { title: '', open: true };
 const baseSlots = {};
 
 let mockProps = {};
@@ -152,7 +152,7 @@ describe('DtToast Tests', () => {
 
         expect(toast.exists()).toBe(true);
 
-        mockProps = { show: true, duration: 6500 };
+        mockProps = { open: true, duration: 6500 };
 
         updateWrapper();
 
@@ -170,7 +170,7 @@ describe('DtToast Tests', () => {
       it('should close the toast with close method', async () => {
         expect(toast.exists()).toBe(true);
 
-        await wrapper.setProps({ show: false });
+        await wrapper.setProps({ open: false });
 
         toast = wrapper.find('[data-qa="dt-toast"]');
 

packages/dialtone-vue/components/toast/toast.vue

@@ -126,7 +126,7 @@ export default {
      * Supports v-model
      * @values true, false
      */
-    show: {
+    open: {
       type: Boolean,
       default: false,
     },
@@ -193,11 +193,11 @@ export default {
     'close',
 
     /**
-     * Sync show value
+     * Sync open value
      *
-     * @event update:show
+     * @event update:open
      */
-    'update:show',
+    'update:open',
   ],
 
   data () {
@@ -218,10 +218,10 @@ export default {
   },
 
   watch: {
-    show: {
-      handler: function (show) {
-        this.isShown = show;
-        if (show) {
+    open: {
+      handler: function (open) {
+        this.isShown = open;
+        if (open) {
           this.setTimeout();
         } else {
           clearTimeout(this.displayTimer);
@@ -241,15 +241,15 @@ export default {
       if (this.shouldSetTimeout) {
         this.displayTimer = setTimeout(() => {
           this.isShown = false;
-          this.$emit('update:show', false);
+          this.$emit('update:open', false);
         }, this.duration);
       }
     },
 
     handleClose () {
       this.isShown = false;
       this.$emit('close');
-      this.$emit('update:show', false);
+      this.$emit('update:open', false);
     },
   },
 };

packages/dialtone-vue/components/toast/toast_default.story.vue

@@ -7,7 +7,7 @@
     <aside class="d-toast-wrapper">
       <dt-toast
         ref="toast"
-        v-model:show="isShown"
+        v-model:open="isShown"
         :kind="$attrs.kind"
         :title="$attrs.title"
         :message="$attrs.message"
@@ -78,7 +78,7 @@ export default {
 
   data () {
     return {
-      isShown: this.$attrs.show,
+      isShown: this.$attrs.open,
     };
   },
 
@@ -101,8 +101,8 @@ export default {
   },
 
   watch: {
-    show: function (show) {
-      this.isShown = show;
+    open: function (open) {
+      this.isShown = open;
     },
   },
 

packages/dialtone-vue/components/tooltip/tooltip.stories.js

@@ -70,7 +70,7 @@ export const argTypesData = {
   enabled: {
     type: 'boolean',
   },
-  show: {
+  open: {
     options: [null, true, false],
     type: 'select',
   },
@@ -100,7 +100,7 @@ export const argTypesData = {
       disable: true,
     },
   },
-  'update:show': {
+  'update:open': {
     table: {
       disable: true,
     },