@gitlab/ui 112.3.2 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "112.3.2",
+  "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",

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/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';