From c49f3cce88b3517f93dd74373fc746154ae4bea4 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 5 Apr 2024 10:06:42 -0400
Subject: [PATCH] fix(kcodeblock): clear query button styles [KHCP-8975]

---
 src/components/KCodeBlock/KCodeBlock.vue | 3 ++-
 src/components/KInput/KInput.vue         | 6 +++++-
 src/styles/_mixins.scss                  | 1 +
 src/styles/mixins/_buttons.scss          | 7 +++++++
 4 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/mixins/_buttons.scss

diff --git a/src/components/KCodeBlock/KCodeBlock.vue b/src/components/KCodeBlock/KCodeBlock.vue
index 788e6e0c31..554b727ddd 100644
--- 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
index 0b6dfe838c..ed8dc46beb 100644
--- 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
index 2eec14a900..633e558452 100644
--- 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
new file mode 100644
index 0000000000..a071ce9ba2
--- /dev/null
+++ 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);
+}