feat(kpop): refactor using floating ui [KHCP-11957] (#2204)

* feat(kpop): refactor using floating ui [KHCP-11957] * fix(kpop): refactor using @floating-ui/vue [KHCP-11957] * fix(kpop): trigger and positioning fixes [KHCP-11957] * fix: ts * fix(*): kpop selectors and placements [KHCP-11957] * fix(kpop): auto placement [KHCP-11957] * fix(*): kpop styles and placements [KHCP-11957] * test(kmultiselect, ktooltip): fix component tests [KHCP-11957] * fix(*): update kpop usage [KHCP-11957] * docs(popover): update component docs [KHCP-11957] * docs: update migration doc [KHCP-11957] * fix(kdatetimepicker): update kpop usage [KHCP-11957] * fix(*): address pr feedback [KHCP-11957] * fix(kpop): position absolute placement [KHCP-11957] * fix(kdatetimepicker): fix popover styling [KHCP-11957] * fix(*): misc fixes [KHCP-11957] * fix(kpop): misc fixes [KHCP-11957] * fix(kdropdown): minor styling fix [KHCP-11957] * fix(kpop): auto update logic [KHCP-11957] * docs(popover): default slot note [KHCP-11957] * fix(kpop): add comment [KHCP-11957] * fix(kpop): cleanup auto updates [KHCP-11957] * fix(kpop): popover flip and shift [KHCP-11957] * test(ktooltip): remove invoke css [KHCP-11957] * fix(kpop): popover element width [KHCP-11957] * fix(kpop): fix resize observer loop issue [KHCP-11957] * fix(kpop): floating ui middleware magic [KHCP-11957] * fix(kpop): remove position fixed prop [KHCP-11957] * fix: lint:fix * test(kdropdown): fix component test [KHCP-11957] * fix: apply pr feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * fix(*): remove position fixed prop [KHCP-11957] * fix(kpop): minor fix [KHCP-11957] * fix(kpop): placement backwards compitability [KHCP-11957] * fix(kbadge, kmultiselect): fix truncated item jumpy bug [KHCP-11957] * fix(kpop): popover trigger wrapper display [KHCP-11957] * fix(kdropdown): minor fix [KHCP-11957] * fix: misc fix [KHCP-11957] --------- Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
Kong · Jun 15, 2024 · 222bde0 · 222bde0
1 parent 0134896
commit 222bde0
Show file tree

Hide file tree

Showing 31 changed files with 729 additions and 838 deletions.
diff --git a/docs/components/datetime-picker.md b/docs/components/datetime-picker.md
@@ -122,7 +122,7 @@ Boolean to disable the input component. Defaults to `false`.
 
 ### popoverPlacement
 
-Prop to define the positioning of the popover in relation to the trigger element (see [KPopover placement prop](/components/popover#placement) for details). Default value is `bottomStart`.
+Prop to define the positioning of the popover in relation to the trigger element (see [KPopover placement prop](/components/popover#placement) for details). Default value is `bottom-start`.
 
 ## Examples
 

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
@@ -90,13 +90,13 @@ The width of the dropdown body (defaults to `auto`). Currently we support number
 Use the `kpopAttributes` prop to configure the KPop [props](/components/popover) dropdown.
 
 <ClientOnly>
-  <KDropdown trigger-text="Documentation" :kpop-attributes="{ placement: 'leftStart' }" :items="deepClone(defaultItems)" />
+  <KDropdown trigger-text="Documentation" :kpop-attributes="{ placement: 'left-start' }" :items="deepClone(defaultItems)" />
 </ClientOnly>
 
 ```html
 <KDropdown 
   trigger-text="Documentation"
-  :kpop-attributes="{ placement: 'leftStart' }"
+  :kpop-attributes="{ placement: 'left-start' }"
   :items="items"
 />
 ```

diff --git a/docs/components/multiselect.md b/docs/components/multiselect.md
@@ -301,10 +301,6 @@ Accepted values: `sticky` (default) and `static`.
 <KMultiselect dropdown-footer-text-position="static" dropdown-footer-text="Static dropdown footer text" :items="items" />
 ```
 
-### positionFixed
-
-Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `true`. See [`KPop` docs](popover.html#positionfixed) for more information.
-
 ### loading
 
 You can use the `loading` prop to show a loading indicator in place of the chevron while fetching data from API.

diff --git a/docs/components/popover.md b/docs/components/popover.md
@@ -94,7 +94,8 @@ Placement of the popover.
 Accepted values are:
 <ul>
   <li v-for="placement in PopPlacementsArray" :key="`${placement}-placement`">
-    <code>{{ placement }}</code> {{ placement === 'auto' ? '(default)' : '' }}
+    <code>{{ placement }}</code> 
+    <span v-if="placement === 'auto'">(default)</span>
   </li>
 </ul>
 
@@ -113,7 +114,7 @@ Accepted values are:
 
 ```html
 <KPop
-  placement="bottomEnd"
+  placement="bottom-end"
   button-text="Open popover"
 >
   <template #content>
@@ -263,38 +264,6 @@ Boolean to control whether or not the popover should close when a user clicks wi
 </KPop>
 ```
 
-### positionFixed
-
-A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries. Defaults to `true`.
-
-<div class="position-fixed-container">
-  <KPop button-text="Fixed positioning" positioning="top">
-    <template #content>
-      Popover content.
-    </template>
-  </KPop>
-
-  <KPop :position-fixed="false" positioning="top">
-    <KButton appearance="danger">
-      Non-fixed positioning
-    </KButton>
-    <template #content>
-      Popover content.
-    </template>
-  </KPop>
-</div>
-
-```html
-<KPop
-  :position-fixed="false"
-  button-text="Open popover"
->
-  <template #content>
-    Popover content.
-  </template>
-</KPop>
-```
-
 ### hideCloseIcon
 
 Boolean to hide close button in popover content.
@@ -378,12 +347,6 @@ Maximum width of the popover container. Default value is `auto`.
 </KPop>
 ```
 
-### target
-
-This is the target element selector that the popover is appended to. By default its the KPop wrapper element.
-
-Example: `#my-element-id`
-
 ### tag
 
 KPop wrapper element type. Default value is `div`.
@@ -403,10 +366,6 @@ List of class names you want to assign to `.k-popover` element.
 </KPop>
 ```
 
-### hidePopover
-
-Optional boolean flag to hide the popover. Useful for external events. Default value is `false`.
-
 ### zIndex
 
 Pass a number to use for the `z-index` property. Default value is `1000`.
@@ -439,10 +398,7 @@ Slot for passing custom popover trigger element.
 When providing your custom element as popover trigger, make sure to set appropriate `tabindex` attribute in order to make popover accessible for assistive technology users.
 :::
 
-<KPop
-  width="auto"
-  hide-close-icon
->
+<KPop hide-close-icon>
   <KInput
     label="Password"
     type="password"
@@ -454,10 +410,7 @@ When providing your custom element as popover trigger, make sure to set appropri
 </KPop>
 
 ```html
-<KPop
-  width="auto"
-  hide-close-icon
->
+<KPop hide-close-icon>
   <KInput
     label="Password"
     type="password"
@@ -469,6 +422,54 @@ When providing your custom element as popover trigger, make sure to set appropri
 </KPop>
 ```
 
+:::danger
+KPop logic is built on the presumption that trigger element is going to be in the DOM when the component is mounted. If you need to render the element conditionally, avoid setting `v-if` directive on the trigger element directly and render the entire KPop component conditionally instead.
+
+<span class="inline-title">
+  <CheckIcon :size="KUI_ICON_SIZE_30" :color="KUI_COLOR_TEXT_SUCCESS" /> <b>Correct:</b>
+</span>
+
+```html
+<KPop v-if="!loading">
+  <KButton>Open popover</KButton>
+  <template #content>
+    ...
+  </template>
+</KPop>
+```
+
+<span class="inline-title">
+  <CloseIcon :size="KUI_ICON_SIZE_30" :color="KUI_COLOR_TEXT_DANGER" /> <b>Incorrect:</b>
+</span>
+
+```html
+<KPop>
+  <KButton v-if="!loading">Open popover</KButton>
+  <template #content>
+    ...
+  </template>
+</KPop>
+```
+
+<span class="inline-title">
+  <CloseIcon :size="KUI_ICON_SIZE_30" :color="KUI_COLOR_TEXT_DANGER" /> <b>Incorrect:</b>
+</span>
+
+```html
+<KPop>
+  <template
+    #default
+    v-if="!loading"
+  >
+    <KButton>Open popover</KButton>
+  </template>
+  <template #content>
+    ...
+  </template>
+</KPop>
+```
+:::
+
 ### title
 
 Slot for passing custom popover title.
@@ -533,6 +534,8 @@ Fires when the popover content is clicked.
 
 <script setup lang="ts">
 import { PopPlacementsArray } from '@/types'
+import { CheckIcon, CloseIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_30, KUI_COLOR_TEXT_SUCCESS, KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 </script>
 
 <style lang="scss" scoped>
@@ -548,19 +551,17 @@ import { PopPlacementsArray } from '@/types'
   gap: $kui-space-40;
 }
 
-.position-fixed-container {
-  background-color: $kui-color-background-neutral-weakest;
-  border: $kui-border-width-10 dashed $kui-color-border-neutral-weak;
-  width: fit-content;
-  padding: $kui-space-90;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  gap: $kui-space-50;
-  border-radius: $kui-border-radius-30;
-}
-
 .button-right {
   margin-left: $kui-space-auto;
 }
+
+.inline-title {
+  display: flex;
+  gap: $kui-space-30;
+  align-items: center;
+
+  &:not(:first-of-type) {
+    margin-top: $kui-space-40;
+  }
+}
 </style>
diff --git a/docs/components/select.md b/docs/components/select.md
@@ -360,10 +360,6 @@ Reuse the same display format provided via the [`item-template` slot](#itemtempl
 </KSelect>
 ```
 
-### positionFixed
-
-Use fixed positioning for the select dropdown to avoid content being clipped by the boundaries of its parent container. See [KPopover](/components/popover#positionfixed) docs for more information.
-
 ### enableItemCreation
 
 When used in conjunction with `enableFiltering` set to `true`, KSelect will suggest adding a new value when filtering produces no results.

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -56,7 +56,7 @@ Here are the different options:
 
 <ul>
   <li
-    v-for="p in ['auto', 'top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'right', 'rightStart', 'rightEnd', 'bottom', 'bottomStart', 'bottomEnd']"
+    v-for="p in PopPlacementsArray"
     :key="p">
     <code>{{ p }}</code>
   </li>
@@ -66,14 +66,14 @@ Here are the different options:
   <KTooltip placement="bottom" text="A tooltip that appears on the bottom.">
     <KButton>bottom</KButton>
   </KTooltip>
-  <KTooltip placement="topEnd" text="A tooltip that appears on the top.">
-    <KButton>topEnd</KButton>
+  <KTooltip placement="top-end" text="A tooltip that appears on the top.">
+    <KButton>top-end</KButton>
   </KTooltip>
   <KTooltip placement="left" text="A tooltip that appears on the left.">
     <KButton>left</KButton>
   </KTooltip>
-  <KTooltip placement="bottomStart" text="A tooltip that appears on the bottom.">
-    <KButton>bottomStart</KButton>
+  <KTooltip placement="bottom-start" text="A tooltip that appears on the bottom.">
+    <KButton>bottom-start</KButton>
   </KTooltip>
 </div>
 
@@ -83,10 +83,6 @@ Here are the different options:
 </KTooltip>
 ```
 
-### positionFixed
-
-Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `true`. See [KPop docs](/components/popover#positionfixed) for more information.
-
 ### maxWidth
 
 You can set the maximum width of the tooltip container with the `maxWidth` property. `maxWidth` defaults to `auto`.
@@ -161,6 +157,7 @@ The content slot allows you to slot in any html content
 
 <script setup lang="ts">
 import { InfoIcon } from '@kong/icons'
+import { PopPlacementsArray } from '@/types'
 </script>
 
 <style lang="scss" scoped>

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -342,6 +342,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Constants, Types & Interfaces
 
 * `TimeRange` - `start` and `end` keys are now defined as `Date | null`
+* `hidePopover` property in `DateTimePickerState` interface has been renamed to `popoverOpen`
 
 ### KDropdownMenu
 
@@ -496,6 +497,10 @@ This component has been removed.
 * `k-input-label` class has been renamed to `k-label`
 * `is-required` class has been renamed to `required`
 
+#### Constant, Types & Interfaces
+
+* `positionFixed` parameter was removed from `TooltipAttributes` interface
+
 ### KMenu
 
 This component has been removed.
@@ -563,6 +568,7 @@ This component is deprecated and will be removed in the next major release.
 * default value of `collapsedContext` prop has changed to `true`
 * default value of `selectedRowCount` prop has changed to `1`
 * `expandSelected` prop has been removed
+* `positionFixed` prop has been removed
 
 #### Events
 
@@ -634,7 +640,16 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `popoverTransitions` prop has been removed
 * `testMode` prop has been removed
 * `onPopoverClick` prop has been removed. You can a combination of new `closeOnPopoverClick` prop and `popover-click` event instead
+<<<<<<< Updated upstream
 * `positionFixed` prop default value has been changed to `true`
+* `placement` prop options have changed, see [Constants, Types & Interfaces](#constants-types--interfaces-15) for more details
+* `hidePopover` prop has been removed. Instead, you can use the method `hidePopover` exposed by the component
+=======
+* `placement` prop options have changed, see _Constants, Types & Interfaces_ section for more details
+* `hidePopover` prop has been removed. Instead, you can use exposed by the component `hidePopover` method
+>>>>>>> Stashed changes
+* `target` prop has been removed (popover element is always mounted to `.k-popover` element)
+* `positionFixed` prop has been removed (popover element always uses `position: fixed`)
 
 #### Slots
 
@@ -652,6 +667,12 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `k-popover-title` class has been replaced with `popover-title`
 * `k-popover-content` class has been replaced with `popover-content`
 * `k-popover-footer` class has been replaced with `popover-footer`
+* `k-popover` class has been replaced with `popover` (instead, `k-popover` class has been given to outer-most element)
+
+#### Constants, Types & Interfaces
+
+* format of most placement options in `PopPlacementsArray` has changed: `topStart` -> `top-start`, `rightEnd` -> `right-end`, etc.
+  * same applies to `PopPlacements` type
 
 ### KPrompt
 
@@ -737,6 +758,7 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 * `overlayLabel` prop has been removed
 * `filterFunc` prop has been renamed to `filterFunction`
 * `autosuggest` prop has been removed and replaced with `enableFiltering` prop. Should you want to simply enable default component-handled filtering or perform async fetching behind the scenes, you can use this prop in combination with`@query-change` event to achieve that
+* `positionFixed` prop has been removed
 
 #### Events
 
@@ -908,7 +930,7 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 * `testMode` prop has been removed
 * `label` prop has been deprecated in favor of `text` prop
-* default value of `positionFixed` prop has been changed to `true`
+* `positionFixed` prop has been removed
 
 #### Structure
 

diff --git a/package.json b/package.json
@@ -53,13 +53,13 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.0.6",
     "@kong/icons": "^1.13.0",
     "@popperjs/core": "^2.11.8",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
     "focus-trap": "^7.5.4",
     "focus-trap-vue": "^4.0.3",
-    "popper.js": "^1.16.1",
     "sortablejs": "^1.15.2",
     "swrv": "^1.0.4",
     "uuid": "^9.0.1",