feat(kpop): component reskin [KHCP-8994]

docs/guide/migrating-to-version-9.md

@@ -622,8 +622,33 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `PageSizeChangedData` interface has been renamed to `PageSizeChangeData`
 * `PaginationType` type has been removed
 
-### KPopover
+### KPop
 
+#### Props
+
+* `isSvg` prop has been removed
+* default value of `buttonText` prop has changed
+* `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
+* `positionFixed` prop default value has been changed to `true`
+
+#### Slots
+
+* `actions` slot has been removed
+
+#### Events
+
+* `opened` event has been renamed to `open`
+* `closed` event has been renamed to `close`
+
+#### Structure
+
+* `kpop-button` ... has been replaced with `popover-button`
+* `k-popover-header` class has been replaced with `popover-header`
+* `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`
 
 ### KPrompt
 

sandbox/index.ts

@@ -35,6 +35,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KModal & KPrompt', to: { name: 'modals' } },
   { name: 'KMultiselect', to: { name: 'multiselect' } },
   { name: 'KPagination', to: { name: 'pagination' } },
+  { name: 'KPop', to: { name: 'pop' } },
   { name: 'KRadio', to: { name: 'radio' } },
   { name: 'KSegmentedControl', to: { name: 'segmentedcontrol' } },
   { name: 'KSelect', to: { name: 'select' } },

sandbox/pages/SandboxPop.vue

@@ -0,0 +1,291 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KPop"
+  >
+    <div class="kpop-sandbox">
+      <SandboxSectionComponent>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1470%3A3448&mode=dev&t=qJAFUBmW2m9dkFvT-1">
+          Figma
+        </KExternalLink>
+      </SandboxSectionComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="buttonText">
+        <KPop button-text="KPop Button">
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="tag">
+        <KPop
+          button-text="Button"
+          tag="section"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="title">
+        <KPop
+          button-text="Button"
+          title="Popover title"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="trigger">
+        <KPop
+          button-text="Button"
+          trigger="hover"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="placement">
+        <div class="vertical-container">
+          <KPop
+            v-for="placement in PopPlacementsArray"
+            :key="placement"
+            :button-text="placement"
+            :placement="placement"
+          >
+            <template #content>
+              Popover content.
+            </template>
+          </KPop>
+        </div>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="width">
+        <KPop
+          button-text="Button"
+          width="500"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="maxWidth">
+        <KPop
+          button-text="Button"
+          max-width="100"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="popoverTimeout">
+        <KPop
+          button-text="Button"
+          :popover-timeout="3000"
+          trigger="hover"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="hidePopover">
+        <p>
+          <span v-if="!hidingPopover">Hide popover: <code>false</code></span>
+          <span v-else>Hiding popover in: {{ timeoutValue }}</span>
+        </p>
+        <KPop :hide-popover="showPopover">
+          <KButton @click="startPopoverTimeout">
+            Button
+          </KButton>
+
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="disabled">
+        <KPop
+          button-text="Button"
+          disabled
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="hideCaret"
+      >
+        <KPop
+          button-text="Button"
+          hide-caret
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="hideCloseIcon">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ hideCloseIcon: false }"
+        >
+          <KInputSwitch
+            v-model="data.hideCloseIcon"
+            label="Hide close icon"
+          />
+
+          <KPop
+            button-text="Button"
+            :hide-close-icon="data.hideCloseIcon"
+          >
+            <template #content>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </template>
+          </KPop>
+        </KComponent>
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="default">
+        <KPop>
+          <KButton appearance="secondary">
+            Slotted button
+          </KButton>
+
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="title & content">
+        <KPop button-text="Button">
+          <template #title>
+            Popover title
+          </template>
+
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="footer">
+        <KPop button-text="Button">
+          <template #content>
+            Popover content.
+          </template>
+
+          <template #footer>
+            <KButton size="small">
+              Footer button
+            </KButton>
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+
+      <!-- Events -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Events"
+      />
+      <SandboxSectionComponent title="open & close">
+        <KPop
+          button-text="Button"
+          @close="onEvent('Popover closed')"
+          @open="onEvent('Popover opened')"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="popover-click">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ closeOnPopoverClick: false }"
+        >
+          <KInputSwitch
+            v-model="data.closeOnPopoverClick"
+            label="Close on popover click"
+          />
+          <KPop
+            button-text="Button"
+            :close-on-popover-click="data.closeOnPopoverClick"
+            @close="onEvent('Popover closed')"
+            @open="onEvent('Popover opened')"
+            @popover-click="onEvent('Popover clicked')"
+          >
+            <template #content>
+              <KButton
+                size="small"
+                @click="onEvent('Popover content clicked')"
+              >
+                Click here
+              </KButton>
+            </template>
+          </KPop>
+        </KComponent>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject, nextTick, ref, watch } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { PopPlacementsArray } from '@/types'
+
+const hidingPopover = ref<boolean>(false)
+const interval = ref<any>(null)
+const showPopover = ref<boolean>(true)
+const timeoutValue = ref<number>(3)
+
+const startPopoverTimeout = () => {
+  hidingPopover.value = true
+
+  setTimeout(() => {
+    showPopover.value = false
+  }, 3000)
+
+  interval.value = setInterval(() => {
+    timeoutValue.value -= 1
+  }, 1000)
+}
+
+watch(showPopover, async (value) => {
+  if (!value) {
+    await nextTick()
+    clearInterval(interval.value)
+    hidingPopover.value = false
+    showPopover.value = true
+    timeoutValue.value = 3
+    interval.value = null
+  }
+})
+
+const onEvent = (message: string): void => {
+  console.log(message)
+}
+</script>
+
+<style lang="scss" scoped>
+.vertical-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $kui-space-50;
+}
+</style>

sandbox/pages/SandboxTable/SandboxTable.vue

@@ -5,13 +5,9 @@
   >
     <div class="ktable-sandbox">
       <SandboxSectionComponent>
-        <iframe
-          allowfullscreen
-          height="450"
-          src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FYze0SWXl5nKjR0rFdilljK%2FComponents%3Ftype%3Ddesign%26node-id%3D418%253A12464%26mode%3Ddesign%26t%3DLUYNbmqFH50qSmKC-1"
-          style="border: 1px solid rgba(0, 0, 0, 0.1);"
-          width="800"
-        />
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=418%3A12464&mode=dev&t=qJAFUBmW2m9dkFvT-1">
+          Figma
+        </KExternalLink>
       </SandboxSectionComponent>
 
       <!-- Props -->

sandbox/router/sandbox-routes.ts

@@ -128,6 +128,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Pagination Sandbox' },
     component: () => import('../pages/SandboxPagination.vue'),
   },
+  {
+    path: '/pop',
+    name: 'pop',
+    meta: { title: 'Pop Sandbox' },
+    component: () => import('../pages/SandboxPop.vue'),
+  },
   {
     path: '/radio',
     name: 'radio',

src/components/KCopy/KCopy.cy.ts

@@ -136,7 +136,7 @@ describe('KCopy', () => {
 
       cy.get(container).should('be.visible')
       cy.get(container).find('.k-tooltip').should('exist')
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', tooltipText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', tooltipText)
     })
 
     it('renders with `textTooltip` prop set', () => {
@@ -151,7 +151,7 @@ describe('KCopy', () => {
 
       cy.get(container).should('be.visible')
       cy.get(container).find('.k-tooltip').should('exist')
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', tooltipText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', tooltipText)
     })
 
     it('renders `successTooltip` with `copyTooltip` prop set', () => {
@@ -168,9 +168,9 @@ describe('KCopy', () => {
 
       cy.get(container).should('be.visible')
       cy.get(container).find('.k-tooltip').should('exist')
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', tooltipText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', tooltipText)
       cy.get('[data-testid="copy-to-clipboard"]').click()
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', successText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', successText)
     })
   })
 })