@gitlab/ui 123.0.0 → 123.2.0

package/src/components/base/popover/popover.vue

@@ -17,9 +17,9 @@ export default {
   inheritAttrs: false,
   props: {
     cssClasses: {
-      type: Array,
+      type: [Array, String, Object],
       required: false,
-      default: () => [],
+      default: '',
     },
     /**
      * Space-separated triggers for the popover.
@@ -61,7 +61,7 @@ export default {
         'gl-popover',
         this.hasTitle && 'has-title',
         this.showCloseButton && 'has-close-button',
-        ...this.cssClasses,
+        ...this.normalizedCssClasses(this.cssClasses),
       ]
         .filter(Boolean)
         .join(' ');
@@ -71,6 +71,24 @@ export default {
     },
   },
   methods: {
+    /**
+     * `cssClasses can be a string, an array, or an object. This method normalizes it to an array
+     */
+    normalizedCssClasses(cssClasses) {
+      if (Array.isArray(cssClasses)) {
+        return cssClasses;
+      }
+
+      if (typeof cssClasses === 'string') {
+        return cssClasses.trim() ? cssClasses.trim().split(/\s+/) : [];
+      }
+
+      if (cssClasses && typeof cssClasses === 'object') {
+        return Object.keys(cssClasses).filter((key) => cssClasses[key]);
+      }
+
+      return [];
+    },
     close(e) {
       this.$refs[popoverRefName].doClose();
       /**

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -90,9 +90,9 @@ export default {
      * CSS classes to apply to the title popover (gets passed to the `css-classes` prop of the `GlPopover` component).
      */
     titlePopoverClasses: {
-      type: Array,
+      type: [Array, String, Object],
       required: false,
-      default: () => [],
+      default: '',
     },
     /**
      * Set to `true` to show the loading state.

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -85,7 +85,7 @@ export default {
       show-close-button
       :placement="popoverPlacement"
       :target="triggerId"
-      :css-classes="['!gl-z-9999']"
+      css-classes="!gl-z-9999"
       :title="activeType.POPOVER_TITLE"
     >
       <gl-sprintf :message="activeType.POPOVER_CONTENT">

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)"
+    }
   }
 }

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

@@ -44512,5 +44512,206 @@
       ],
       "cssWithValue": "var(--gl-zindex-9999, 9999)"
     }
+  },
+  "boxShadow": {
+    "sm": {
+      "key": "{shadow.sm}",
+      "$value": [
+        {
+          "color": "rgba(05, 05, 06, 0.16)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.16)",
+          "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.16)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "1px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.16)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.16)",
+          "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.16)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.16)",
+          "offsetX": 0,
+          "offsetY": 0,
+          "blur": "2px",
+          "spread": 0
+        },
+        {
+          "color": "rgba(05, 05, 06, 0.16)",
+          "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)"
+    }
   }
 }

package/src/tokens/build/figma/constants.tokens.json

@@ -1876,6 +1876,91 @@
       }
     }
   },
+  "shadow": {
+    "sm": {
+      "$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": []
+      }
+    },
+    "md": {
+      "$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": []
+      }
+    },
+    "lg": {
+      "$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": []
+      }
+    }
+  },
   "spacing-scale": {
     "0": {
       "$value": "0",