@gitlab/ui 103.6.0 → 103.7.0

package/dist/tokens/build/js/tokens.dark.js

@@ -85,7 +85,7 @@ const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
 const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
 const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
 const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-const GL_BORDER_COLOR_SUBTLE = '#28272d';
+const GL_BORDER_COLOR_SUBTLE = '#3a383f';
 const GL_BORDER_COLOR_STRONG = '#626168';
 const GL_BORDER_COLOR_SECTION = '#18171d';
 const GL_BORDER_COLOR_TRANSPARENT = 'transparent';

package/dist/tokens/css/tokens.dark.css

@@ -460,7 +460,7 @@
   --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
   --gl-border-color-default: var(--gl-color-neutral-700); /* Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
+  --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-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */

package/dist/tokens/js/tokens.dark.js

@@ -85,7 +85,7 @@ export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
 export const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
 export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-export const GL_BORDER_COLOR_SUBTLE = '#28272d';
+export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
 export const GL_BORDER_COLOR_STRONG = '#626168';
 export const GL_BORDER_COLOR_SECTION = '#18171d';
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';

package/dist/tokens/json/tokens.dark.json

@@ -1976,7 +1976,7 @@
         ]
       },
       "subtle": {
-        "$value": "#28272d",
+        "$value": "#3a383f",
         "$type": "color",
         "$description": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

package/dist/tokens/json/tokens.json

@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

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

@@ -458,7 +458,7 @@ $gl-background-color-overlap: $gl-color-neutral-900; // Used for components, lik
 $gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
-$gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
+$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.

package/dist/utils/stories_utils.js

@@ -9,5 +9,20 @@ const disableControls = function () {
     }
   }]));
 };
+const getA11yParameters = function () {
+  let {
+    skipRules = [],
+    temporarySkipRules = []
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const skippedRules = skipRules.concat(temporarySkipRules).map(id => ({
+    id,
+    enabled: false
+  }));
+  return {
+    config: {
+      rules: skippedRules
+    }
+  };
+};
 
-export { disableControls };
+export { disableControls, getA11yParameters };

package/dist/vendor/bootstrap-vue/src/components/collapse/collapse.js

@@ -3,7 +3,6 @@ import { NAME_COLLAPSE } from '../../constants/components';
 import { EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN } from '../../constants/events';
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props';
 import { SLOT_NAME_DEFAULT } from '../../constants/slots';
-import { hasClass, removeClass, getCS, addClass, matches, closest } from '../../utils/dom';
 import { getRootActionEventName, getRootEventName } from '../../utils/events';
 import { makeModelMixin } from '../../utils/model';
 import { sortKeys } from '../../utils/object';
@@ -14,7 +13,6 @@ import { normalizeSlotMixin } from '../../mixins/normalize-slot';
 import { BVCollapse } from './helpers/bv-collapse';
 
 // --- Constants ---
-const CLASS_NAME_SHOW = 'show';
 const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle');
 const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state');
 const ROOT_EVENT_NAME_ACCORDION = getRootEventName(NAME_COLLAPSE, 'accordion');
@@ -157,34 +155,6 @@ const BCollapse = /*#__PURE__*/extend({
       // It is emitted regardless if the visible state changes
       this.emitOnRoot(ROOT_EVENT_NAME_SYNC_STATE, this.safeId(), this.show);
     },
-    checkDisplayBlock() {
-      // Check to see if the collapse has `display: block !important` set
-      // We can't set `display: none` directly on `this.$el`, as it would
-      // trigger a new transition to start (or cancel a current one)
-      const {
-        $el
-      } = this;
-      const restore = hasClass($el, CLASS_NAME_SHOW);
-      removeClass($el, CLASS_NAME_SHOW);
-      const isBlock = getCS($el).display === 'block';
-      if (restore) {
-        addClass($el, CLASS_NAME_SHOW);
-      }
-      return isBlock;
-    },
-    clickHandler(event) {
-      const {
-        target: el
-      } = event;
-      /* istanbul ignore next: can't test `getComputedStyle()` in JSDOM */
-      if (!el || getCS(this.$el).display !== 'block') {
-        return;
-      }
-      // Only close the collapse if it is not forced to be `display: block !important`
-      if ((matches(el, '.nav-link,.dropdown-item') || closest('.nav-link,.dropdown-item', el)) && !this.checkDisplayBlock()) {
-        this.show = false;
-      }
-    },
     handleToggleEvent(id) {
       if (id === this.safeId()) {
         this.toggle();
@@ -218,9 +188,6 @@ const BCollapse = /*#__PURE__*/extend({
       }],
       attrs: {
         id: this.safeId()
-      },
-      on: {
-        click: this.clickHandler
       }
     }, this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope));
     return h(BVCollapse, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "103.6.0",
+  "version": "103.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -141,6 +141,7 @@
     "acorn-walk": "^8.3.2",
     "autoprefixer": "^9.7.6",
     "axe-core": "^4.2.3",
+    "axe-playwright": "^2.0.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "cypress": "13.16.0",

package/src/tokens/border.tokens.json

@@ -12,7 +12,7 @@
       "subtle": {
         "$value": {
           "default": "{color.neutral.50}",
-          "dark": "{color.neutral.900}"
+          "dark": "{color.neutral.800}"
         },
         "$type": "color",
         "$description": "Used for a subtle border in combination with the default background."

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

@@ -460,7 +460,7 @@
   --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
   --gl-border-color-default: var(--gl-color-neutral-700); /* Used for the default border color. */
-  --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
+  --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-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */

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

@@ -85,7 +85,7 @@ export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
 export const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
 export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
-export const GL_BORDER_COLOR_SUBTLE = '#28272d';
+export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
 export const GL_BORDER_COLOR_STRONG = '#626168';
 export const GL_BORDER_COLOR_SECTION = '#18171d';
 export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';

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

@@ -1976,7 +1976,7 @@
         ]
       },
       "subtle": {
-        "$value": "#28272d",
+        "$value": "#3a383f",
         "$type": "color",
         "$description": "Used for a subtle border in combination with the default background.",
         "filePath": "src/tokens/border.tokens.json",
@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

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

@@ -1984,7 +1984,7 @@
         "original": {
           "$value": {
             "default": "{color.neutral.50}",
-            "dark": "{color.neutral.900}"
+            "dark": "{color.neutral.800}"
           },
           "$type": "color",
           "$description": "Used for a subtle border in combination with the default background."

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

@@ -458,7 +458,7 @@ $gl-background-color-overlap: $gl-color-neutral-900; // Used for components, lik
 $gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
-$gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
+$gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
 $gl-border-color-strong: $gl-color-neutral-600; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.

package/src/utils/stories_utils.js

@@ -3,3 +3,12 @@
  */
 export const disableControls = (controls = []) =>
   Object.fromEntries(controls.map((control) => [control, { control: { disable: true } }]));
+
+export const getA11yParameters = ({ skipRules = [], temporarySkipRules = [] } = {}) => {
+  const skippedRules = skipRules.concat(temporarySkipRules).map((id) => ({ id, enabled: false }));
+  return {
+    config: {
+      rules: skippedRules,
+    },
+  };
+};

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

@@ -8,7 +8,6 @@ import {
 } from '../../constants/events'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { SLOT_NAME_DEFAULT } from '../../constants/slots'
-import { addClass, hasClass, removeClass, closest, matches, getCS } from '../../utils/dom'
 import { getRootActionEventName, getRootEventName } from '../../utils/events'
 import { makeModelMixin } from '../../utils/model'
 import { sortKeys } from '../../utils/object'
@@ -19,8 +18,6 @@ import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BVCollapse } from './helpers/bv-collapse'
 
 // --- Constants ---
-const CLASS_NAME_SHOW = 'show'
-
 const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle')
 const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state')
 
@@ -162,33 +159,6 @@ export const BCollapse = /*#__PURE__*/ extend({
       // It is emitted regardless if the visible state changes
       this.emitOnRoot(ROOT_EVENT_NAME_SYNC_STATE, this.safeId(), this.show)
     },
-    checkDisplayBlock() {
-      // Check to see if the collapse has `display: block !important` set
-      // We can't set `display: none` directly on `this.$el`, as it would
-      // trigger a new transition to start (or cancel a current one)
-      const { $el } = this
-      const restore = hasClass($el, CLASS_NAME_SHOW)
-      removeClass($el, CLASS_NAME_SHOW)
-      const isBlock = getCS($el).display === 'block'
-      if (restore) {
-        addClass($el, CLASS_NAME_SHOW)
-      }
-      return isBlock
-    },
-    clickHandler(event) {
-      const { target: el } = event
-      /* istanbul ignore next: can't test `getComputedStyle()` in JSDOM */
-      if (!el || getCS(this.$el).display !== 'block') {
-        return
-      }
-      // Only close the collapse if it is not forced to be `display: block !important`
-      if (
-        (matches(el, '.nav-link,.dropdown-item') || closest('.nav-link,.dropdown-item', el)) &&
-        !this.checkDisplayBlock()
-      ) {
-        this.show = false
-      }
-    },
     handleToggleEvent(id) {
       if (id === this.safeId()) {
         this.toggle()
@@ -215,8 +185,7 @@ export const BCollapse = /*#__PURE__*/ extend({
       {
         class: this.classObject,
         directives: [{ name: 'show', value: this.show }],
-        attrs: { id: this.safeId() },
-        on: { click: this.clickHandler }
+        attrs: { id: this.safeId() }
       },
       this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope)
     )