fix/fixed popover z-index

Author: ChristianKienle

src/components/ComboboxBase/ComboboxBase.vue

@@ -1,5 +1,9 @@
 <template>
-  <fd-popover ref="popover" adjustsBodyWidth placement="bottom-start">
+  <fd-popover
+    ref="popover"
+    body-size-mode="equal-trigger"
+    placement="bottom-start"
+  >
     <template #control="{ hide, show, toggle }">
       <div class="fd-combobox-control">
         <fd-input-group :compact="compact">

src/components/Popover/Popover.vue

@@ -2,12 +2,13 @@
   <k-pop
     class="fd-popover"
     ref="kpop"
-    arrowClass="fd-popover__arrow"
-    :portalId="$fdDefaultPortalId"
-    :bodyClass="fdBodyClass"
+    arrow-class="fd-popover__arrow"
+    :defaultBodyZIndex="defaultBodyZIndex"
+    :portal-id="$fdDefaultPortalId"
+    :body-class="fdBodyClass"
     :placement="placement"
     :with-arrow="withArrow"
-    :adjustsBodyWidth="adjustsBodyWidth"
+    :body-size-mode="bodySizeMode"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -32,7 +33,9 @@
 import { Uid } from "./../../mixins";
 import KPop from "@ckienle/k-pop";
 import FdOnClickOutside from "./../$Support/on-click-outside.vue";
+import * as BodySizeMode from "./body-size-mode";
 
+// The popover is a wrapping component that renders a control and can display a popover that is attached to the control.
 export default {
   name: "FdPopover",
   components: { FdOnClickOutside, KPop },
@@ -77,11 +80,42 @@ export default {
     }
   },
   props: {
-    adjustsBodyWidth: { type: Boolean, default: false },
-    ignoredElements: { type: Function, default: () => [] },
-    withArrow: Boolean,
+    // Default z-index that should be used for the popover body.
+    defaultBodyZIndex: {
+      type: Number,
+      // `1000`
+      default: 1000
+    },
+    // Use a custom body size mode. For details please refer to the [K-Pop](https://christiankienle.github.io/k-pop/examples/#body-size-modes) documentation.
+    bodySizeMode: {
+      // Possible Values: `auto` / `equal-trigger` / `at-least-trigger`
+      type: String,
+      validator: BodySizeMode.isValid,
+      // `auto`
+      default: BodySizeMode.defaultMode
+    },
+    adjustsBodyWidth: {
+      type: Boolean,
+      default: false
+    },
+    // Customize elements that can be interacted with, without the popover being dismissed.
+    ignoredElements: {
+      // A function that returns an array of `Element`s that should be ignored:
+      // Signature: `() => Element[]`
+      type: Function,
+      // By default no elements are ignored: `() => []`
+      default: () => []
+    },
+    // Whether or not the popover body has an arrow pointing to the control.
+    withArrow: {
+      type: Boolean,
+      // `false` – no arrow is created by default
+      default: false
+    },
+    // Set the placement of the popover body. This is passed – as is – to Popper.js. This means that all [Popper.js placements](https://popper.js.org/popper-documentation.html#Popper.placements) can be used.
     placement: {
       type: String,
+      // `bottom`
       default: "bottom"
     }
   }

src/components/Popover/body-size-mode.js

@@ -0,0 +1,12 @@
+export const AUTO = "auto";
+export const EQUALS_TRIGGER = "equal-trigger";
+export const AT_LEAST_TRIGGER = "at-least-trigger";
+
+export const all = [
+  AUTO, // default
+  EQUALS_TRIGGER,
+  AT_LEAST_TRIGGER
+];
+
+export const isValid = value => all.indexOf(value) >= 0;
+export const defaultMode = AUTO;

src/components/TimePicker/TimePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fd-time-picker">
-    <fd-popover adjustsBodyWidth placement="bottom-start">
+    <fd-popover body-size-mode="equal-trigger" placement="bottom-start">
       <template #control="{toggle, show, hide}">
         <fd-input-group :compact="compact">
           <template #input>

src/docs/components/CodeView.vue

@@ -95,15 +95,9 @@ pre[class*="language-"] {
   background-color: white;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-}
-
 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: 0.2em;
-  padding-top: 1px;
-  padding-bottom: 1px;
   background-color: white;
   border: 0px solid white;
 }

src/docs/components/ComponentExample.vue

@@ -14,10 +14,9 @@
 
     <div v-if="docs !== ''" class="docs rendered-markdown" v-html="docs" />
     <FdPanel condensed condensedFooter>
-      <div v-if="tip" class="tip">
-        <div class="tip-title">TIP</div>
-        <div class="tip-body" v-html="tip" />
-      </div>
+      <d-tip title="TIP" :content="tip" v-if="tip">
+        {{ tip }}
+      </d-tip>
       <div class="component">
         <div
           v-if="fullscreenOnly"
@@ -33,13 +32,9 @@
             Show Demo
           </FdButton>
         </div>
-        <component
-          v-else
-          :class="
-            condensed ? 'component__condensed' : 'component__default-margin'
-          "
-          :is="component"
-        />
+        <div v-else class="component__default-margin">
+          <component :is="component" />
+        </div>
       </div>
       <div slot="footer" class="footer">
         <div
@@ -130,20 +125,6 @@ export default {
       outline: 0
       &:hover
         color: blue
-  .tip
-    background-color: red
-    border-left: 0.5rem solid #42b983
-    background-color: #f3f5f7
-    padding: 10px
-    border-bottom: 1px solid #ebebeb
-    .tip-title
-      font-weight: 600
-      font-size: 16px
-      line-height: 1.7
-      padding-left: 20px
-    .tip-body
-      font-size: 16px
-      padding: 20px
   .fullscreen-demo-button
     display: inline-block
     float: right
@@ -158,9 +139,8 @@ export default {
   .docs
     font-size: 1.2em
     margin-bottom: 12px
-
 .codeContainer
   background-color: white
   border-top: 1px solid #eeeeef
-  padding: 10px
+  padding: 30px
 </style>

src/docs/components/Tip.vue

@@ -1,27 +1,42 @@
 <template>
-  <div class="tip">
-    <slot />
+  <div class="fdd-tip">
+    <div class="fdd-tip__title">{{ title }}</div>
+    <div class="fdd-tip__body" v-html="content" />
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  props: {
+    title: String,
+    content: String
+  }
+};
 </script>
 
 <style lang="scss">
-.tip {
+.fdd-tip {
+  &__title {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 1.7;
+  }
+  &__body {
+    font-size: 16px;
+  }
   color: darken(desaturate(#f2f7ff, 50%), 60%);
   border-left: 0.3rem solid darken(desaturate(#f2f7ff, 50%), 60%);
   margin-top: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
-  padding: 20px;
+  padding: 30px;
   background-color: #f2f7ff;
   font-size: 16px;
   line-height: 29px;
-  p {
+  code {
     color: darken(desaturate(#f2f7ff, 50%), 60%);
+    font-weight: 700;
     margin-block-end: 0;
     margin-block-start: 0;
   }

src/docs/components/index.js

@@ -14,7 +14,7 @@ export { default as ExpandTransition } from "./ExpandTransition.vue";
 export { default as Tip } from "./Tip.vue";
 
 export const registerComponents = vue => {
-  vue.component("Tip", Tip);
+  vue.component("d-tip", Tip);
   vue.component("component-api-link", ComponentApiLink);
   vue.component("d-markdown", DMarkdown);
   vue.component("ExpandTransition", ExpandTransition);