@gitlab/ui 128.13.2 → 128.14.0

package/src/scss/storybook.scss

@@ -1,23 +1,22 @@
-@import 'tokens';
+@import "tokens";
 
-@import 'functions';
-@import 'variables';
+@import "functions";
+@import "variables";
 
-@import '../vendor/bootstrap/scss/functions';
-@import '../vendor/bootstrap/scss/variables';
-@import '../vendor/bootstrap/scss/mixins';
+@import "../vendor/bootstrap/scss/functions";
+@import "../vendor/bootstrap/scss/variables";
+@import "../vendor/bootstrap/scss/mixins";
 
-@import 'mixins';
+@import "mixins";
 
-@import 'bootstrap';
-@import 'bootstrap_vue';
+@import "bootstrap";
+@import "bootstrap_vue";
 
+@import "fonts";
 
-@import 'fonts';
-
-@import 'body';
-@import 'typography';
-@import 'components';
+@import "body";
+@import "typography";
+@import "components";
 
 /**
  * Custom padding for docs pages. This improves the integration in Pajamas pages.
@@ -36,4 +35,4 @@
 // Note that adding `.css` here would break the inline import.
 // These utilities are imported last, because that's
 // what we do in GitLab as well.
-@import 'tailwind';
+@import "tailwind";

package/src/scss/tokens.scss

@@ -1,2 +1,2 @@
-@import '../tokens/build/css/tokens';
-@import '../tokens/build/css/tokens.dark';
+@import "../tokens/build/css/tokens";
+@import "../tokens/build/css/tokens.dark";

package/src/scss/typescale/_index.scss

@@ -1,4 +1,4 @@
-@mixin gl-typescale-ui($selector: 'body') {
+@mixin gl-typescale-ui($selector: "body") {
   #{$selector} {
     @apply gl-text-base;
     @apply gl-text-default;

package/src/scss/typescale/typescale_demo.scss

@@ -1,7 +1,7 @@
-@import '../variables';
-@import '../mixins';
-@import './index';
+@import "../variables";
+@import "../mixins";
+@import "./index";
 
 @include gl-typescale-ui;
 
-@import '../tailwind';
+@import "../tailwind";

package/src/scss/typography.scss

@@ -1,5 +1,15 @@
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   @apply gl-text-heading;
 }
 
@@ -25,7 +35,7 @@ pre {
 }
 
 kbd {
-  @apply gl-inline-block gl-text-default gl-bg-subtle gl-border gl-border-b-strong gl-leading-1;
+  @apply gl-border gl-inline-block gl-border-b-strong gl-bg-subtle gl-leading-1 gl-text-default;
   font-size: 87.5%;
   padding: 3px 5px;
   vertical-align: unset;
@@ -35,15 +45,15 @@ kbd {
 }
 
 .table {
-  @apply gl-w-full gl-mb-3 gl-text-default gl-bg-transparent;
+  @apply gl-mb-3 gl-w-full gl-bg-transparent gl-text-default;
 
   th,
   td {
-    @apply gl-p-4 gl-align-top gl-border-t;
+    @apply gl-border-t gl-p-4 gl-align-top;
   }
 
   thead th {
-    @apply gl-align-bottom gl-border-b gl-border-b-2;
+    @apply gl-border-b gl-border-b-2 gl-align-bottom;
   }
 
   tbody + tbody {

package/src/scss/variables.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
-@import 'functions';
-@import '../tokens/build/scss/tokens';
+@use "sass:map";
+@import "functions";
+@import "../tokens/build/scss/tokens";
 
 // Layout
 $grid-size: px-to-rem(8px);
@@ -45,20 +45,33 @@ $gl-font-weight-semibold: 500;
 $gl-font-weight-bold: 600;
 
 $gl-font-weights: (
-  'normal': $gl-font-weight-normal,
-  'bold': $gl-font-weight-bold,
+  "normal": $gl-font-weight-normal,
+  "bold": $gl-font-weight-bold,
 );
 
 // Fonts
-$gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
-  'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;
-$gl-regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
-  Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$gl-monospace-font:
+  "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+  "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace !default;
+$gl-regular-font:
+  "GitLab Sans",
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  Roboto,
+  "Noto Sans",
+  Ubuntu,
+  Cantarell,
+  "Helvetica Neue",
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji" !default;
 
 $gl-fonts: (
-  'monospace': $gl-monospace-font,
-  'regular': $gl-regular-font,
+  "monospace": $gl-monospace-font,
+  "regular": $gl-regular-font,
 );
 
 // New UI type scale
@@ -195,9 +208,11 @@ $gl-easing-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
 $outline-offset: 1px;
 $outline-width: 2px;
 $outline: #{$outline-offset + $outline-width};
-$focus-ring: 0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
+$focus-ring:
+  0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
   0 0 0 #{$outline-offset + $outline-width} var(--gl-focus-ring-outer-color);
-$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
+$focus-ring-inset:
+  inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
   inset 0 0 0 $outline-offset var(--gl-focus-ring-inner-color);
 $focus-ring-outline: $outline-width solid var(--gl-focus-ring-outer-color);
 

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

@@ -1129,7 +1129,7 @@
   --gl-button-selected-background-color-hover: var(--gl-button-default-primary-background-color-hover); /** Used for the background of a selected button in the hover state. */
   --gl-button-selected-background-color-active: var(--gl-button-default-primary-background-color-active); /** Used for the background of a selected button in the active state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */
-  --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
+  --gl-card-border-radius: var(--gl-border-radius-xl); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
   --gl-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */

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

@@ -1136,7 +1136,7 @@
   --gl-button-link-border-radius: var(--gl-border-radius-md); /** Used for link button border radius. */
   --gl-button-link-text-color-default: var(--gl-text-color-link); /** Used for the text of a link button in the default state. */
   --gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-hover); /** Used for the border of a selected button in the focus state. */
-  --gl-card-border-radius: var(--gl-border-radius-lg); /** Used for card border radius. */
+  --gl-card-border-radius: var(--gl-border-radius-xl); /** Used for card border radius. */
   --gl-chart-axis-text-color: var(--gl-text-color-subtle); /** Used in charts for the text color of axis titles and labels. */
   --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /** Used for the datepicker date text color state indicators. */
   --gl-drawer-border-radius: var(--gl-border-radius-2xl); /** Used for drawer border radius. */

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

@@ -3692,7 +3692,7 @@
     }
   },
   "font-family-regular": {
-    "$value": "var(--default-regular-font, 'GitLab Sans'), 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+    "$value": "GitLab Sans",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [
@@ -3701,7 +3701,7 @@
     }
   },
   "font-family-monospace": {
-    "$value": "var(--default-mono-font, 'GitLab Mono'), 'GitLab Mono', 'JetBrains Mono', Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
+    "$value": "GitLab Mono",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [

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

@@ -3695,7 +3695,7 @@
     }
   },
   "font-family-regular": {
-    "$value": "var(--default-regular-font, 'GitLab Sans'), 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+    "$value": "GitLab Sans",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [
@@ -3704,7 +3704,7 @@
     }
   },
   "font-family-monospace": {
-    "$value": "var(--default-mono-font, 'GitLab Mono'), 'GitLab Mono', 'JetBrains Mono', Menlo, 'DejaVu Sans Mono', 'Liberation Mono', Consolas, 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace",
+    "$value": "GitLab Mono",
     "$type": "fontFamily",
     "$extensions": {
       "com.figma.scopes": [

package/src/tokens/build/js/tokens.dark.js

@@ -744,7 +744,7 @@ export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#89888d';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = 'rgba(137, 136, 141, 0.16)';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = 'rgba(0, 0, 0, 0)';
 export const GL_BUTTON_COUNT_BACKGROUND_COLOR = 'rgba(255, 255, 255, 0.16)';
-export const GL_CARD_BORDER_RADIUS = '0.5rem';
+export const GL_CARD_BORDER_RADIUS = '0.75rem';
 export const GL_CHART_AXIS_POINTER_COLOR = '#bfbfc3';
 export const GL_CHART_AXIS_LINE_COLOR = '#4c4b51';
 export const GL_CHART_AXIS_TEXT_COLOR = '#bfbfc3';

package/src/tokens/build/js/tokens.js

@@ -744,7 +744,7 @@ export const GL_BUTTON_DISABLED_FOREGROUND_COLOR = '#737278';
 export const GL_BUTTON_DISABLED_BACKGROUND_COLOR = '#fbfafd';
 export const GL_BUTTON_DISABLED_BORDER_COLOR = '#dcdcde';
 export const GL_BUTTON_COUNT_BACKGROUND_COLOR = 'rgba(5, 5, 6, 0.08)';
-export const GL_CARD_BORDER_RADIUS = '0.5rem';
+export const GL_CARD_BORDER_RADIUS = '0.75rem';
 export const GL_CHART_AXIS_POINTER_COLOR = '#626168';
 export const GL_CHART_AXIS_LINE_COLOR = '#bfbfc3';
 export const GL_CHART_AXIS_TEXT_COLOR = '#626168';

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

@@ -21063,7 +21063,7 @@
     "border": {
       "radius": {
         "key": "{card.border.radius}",
-        "$value": "0.5rem",
+        "$value": "0.75rem",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {
@@ -21074,7 +21074,7 @@
         "filePath": "src/tokens/contextual/card.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.lg}",
+          "$value": "{border.radius.xl}",
           "$type": "dimension",
           "$description": "Used for card border radius.",
           "$extensions": {

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

@@ -21063,7 +21063,7 @@
     "border": {
       "radius": {
         "key": "{card.border.radius}",
-        "$value": "0.5rem",
+        "$value": "0.75rem",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {
@@ -21074,7 +21074,7 @@
         "filePath": "src/tokens/contextual/card.tokens.json",
         "isSource": true,
         "original": {
-          "$value": "{border.radius.lg}",
+          "$value": "{border.radius.xl}",
           "$type": "dimension",
           "$description": "Used for card border radius.",
           "$extensions": {

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

@@ -1134,7 +1134,7 @@ $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; //
 $gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
-$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
+$gl-card-border-radius: $gl-border-radius-xl; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-drawer-border-radius: $gl-border-radius-2xl; // Used for drawer border radius.

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

@@ -1127,7 +1127,7 @@ $gl-button-selected-foreground-color-default: $gl-button-default-primary-foregro
 $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
 $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
-$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
+$gl-card-border-radius: $gl-border-radius-xl; // Used for card border radius.
 $gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-drawer-border-radius: $gl-border-radius-2xl; // Used for drawer border radius.

package/src/tokens/contextual/card.tokens.json

@@ -2,7 +2,7 @@
   "card": {
     "border": {
       "radius": {
-        "$value": "{border.radius.lg}",
+        "$value": "{border.radius.xl}",
         "$type": "dimension",
         "$description": "Used for card border radius.",
         "$extensions": {

package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -10,7 +10,7 @@ import { concat } from '../../../utils/array'
 import { getComponentConfig } from '../../../utils/config'
 import { requestAF } from '../../../utils/dom'
 import { getRootEventName, getRootActionEventName } from '../../../utils/events'
-import { isUndefined } from '../../../utils/inspect'
+import { isUndefined, isFunction } from '../../../utils/inspect'
 import {
   assign,
   defineProperties,
@@ -24,6 +24,7 @@ import { pluginFactory } from '../../../utils/plugins'
 import { warn, warnNotClient } from '../../../utils/warn'
 import { createNewChildComponent } from '../../../utils/create-new-child-component'
 import { getEventRoot } from '../../../utils/get-event-root'
+import { isVue3 } from '../../../vue'
 import { BToast, props as toastProps } from '../toast'
 
 // --- Constants ---
@@ -129,9 +130,24 @@ const plugin = Vue => {
     })
     // Convert certain props to slots
     keys(propsToSlots).forEach(prop => {
-      const value = props[prop]
+      let value = props[prop]
       if (!isUndefined(value)) {
-        toast.$slots[propsToSlots[prop]] = concat(value)
+        if (isVue3(toast)) {
+          // In Vue 3 compat, $slots is readonly. Set slots on the internal
+          // instance as functions so VNodes are available during the
+          // component's render cycle. When the value is a render function,
+          // defer calling it until the slot is evaluated during render so
+          // that $createElement runs within an active component context.
+          const slotFn = isFunction(value)
+            ? () => concat(value(toast.$createElement))
+            : () => concat(value)
+          toast.$.slots[propsToSlots[prop]] = slotFn
+        } else {
+          if (isFunction(value)) {
+            value = value(toast.$createElement)
+          }
+          toast.$slots[propsToSlots[prop]] = concat(value)
+        }
       }
     })
     // Create a mount point (a DIV) and mount it (which triggers the show)

package/src/vendor/bootstrap-vue/src/components/toast/toast.js

@@ -259,7 +259,12 @@ export const BToast = /*#__PURE__*/ extend({
       }
 
       const { computedToaster } = this
-      if (!Wormhole.hasTarget(computedToaster)) {
+      const hasTarget = Wormhole.hasTarget(computedToaster)
+      const hasDOM = document.getElementById(computedToaster)
+      if (!hasTarget || !hasDOM) {
+        if (hasTarget && !hasDOM) {
+          Wormhole.unregisterTarget(computedToaster)
+        }
         const div = document.createElement('div')
         document.body.appendChild(div)