@gitlab/ui 112.1.2 → 112.2.1

package/src/tokens/build/json/tokens.json

@@ -3907,19 +3907,14 @@
     "12": {
       "$value": "0.75rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "12px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "0.75rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_12",
+      "attributes": {},
       "path": [
         "line-height",
         "12"
@@ -3928,19 +3923,14 @@
     "16": {
       "$value": "1rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "16px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "1rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_16",
+      "attributes": {},
       "path": [
         "line-height",
         "16"
@@ -3949,19 +3939,14 @@
     "20": {
       "$value": "1.25rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "20px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "1.25rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_20",
+      "attributes": {},
       "path": [
         "line-height",
         "20"
@@ -3970,19 +3955,14 @@
     "24": {
       "$value": "1.5rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "24px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "1.5rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_24",
+      "attributes": {},
       "path": [
         "line-height",
         "24"
@@ -3991,19 +3971,14 @@
     "28": {
       "$value": "1.75rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "28px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "1.75rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_28",
+      "attributes": {},
       "path": [
         "line-height",
         "28"
@@ -4012,19 +3987,14 @@
     "32": {
       "$value": "2rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "32px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "2rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_32",
+      "attributes": {},
       "path": [
         "line-height",
         "32"
@@ -4033,19 +4003,14 @@
     "36": {
       "$value": "2.25rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "36px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "2.25rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_36",
+      "attributes": {},
       "path": [
         "line-height",
         "36"
@@ -4054,19 +4019,14 @@
     "42": {
       "$value": "2.625rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "42px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "2.625rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_42",
+      "attributes": {},
       "path": [
         "line-height",
         "42"
@@ -4075,19 +4035,14 @@
     "44": {
       "$value": "2.75rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "44px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "2.75rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_44",
+      "attributes": {},
       "path": [
         "line-height",
         "44"
@@ -4096,19 +4051,14 @@
     "52": {
       "$value": "3.25rem",
       "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      },
       "filePath": "src/tokens/constant/line_height.tokens.json",
       "isSource": true,
       "original": {
-        "$value": "52px",
-        "$type": "dimension",
-        "attributes": {
-          "category": "size"
-        }
+        "$value": "3.25rem",
+        "$type": "dimension"
       },
       "name": "LINE_HEIGHT_52",
+      "attributes": {},
       "path": [
         "line-height",
         "52"
@@ -12420,7 +12370,7 @@
       },
       "width": {
         "default": {
-          "$value": "0.125rem",
+          "$value": "2",
           "$type": "dimension",
           "$description": "Default stroke width to define shape and provide essential detail.",
           "filePath": "src/tokens/contextual/illustration.tokens.json",
@@ -12808,7 +12758,7 @@
         },
         "width": {
           "default": {
-            "$value": "0.125rem",
+            "$value": "2",
             "$type": "dimension",
             "$description": "Default stroke width to define shape and provide essential detail in isometric illustration.",
             "filePath": "src/tokens/contextual/illustration.tokens.json",

package/src/tokens/build/scss/_tokens.dark.scss

@@ -245,7 +245,7 @@ $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
 $gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
-$gl-illustration-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 1.5; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #423f4f; // Default fill color for an element where specific meaning or emphasis is not required.
 $gl-illustration-status-fill-color-neutral: #6f6796; // Used as a fill to convey a concept which is neither positive or negative.
 $gl-illustration-status-fill-color-success: #3b8581; // Used as a fill to convey a success or active concept, has a positive connotation.
@@ -260,7 +260,7 @@ $gl-illustration-accent-fill-color-orange: #aa563a; // Used to add orange to a s
 $gl-illustration-accent-fill-color-teal: #3b8581; // Used to add teal to a secondary element and supporting surface.
 $gl-illustration-base-fill-color: #32303c; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
 $gl-illustration-isometric-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail in isometric illustration.
-$gl-illustration-isometric-stroke-width-default: 0.09375rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 1.5; // Default stroke width to define shape and provide essential detail in isometric illustration.
 $gl-illustration-isometric-glyph-top-fill-color: #5a566c; // Used for the top face of isometric text and number elements.
 $gl-illustration-isometric-glyph-front-fill-color: #423f4f; // Used for the front face of isometric text and number elements.
 $gl-illustration-isometric-glyph-side-fill-color: #373441; // Used for the side face of isometric text and number elements.

package/src/tokens/build/scss/_tokens.scss

@@ -245,7 +245,7 @@ $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
 $gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
-$gl-illustration-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail.
+$gl-illustration-stroke-width-default: 2; // Default stroke width to define shape and provide essential detail.
 $gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
 $gl-illustration-status-fill-color-neutral: #aea5d6; // Used as a fill to convey a concept which is neither positive or negative.
 $gl-illustration-status-fill-color-success: #6fdac9; // Used as a fill to convey a success or active concept, has a positive connotation.
@@ -260,7 +260,7 @@ $gl-illustration-accent-fill-color-orange: #ff9d73; // Used to add orange to a s
 $gl-illustration-accent-fill-color-teal: #6fdac9; // Used to add teal to a secondary element and supporting surface.
 $gl-illustration-base-fill-color: #e7e4f2; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
 $gl-illustration-isometric-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail in isometric illustration.
-$gl-illustration-isometric-stroke-width-default: 0.125rem; // Default stroke width to define shape and provide essential detail in isometric illustration.
+$gl-illustration-isometric-stroke-width-default: 2; // Default stroke width to define shape and provide essential detail in isometric illustration.
 $gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; // Used for the top face of isometric text and number elements.
 $gl-illustration-isometric-glyph-front-fill-color: #fff; // Used for the front face of isometric text and number elements.
 $gl-illustration-isometric-glyph-side-fill-color: #6fdac9; // Used for the side face of isometric text and number elements.

package/src/tokens/constant/line_height.tokens.json

@@ -1,74 +1,44 @@
 {
   "line-height": {
     "12": {
-      "$value": "12px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "0.75rem",
+      "$type": "dimension"
     },
     "16": {
-      "$value": "16px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "1rem",
+      "$type": "dimension"
     },
     "20": {
-      "$value": "20px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "1.25rem",
+      "$type": "dimension"
     },
     "24": {
-      "$value": "24px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "1.5rem",
+      "$type": "dimension"
     },
     "28": {
-      "$value": "28px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "1.75rem",
+      "$type": "dimension"
     },
     "32": {
-      "$value": "32px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "2rem",
+      "$type": "dimension"
     },
     "36": {
-      "$value": "36px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "2.25rem",
+      "$type": "dimension"
     },
     "42": {
-      "$value": "42px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "2.625rem",
+      "$type": "dimension"
     },
     "44": {
-      "$value": "44px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "2.75rem",
+      "$type": "dimension"
     },
     "52": {
-      "$value": "52px",
-      "$type": "dimension",
-      "attributes": {
-        "category": "size"
-      }
+      "$value": "3.25rem",
+      "$type": "dimension"
     }
   }
 }

package/src/utils/charts/constants.js

@@ -1,3 +1,5 @@
+import { translate } from '../i18n';
+
 /**
  * As of %12.10 all annotations are added as a decorations
  * by piggybacking a scatter series. The series should
@@ -39,10 +41,10 @@ export const LEGEND_LAYOUT_TABLE = 'table';
 /**
  * Default values for the chart legend field labels
  */
-export const LEGEND_AVERAGE_TEXT = 'Avg';
-export const LEGEND_CURRENT_TEXT = 'Current';
-export const LEGEND_MIN_TEXT = 'Min';
-export const LEGEND_MAX_TEXT = 'Max';
+export const LEGEND_AVERAGE_TEXT = () => translate('GlChartLegend.average', 'Avg');
+export const LEGEND_CURRENT_TEXT = () => translate('GlChartLegend.current', 'Current');
+export const LEGEND_MIN_TEXT = () => translate('GlChartLegend.min', 'Min');
+export const LEGEND_MAX_TEXT = () => translate('GlChartLegend.max', 'Max');
 
 /**
  * These arrow symbols are used as markPoints under the annotations lines

package/src/vendor/bootstrap-vue/src/components/index.scss

@@ -4,7 +4,6 @@
 @import "form-radio/index";
 @import "input-group/index";
 @import "modal/index";
-@import "nav/index";
 @import "popover/index";
 @import "table/index";
 @import "toast/index";

package/src/vendor/bootstrap-vue/src/components/nav/README.md

@@ -26,7 +26,6 @@ nav.
 `<b-nav>` supports the following child components:
 
 - `<b-nav-item>` for actionable links (or router-links)
-- `<b-nav-item-dropdown>` for dropdowns
 - `<b-nav-text>` for plain text content
 - `<b-nav-form>` for inline forms
 
@@ -144,86 +143,6 @@ and `right`.
 <!-- b-nav-alignment.vue -->
 ```
 
-## Dropdown support
-
-Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
-
-```html
-<div>
-  <b-nav pills>
-    <b-nav-item active>Active</b-nav-item>
-    <b-nav-item>Link</b-nav-item>
-    <b-nav-item-dropdown
-      id="my-nav-dropdown"
-      text="Dropdown"
-      toggle-class="nav-link-custom"
-      right
-    >
-      <b-dropdown-item>One</b-dropdown-item>
-      <b-dropdown-item>Two</b-dropdown-item>
-      <b-dropdown-divider></b-dropdown-divider>
-      <b-dropdown-item>Three</b-dropdown-item>
-    </b-nav-item-dropdown>
-  </b-nav>
-</div>
-
-<!-- b-nav-item-dropdown.vue -->
-```
-
-Sometimes you want to add your own class names to the generated dropdown toggle button, that by
-default have the classes `nav-link` and `dropdown-toggle`. Use the `toggle-class` prop to add them
-(like above) which will render HTML similar to:
-
-```html
-<li id="my-nav-dropdown" class="nav-item b-nav-dropdown dropdown">
-  <a
-    role="button"
-    href="#my-nav-dropdown"
-    id="my-nav-dropdown__BV_button_"
-    aria-haspopup="true"
-    aria-expanded="false"
-    class="nav-link dropdown-toggle nav-link-custom"
-  ></a>
-  ...
-</li>
-```
-
-Refer to [`<b-dropdown>`](/docs/components/dropdown) for a list of supported sub-components.
-
-### Optionally scoped default slot
-
-The dropdown default slot is optionally scoped with the following scope available:
-
-| Property or Method | Description                                                                                                                      |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
-| `hide()`           | Can be used to close the dropdown menu. Accepts an optional boolean argument, which if `true` returns focus to the toggle button |
-
-### Lazy dropdown
-
-By default, `<b-nav-item-dropdown>` renders the menu contents in the DOM even when the menu is not
-shown. When there are a large number of dropdowns rendered on the same page, performance could be
-impacted due to larger overall memory utilization. You can instruct `<b-nav-item-dropdown>` to
-render the menu contents only when it is shown by setting the `lazy` prop to true.
-
-### Dropdown placement
-
-Use the dropdown props `right`, `dropup`, `dropright`, `dropleft`, `no-flip`, and `offset` to
-control the positioning of `<b-nav-item-dropdown>`.
-
-Refer to the [`<b-dropdown>` positioning section](/docs/components/dropdown#positioning) for details
-on the effects and usage of these props.
-
-### Dropdown implementation note
-
-Note that the toggle button is actually rendered as a link `<a>` tag with `role="button"` for
-styling purposes, and typically has the `href` set to `#` unless an ID is provided via the `id`
-prop.
-
-The toggle will prevent scroll-top-top behaviour (via JavaScript) when clicking the toggle link. In
-some cases when using SSR, and the user clicks the toggle button _before_ Vue has had a chance to
-hydrate the component, the page will scroll to top. In these cases, simply providing a unique ID via
-the `id` prop will prevent the unwanted scroll-to-top behaviour.
-
 ## Nav text content
 
 Use the `<b-nav-text>` child component to place plain text content into the nav:
@@ -425,10 +344,6 @@ most logical parent container of `<b-nav>`, or wrap a `<nav>` element around `<b
 add the role to the `<b-nav>` itself, as this would prevent it from being announced as an actual
 list by assistive technologies.
 
-When using a `<b-nav-item-dropdown>` in your `<b-nav>`, be sure to assign a unique `id` prop value
-to the `<b-nav-item-dropdown>` so that the appropriate `aria-*` attributes can be automatically
-generated.
-
 ### Tabbed interface accessibility
 
 Note that navigation bars, even if visually styled as tabs, should **not** be given
@@ -438,21 +353,9 @@ described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-p
 See [`<gl-tabs>`](?path=/docs/base-tabs--docs) for dynamic tabbed interfaces that are compliant with
 WAI ARIA.
 
-Tabbed interfaces should avoid using dropdown menus, as this causes both usability and accessibility
-issues:
-
-- From a usability perspective, the fact that the currently displayed tab’s trigger element is not
-  immediately visible (as it’s inside the closed dropdown menu) can cause confusion.
-- From an accessibility point of view, there is currently no sensible way to map this sort of
-  construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to
-  users of assistive technologies.
-
 ## See also
 
-- [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content, even via dropdown
-  menus.
-- [`<b-dropdown>`](/docs/components/dropdown) for sub-components that you can place inside
-  `<b-nav-item-dropdown>`
+- [tabs](?path=/docs/base-tabs--docs) to create tabbable panes of local content.
 - [Router Link Support reference](?path=/docs/base-link--docs#router-link-support) for information
   about router-link specific props available on `<b-nav-item>`
 

package/src/vendor/bootstrap-vue/src/components/nav/index.js

@@ -1,5 +1,4 @@
 import { BNav } from './nav'
 import { BNavItem } from './nav-item'
-import { BNavItemDropdown } from './nav-item-dropdown'
 
-export { BNav, BNavItem, BNavItemDropdown }
+export { BNav, BNavItem }

package/src/vendor/bootstrap-vue/src/components/nav/package.json

@@ -67,123 +67,6 @@
             "description": "Content to place in the nav item"
           }
         ]
-      },
-      {
-        "component": "BNavItemDropdown",
-        "aliases": [
-          "BNavItemDd",
-          "BNavDropdown",
-          "BNavDd"
-        ],
-        "props": [
-          {
-            "prop": "boundary",
-            "version": "2.4.0",
-            "description": "The boundary constraint of the menu: 'scrollParent', 'window', 'viewport', or a reference to an HTMLElement."
-          },
-          {
-            "prop": "dropleft",
-            "description": "When set, positions the menu to the left of the button"
-          },
-          {
-            "prop": "dropright",
-            "description": "When set, positions the menu to the right of the button"
-          },
-          {
-            "prop": "dropup",
-            "description": "When set, positions the menu on the top of the button"
-          },
-          {
-            "prop": "html",
-            "description": "HTML string to place in the toggle element (link)",
-            "xss": true
-          },
-          {
-            "prop": "lazy",
-            "description": "When set, will only mount the menu content into the DOM when the menu is open"
-          },
-          {
-            "prop": "menuClass",
-            "description": "CSS class (or classes) to add to the menu container"
-          },
-          {
-            "prop": "noCaret",
-            "description": "Hide the caret indicator on the toggle element (link)"
-          },
-          {
-            "prop": "noFlip",
-            "description": "Prevent the menu from auto flipping positions"
-          },
-          {
-            "prop": "popperOpts",
-            "description": "Additional configuration to pass to Popper.js"
-          },
-          {
-            "prop": "right",
-            "description": "Align the right edge of the menu with the right of the button"
-          },
-          {
-            "prop": "text",
-            "description": "Text to place in the toggle element (link)"
-          },
-          {
-            "prop": "toggleClass",
-            "description": "CSS class (or classes) to add to the toggle element (link)"
-          }
-        ],
-        "events": [
-          {
-            "event": "hidden",
-            "description": "Emitted when dropdown is hidden"
-          },
-          {
-            "event": "hide",
-            "description": "Emitted just before dropdown is hidden. Cancelable",
-            "args": [
-              {
-                "arg": "bvEvent",
-                "type": "BvEvent",
-                "description": "BvEvent object. Call bvEvent.preventDefault() to cancel hide"
-              }
-            ]
-          },
-          {
-            "event": "show",
-            "description": "Emitted just before dropdown is shown. Cancelable",
-            "args": [
-              {
-                "arg": "bvEvent",
-                "type": "BvEvent",
-                "description": "BvEvent object. Call bvEvent.preventDefault() to cancel show"
-              }
-            ]
-          },
-          {
-            "event": "shown",
-            "description": "Emitted when dropdown is shown"
-          },
-          {
-            "event": "toggle",
-            "description": "Emitted when toggle button is clicked"
-          }
-        ],
-        "slots": [
-          {
-            "name": "button-content",
-            "description": "Can be used to implement custom text with icons and more styling"
-          },
-          {
-            "name": "default",
-            "description": "Optionally scoped default slot for dropdown menu content",
-            "scope": [
-              {
-                "prop": "hide",
-                "type": "Function",
-                "description": "Can be used to close the dropdown menu. Accepts an optional boolean argument, which if true returns focus to the toggle button"
-              }
-            ]
-          }
-        ]
       }
     ]
   }