@gitlab/ui 122.14.0 → 123.1.0

package/package.json

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

@@ -573,6 +573,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-50); /** Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-200); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
   --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of an info alert. */
@@ -895,7 +896,6 @@
   --gl-highlight-target-background-color: var(--gl-color-blue-50); /** Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action. */
   --gl-highlight-target-border-color: var(--gl-color-blue-200); /** Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states. */
   --gl-icon-color-info: var(--gl-color-blue-700); /** Used for an icon associated with information or help. */
-  --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-100); /** Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-text-color: var(--gl-color-neutral-700); /** Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-icon-color: var(--gl-color-neutral-500); /** Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
@@ -925,6 +925,9 @@
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
   --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
+  --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
+  --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
   --gl-alert-info-title-color: var(--gl-text-color-heading); /** Used for the title color of an info alert. */

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

@@ -573,6 +573,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-800); /** Used for a subtle border in combination with the default background. */
   --gl-border-color-strong: var(--gl-color-neutral-600); /** Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /** Used when a border needs to be present, but not visibly perceived. */
+  --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
   --gl-alert-info-border-top-color: var(--gl-color-blue-400); /** Used for the border color of an info alert. */
@@ -895,7 +896,6 @@
   --gl-highlight-target-background-color: var(--gl-color-blue-950); /** Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action. */
   --gl-highlight-target-border-color: var(--gl-color-blue-700); /** Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states. */
   --gl-icon-color-info: var(--gl-color-blue-200); /** Used for an icon associated with information or help. */
-  --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-status-neutral-background-color: var(--gl-color-neutral-800); /** Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-text-color: var(--gl-color-neutral-200); /** Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
   --gl-status-neutral-icon-color: var(--gl-color-neutral-300); /** Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
@@ -925,6 +925,9 @@
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
   --gl-border-radius-default: var(--gl-border-radius-md);
   --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
+  --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
+  --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
+  --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /** Used for the title color of a neutral alert. */
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /** Used for the background color of a neutral alert. */
   --gl-alert-info-title-color: var(--gl-color-blue-300); /** Used for the title color of an info alert. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -44512,5 +44512,206 @@
       ],
       "cssWithValue": "var(--gl-zindex-9999, 9999)"
     }
+  },
+  "boxShadow": {
+    "sm": {
+      "key": "{shadow.sm}",
+      "$value": [
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": "1px",
+          "blur": "4px",
+          "spread": 0
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/shadow.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": [
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": "1px",
+            "blur": "4px",
+            "spread": 0
+          }
+        ],
+        "$type": "shadow",
+        "$description": "Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{shadow.sm}"
+      },
+      "name": "SHADOW_SM",
+      "attributes": {},
+      "path": [
+        "shadow",
+        "sm"
+      ],
+      "cssWithValue": "var(--gl-shadow-sm)"
+    },
+    "md": {
+      "key": "{shadow.md}",
+      "$value": [
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "1px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": "2px",
+          "blur": "8px",
+          "spread": 0
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Used for surfaces that need boundary definition and appear on hover. For example, popovers.",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/shadow.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": [
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "1px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": "2px",
+            "blur": "8px",
+            "spread": 0
+          }
+        ],
+        "$type": "shadow",
+        "$description": "Used for surfaces that need boundary definition and appear on hover. For example, popovers.",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{shadow.md}"
+      },
+      "name": "SHADOW_MD",
+      "attributes": {},
+      "path": [
+        "shadow",
+        "md"
+      ],
+      "cssWithValue": "var(--gl-shadow-md)"
+    },
+    "lg": {
+      "key": "{shadow.lg}",
+      "$value": [
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.4)",
+          "offsetX": 0,
+          "offsetY": "4px",
+          "blur": "12px",
+          "spread": 0
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Used for large surfaces that present additional context to the user.",
+      "$extensions": {
+        "com.figma.scope": []
+      },
+      "filePath": "src/tokens/constant/shadow.tokens.json",
+      "isSource": true,
+      "original": {
+        "$value": [
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": 0,
+            "blur": "2px",
+            "spread": 0
+          },
+          {
+            "color": "{shadow.color.default}",
+            "offsetX": 0,
+            "offsetY": "4px",
+            "blur": "12px",
+            "spread": 0
+          }
+        ],
+        "$type": "shadow",
+        "$description": "Used for large surfaces that present additional context to the user.",
+        "$extensions": {
+          "com.figma.scope": []
+        },
+        "key": "{shadow.lg}"
+      },
+      "name": "SHADOW_LG",
+      "attributes": {},
+      "path": [
+        "shadow",
+        "lg"
+      ],
+      "cssWithValue": "var(--gl-shadow-lg)"
+    }
   }
 }