@gitlab/ui 122.13.0 → 123.0.0

package/dist/tokens/json/tokens.json

@@ -7472,6 +7472,176 @@
       ]
     }
   },
+  "zindex": {
+    "0": {
+      "key": "{zindex.0}",
+      "$value": "0",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "0",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.0}"
+      },
+      "name": "ZINDEX_0",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "0"
+      ]
+    },
+    "1": {
+      "key": "{zindex.1}",
+      "$value": "1",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "1",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.1}"
+      },
+      "name": "ZINDEX_1",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "1"
+      ]
+    },
+    "2": {
+      "key": "{zindex.2}",
+      "$value": "2",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "2",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.2}"
+      },
+      "name": "ZINDEX_2",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "2"
+      ]
+    },
+    "3": {
+      "key": "{zindex.3}",
+      "$value": "3",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "3",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.3}"
+      },
+      "name": "ZINDEX_3",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "3"
+      ]
+    },
+    "4": {
+      "key": "{zindex.4}",
+      "$value": "4",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "4",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.4}"
+      },
+      "name": "ZINDEX_4",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "4"
+      ]
+    },
+    "200": {
+      "key": "{zindex.200}",
+      "$value": "200",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "200",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.200}"
+      },
+      "name": "ZINDEX_200",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "200"
+      ]
+    },
+    "9999": {
+      "key": "{zindex.9999}",
+      "$value": "9999",
+      "$type": "number",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/zindex.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": "9999",
+        "$type": "number",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{zindex.9999}"
+      },
+      "name": "ZINDEX_9999",
+      "attributes": {},
+      "path": [
+        "zindex",
+        "9999"
+      ]
+    }
+  },
   "alert": {
     "border": {
       "radius": {

package/dist/tokens/scss/_tokens.dark.scss

@@ -281,6 +281,13 @@ $gl-spacing-scale-88: 44rem;
 $gl-spacing-scale-px: 1px;
 $gl-spacing-scale-2-5: 0.375rem;
 $gl-spacing-scale-11-5: 4.5rem;
+$gl-zindex-0: 0;
+$gl-zindex-1: 1;
+$gl-zindex-2: 2;
+$gl-zindex-3: 3;
+$gl-zindex-4: 4;
+$gl-zindex-200: 200;
+$gl-zindex-9999: 9999;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

package/dist/tokens/scss/_tokens.scss

@@ -281,6 +281,13 @@ $gl-spacing-scale-88: 44rem;
 $gl-spacing-scale-px: 1px;
 $gl-spacing-scale-2-5: 0.375rem;
 $gl-spacing-scale-11-5: 4.5rem;
+$gl-zindex-0: 0;
+$gl-zindex-1: 1;
+$gl-zindex-2: 2;
+$gl-zindex-3: 3;
+$gl-zindex-4: 4;
+$gl-zindex-200: 200;
+$gl-zindex-9999: 9999;
 $gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -296,6 +296,13 @@ $gl-spacing-scale-88: var(--gl-spacing-scale-88);
 $gl-spacing-scale-px: var(--gl-spacing-scale-px);
 $gl-spacing-scale-2-5: var(--gl-spacing-scale-2-5);
 $gl-spacing-scale-11-5: var(--gl-spacing-scale-11-5);
+$gl-zindex-0: var(--gl-zindex-0);
+$gl-zindex-1: var(--gl-zindex-1);
+$gl-zindex-2: var(--gl-zindex-2);
+$gl-zindex-3: var(--gl-zindex-3);
+$gl-zindex-4: var(--gl-zindex-4);
+$gl-zindex-200: var(--gl-zindex-200);
+$gl-zindex-9999: var(--gl-zindex-9999);
 $gl-alert-border-radius: var(--gl-alert-border-radius);
 $gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
 $gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);

package/dist/tokens/tailwind/tokens.cjs

@@ -23,6 +23,7 @@
   const spacingScale = {"0":"var(--gl-spacing-scale-0, 0)","1":"var(--gl-spacing-scale-1, 0.125rem)","2":"var(--gl-spacing-scale-2, 0.25rem)","3":"var(--gl-spacing-scale-3, 0.5rem)","4":"var(--gl-spacing-scale-4, 0.75rem)","5":"var(--gl-spacing-scale-5, 1rem)","6":"var(--gl-spacing-scale-6, 1.5rem)","7":"var(--gl-spacing-scale-7, 2rem)","8":"var(--gl-spacing-scale-8, 2.5rem)","9":"var(--gl-spacing-scale-9, 3rem)","10":"var(--gl-spacing-scale-10, 3.5rem)","11":"var(--gl-spacing-scale-11, 4rem)","12":"var(--gl-spacing-scale-12, 5rem)","13":"var(--gl-spacing-scale-13, 6rem)","15":"var(--gl-spacing-scale-15, 7.5rem)","18":"var(--gl-spacing-scale-18, 9rem)","20":"var(--gl-spacing-scale-20, 10rem)","26":"var(--gl-spacing-scale-26, 13rem)","28":"var(--gl-spacing-scale-28, 14rem)","30":"var(--gl-spacing-scale-30, 15rem)","31":"var(--gl-spacing-scale-31, 15.5rem)","33":"var(--gl-spacing-scale-33, 16.5rem)","34":"var(--gl-spacing-scale-34, 17rem)","37":"var(--gl-spacing-scale-37, 18.5rem)","48":"var(--gl-spacing-scale-48, 24rem)","62":"var(--gl-spacing-scale-62, 31rem)","75":"var(--gl-spacing-scale-75, 37.5rem)","80":"var(--gl-spacing-scale-80, 40rem)","88":"var(--gl-spacing-scale-88, 44rem)","px":"var(--gl-spacing-scale-px, 1px)","2-5":"var(--gl-spacing-scale-2-5, 0.375rem)","11-5":"var(--gl-spacing-scale-11-5, 4.5rem)"};
   const borderRadius = {"none":"var(--gl-border-radius-none, var(--gl-spacing-scale-0, 0))","xs":"var(--gl-border-radius-xs, var(--gl-spacing-scale-px, 1px))","sm":"var(--gl-border-radius-sm, var(--gl-spacing-scale-1, 0.125rem))","md":"var(--gl-border-radius-md, var(--gl-spacing-scale-2, 0.25rem))","lg":"var(--gl-border-radius-lg, var(--gl-spacing-scale-3, 0.5rem))","xl":"var(--gl-border-radius-xl, var(--gl-spacing-scale-4, 0.75rem))","2xl":"var(--gl-border-radius-2xl, var(--gl-spacing-scale-5, 1rem))","3xl":"var(--gl-border-radius-3xl, var(--gl-spacing-scale-6, 1.5rem))","full":"var(--gl-border-radius-full, 9999px)","default":"var(--gl-border-radius-default, var(--gl-border-radius-md, 0.25rem))","control":"var(--gl-control-border-radius, var(--gl-border-radius-default, 0.25rem))"};
   const opacity = {"0":"var(--gl-opacity-0, 0)","1":"var(--gl-opacity-1, .1)","2":"var(--gl-opacity-2, .2)","3":"var(--gl-opacity-3, .3)","4":"var(--gl-opacity-4, .4)","5":"var(--gl-opacity-5, .5)","6":"var(--gl-opacity-6, .6)","7":"var(--gl-opacity-7, .7)","8":"var(--gl-opacity-8, .8)","9":"var(--gl-opacity-9, .9)","10":"var(--gl-opacity-10, 1)"};
+  const zindexes = {"0":"var(--gl-zindex-0, 0)","1":"var(--gl-zindex-1, 1)","2":"var(--gl-zindex-2, 2)","3":"var(--gl-zindex-3, 3)","4":"var(--gl-zindex-4, 4)","200":"var(--gl-zindex-200, 200)","9999":"var(--gl-zindex-9999, 9999)"};
 
   const colors = {
     inherit: 'inherit',
@@ -105,5 +106,6 @@
     spacing: spacingScale,
     borderRadius,
     opacity,
+    zIndex: zindexes,
   }
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.13.0",
+  "version": "123.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -64,9 +64,7 @@
     "test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}'",
     "test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}'",
     "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}/iframe.html",
-    "translations:collect": "make translations.js",
-    "tailwind-config-viewer:start": "tailwind-config-viewer -o",
-    "tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
+    "translations:collect": "make translations.js"
   },
   "dependencies": {
     "@floating-ui/dom": "1.7.4",
@@ -173,7 +171,6 @@
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^5.0.4",
     "style-loader": "^4",
-    "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",
     "vue": "2.7.16",
     "vue-docgen-loader": "1.5.1",

package/src/components/base/avatar/avatar.vue

@@ -3,22 +3,32 @@
 import isNumber from 'lodash/isNumber';
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
 import { getAvatarChar } from '../../../utils/string_utils';
+import { avatarSizeValidator } from './utils';
 
 const IDENTICON_BG_COUNT = 7;
 
 export default {
   name: 'GlAvatar',
   props: {
+    /**
+     * ID of the entity, used to generate a unique placeholder avatar.
+     */
     entityId: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * Name of the entity, used to generate a unique placeholder avatar.
+     */
     entityName: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Avatar image src.
+     */
     src: {
       type: String,
       required: false,
@@ -32,32 +42,28 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Alt text for the img tag.
+     */
     alt: {
       type: String,
       required: false,
       default: 'avatar',
     },
+    /**
+     * Size of the avatar.
+     * Available sizes are 96, 64, 48, 32, 24, 16.
+     */
     size: {
       type: [Number, Object],
       required: false,
       default: avatarSizeOptions[1],
-      validator: (value) => {
-        const sizes = isNumber(value) ? [value] : Object.values(value);
-
-        const areValidSizes = sizes.every((size) => {
-          const isValidSize = avatarSizeOptions.includes(size);
-
-          if (!isValidSize) {
-            /* eslint-disable-next-line no-console */
-            console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
-          }
-
-          return isValidSize;
-        });
-
-        return areValidSizes;
-      },
+      validator: avatarSizeValidator,
     },
+    /**
+     * Shape of the avatar.
+     * Available shapes are `circle` and `rect`.
+     */
     shape: {
       type: String,
       required: false,

package/src/components/base/avatar/utils.js

@@ -0,0 +1,19 @@
+import isNumber from 'lodash/isNumber';
+import { avatarSizeOptions } from '../../../utils/constants';
+
+export const avatarSizeValidator = (value) => {
+  const sizes = isNumber(value) ? [value] : Object.values(value);
+
+  const areValidSizes = sizes.every((size) => {
+    const isValidSize = avatarSizeOptions.includes(size);
+
+    if (!isValidSize) {
+      /* eslint-disable-next-line no-console */
+      console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
+    }
+
+    return isValidSize;
+  });
+
+  return areValidSizes;
+};

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -1,6 +1,8 @@
 <script>
 import GlAvatar from '../avatar/avatar.vue';
 import GlLink from '../link/link.vue';
+import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
+import { avatarSizeValidator } from '../avatar/utils';
 
 export default {
   name: 'GlAvatarLabeled',
@@ -8,23 +10,34 @@ export default {
     GlAvatar,
     GlLink,
   },
+  inheritAttrs: false,
   props: {
+    /**
+     * Label displayed to the right of the avatar.
+     */
     label: {
       type: String,
       required: true,
     },
+    /**
+     * Sub-label displayed below the label when inlineLabels is false.
+     * Displayed to the right of label when inlineLabels is true.
+     */
     subLabel: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Link for the label.
+     */
     labelLink: {
       type: String,
       required: false,
       default: '',
     },
     /**
-     * Attributes to pass to the label link
+     * Attributes to pass to the label link.
      */
     labelLinkAttrs: {
       type: Object,
@@ -33,16 +46,73 @@ export default {
         return {};
       },
     },
+    /**
+     * Link for the sub-label.
+     */
     subLabelLink: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Display label and sub-label inline.
+     */
     inlineLabels: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * ID of the entity, used to generate a unique placeholder avatar.
+     */
+    entityId: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    /**
+     * Name of the entity, used to generate a unique placeholder avatar.
+     */
+    entityName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Avatar image src.
+     */
+    src: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Show fallback identicon when image fails to load
+     */
+    fallbackOnError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Size of the avatar.
+     * Available sizes are 96, 64, 48, 32, 24, 16.
+     */
+    size: {
+      type: [Number, Object],
+      required: false,
+      default: avatarSizeOptions[1],
+      validator: avatarSizeValidator,
+    },
+    /**
+     * Shape of the avatar.
+     * Available shapes are `circle` and `rect`.
+     */
+    shape: {
+      type: String,
+      required: false,
+      default: avatarShapeOptions.circle,
+    },
   },
   computed: {
     hasLabelLink() {
@@ -71,6 +141,17 @@ export default {
         'inline-labels': this.inlineLabels,
       };
     },
+    avatarPropsAndAttrs() {
+      return {
+        ...this.$attrs,
+        entityId: this.entityId,
+        entityName: this.entityName,
+        src: this.src,
+        fallbackOnError: this.fallbackOnError,
+        size: this.size,
+        shape: this.shape,
+      };
+    },
   },
   methods: {
     onAvatarClick() {
@@ -81,7 +162,7 @@ export default {
 </script>
 <template>
   <div class="gl-avatar-labeled">
-    <gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
+    <gl-avatar v-bind="avatarPropsAndAttrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
     <div class="gl-avatar-labeled-labels !gl-text-left" :class="avatarRowLayoutClass">
       <div class="-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left">
         <gl-link

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

@@ -283,6 +283,13 @@
   --gl-spacing-scale-px: 1px;
   --gl-spacing-scale-2-5: 0.375rem;
   --gl-spacing-scale-11-5: 4.5rem;
+  --gl-zindex-0: 0;
+  --gl-zindex-1: 1;
+  --gl-zindex-2: 2;
+  --gl-zindex-3: 3;
+  --gl-zindex-4: 4;
+  --gl-zindex-200: 200;
+  --gl-zindex-9999: 9999;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */

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

@@ -283,6 +283,13 @@
   --gl-spacing-scale-px: 1px;
   --gl-spacing-scale-2-5: 0.375rem;
   --gl-spacing-scale-11-5: 4.5rem;
+  --gl-zindex-0: 0;
+  --gl-zindex-1: 1;
+  --gl-zindex-2: 2;
+  --gl-zindex-3: 3;
+  --gl-zindex-4: 4;
+  --gl-zindex-200: 200;
+  --gl-zindex-9999: 9999;
   --gl-avatar-fallback-background-color-red: #fcb5aa3d; /** Red background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-purple: #cbbbf23d; /** Purple background for avatar fallback with no particular meaning. */
   --gl-avatar-fallback-background-color-blue: #9dc7f13d; /** Blue background for avatar fallback with no particular meaning. */