feat(modal): storiess and focus management

.storybook/config.js

@@ -1,11 +1,13 @@
 import { configure, addDecorator, addParameters } from '@storybook/vue';
 import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
 import { ThemeProvider } from 'kiwi-core'
 import theme from '../src/lib/theme'
 import icons from '../packages/kiwi-core/src/lib/internal-icons'
 import Kiwi from '../src/lib/plugin'
 import storyBookTheme from './theme'
 
+Vue.use(VueCompositionAPI)
 Vue.use(Kiwi)
 
 addParameters({

packages/kiwi-core/rollup.config.js

@@ -63,16 +63,16 @@ const commons = {
  * Configurations
  */
 export default [
-  // {
-  //   input: 'src/index.js',
-  //   output: [
-  //     {
-  //       file: `dist/esm/index.js`,
-  //       format: 'esm'
-  //     }
-  //   ],
-  //   ...commons
-  // },
+  {
+    input: 'src/index.js',
+    output: [
+      {
+        file: `dist/esm/index.js`,
+        format: 'esm'
+      }
+    ],
+    ...commons
+  },
   {
     input: 'src/index.js',
     output: [
@@ -82,29 +82,29 @@ export default [
       }
     ],
     ...commons
+  },
+  {
+    input: 'src/index.js',
+    output: [
+      {
+        name: 'KiwiUI',
+        file: `dist/umd/index.js`,
+        format: 'umd',
+        exports: 'named'
+      }
+    ],
+    ...commons
+  },
+  {
+    input: 'src/index.js',
+    output: [
+      {
+        name: 'KiwiUI',
+        file: `dist/cjs/index.js`,
+        format: 'cjs',
+        exports: 'named'
+      }
+    ],
+    ...commons
   }
-  // {
-  //   input: 'src/index.js',
-  //   output: [
-  //     {
-  //       name: 'KiwiUI',
-  //       file: `dist/umd/index.js`,
-  //       format: 'umd',
-  //       exports: 'named'
-  //     }
-  //   ],
-  //   ...commons
-  // },
-  // {
-  //   input: 'src/index.js',
-  //   output: [
-  //     {
-  //       name: 'KiwiUI',
-  //       file: `dist/cjs/index.js`,
-  //       format: 'cjs',
-  //       exports: 'named'
-  //     }
-  //   ],
-  //   ...commons
-  // }
 ]

packages/kiwi-core/src/Modal/index.js

@@ -20,33 +20,16 @@ const ModalContext = Symbol('ModalContext')
  * primitive variables are treated.
  * Therefore, as Props, The modal component may expect some refs to DOM nodes as props.
  *
- * THESE VALUES SHOULD BE PASSED IN AS ALREADY UNWRAPPED VARIABLES.
- * This means that the modal will not access the ref value with the `.value` syntax
- * when it is received. All DOM refs passed in to the Modal component need to be instances
- * of `HTMLElement` and not wrapped values.
- *
- * Because of this the modal will focus them as follows:
- * Notice that the ref is not unwrapped before calling `.focus
- * ```js
- * props.initialFocusRef.focus()`
- * ```
- * Instead of:
- * ```js
- * props.initialFocusRef.value.focus()`
- * ```
- * Notice that this ref is still wrapped.
- *
- * This will allow us to handle internally created refs as wrapped values for reactivity
- * and treats incoming refs as pure DOM nodes. A fairly good standard/compromise.
- *
  * Happy to discuss this if need be.
- *
+ * ALL REF VALUES SHOULD BE PASSED IN AS ALREADY UNWRAPPED VARIABLES.
  * For more about this please read Vue 3's new RFC on refs in the template.
  * @see https://vue-composition-api-rfc.netlify.com/api.html#ref
  *
- * TODO:
+ * MODAL TODOS
  * 1) Modal should open and close without v-if directive.
- * 2) Should mount chakra portal when is open is set to true.
+ * 2) Should focus on focusable nodes in modal content by default
+ * 3) Enable body scroll lock conditionals
+ * 4) Entry / Exit Transitions
  */
 
 /**
@@ -205,7 +188,8 @@ const Modal = {
               }
             } else {
               if (contentRef.value) {
-                let focusables = getFocusables(context.el)
+                console.log(context)
+                let focusables = getFocusables(contentRef.value)
                 if (focusables.length === 0) {
                   contentRef.value.focus()
                 }

packages/kiwi-core/src/Modal/modal.props.js

@@ -5,6 +5,7 @@ export default {
   isOpen: Boolean,
   initialFocusRef: [HTMLElement, Object, String],
   finalFocusRef: [HTMLElement, Object, String],
+  contentRef: [HTMLElement, Object, String],
   onClose: {
     type: Function,
     default: () => null

src/App.vue

@@ -2,14 +2,14 @@
   <theme-provider :theme="$kiwi.theme" :icons="$kiwi.icons">
     <div class="root">
       <div class="wrapper">
-        <Button left-icon="check" mb="3" variant-color="blue" @click="showModal" variant="outline">Show Modal</Button>
-        <Button left-icon="star" id="final" ref="final" mb="3" variant-color="orange" @click="showModal">I will receive focus when closed</Button>
+        <Button left-icon="check" mb="3" variant-color="blue" @click="showModal">Show Modal</Button>
+        <Button left-icon="star" id="final" ref="final" mb="3" variant-color="blue" variant="outline">I will receive focus when closed</Button>
         <Modal
           is-centered
           :is-open="isOpen"
           :on-close="modalClosed"
+          :initial-focus-ref="$refs.save"
           :final-focus-ref="$refs.final"
-          :initial-focus-ref="$refs.cancel"
         >
           <ModalContent ref="content" :content-ref="$refs.content">
             <ModalHeader>Create your account</ModalHeader>

stories/17-Modal.stories.js

@@ -0,0 +1,61 @@
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/vue'
+import centered from '@storybook/addon-centered/vue'
+import { Button, Modal, Text as KText, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton } from 'kiwi-core'
+import Lorem from 'vue-lorem-ipsum'
+
+storiesOf('UI | Modal', module)
+  .addDecorator(centered)
+  .add('Base Modal', () => ({
+    components: { Button, Modal, Lorem, KText, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton },
+    template: `
+      <div>
+        <Button left-icon="check" mb="3" variant-color="blue" @click="showModal" variant="outline">Show Modal</Button>
+        <Button left-icon="star" id="final" ref="final" mb="3" variant-color="orange">I will receive focus when closed</Button>
+        <Modal
+          is-centered
+          :is-open="isOpen"
+          :on-close="modalClosed"
+          :initial-focus-ref="$refs.save"
+          :final-focus-ref="$refs.final"
+        >
+          <ModalContent ref="content" :content-ref="$refs.content">
+            <ModalHeader>Create your account</ModalHeader>
+            <ModalCloseButton @click="dismissModal" />
+            <ModalBody>
+              <KText fontWeight="bold" mb="1rem">
+                You can scroll the content behind the modal
+              </KText>
+              <Lorem add="2s" />
+            </ModalBody>
+            <ModalFooter>
+              <Button id="save" ref="save" variantColor="blue" mr="3">
+                Save
+              </Button>
+              <Button id="cancel" ref="cancel" @click="dismissModal">Cancel</Button>
+            </ModalFooter>
+          </ModalContent>
+          <ModalOverlay />
+        </Modal>
+      </div>
+    `,
+    data () {
+      return {
+        isOpen: false
+      }
+    },
+    methods: {
+      action: action('Button Clicked'),
+      modalClosed (params) {
+        action('MODAL: Closed', params)
+      },
+      showModal () {
+        action('Showing modal')
+        this.isOpen = true
+      },
+      dismissModal () {
+        action('Dismissing modal')
+        this.isOpen = false
+      }
+    }
+  }))