feat: components tooltip and popover. absolute positioning (dt 40) (#194)

* DT 40 Absolute positioning for tooltips (#131)

* DT 40 Absolute positioning for popovers & tooltips

* updates

* updates

* update tooltip

* update tooltip

* clean up

* refactoring, clean up

* resolve comments

* resolve comments
refactor first iteration stories

* update comments

* DT 40 Tooltip documentation (#177)

* add documentation for Tippy tooltip

* update reactive "show"

* resolve comments, update eslint config because of an error

* update esplint json

* DT 40 Tooltip tests (#178)

* add documentation for Tippy tooltip

* update reactive "show"

* update tests

* update tests

* resolve comments

* resolve comments

* feat: DT 40 Absolute positioning for popover (#135)

* DT 40 Absolute positioning for popovers & tooltips

* updates

* updates

* update tooltip

* update tooltip

* clean up

* refactoring, clean up

* resolve comments

* popover implementation, decomposition tippy, clean up

* add animation, clean up

* clean up popover

* clean tooltip folder

* add import

* clean up, updates

* DT-40 popover component, refactoring after tooltip implementation

* resolve comments

* clean up

* resolve comments

* fix eslint

* leftover after merge

* leftover after merge

* Added test for tooltip tippy;
Update components DtLazyShow, popover, tooltip;

* chore: update package-lock.json

* refactor: after merge

* story doc

* update story doc

* add flip for popover

* add implementation "modal"

* remove v-click-outside

* update documentation

* update stories

* prevent closing popup when a user blur and focus repeatedly during transition

* clean up

* update storybook folder for tooltip.

* added comment for after-leave event

* docs: update

* resolve comments

* fix typo

* update overlay, tests

* resolve comments

* add comment

* popover uv alignments

* clean up, update data

* clean up, remove prev version tooltip.

* update docs

* update z-index for tooltip

* update border-box for content

* add width content prop (anchor), update focus logic,

* clean up, rename contentWidth

* set empty string to content width by default

* package lock

* restore tooltip test

* clean up tooltip test
add new constant to popover
update default story

* add flushPromises to utils

* add $nextTick before setPopoverContentAnchorWidth

* update tooltip story

Co-authored-by: Brad Paugh <[email protected]>

Author: nikitadialpad

.eslintrc.js

@@ -49,6 +49,7 @@ module.exports = {
       disallowVueBuiltInComponents: true,
       disallowVue3BuiltInComponents: true,
     }],
+    'vue/no-v-model-argument': ['warn'],
     'vue/padding-line-between-blocks': ['warn'],
     'vue/require-direct-export': ['warn'],
     'vue/require-name-property': ['error'],
@@ -61,8 +62,9 @@ module.exports = {
     'vue/v-on-event-hyphenation': ['error'],
     'vue/no-template-target-blank': ['error'],
     'vue/no-static-inline-styles': ['error'],
+    'vuejs-accessibility/iframe-has-title': 'warn',
 
-    'max-lines': ['error', { max: 300, skipBlankLines: true, skipComments: true }],
+    'max-lines': ['warn', { max: 300, skipBlankLines: true, skipComments: true }],
     quotes: ['error', 'single', { allowTemplateLiterals: true }],
     complexity: ['warn', 5],
 

.esplint.rec.json

@@ -1,6 +1,6 @@
 {
   "recordVersion": 1,
-  "configHash": "bc9f0e28a9c7a5e937370e9f2f5ea2a8a86295b3",
+  "configHash": "8dbf85332497122d8a139286ca9dcf3ccd3d9d58",
   "files": {
     "components/banner/banner.vue": {
       "vue/no-deprecated-dollar-listeners-api": 3
@@ -26,14 +26,19 @@
     "components/notice/notice_action.vue": {
       "vue/no-deprecated-destroyed-lifecycle": 1
     },
-    "components/popover/popover_default.story.vue": {
-      "vue/no-deprecated-v-bind-sync": 1
+    "components/popover/popover.vue": {
+      "vue/no-deprecated-destroyed-lifecycle": 1,
+      "max-lines": 1,
+      "complexity": 1
     },
     "components/radio/radio.vue": {
       "vue/no-deprecated-dollar-listeners-api": 1
     },
     "components/toast/toast.vue": {
       "vue/no-deprecated-dollar-listeners-api": 3
+    },
+    "components/tooltip/tooltip.vue": {
+      "vue/no-deprecated-destroyed-lifecycle": 1
     }
   }
 }

.esplintrc.js

@@ -8,5 +8,7 @@ module.exports = {
     'vue/no-deprecated-destroyed-lifecycle',
     'vue/no-deprecated-v-bind-sync',
     'complexity',
+    'vuejs-accessibility/iframe-has-title',
+    'max-lines'
   ],
 };

components/breadcrumbs/breadcrumbs_default.story.vue

@@ -12,8 +12,9 @@
       :inverted="inverted"
     >
       <html-fragment
+        v-if="defaultSlot"
         :html="defaultSlot"
-        v-if="defaultSlot"></html-fragment>
+      />
     </dt-breadcrumbs>
   </div>
 </template>

components/lazy_show/lazy_show.vue

@@ -1,6 +1,8 @@
 <template>
+  <!-- applies the transition on initial render -->
   <transition
     :name="transition"
+    :appear="appear"
     v-on="$listeners"
   >
     <div
@@ -32,6 +34,11 @@ export default {
       type: String,
       default: null,
     },
+
+    appear: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   /******************

components/modal/modal.vue

@@ -1,6 +1,6 @@
 <template>
   <dt-lazy-show
-    transition="d-modal"
+    transition="d-zoom"
     :show="show"
     :class="[
       'd-modal',
@@ -255,27 +255,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-@import "../../css/dialtone.less";
-
-.d-modal-enter, .d-modal-leave-to {
-  .d-modal--animate();
-}
-
-.d-modal__dialog-enter, .d-modal__dialog-leave-to {
-  .d-modal__dialog--animate();
-}
-
-.d-modal-enter-active, .d-modal__dialog-enter-active {
-  .d-modal--animate-in();
-}
-
-.d-modal-leave-active {
-  .d-modal--animate-out();
-}
-
-.d-modal__dialog-leave-active {
-  .d-modal__dialog--animate-out();
-}
-</style>

components/modal/modal_default.story.vue

@@ -76,7 +76,7 @@ export default {
 
   data () {
     return {
-      isOpen: false,
+      isOpen: this.show,
     };
   },
 
@@ -89,6 +89,14 @@ export default {
     },
   },
 
+  watch: {
+    show: {
+      handler () {
+        this.isOpen = this.show;
+      },
+    },
+  },
+
   methods: {
     close (event) {
       this.isOpen = !this.isOpen;

components/popover/index.js

@@ -4,4 +4,5 @@ export {
   POPOVER_HORIZONTAL_ALIGNMENT,
   POPOVER_VERTICAL_ALIGNMENT,
   POPOVER_ROLES,
+  POPOVER_CONTENT_WIDTHS,
 } from './popover_constants';

components/popover/popover.mdx

@@ -8,8 +8,9 @@ import { Canvas, Story, Subtitle, ArgsTable, PRIMARY_STORY } from '@storybook/ad
 
 ## Basic Usage
 
-Popovers may be used standalone, or to create a dropdown menu or other complex control. Popovers are not modal elements,
-for a modal dialog that takes over the whole screen, use a DtModal component.
+Popovers may be used standalone, or to create a dropdown menu or other complex control.
+If you want use popover as a component which takes over the whole screen, there's a prop modal for that, or you can use
+DtModal. Keep in mind accessibility for popover and modal components are different.
 
 A popover has 2 major pieces that are provided as required named slots: the **anchor** and the **content**.
 
@@ -18,9 +19,9 @@ content. Normally a button, the anchor can be any *interactive* element that cou
 content. For example, the anchor could be an input element with a conditionally displayed listbox content element to
 implement an auto-suggest form component.
 
-The **content** slot will be rendered lazily when the popover is open. The popover content will automatically be closed
-when clicking outside the content (using the click-outside directive) so it is important to use `.sync` on the `show`
-prop (or `v-model:open` in Vue 3) so it can be updated if the popover closes itself.
+The **content** slot will be rendered lazily when the popover is open. By default, the popover content will
+automatically be closed when clicking outside the content or on escape key press, so it is important to use `.sync` on
+the `open` prop (or `v-model:open` in Vue 3) so it can be updated if the popover closes itself.
 
 ### Import
 
@@ -33,6 +34,25 @@ import { DtPopover } from '@dialpad/dialtone-vue';
 ```jsx
 <dt-popover
   :open.sync="open"
+>
+  <template #anchor="{ attrs }">
+    <dt-button
+      v-bind="attrs"
+    >
+      Click to open
+    </dt-button>
+  </template>
+  <template #content>
+    <p>I will be displayed in the popover!</p>
+  </template>
+</dt-popover>
+```
+
+or
+
+```jsx
+<dt-popover
+  :open="open"
 >
   <template #anchor="{ attrs }">
     <dt-button
@@ -54,8 +74,16 @@ import { DtPopover } from '@dialpad/dialtone-vue';
 
 ## Accessibility
 
-There are a few important considerations to ensure popover controls are accessible. By default, the popover content will
-have a generic role of "dialog".
+Popover, in their current implementation, are accessible when used as interactive components.
+Content will be read to screen reader users, and the popover markup by default get appended to the `parent`
+(also it could be placed to the end of `<body>` or other DOM element)
+
+There are a few important considerations to ensure popover controls are accessible.
+The popover, by default:
+
+- the popover content will have a generic role of "dialog".
+- focus will be transferred into the popover to the first content focusable element, and after close, triggering
+element will be focused (like in the modal component)
 
 ### Anchor
 
@@ -78,11 +106,9 @@ By default, the dialog content will be labeled by the entire anchor element. To
 1. Pass `aria-label`, which is the text label that will be applied to the dialog content.
 2. Pass `aria-labelledby`, which is an ID of the element that should be used as the descriptive label.
 
-### Focus & Keyboard
+### Keyboard
 
-Due to the different contexts in which a popover can be used, focus management and keyboard shortcuts like `ESC` are not
-provided for you. You are encouraged to consult the ARIA documentation for the particular role you are implementing to
-see how keyboard focus & shortcuts should be implemented.
+The popover closes on `ESC` key press.
 
 ## Variants
 
@@ -91,11 +117,14 @@ see how keyboard focus & shortcuts should be implemented.
 The popover content supports both fixed and dynamic horizontal and vertical alignment around the anchor element. If
 `fixedAlignment`/`fixedVerticalAlignment` are passed, the popover will always be positioned in that direction. If you
 omit either of them, the popover will dynamically adjust the corresponding position, trying not to clip the content
-relative to the `$root` element (**not** the viewport!). This calculation happens each time the popover is opened
-(not when the screen is resized).
+relative to the `$root` element. This calculation happens each time the popover is opened or window is resized.
+
+### Flip
 
-For example: with no `fixedAlignment`, a popover anchor positioned such that the content, when open, would overflow the
-`$root` element's right bounds will open to the left.
+The popover uses [headless-tippy](https://atomiks.github.io/tippyjs/v6/headless-tippy/) and
+[popper](https://popper.js.org/docs/v2/modifiers/flip/), which has flip modifier (which can change the placement of a
+popper when it's scheduled to overflow a given boundary). By default, boundary is `clippingParents`
+(corresponding popover prop is `flipBoundary`).
 
 <Canvas>
   <Story id="components-popovers--fixed-right" />

components/popover/popover.stories.js

@@ -4,11 +4,13 @@ import {
   POPOVER_HORIZONTAL_ALIGNMENT,
   POPOVER_VERTICAL_ALIGNMENT,
   POPOVER_ROLES,
+  POPOVER_CONTENT_WIDTHS,
 } from './';
 import PopoverDefault from './popover_default.story.vue';
 import { createTemplateFromVueFile } from '../storybook_utils';
 import PopoverMdx from './popover.mdx';
 import { action } from '@storybook/addon-actions';
+import { TOOLTIP_HIDE_ON_CLICK_VARIANTS } from '../tooltip';
 
 const argTypesData = {
   // Slots
@@ -39,7 +41,7 @@ const argTypesData = {
   padding: {
     control: {
       type: 'select',
-      options: POPOVER_PADDING_CLASSES,
+      options: Object.keys(POPOVER_PADDING_CLASSES),
     },
   },
   role: {
@@ -60,6 +62,12 @@ const argTypesData = {
       options: POPOVER_VERTICAL_ALIGNMENT,
     },
   },
+  contentWidth: {
+    control: {
+      type: 'select',
+      options: POPOVER_CONTENT_WIDTHS,
+    },
+  },
 
   // Events
   onClose: {
@@ -70,13 +78,18 @@ const argTypesData = {
 
   'update:open': {
     description: `The popover will emit a "false" boolean value for this event when the \
-user performs a popover-closing action.`,
+user performs a popover-closing action. Parent components can sync on this value to create \
+a 2-way binding to control popover visibility.`,
     table: {
       type: {
         summary: 'boolean',
       },
     },
   },
+  hideOnClick: {
+    type: 'select',
+    options: TOOLTIP_HIDE_ON_CLICK_VARIANTS,
+  },
 };
 
 // Default Props for all variations
@@ -161,3 +174,18 @@ NoPadding.parameters = {
     },
   },
 };
+
+export const overlayModal = Template.bind({});
+overlayModal.args = { ...Default.args, open: true, modal: true };
+overlayModal.parameters = {
+  docs: {
+    source: {
+      code: `
+<dt-popover padding="none">
+  <template #anchor="{ attrs }"></template>
+  <template #content></template>
+</dt-popover>
+    `,
+    },
+  },
+};