fix(kpagination): remove dynamic size props [KHCP-12680] (#2301)

Kong · Jul 23, 2024 · 92ac40a · 92ac40a
1 parent e1495f0
commit 92ac40a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 34 deletions.
diff --git a/src/components/KButton/KButton.vue b/src/components/KButton/KButton.vue
@@ -149,23 +149,6 @@ export default {
   }
 }
 
-@mixin kButtonMediumSize {
-  font-size: var(--kui-font-size-30, $kui-font-size-30);
-  gap: var(--kui-space-30, $kui-space-30);
-  line-height: var(--kui-line-height-30, $kui-line-height-30);
-  padding: var(--kui-space-20, $kui-space-20) var(--kui-space-40, $kui-space-40);
-
-  &.icon-button {
-    padding: var(--kui-space-20, $kui-space-20);
-  }
-
-  // enforce icon size exported by @kong/icons because it's defined by the design system
-  :deep(#{$kongponentsKongIconSelector}) {
-    height: var(--kui-icon-size-40, $kui-icon-size-40) !important;
-    width: var(--kui-icon-size-40, $kui-icon-size-40) !important;
-  }
-}
-
 /* Component styles */
 
 .k-button {

diff --git a/src/components/KPagination/KPagination.vue b/src/components/KPagination/KPagination.vue
@@ -7,8 +7,7 @@
   >
     <template v-if="!offset">
       <span
-        v-if="isWideScreen"
-        class="pagination-text"
+        class="pagination-text large-screen"
         data-testid="visible-items"
       >
         <span class="pagination-text-pages">{{ pagesString }}</span>
@@ -24,7 +23,7 @@
             data-testid="previous-button"
             :disabled="backDisabled"
             icon
-            :size="isWideScreen ? 'medium' : 'small'"
+            size="small"
             type="button"
             @click="pageBack"
           >
@@ -92,7 +91,7 @@
             data-testid="next-button"
             :disabled="forwardDisabled ? true : undefined"
             icon
-            :size="isWideScreen ? 'medium' : 'small'"
+            size="small"
             type="button"
             @click="pageForward"
           >
@@ -113,8 +112,8 @@
     />
     <div class="page-size-select">
       <span
-        v-if="!isWideScreen && !disablePageJump && !offset"
-        class="pagination-text"
+        v-if="!disablePageJump && !offset"
+        class="pagination-text small-screen"
         data-testid="visible-items"
       >
         <span class="pagination-text-pages">{{ pagesString }}</span>
@@ -135,7 +134,7 @@
           class="page-size-dropdown-trigger"
           data-testid="page-size-dropdown-trigger"
           :disabled="pageSizeOptions.length <= 1"
-          :size="isWideScreen ? 'medium' : 'small'"
+          size="small"
           type="button"
         >
           {{ pageSizeText }}
@@ -159,8 +158,6 @@ import PaginationOffset from './PaginationOffset.vue'
 import type { PageSizeChangeData, PageChangeData, DropdownItem } from '@/types'
 import { BackIcon, ForwardIcon, ChevronDownIcon } from '@kong/icons'
 import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
-import { useMediaQuery } from '@vueuse/core'
-import { KUI_BREAKPOINT_MOBILE } from '@kong/design-tokens'
 
 const kpopAttrs = {
   placement: 'top',
@@ -224,8 +221,6 @@ const emit = defineEmits<{
 const kPaginationElement = ref<HTMLElement | null>(null)
 const resizeObserver = ref<ResizeObserverHelper>()
 
-const isWideScreen = useMediaQuery(`(min-width: ${KUI_BREAKPOINT_MOBILE})`)
-
 const currPage: Ref<number> = ref(props.currentPage ? props.currentPage : 1)
 const currentPageSize: Ref<number> = ref(props.initialPageSize ? props.initialPageSize : props.pageSizes[0])
 const pageCount = computed((): number => Math.ceil(props.totalCount / currentPageSize.value))
@@ -515,6 +510,22 @@ onUnmounted(() => {
     .pagination-text-pages {
       color: var(--kui-color-text, $kui-color-text);
     }
+
+    &.small-screen {
+      display: block;
+
+      @media (min-width: $kui-breakpoint-mobile) {
+        display: none;
+      }
+    }
+
+    &.large-screen {
+      display: none;
+
+      @media (min-width: $kui-breakpoint-mobile) {
+        display: block;
+      }
+    }
   }
 
   .pagination-button-container {
@@ -574,6 +585,13 @@ onUnmounted(() => {
           border-color: var(--kui-color-border-primary, $kui-color-border-primary);
         }
       }
+
+      &.arrow {
+        @media (min-width: $kui-breakpoint-mobile) {
+          // apply KButton medium size styles on screen larger than mobile
+          @include kButtonMediumSize;
+        }
+      }
     }
   }
 
@@ -588,6 +606,13 @@ onUnmounted(() => {
         max-height: 200px;
         overflow-y: auto;
       }
+
+      .page-size-dropdown-trigger {
+        @media (min-width: $kui-breakpoint-mobile) {
+          // apply KButton medium size styles on screen larger than mobile
+          @include kButtonMediumSize;
+        }
+      }
     }
   }
 }

diff --git a/src/components/KPagination/PaginationOffset.vue b/src/components/KPagination/PaginationOffset.vue
@@ -7,7 +7,7 @@
       data-testid="previous-button"
       :disabled="previousButtonDisabled"
       icon
-      :size="isWideScreen ? 'medium' : 'small'"
+      size="small"
       type="button"
       @click.prevent="emit('getPreviousOffset')"
     >
@@ -21,7 +21,7 @@
       data-testid="next-button"
       :disabled="nextButtonDisabled"
       icon
-      :size="isWideScreen ? 'medium' : 'small'"
+      size="small"
       type="button"
       @click.prevent="emit('getNextOffset')"
     >
@@ -32,8 +32,6 @@
 
 <script setup lang="ts">
 import { BackIcon, ForwardIcon } from '@kong/icons'
-import { useMediaQuery } from '@vueuse/core'
-import { KUI_BREAKPOINT_MOBILE } from '@kong/design-tokens'
 
 defineProps({
   previousButtonDisabled: {
@@ -50,14 +48,19 @@ const emit = defineEmits<{
   (e: 'getPreviousOffset'): void
   (e: 'getNextOffset'): void
 }>()
-
-const isWideScreen = useMediaQuery(`(min-width: ${KUI_BREAKPOINT_MOBILE})`)
 </script>
 
 <style lang="scss" scoped>
 .pagination-offset-button-container {
   display: flex;
   gap: var(--kui-space-40, $kui-space-40);
   margin-left: var(--kui-space-20, $kui-space-20); // need little spacing on the left so that box-shadow doesn't get cut off in focus-visible
+
+  .pagination-button {
+    @media (min-width: $kui-breakpoint-mobile) {
+      // apply KButton medium size styles on screen larger than mobile
+      @include kButtonMediumSize;
+    }
+  }
 }
 </style>
diff --git a/src/styles/mixins/_buttons.scss b/src/styles/mixins/_buttons.scss
@@ -7,3 +7,20 @@
   cursor: pointer;
   padding: var(--kui-space-0, $kui-space-0);
 }
+
+@mixin kButtonMediumSize {
+  font-size: var(--kui-font-size-30, $kui-font-size-30);
+  gap: var(--kui-space-30, $kui-space-30);
+  line-height: var(--kui-line-height-30, $kui-line-height-30);
+  padding: var(--kui-space-20, $kui-space-20) var(--kui-space-40, $kui-space-40);
+
+  &.icon-button {
+    padding: var(--kui-space-20, $kui-space-20);
+  }
+
+  // enforce icon size exported by @kong/icons because it's defined by the design system
+  :deep(#{$kongponentsKongIconSelector}) {
+    height: var(--kui-icon-size-40, $kui-icon-size-40) !important;
+    width: var(--kui-icon-size-40, $kui-icon-size-40) !important;
+  }
+}