@gitlab/ui 103.5.1 → 103.6.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [103.6.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.6.0...v103.6.1) (2024-11-26)
+
+
+### Bug Fixes
+
+* **GlCollapse:** Don't close on nav-link clicks ([d789933](https://gitlab.com/gitlab-org/gitlab-ui/commit/d789933f6cf88d759e8d8c56b00e66e60ec02c9e))
+
+# [103.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.5.1...v103.6.0) (2024-11-26)
+
+
+### Features
+
+* **Tailwind:** add status design tokens to Tailwind classes ([b57449f](https://gitlab.com/gitlab-org/gitlab-ui/commit/b57449f522dd4c38c58830cc84735658c12a09be))
+
 ## [103.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.5.0...v103.5.1) (2024-11-26)
 
 

package/dist/tokens/tailwind/tokens.cjs

@@ -282,6 +282,32 @@ const brandColors = {
   },
   'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
 };
+const statusBackgroundColors = {
+  'status-neutral':
+    'var(--gl-status-neutral-background-color, var(--gl-color-neutral-100, #dcdcde))',
+  'status-info': 'var(--gl-status-info-background-color, var(--gl-color-blue-100, #cbe2f9))',
+  'status-success': 'var(--gl-status-success-background-color, var(--gl-color-green-100, #c3e6cd))',
+  'status-warning':
+    'var(--gl-status-warning-background-color, var(--gl-color-orange-100, #f5d9a8))',
+  'status-danger': 'var(--gl-status-danger-background-color, var(--gl-color-red-100, #fdd4cd))',
+  'status-brand': 'var(--gl-status-brand-background-color, var(--gl-color-purple-100, #e1d8f9))',
+};
+const statusTextColors = {
+  'status-neutral': 'var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
+  'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #0b5cad))',
+  'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #24663b))',
+  'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #8f4700))',
+  'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #ae1800))',
+  'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5943b6))',
+};
+const statusIconColors = {
+  'status-neutral': 'var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))',
+  'status-info': 'var(--gl-status-info-icon-color, var(--gl-color-blue-500, #1f75cb))',
+  'status-success': 'var(--gl-status-success-icon-color, var(--gl-color-green-500, #108548))',
+  'status-warning': 'var(--gl-status-warning-icon-color, var(--gl-color-orange-500, #ab6100))',
+  'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
+  'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -302,6 +328,7 @@ const colors = {
 const backgroundColor = {
   ...colors,
   ...backgroundColors,
+  ...statusBackgroundColors,
   dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
@@ -317,6 +344,7 @@ const outlineColor = {
 
 const fill = {
   ...colors,
+  ...statusIconColors,
   icon: {
     ...iconColors,
   },
@@ -325,6 +353,7 @@ const fill = {
 const textColor = {
   ...colors,
   ...textColors,
+  ...statusTextColors,
   primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',

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.5.1",
+  "version": "103.6.1",
   "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/build/tailwind/tokens.cjs

@@ -282,6 +282,32 @@ const brandColors = {
   },
   'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
 };
+const statusBackgroundColors = {
+  'status-neutral':
+    'var(--gl-status-neutral-background-color, var(--gl-color-neutral-100, #dcdcde))',
+  'status-info': 'var(--gl-status-info-background-color, var(--gl-color-blue-100, #cbe2f9))',
+  'status-success': 'var(--gl-status-success-background-color, var(--gl-color-green-100, #c3e6cd))',
+  'status-warning':
+    'var(--gl-status-warning-background-color, var(--gl-color-orange-100, #f5d9a8))',
+  'status-danger': 'var(--gl-status-danger-background-color, var(--gl-color-red-100, #fdd4cd))',
+  'status-brand': 'var(--gl-status-brand-background-color, var(--gl-color-purple-100, #e1d8f9))',
+};
+const statusTextColors = {
+  'status-neutral': 'var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
+  'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #0b5cad))',
+  'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #24663b))',
+  'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #8f4700))',
+  'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #ae1800))',
+  'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5943b6))',
+};
+const statusIconColors = {
+  'status-neutral': 'var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))',
+  'status-info': 'var(--gl-status-info-icon-color, var(--gl-color-blue-500, #1f75cb))',
+  'status-success': 'var(--gl-status-success-icon-color, var(--gl-color-green-500, #108548))',
+  'status-warning': 'var(--gl-status-warning-icon-color, var(--gl-color-orange-500, #ab6100))',
+  'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
+  'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -302,6 +328,7 @@ const colors = {
 const backgroundColor = {
   ...colors,
   ...backgroundColors,
+  ...statusBackgroundColors,
   dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
@@ -317,6 +344,7 @@ const outlineColor = {
 
 const fill = {
   ...colors,
+  ...statusIconColors,
   icon: {
     ...iconColors,
   },
@@ -325,6 +353,7 @@ const fill = {
 const textColor = {
   ...colors,
   ...textColors,
+  ...statusTextColors,
   primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',

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)
     )