@gitlab/ui 68.1.0 → 68.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "68.1.0",
+  "version": "68.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -29,8 +29,9 @@
     "build-scss-variables": "make scss_to_js/scss_variables.js",
     "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
-    "cy:edge": "cypress run --browser edge",
-    "cy:run": "cypress run --browser firefox",
+    "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
+    "cy:edge": "cypress run --browser edge --env grepTags=-@a11y",
+    "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
@@ -38,7 +39,7 @@
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
     "pretest:unit": "yarn build-tokens build-scss-variables",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html cy:run",
+    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:a11y'",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -91,6 +92,7 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
+    "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
@@ -98,18 +100,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.5.2",
-    "@storybook/addon-docs": "7.5.2",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addon-storyshots": "7.5.2",
-    "@storybook/addon-storyshots-puppeteer": "7.5.2",
-    "@storybook/addon-viewport": "7.5.2",
-    "@storybook/builder-webpack5": "7.5.2",
-    "@storybook/theming": "7.5.2",
-    "@storybook/vue": "7.5.2",
-    "@storybook/vue-webpack5": "7.5.2",
-    "@storybook/vue3": "7.5.2",
-    "@storybook/vue3-webpack5": "7.5.2",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-docs": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-storyshots": "7.5.3",
+    "@storybook/addon-storyshots-puppeteer": "7.5.3",
+    "@storybook/addon-viewport": "7.5.3",
+    "@storybook/builder-webpack5": "7.5.3",
+    "@storybook/theming": "7.5.3",
+    "@storybook/vue": "7.5.3",
+    "@storybook/vue-webpack5": "7.5.3",
+    "@storybook/vue3": "7.5.3",
+    "@storybook/vue3-webpack5": "7.5.3",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -161,7 +163,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.5.2",
+    "storybook": "7.5.3",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -89,7 +89,7 @@
   &-text {
     margin-top: -$gl-spacing-scale-1;
     margin-bottom: -$gl-spacing-scale-1;
-    @include gl-overflow-break-word;
+    @include gl-overflow-anywhere;
   }
 
   &-dismiss {

package/src/config.js

@@ -14,6 +14,11 @@ const tooltipGlobalConfig = {
   delay: tooltipDelay,
 };
 
+const popoverDelayConfig = {
+  show: 50, // BootstrapVue's default delay on show.
+  hide: 150, // Increased hide delay so that it doesn't disappear to quickly when user attempts to interact with the content.
+};
+
 /**
  * Guard against nonexistent localStorage,
  * or corrupted localStorage
@@ -57,6 +62,9 @@ const setConfigs = ({ translations } = {}) => {
   Vue.use(BVConfigPlugin, {
     BFormText: bFormTextGlobalConfig,
     BTooltip: tooltipGlobalConfig,
+    BPopover: {
+      delay: popoverDelayConfig,
+    },
   });
 
   if (typeof translations === 'object') {

package/src/scss/utilities.scss

@@ -8378,12 +8378,20 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-overflow-break-word {
   overflow-wrap: break-word;
   hyphens: auto;
-  -webkit-hyphens: auto;
 }
 .gl-overflow-break-word\! {
   overflow-wrap: break-word !important;
   hyphens: auto !important;
-  -webkit-hyphens: auto !important;
+}
+.gl-overflow-anywhere {
+  hyphens: auto;
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+.gl-overflow-anywhere\! {
+  hyphens: auto !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
 }
 .gl-str-truncated {
   @include str-truncated;

package/src/scss/utility-mixins/text.scss

@@ -130,7 +130,12 @@
 @mixin gl-overflow-break-word {
   overflow-wrap: break-word;
   hyphens: auto;
-  -webkit-hyphens: auto; // stylelint-disable-line
+}
+
+@mixin gl-overflow-anywhere {
+  hyphens: auto;
+  overflow-wrap: anywhere;
+  word-break: normal;
 }
 
 // Deprecated, prefer `gl-text-truncate`