fix: using icons as buttons (#2119)

* fix(ktruncate): using icon as button Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(ktoaster): using icon as button Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(kslideout): using icon as button Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(kselect): using icon as button Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(kmultiselect): using icon as button Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(kmodal): using icon as button Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix: reset functional button styles Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(kcopy): not resetting functional button styles Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> * fix(*): minor state fixes --------- Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com> Co-authored-by: portikM <maksym.portianoi@konghq.com>
Kong · Jun 15, 2024 · 3eb7c06 · 3eb7c06
1 parent bf595d2
commit 3eb7c06
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 61 deletions.
diff --git a/src/components/KCopy/KCopy.vue b/src/components/KCopy/KCopy.vue
@@ -37,6 +37,7 @@
         <KClipboardProvider v-slot="{ copyToClipboard }">
           <button
             :id="copyButtonElementId"
+            class="copy-to-clipboard-button"
             data-testid="copy-to-clipboard"
             type="button"
             @click.stop="copyIdToClipboard(copyToClipboard)"
@@ -307,5 +308,9 @@ onUnmounted(() => {
     line-height: var(--kui-line-height-20, $kui-line-height-20);
     margin-right: var(--kui-space-20, $kui-space-20);
   }
+
+  .copy-to-clipboard-button {
+    @include defaultButtonReset;
+  }
 }
 </style>
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
@@ -348,7 +348,7 @@ $kInputSlotSpacing: var(--kui-space-40, $kui-space-40); // $kSelectInputSlotSpac
         width: $kInputIconSize !important;
       }
 
-      :deep([role="button"]) {
+      :deep([role="button"]), :deep(button) {
         &:not([disabled]) {
           border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
           cursor: pointer;

diff --git a/src/components/KModal/KModal.vue b/src/components/KModal/KModal.vue
@@ -38,18 +38,16 @@
                   {{ title }}
                 </slot>
               </div>
-              <CloseIcon
+              <button
                 v-if="!hideCloseIcon"
+                aria-label="Close"
                 class="close-icon"
-                :color="KUI_COLOR_TEXT_NEUTRAL"
                 data-testid="modal-close-icon"
-                role="button"
-                tabindex="0"
-                title="Close"
+                type="button"
                 @click="$emit('cancel')"
-                @keydown.enter="$emit('cancel')"
-                @keydown.space.prevent="$emit('cancel')"
-              />
+              >
+                <CloseIcon :color="KUI_COLOR_TEXT_NEUTRAL" />
+              </button>
             </div>
             <div
               class="modal-content"
@@ -370,10 +368,10 @@ onBeforeUnmount(async () => {
       }
 
       .close-icon {
+        @include defaultButtonReset;
+
         border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-        cursor: pointer;
         margin-left: auto;
-        margin-top: var(--kui-space-10, $kui-space-10);
         outline: none;
 
         &:hover, &:focus {

diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
@@ -97,12 +97,15 @@
                   v-if="item.selected && !item.disabled && !isDisabled && !isReadonly"
                   #icon
                 >
-                  <CloseIcon
+                  <button
+                    aria-label="Dismiss"
+                    class="badge-dismiss-button"
                     data-testid="badge-dismiss-button"
-                    role="button"
-                    tabindex="0"
+                    type="button"
                     @click="handleItemSelect(item)"
-                  />
+                  >
+                    <CloseIcon />
+                  </button>
                 </template>
               </KBadge>
               <KTooltip
@@ -122,16 +125,16 @@
               </KTooltip>
             </div>
             <div class="multiselect-icons-container">
-              <CloseIcon
+              <button
                 v-if="!loading && selectedItems.length && isToggled.value"
+                aria-label="Clear"
                 class="multiselect-clear-icon"
                 data-testid="multiselect-clear-icon"
-                role="button"
-                :size="KUI_ICON_SIZE_40"
-                tabindex="0"
+                type="button"
                 @click="clearSelection"
-                @keyup.enter="clearSelection"
-              />
+              >
+                <CloseIcon :size="KUI_ICON_SIZE_40" />
+              </button>
               <ProgressIcon
                 v-else-if="loading"
                 class="multiselect-loading-icon"
@@ -1125,7 +1128,7 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
     z-index: 1;
 
     .multiselect-clear-icon {
-      cursor: pointer;
+      @include defaultButtonReset;
 
       &:hover, &:focus {
         color: var(--kui-color-text, $kui-color-text) !important;
@@ -1265,5 +1268,9 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
       color: var(--kui-color-text-danger, $kui-color-text-danger);
     }
   }
+
+  .badge-dismiss-button {
+    @include defaultButtonReset;
+  }
 }
 </style>
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
@@ -61,15 +61,16 @@
             @update:model-value="onQueryChange"
           >
             <template #after>
-              <CloseIcon
+              <button
                 v-if="isClearVisible"
+                aria-label="Clear"
+                class="clear-selection-button"
                 data-testid="clear-selection-icon"
-                role="button"
-                tabindex="0"
+                type="button"
                 @click="clearSelection"
-                @keydown.space.prevent
-                @keyup.space="clearSelection"
-              />
+              >
+                <CloseIcon />
+              </button>
               <ChevronDownIcon
                 class="chevron-down-icon"
                 :class="{ 'disabled': isDisabled }"
@@ -805,5 +806,9 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20)
       color: var(--kui-color-text-danger, $kui-color-text-danger);
     }
   }
+
+  .clear-selection-button {
+    @include defaultButtonReset;
+  }
 }
 </style>
diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
@@ -24,17 +24,15 @@
               {{ title }}
             </slot>
           </div>
-          <CloseIcon
+          <button
+            aria-label="Close"
             class="slideout-close-icon"
-            :color="KUI_COLOR_TEXT_NEUTRAL"
             data-testid="slideout-close-icon"
-            role="button"
-            tabindex="0"
-            title="Close"
-            @click="$emit('close')"
-            @keydown.enter="$emit('close')"
-            @keydown.space.prevent="$emit('close')"
-          />
+            type="button"
+            @click.stop="$emit('close')"
+          >
+            <CloseIcon :color="KUI_COLOR_TEXT_NEUTRAL" />
+          </button>
         </div>
         <div class="slideout-content">
           <slot />
@@ -183,14 +181,16 @@ onUnmounted(() => {
       }
 
       .slideout-close-icon {
+        @include defaultButtonReset;
+
         border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-        cursor: pointer;
         margin-left: auto;
-        // margin-top: var(--kui-space-10, $kui-space-10);
         outline: none;
 
         &:hover, &:focus {
-          color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
+          :deep(#{$kongponentsKongIconSelector}) {
+            color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
+          }
         }
 
         &:focus-visible {

diff --git a/src/components/KToaster/KToaster.vue b/src/components/KToaster/KToaster.vue
@@ -33,17 +33,18 @@
           {{ toaster.message }}
         </p>
       </div>
-      <CloseIcon
+      <button
+        aria-label="Close"
         class="toaster-close-icon"
-        :color="KUI_COLOR_TEXT_NEUTRAL_WEAK"
         data-testid="toaster-close-icon"
-        role="button"
-        :size="KUI_ICON_SIZE_50"
-        tabindex="0"
-        @click="$emit('close', toaster.key)"
-        @keydown.enter="$emit('close', toaster.key)"
-        @keydown.space.prevent="$emit('close', toaster.key)"
-      />
+        type="button"
+        @click.stop="$emit('close', toaster.key)"
+      >
+        <CloseIcon
+          :color="KUI_COLOR_TEXT_NEUTRAL_WEAK"
+          :size="KUI_ICON_SIZE_50"
+        />
+      </button>
     </div>
   </TransitionGroup>
 </template>
@@ -150,13 +151,16 @@ const getToastIcon = (appearance?: ToasterAppearance): ToastIcon => {
     }
 
     .toaster-close-icon {
+      @include defaultButtonReset;
+
       border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-      cursor: pointer;
       margin-left: var(--kui-space-auto, $kui-space-auto);
       outline: none;
 
       &:hover, &:focus {
-        color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker) !important;
+        :deep(#{$kongponentsKongIconSelector}) {
+          color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker) !important;
+        }
       }
 
       &:focus-visible {

diff --git a/src/components/KTruncate/KTruncate.vue b/src/components/KTruncate/KTruncate.vue
@@ -42,14 +42,14 @@
           :collapse="handleToggleClick"
           name="collapse-trigger"
         >
-          <ChevronUpIcon
+          <button
+            aria-label="Toggle"
             class="collapse-trigger"
-            role="button"
-            tabindex="0"
+            type="button"
             @click.stop="handleToggleClick"
-            @keydown.enter="handleToggleClick"
-            @keydown.space.prevent="handleToggleClick"
-          />
+          >
+            <ChevronUpIcon :size="KUI_ICON_SIZE_30" />
+          </button>
         </slot>
       </div>
     </div>
@@ -97,7 +97,7 @@
 import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue'
 import useUtilities from '@/composables/useUtilities'
 import { ChevronUpIcon } from '@kong/icons'
-import { KUI_SPACE_40 } from '@kong/design-tokens'
+import { KUI_ICON_SIZE_30, KUI_SPACE_40 } from '@kong/design-tokens'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 
 const { getSizeFromString } = useUtilities()
@@ -284,10 +284,11 @@ onUnmounted(() => {
   }
 
   .collapse-trigger {
+    @include defaultButtonReset;
+
     background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
     border-radius: var(--kui-border-radius-round, $kui-border-radius-round);
     color: var(--kui-color-text-primary, $kui-color-text-primary);
-    cursor: pointer;
     outline: none;
     padding: var(--kui-space-20, $kui-space-20);
 
@@ -297,13 +298,19 @@ onUnmounted(() => {
 
     &:hover {
       background-color: var(--kui-color-background-primary-weaker, $kui-color-background-primary-weaker);
-      color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong) !important;
+
+      :deep(#{$kongponentsKongIconSelector}) {
+        color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong) !important;
+      }
     }
 
     &:focus,
     &:focus-within {
       background-color: var(--kui-color-background-primary-weak, $kui-color-background-primary-weak);
-      color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger) !important;
+
+      :deep(#{$kongponentsKongIconSelector}) {
+        color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger) !important;
+      }
     }
   }
 

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,9 @@
+/* Buttons mixins */
+
+@mixin defaultButtonReset {
+  background-color: var(--kui-color-background-transparent, $kui-color-background-transparent);
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: var(--kui-space-0, $kui-space-0);
+}