chore(kcodeblock): merge main

Kong · Jan 16, 2025 · 5a061a6 · 5a061a6
2 parents 339f040 + 084dc80
commit 5a061a6
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [9.16.4](https://github.com/Kong/kongponents/compare/v9.16.3...v9.16.4) (2025-01-16)
+
+
+### Bug Fixes
+
+* **ktabs:** add data-testid to list items ([#2574](https://github.com/Kong/kongponents/issues/2574)) ([bf80d75](https://github.com/Kong/kongponents/commit/bf80d7586493b53075f0ac43f07ef10eb1bd3c8c))
+
+## [9.16.3](https://github.com/Kong/kongponents/compare/v9.16.2...v9.16.3) (2025-01-15)
+
+
+### Bug Fixes
+
+* **kalert:** kbutton text color within kalerts [KHCP-14565] ([#2571](https://github.com/Kong/kongponents/issues/2571)) ([195ce77](https://github.com/Kong/kongponents/commit/195ce7759fe94e7b36b78fdc7eb3a52805c9ee5f))
+
 ## [9.16.2](https://github.com/Kong/kongponents/compare/v9.16.1...v9.16.2) (2025-01-15)
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kong/kongponents",
-  "version": "9.16.2",
+  "version": "9.16.4",
   "description": "Kong Component library",
   "type": "module",
   "repository": {

diff --git a/src/components/KAlert/KAlert.vue b/src/components/KAlert/KAlert.vue
@@ -121,10 +121,12 @@ const getAlertIcon = computed((): AlertIcon => {
     .alert-message {
       :slotted(a),
       :deep(a) {
-        color: $textColor;
+        &:not([type='button']) {
+          color: $textColor;
 
-        &:hover {
-          color: $hoverColor;
+          &:hover {
+            color: $hoverColor;
+          }
         }
       }
 

diff --git a/src/components/KCodeBlock/KCodeBlock.vue b/src/components/KCodeBlock/KCodeBlock.vue
@@ -148,21 +148,23 @@
       -->
       <div
         v-if="showCopyButton || slots['secondary-actions']"
-        class="code-block-secondary-actions"
+        class="secondary-actions-wrapper"
       >
-        <KCodeBlockIconButton
-          v-if="showCopyButton"
-          :aria-label="`Copy (${ALT_SHORTCUT_LABEL}+C)`"
-          class="code-block-copy-button"
-          :copy-tooltip="`Copy (${ALT_SHORTCUT_LABEL}+C)`"
-          data-testid="code-block-copy-button"
-          :theme="theme"
-          @click="copyCode"
-        >
-          <CopyIcon decorative />
-        </KCodeBlockIconButton>
+        <div class="code-block-secondary-actions">
+          <KCodeBlockIconButton
+            v-if="showCopyButton"
+            :aria-label="`Copy (${ALT_SHORTCUT_LABEL}+C)`"
+            class="code-block-copy-button"
+            :copy-tooltip="`Copy (${ALT_SHORTCUT_LABEL}+C)`"
+            data-testid="code-block-copy-button"
+            :theme="theme"
+            @click="copyCode"
+          >
+            <CopyIcon decorative />
+          </KCodeBlockIconButton>
 
-        <slot name="secondary-actions" />
+          <slot name="secondary-actions" />
+        </div>
       </div>
 
       <!--
@@ -864,6 +866,34 @@ $kCodeBlockDarkLineMatchBackgroundColor: rgba(255, 255, 255, 0.12); // we don't
     padding: var(--kui-space-40, $kui-space-40);
     position: relative;
 
+    @media (min-width: $kui-breakpoint-laptop) {
+      .secondary-actions-wrapper {
+        opacity: 0;
+        transition: opacity $kongponentsTransitionDurTimingFunc, border $kongponentsTransitionDurTimingFunc;
+      }
+
+      .secondary-actions-wrapper:focus-within,
+      &:hover .secondary-actions-wrapper {
+        opacity: 1;
+      }
+    }
+
+    .secondary-actions-wrapper {
+      height: 100%;
+      position: sticky;
+      right: 0px;
+      top: 0px;
+      z-index: 2;
+
+      .code-block-secondary-actions {
+        display: flex;
+        gap: var(--kui-space-40, $kui-space-40);
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+
     pre {
       display: grid;
       margin: var(--kui-space-0, $kui-space-0);
@@ -945,17 +975,6 @@ $kCodeBlockDarkLineMatchBackgroundColor: rgba(255, 255, 255, 0.12); // we don't
         }
       }
     }
-
-    .code-block-secondary-actions {
-      display: flex;
-      gap: var(--kui-space-40, $kui-space-40);
-      margin-right: var(--kui-space-40, $kui-space-40);
-      margin-top: var(--kui-space-40, $kui-space-40);
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
-    }
   }
 
   &.theme-dark {

diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
@@ -10,6 +10,7 @@
         :key="tab.hash"
         class="tab-item"
         :class="{ active: activeTab === tab.hash }"
+        :data-testid="`${tab.hash.replace('#','')}-tab`"
       >
         <component
           :is="tabComponent(tab).tag"