@gitlab/ui 107.5.0 → 107.6.0

package/src/tokens/build/json/tokens.json

@@ -9488,15 +9488,15 @@
     "intro": {
       "border": {
         "color": {
-          "$value": "#cbe2f9",
+          "$value": "#9dc7f1",
           "$type": "color",
           "$description": "Used for the border of an info banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "$value": {
-              "default": "{color.blue.100}",
-              "dark": "{color.blue.800}"
+              "default": "{color.blue.200}",
+              "dark": "{color.blue.700}"
             },
             "$type": "color",
             "$description": "Used for the border of an info banner."
@@ -9540,15 +9540,15 @@
       },
       "border": {
         "color": {
-          "$value": "#e1d8f9",
+          "$value": "#cbbbf2",
           "$type": "color",
           "$description": "Used for the border of a promo banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "$value": {
-              "default": "{color.purple.100}",
-              "dark": "{color.purple.800}"
+              "default": "{color.purple.200}",
+              "dark": "{color.purple.700}"
             },
             "$type": "color",
             "$description": "Used for the border of a promo banner."

package/src/tokens/build/scss/_tokens.dark.scss

@@ -650,9 +650,9 @@ $gl-badge-tier-text-color-active: $gl-color-purple-950; // Used for the text of
 $gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
-$gl-banner-intro-border-color: $gl-color-blue-800; // Used for the border of an info banner.
+$gl-banner-intro-border-color: $gl-color-blue-700; // Used for the border of an info banner.
 $gl-banner-promo-background-color: $gl-color-purple-950; // Used for the background of a promo banner.
-$gl-banner-promo-border-color: $gl-color-purple-800; // Used for the border of a promo banner.
+$gl-banner-promo-border-color: $gl-color-purple-700; // Used for the border of a promo banner.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-broadcast-banner-background-color-blue: $gl-color-theme-blue-700; // Used for the background for the blue banner type.
 $gl-broadcast-banner-background-color-dark: $gl-color-neutral-500; // Used for the background for the dark banner type.

package/src/tokens/build/scss/_tokens.scss

@@ -650,9 +650,9 @@ $gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of
 $gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
-$gl-banner-intro-border-color: $gl-color-blue-100; // Used for the border of an info banner.
+$gl-banner-intro-border-color: $gl-color-blue-200; // Used for the border of an info banner.
 $gl-banner-promo-background-color: $gl-color-purple-50; // Used for the background of a promo banner.
-$gl-banner-promo-border-color: $gl-color-purple-100; // Used for the border of a promo banner.
+$gl-banner-promo-border-color: $gl-color-purple-200; // Used for the border of a promo banner.
 $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-broadcast-banner-background-color-blue: $gl-color-theme-blue-700; // Used for the background for the blue banner type.
 $gl-broadcast-banner-background-color-dark: $gl-color-neutral-500; // Used for the background for the dark banner type.

package/src/tokens/contextual/banner.tokens.json

@@ -4,8 +4,8 @@
       "border": {
         "color": {
           "$value": {
-            "default": "{color.blue.100}",
-            "dark": "{color.blue.800}"
+            "default": "{color.blue.200}",
+            "dark": "{color.blue.700}"
           },
           "$type": "color",
           "$description": "Used for the border of an info banner."
@@ -26,8 +26,8 @@
       "border": {
         "color": {
           "$value": {
-            "default": "{color.purple.100}",
-            "dark": "{color.purple.800}"
+            "default": "{color.purple.200}",
+            "dark": "{color.purple.700}"
           },
           "$type": "color",
           "$description": "Used for the border of a promo banner."

package/src/tokens/tokens_table.vue

@@ -1,25 +1,30 @@
 <script>
+import Fuse from 'fuse.js';
 import GlBadge from '../components/base/badge/badge.vue';
 import GlButton from '../components/base/button/button.vue';
 import GlCollapsibleListbox from '../components/base/new_dropdowns/listbox/listbox.vue';
-import GlFormInput from '../components/base/form/form_input/form_input.vue';
+import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_by_type.vue';
 import GlLink from '../components/base/link/link.vue';
 import GlTable from '../components/base/table/table.vue';
+import GlPagination from '../components/base/pagination/pagination.vue';
 import { GlTooltipDirective } from '../directives/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 
 export default {
   name: 'TokensTable',
-  TOKENS_DEFAULT,
-  TOKENS_DARK,
+  tokens: {
+    default: TOKENS_DEFAULT,
+    dark: TOKENS_DARK,
+  },
   components: {
     GlBadge,
     GlButton,
     GlCollapsibleListbox,
-    GlFormInput,
+    GlSearchBoxByType,
     GlLink,
     GlTable,
+    GlPagination,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -36,7 +41,7 @@ export default {
   ],
   data() {
     return {
-      filter: null,
+      filter: '',
       platforms: [
         {
           value: 'name',
@@ -67,16 +72,15 @@ export default {
       ],
       selectedPlatform: 'name',
       selectedMode: 'default',
-      tokens: {
-        default: this.$options.TOKENS_DEFAULT,
-        dark: this.$options.TOKENS_DARK,
-      },
+      currentPage: 1,
+      perPage: 50,
+      totalFilteredItems: 0,
     };
   },
-  computed: {
-    items() {
-      return this.transformTokensToTableRows(this.tokens[this.selectedMode]);
-    },
+  watch: {
+    selectedPlatform: 'refresh',
+    selectedMode: 'refresh',
+    filter: 'resetCurrentPage',
   },
   methods: {
     isColor(type) {
@@ -113,10 +117,44 @@ export default {
         type: token.$type,
         value: token.$value,
         valueLabel: this.getValueLabel(token),
-        deprecated: token.deprecated,
+        deprecated: token.deprecated ? 'deprecated' : '',
         description: token.$description,
       };
     },
+    filterItems(items, filter) {
+      if (!filter) return items;
+
+      const fuse = new Fuse(items, {
+        keys: Object.keys(items[0]),
+        includeScore: true,
+      });
+      const results = fuse.search(filter);
+
+      return results
+        .sort((a, b) => {
+          if (a.item.deprecated && !b.item.deprecated) return 1;
+          if (!a.item.deprecated && b.item.deprecated) return -1;
+          return a.score - b.score;
+        })
+        .map(({ item }) => item);
+    },
+    paginateItems(items, currentPage, perPage) {
+      const start = (currentPage - 1) * perPage;
+      return items.slice(start, start + perPage);
+    },
+    itemsProvider({ currentPage, perPage, filter }) {
+      try {
+        const items = this.transformTokensToTableRows(this.$options.tokens[this.selectedMode]);
+        const filteredItems = this.filterItems(items, filter);
+        this.totalFilteredItems = filteredItems.length;
+        const paginatedFilteredItems = this.paginateItems(filteredItems, currentPage, perPage);
+        return paginatedFilteredItems;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to provide items', e);
+        return [];
+      }
+    },
     transformTokensToTableRows(tokens) {
       const tokensArray = [];
 
@@ -179,6 +217,12 @@ export default {
     copyToClipboard(value) {
       navigator.clipboard.writeText(value);
     },
+    resetCurrentPage() {
+      this.currentPage = 1;
+    },
+    refresh() {
+      this.$root.$emit('bv::refresh::table', 'tokens-table');
+    },
   },
 };
 </script>
@@ -194,7 +238,7 @@ export default {
       >
     </p>
     <div class="gl-mb-5 gl-flex gl-items-center gl-gap-3">
-      <gl-form-input v-model="filter" placeholder="Type to search" />
+      <gl-search-box-by-type v-model="filter" debounce="250" class="gl-grow" />
       <gl-collapsible-listbox
         v-model="selectedPlatform"
         :selected="selectedPlatform"
@@ -209,11 +253,15 @@ export default {
       />
     </div>
     <gl-table
+      id="tokens-table"
       :filter="filter"
-      :items="items"
+      :items="itemsProvider"
       :fields="$options.fields"
       :tbody-tr-attr="(item) => ({ id: item.id })"
+      :current-page="currentPage"
+      :per-page="perPage"
       hover
+      fixed
       stacked="sm"
     >
       <template #cell(description)="{ item: { name, deprecated, description } }">
@@ -240,9 +288,16 @@ export default {
             class="gl-h-5 gl-w-5 gl-rounded-base"
             :style="{ 'background-color': value }"
           ></div>
-          <code class="gl-text-base gl-text-strong">{{ valueLabel }}</code>
+          <code class="gl-min-w-0 gl-text-base gl-text-strong">{{ valueLabel }}</code>
         </div>
       </template>
     </gl-table>
+
+    <gl-pagination
+      v-model="currentPage"
+      align="center"
+      :per-page="perPage"
+      :total-items="totalFilteredItems"
+    />
   </div>
 </template>