fix(kcodeblock): clear query button styles [KHCP-8975]

Kong · Apr 5, 2024 · c49f3cc · c49f3cc
1 parent 7a8cd5d
commit c49f3cc
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/src/components/KCodeBlock/KCodeBlock.vue b/src/components/KCodeBlock/KCodeBlock.vue
@@ -30,10 +30,11 @@
               aria-label="Clear query"
               class="clear-query-button"
               data-testid="clear-query-button"
+              title="Clear query"
               type="button"
               @click="clearQuery"
             >
-              <CloseIcon title="Clear query" />
+              <CloseIcon />
             </button>
             <SearchIcon
               v-else

diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
@@ -349,7 +349,11 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
         width: $kInputIconSize !important;
       }
 
-      :deep([role="button"]) {
+      :deep([role="button"]), :deep(button) {
+        @include defaultButtonReset;
+
+        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+
         &:not([disabled]) {
           border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
           cursor: pointer;

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -4,6 +4,7 @@
 @import "@/styles/mixins/cards";
 @import "@/styles/mixins/badges";
 @import "@/styles/mixins/loaders";
+@import "@/styles/mixins/buttons";
 
 @import "@/styles/tmp-variables";
 

diff --git a/src/styles/mixins/_buttons.scss b/src/styles/mixins/_buttons.scss
@@ -0,0 +1,7 @@
+/* Buttons mixins */
+
+@mixin defaultButtonReset {
+  background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
+  border: none;
+  padding: var(--kui-space-0, $kui-space-0);
+}