@gitlab/ui 112.3.1 → 112.3.3

package/dist/tokens/tokens_story.js

@@ -33,8 +33,8 @@ var script = {
       if (!this.isBackgroundColorStory) return '';
       const textColorVariant = colorFromBackground(value, 4.5);
       return {
-        'gl-text-gray-950': textColorVariant === 'dark',
-        'gl-text-white': textColorVariant === 'light'
+        'gl-text-neutral-950': textColorVariant === 'dark',
+        'gl-text-neutral-0': textColorVariant === 'light'
       };
     },
     getStyle(value) {

package/dist/tokens/tokens_tailwind_table.js

@@ -0,0 +1,278 @@
+import Fuse from 'fuse.js';
+import GlBadge from '../components/base/badge/badge';
+import GlButton from '../components/base/button/button';
+import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_by_type';
+import GlLink from '../components/base/link/link';
+import GlTable from '../components/base/table/table';
+import GlPagination from '../components/base/pagination/pagination';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
+import TOKENS_DEFAULT from './build/docs/tokens-tailwind-docs.json';
+import TOKENS_DARK from './build/docs/tokens-tailwind-docs.dark.json';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'TokensTable',
+  tokens: {
+    default: TOKENS_DEFAULT,
+    dark: TOKENS_DARK
+  },
+  components: {
+    GlBadge,
+    GlButton,
+    GlSearchBoxByType,
+    GlLink,
+    GlTable,
+    GlPagination
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  fields: [{
+    key: 'description',
+    label: 'Description'
+  }, {
+    key: 'value',
+    label: 'Light mode',
+    thClass: 'gl-w-1/5'
+  }, {
+    key: 'value_dark',
+    label: 'Dark mode',
+    thClass: 'gl-w-1/5'
+  }],
+  data() {
+    return {
+      filter: '',
+      currentPage: 1,
+      perPage: 50,
+      totalFilteredItems: 0
+    };
+  },
+  watch: {
+    filter: 'resetCurrentPage'
+  },
+  methods: {
+    isColor(type) {
+      return type === 'color';
+    },
+    isAliasValue(value) {
+      return typeof value === 'string' && value.includes('{');
+    },
+    isAliasObject(value) {
+      return typeof value === 'object' && Object.values(value).some(val => this.isAliasValue(val));
+    },
+    getAliasValueName(value) {
+      if (this.isAliasValue(value)) {
+        return value.slice(1, -1);
+      }
+      return value;
+    },
+    getValueLabel(token) {
+      const value = token.original.$value;
+      if (this.isAliasObject(value)) {
+        return this.getAliasValueName(value.default);
+      }
+      if (this.isAliasValue(value)) {
+        return this.getAliasValueName(value);
+      }
+      return token.$value;
+    },
+    getDarkValueLabel(token) {
+      const value = token.original.$value;
+      if (this.isAliasObject(value)) {
+        return this.getAliasValueName(value.dark);
+      }
+      if (this.isAliasValue(value)) {
+        return this.getAliasValueName(value);
+      }
+      return token.$value;
+    },
+    transformTokenToTableColumns(token) {
+      return {
+        id: token.path.filter(Boolean).join('-'),
+        name: this.formatTokenName('name', token),
+        type: token.$type,
+        value: token.$value,
+        valueLabel: this.getValueLabel(token),
+        darkValueLabel: this.getDarkValueLabel(token),
+        deprecated: token.deprecated ? 'deprecated' : '',
+        description: token.$description,
+        className: this.formatContextToClass(token.context),
+        cssValue: token.cssWithValue,
+        figmaName: this.formatTokenName('figma', token),
+        cssName: this.formatTokenName('css', token),
+        scssName: this.formatTokenName('scss', token)
+      };
+    },
+    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(_ref => {
+        let {
+          item
+        } = _ref;
+        return item;
+      });
+    },
+    paginateItems(items, currentPage, perPage) {
+      const start = (currentPage - 1) * perPage;
+      return items.slice(start, start + perPage);
+    },
+    itemsProvider(_ref2) {
+      let {
+        currentPage,
+        perPage,
+        filter
+      } = _ref2;
+      try {
+        const items = this.transformTokensToTableRows(this.$options.tokens.default);
+        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) {
+      let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      const tokensArray = [];
+      Object.keys(tokens).forEach(key => {
+        const token = tokens[key];
+        if (token.$value) {
+          tokensArray.push(this.transformTokenToTableColumns({
+            ...token,
+            context: [...context, key]
+          }));
+        } else if (key !== 'colors') {
+          tokensArray.push(...this.transformTokensToTableRows(token, [...context, key]));
+        }
+      });
+      tokensArray
+      // Sort tokensArray by id
+      .sort((a, b) => {
+        if (a.id < b.id) {
+          return -1;
+        }
+        if (a.id > b.id) {
+          return 1;
+        }
+        return 0;
+      })
+      // Sort tokensArray so deprecated items are last
+      .sort((a, b) => {
+        if (a.deprecated && !b.deprecated) {
+          return 1;
+        }
+        if (!a.deprecated && b.deprecated) {
+          return -1;
+        }
+        return 0;
+      });
+      return tokensArray;
+    },
+    formatTokenName(format, token) {
+      let figmaPrefix = '';
+      const prefix = token.prefix === false ? '' : 'gl';
+      switch (format) {
+        case 'figma':
+          if (token.filePath.match('contextual')) {
+            figmaPrefix = '🔒/';
+          }
+          if (token.deprecated) {
+            figmaPrefix = '⚠️ DEPRECATED/';
+          }
+          return `${figmaPrefix}${token.path.filter(Boolean).join('-')}`;
+        case 'css':
+          return `var(--${[prefix, ...token.path].filter(Boolean).join('-')})`;
+        case 'scss':
+          return `$${[prefix, ...token.path].filter(Boolean).join('-')}`;
+        default:
+          return token.path.filter(Boolean).join('.');
+      }
+    },
+    formatContextToClass(context) {
+      const cleanContext = context.filter(segment => segment !== 'color');
+      if (cleanContext[0] === 'background') {
+        cleanContext[0] = 'bg';
+      }
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      return `gl-${cleanContext.join('-')}`;
+    },
+    copyToClipboard(value) {
+      navigator.clipboard.writeText(value);
+    },
+    resetCurrentPage() {
+      this.currentPage = 1;
+    },
+    refresh() {
+      this.$root.$emit('bv::refresh::table', 'tokens-table');
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('p',{staticClass:"gl-text-sm gl-text-subtle"},[_vm._v("\n    For full token details, see\n    "),_c('gl-link',{attrs:{"href":"https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json","target":"_blank"}},[_vm._v("https://gitlab.com/gitlab-org/gitlab-ui/-/tree/main/src/tokens/build/json")])],1),_vm._v(" "),_c('div',{staticClass:"gl-mb-5 gl-flex gl-items-center gl-gap-3"},[_c('gl-search-box-by-type',{staticClass:"gl-grow",attrs:{"debounce":"250"},model:{value:(_vm.filter),callback:function ($$v) {_vm.filter=$$v;},expression:"filter"}})],1),_vm._v(" "),_c('gl-table',{attrs:{"id":"tokens-table","filter":_vm.filter,"items":_vm.itemsProvider,"fields":_vm.$options.fields,"tbody-tr-attr":function (item) { return ({ id: item.id }); },"current-page":_vm.currentPage,"per-page":_vm.perPage,"hover":"","fixed":"","stacked":"sm"},scopedSlots:_vm._u([{key:"cell(description)",fn:function(ref){
+      var ref_item = ref.item;
+      var name = ref_item.name;
+      var deprecated = ref_item.deprecated;
+      var description = ref_item.description;
+      var className = ref_item.className;
+      var figmaName = ref_item.figmaName;
+      var cssName = ref_item.cssName;
+      var scssName = ref_item.scssName;
+return [_c('strong',{staticClass:"gl-heading-4 !gl-mb-2 gl-flex gl-items-center gl-gap-3"},[_vm._v("\n        "+_vm._s(name)+"\n        "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy token name value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy token name value to clipboard","size":"small"},on:{"click":function($event){return _vm.copyToClipboard(name)}}}),_vm._v(" "),(deprecated)?_c('gl-badge',{attrs:{"variant":"danger"}},[_vm._v("Deprecated")]):_vm._e()],1),_vm._v(" "),(description)?_c('p',{staticClass:"gl-mt-3 gl-text-subtle"},[_vm._v("\n        "+_vm._s(description)+"\n      ")]):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"!gl-m-0 gl-flex gl-list-none gl-flex-col !gl-p-0"},[_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("Tailwind:")]),_vm._v(" "+_vm._s(className)+"\n            "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy Tailwind class to clipboard","icon":"copy-to-clipboard","aria-label":"Copy Tailwind class to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(className)}}})],1)]),_vm._v(" "),_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("Figma:")]),_vm._v(" "+_vm._s(figmaName)+"\n            "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy Figma value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy Figma value to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(figmaName)}}})],1)]),_vm._v(" "),_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("CSS:")]),_vm._v(" "+_vm._s(cssName)+"\n            "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy CSS value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy CSS value to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(cssName)}}})],1)]),_vm._v(" "),_c('li',[_c('code',{staticClass:"gl-text-base gl-text-strong"},[_c('span',{staticClass:"gl-inline-block gl-w-12"},[_vm._v("SCSS:")]),_vm._v(" "+_vm._s(scssName)+"\n            "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":"Copy SCSS value to clipboard","icon":"copy-to-clipboard","aria-label":"Copy SCSS value to clipboard","size":"small","category":"tertiary"},on:{"click":function($event){return _vm.copyToClipboard(scssName)}}})],1)])])]}},{key:"cell(value)",fn:function(ref){
+      var ref_item = ref.item;
+      var type = ref_item.type;
+      var valueLabel = ref_item.valueLabel;
+      var cssValue = ref_item.cssValue;
+return [_c('div',{staticClass:"gl-flex gl-items-start gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-border gl-h-5 gl-w-5 gl-rounded-base",style:({ 'background-color': cssValue })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-min-w-0 gl-text-base gl-text-strong"},[_vm._v(_vm._s(valueLabel))])])]}},{key:"cell(value_dark)",fn:function(ref){
+      var ref_item = ref.item;
+      var type = ref_item.type;
+      var darkValueLabel = ref_item.darkValueLabel;
+      var cssValue = ref_item.cssValue;
+return [_c('div',{staticClass:"gl-flex gl-items-start gl-gap-3"},[(_vm.isColor(type))?_c('div',{staticClass:"gl-dark-scope gl-border gl-h-5 gl-w-5 gl-rounded-base",style:({ 'background-color': cssValue })}):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-min-w-0 gl-text-base gl-text-strong"},[_vm._v(_vm._s(darkValueLabel))])])]}}])}),_vm._v(" "),_c('gl-pagination',{attrs:{"align":"center","per-page":_vm.perPage,"total-items":_vm.totalFilteredItems},model:{value:(_vm.currentPage),callback:function ($$v) {_vm.currentPage=$$v;},expression:"currentPage"}})],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "112.3.1",
+  "version": "112.3.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -96,7 +96,10 @@
   "resolutions": {
     "chokidar": "^3.5.2",
     "sane": "^5.0.1",
-    "jackspeak": "2.1.1"
+    "jackspeak": "2.1.1",
+    "postcss": "8.5.3",
+    "json5": "2.2.3",
+    "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",
@@ -138,7 +141,7 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.11.3",
     "acorn-walk": "^8.3.2",
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "10.4.21",
     "axe-playwright": "^2.1.0",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
@@ -170,11 +173,11 @@
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
-    "playwright": "^1.51.1",
-    "playwright-core": "^1.51.1",
-    "postcss": "8.4.28",
-    "postcss-loader": "^7.0.2",
-    "postcss-scss": "4.0.4",
+    "playwright": "^1.52.0",
+    "playwright-core": "^1.52.0",
+    "postcss": "8.5.3",
+    "postcss-loader": "8.1.1",
+    "postcss-scss": "4.0.9",
     "prettier": "3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.2.0",
@@ -191,7 +194,7 @@
     "start-server-and-test": "^1.10.6",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^4.1.4",
+    "style-dictionary": "^4.3.3",
     "stylelint": "16.8.1",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.4",

package/src/components/base/nav/nav_item.vue

@@ -1,17 +1,109 @@
 <script>
-import { BNavItem } from '../../../vendor/bootstrap-vue/src/components/nav/nav-item';
+import GlLink from '../link/link.vue';
 
 export default {
   name: 'GlNavItem',
   components: {
-    BNavItem,
+    GlLink,
+  },
+  props: {
+    /**
+     * When set to `true`, places the component in the active state with active styling
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Denotes the target URL of the link for standard links.
+     */
+    href: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Denotes the target route of the link.
+     * When clicked, the value of the to prop will be passed to `router.push()` internally,
+     * so the value can be either a string or a Location descriptor object.
+     */
+    to: {
+      type: [Object, String],
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active.
+     */
+    activeClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * <router-link> prop: Configure the active CSS class applied when the link is active with exact match.
+     */
+    exactActiveClass: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Attributes for the link element
+     */
+    linkAttrs: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    /**
+     * Classes for the link element
+     */
+    linkClasses: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    computedLinkClasses() {
+      const classes = this.linkClasses;
+
+      // the `unstyled` link variant does not do this by itself
+      if (this.disabled) classes.push('disabled');
+      if (this.active) classes.push('active');
+
+      return classes;
+    },
   },
-  inheritAttrs: false,
 };
 </script>
 
 <template>
-  <b-nav-item v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-nav-item>
+  <li class="nav-item">
+    <gl-link
+      class="nav-link"
+      variant="unstyled"
+      :active="active"
+      :class="computedLinkClasses"
+      :disabled="disabled"
+      :href="href"
+      :to="to"
+      :active-class="activeClass"
+      :exact-active-class="exactActiveClass"
+      v-bind="linkAttrs"
+      v-on="$listeners"
+    >
+      <slot></slot>
+    </gl-link>
+  </li>
 </template>

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -2,7 +2,6 @@
 <script>
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
-import isNil from 'lodash/isNil';
 import { stopEvent } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
@@ -84,7 +83,7 @@ export default {
      * Array of selected items values for multi-select and selected item value for single-select
      */
     selected: {
-      type: [Array, String, Number],
+      type: [Array, String, Number, null],
       required: false,
       default: () => [],
     },
@@ -420,6 +419,7 @@ export default {
     selectedIndices() {
       return this.selectedValues
         .map((selected) => this.flattenedOptions.findIndex(({ value }) => value === selected))
+        .filter((index) => index !== -1)
         .sort();
     },
     showList() {
@@ -508,7 +508,7 @@ export default {
           }
           this.selectedValues = [...newSelected];
         } else {
-          this.selectedValues = isNil(newSelected) ? [] : [newSelected];
+          this.selectedValues = [newSelected];
         }
       },
     },

package/src/internal/color_contrast/color_contrast.vue

@@ -21,11 +21,11 @@ export default {
       return HEX_REGEX.test(this.foreground) && HEX_REGEX.test(this.background);
     },
     classes() {
-      if (!this.isValidColorCombination) return 'gl-text-gray-950';
+      if (!this.isValidColorCombination) return 'gl-text-neutral-950';
       const { grade } = this.contrast.level;
       const isFail = grade === 'F';
       const contrastScore = getColorContrast('#fff', this.background).score > 4.5;
-      const textClass = contrastScore ? 'gl-text-white' : 'gl-text-gray-950';
+      const textClass = contrastScore ? 'gl-text-neutral-0' : 'gl-text-neutral-950';
       const failClasses = contrastScore
         ? 'gl-shadow-inner-1-red-300 gl-text-red-300'
         : 'gl-shadow-inner-1-red-500 gl-text-red-500';

package/src/tokens/build/css/tokens.dark.css

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-:root.gl-dark {
+:root.gl-dark, .gl-dark-scope {
   --gl-color-alpha-0: transparent;
   --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
   --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);