fix(kdropdown): update dropdown popover selector (#2225)

* chore(sandbox): remove figma links * fix(kdropdown): update dropdown popover selector * docs: move style overrides * chore(docs): focs index page tweaks * fix(kselect): custom element with to account for caret
Kong · Jun 14, 2024 · 70af6b7 · 70af6b7
1 parent 9eb0760
commit 70af6b7
Show file tree

Hide file tree

Showing 37 changed files with 69 additions and 275 deletions.
diff --git a/docs/.vitepress/theme/_overrides.scss b/docs/.vitepress/theme/_overrides.scss
@@ -36,4 +36,16 @@
       }
     }
   }
+
+  .k-alert {
+    p {
+      line-height: $kui-line-height-30; // .alert-message line-height
+    }
+  }
+
+  .k-empty-state {
+    p {
+      line-height: $kui-line-height-30; // .empty-state-message line-height
+    }
+  }
 }
diff --git a/docs/components/alert.md b/docs/components/alert.md
@@ -255,12 +255,3 @@ const showAlert = ref<boolean>(true)
   gap: $kui-space-50;
 }
 </style>
-
-<style lang="scss">
-// overwrite vitepress styles
-.k-alert {
-  p {
-    line-height: $kui-line-height-30; // .alert-message line-height
-  }
-}
-</style>
diff --git a/docs/components/empty-state.md b/docs/components/empty-state.md
@@ -319,12 +319,3 @@ const onActionClick = (): void => {
   alert('Action button clicked!')
 }
 </script>
-
-<style lang="scss">
-// overwrite vitepress styles
-.k-empty-state {
-  p {
-    line-height: $kui-line-height-30; // .empty-state-message line-height
-  }
-}
-</style>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -361,7 +361,7 @@ Component has been renamed to `KDropdown`
 #### Structure
 
 * `k-dropdown-menu` class has been removed (`k-dropdown` class remains)
-* `k-dropdown-menu-popover` `data-testid` attribute has been renamed to `k-dropdown-popover`
+* `k-dropdown-menu-popover` `data-testid` attribute has been renamed to `dropdown-popover`
 * `k-dropdown-trigger` class has been removed
 * `k-dropdown-trigger` `data-testid` attribute has been renamed to `dropdown-trigger`
 * `k-dropdown-btn` class has been renamed to `dropdown-trigger-button`

diff --git a/docs/index.md b/docs/index.md
@@ -38,11 +38,16 @@ features:
     linkText: View changes
 ---
 
-<style>
+<style lang="scss">
 /* Homepage Components button */
 .VPContent.is-home .VPButton.medium.alt[href^="/components/"] {
   color: #fff;
   border-color: #07a88d;
   background-color: #07a88d;
+
+  &:hover {
+    border-color: #06977E;
+    background-color: #06977E;
+  }
 }
 </style>
diff --git a/sandbox/pages/SandboxAlert.vue b/sandbox/pages/SandboxAlert.vue
@@ -4,12 +4,6 @@
     title="KAlert"
   >
     <div class="kalert-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1105%3A733&mode=dev&t=6zTR9N7eIIoXGsX7-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxBadge.vue b/sandbox/pages/SandboxBadge.vue
@@ -1,19 +1,9 @@
 <template>
   <SandboxLayout
     :links="inject('app-links', [])"
-    title="KButton"
+    title="KBadge"
   >
     <div class="kbadge-sandbox">
-      <SandboxTitleComponent
-        title="KBadge"
-      >
-        <template #description>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=467%3A10283&mode=dev">
-            Figma
-          </KExternalLink>
-        </template>
-      </SandboxTitleComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxBreadcrumbs.vue b/sandbox/pages/SandboxBreadcrumbs.vue
@@ -4,12 +4,6 @@
     title="KBreadcrumbs"
   >
     <div class="kbreadcrumbs-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=470%3A22444&mode=dev&t=tS1kk3tqkOVTlZ8a-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxButton.vue b/sandbox/pages/SandboxButton.vue
@@ -4,15 +4,6 @@
     title="KButton"
   >
     <div class="kbutton-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=0%3A1&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
@@ -4,16 +4,6 @@
     title="KCard"
   >
     <div class="kcard-sandbox">
-      <SandboxTitleComponent
-        title="KCard"
-      >
-        <template #description>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
-            Figma
-          </KExternalLink>
-        </template>
-      </SandboxTitleComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxCheckbox.vue b/sandbox/pages/SandboxCheckbox.vue
@@ -4,18 +4,7 @@
     title="KCheckbox"
   >
     <div class="kcheckbox-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=283%3A2899&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
         <div class="grid-container standalone-container">
           <div class="vertical-spacing">
             <KCheckbox

diff --git a/sandbox/pages/SandboxCodeBlock.vue b/sandbox/pages/SandboxCodeBlock.vue
@@ -4,15 +4,6 @@
     title="KCodeBlock"
   >
     <div class="kcodeblock-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11253&mode=dev&t=wfYkBJZ5Ry0OUS2m-1">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxCollapse.vue b/sandbox/pages/SandboxCollapse.vue
@@ -1,18 +1,9 @@
 <template>
   <SandboxLayout
     :links="inject('app-links', [])"
-    title="KPagination"
+    title="KCollapse"
   >
-    <div class="kpagination-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11254&mode=dev&t=z4m6LiZVAeHHwxSH-1">
-        Figma
-      </KExternalLink>
-
+    <div class="kcollapse-sandbox">
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxDateTimePicker.vue b/sandbox/pages/SandboxDateTimePicker.vue
@@ -4,12 +4,6 @@
     title="KDateTimePicker"
   >
     <div class="kdatetimepicker-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11255&mode=dev&t=7C3HUCeWQiS7AhA7-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxDropdown.vue b/sandbox/pages/SandboxDropdown.vue
@@ -4,15 +4,6 @@
     title="KDropdown"
   >
     <div class="kdropdown-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=466%3A9443&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxEmptyState.vue b/sandbox/pages/SandboxEmptyState.vue
@@ -4,12 +4,6 @@
     title="KEmptyState"
   >
     <div class="kemptystate-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A11252&mode=dev&t=oHjbEUosoGUvnzuN-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxFileUpload.vue b/sandbox/pages/SandboxFileUpload.vue
@@ -4,12 +4,6 @@
     title="KFileUpload"
   >
     <div class="kfileupload-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=285%3A2601&mode=dev">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxInput.vue b/sandbox/pages/SandboxInput.vue
@@ -4,21 +4,8 @@
     title="KInput"
   >
     <div class="kinput-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=218%3A646&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
-        <div>
-          <KInput />
-        </div>
+        <KInput />
       </SandboxSectionComponent>
 
       <!-- Props -->

diff --git a/sandbox/pages/SandboxInputSwitch.vue b/sandbox/pages/SandboxInputSwitch.vue
@@ -1,24 +1,11 @@
 <template>
   <SandboxLayout
     :links="inject('app-links', [])"
-    title="KLabel"
+    title="KInputSwitch"
   >
     <div class="kinputswitch-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=624%3A12900&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
-        <div>
-          <KInputSwitch v-model="vModel0" />
-        </div>
+        <KInputSwitch v-model="vModel0" />
       </SandboxSectionComponent>
 
       <!-- Props -->

diff --git a/sandbox/pages/SandboxLabel.vue b/sandbox/pages/SandboxLabel.vue
@@ -4,23 +4,10 @@
     title="KLabel"
   >
     <div class="klabel-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=418%3A15878&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
-        <div>
-          <KLabel>
-            This is a label
-          </KLabel>
-        </div>
+        <KLabel>
+          This is a label
+        </KLabel>
       </SandboxSectionComponent>
 
       <!-- Props -->

diff --git a/sandbox/pages/SandboxModals.vue b/sandbox/pages/SandboxModals.vue
@@ -4,12 +4,6 @@
     title="KModal & KPrompt"
   >
     <div class="kmodals-sandbox">
-      <SandboxSectionComponent>
-        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1292%3A5056&mode=dev&t=7C3HUCeWQiS7AhA7-1">
-          Figma
-        </KExternalLink>
-      </SandboxSectionComponent>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxPagination.vue b/sandbox/pages/SandboxPagination.vue
@@ -4,15 +4,6 @@
     title="KPagination"
   >
     <div class="kpagination-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
-      <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=2020%3A12478&mode=dev">
-        Figma
-      </KExternalLink>
-
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle

diff --git a/sandbox/pages/SandboxPop.vue b/sandbox/pages/SandboxPop.vue
@@ -4,12 +4,6 @@
     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

diff --git a/sandbox/pages/SandboxRadio.vue b/sandbox/pages/SandboxRadio.vue
@@ -4,18 +4,7 @@
     title="KRadio"
   >
     <div class="kradio-sandbox">
-      <!-- Figma -->
-      <SandboxTitleComponent
-        is-subtitle
-        title="Figma"
-      />
       <SandboxSectionComponent>
-        <div>
-          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=763%3A12969&mode=dev">
-            Figma
-          </KExternalLink>
-        </div>
-
         <div class="grid-container standalone-container">
           <div class="vertical-spacing">
             <KRadio