@gitlab/ui 42.24.1 → 43.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.24.1",
+  "version": "43.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
     "test": "run-s test:unit test:visual",
     "test:integration": "NODE_ENV=test start-server-and-test start http://localhost:9001 cy:run",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
-    "test:unit:watch": "yarn test:unit --watch --notify",
+    "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",
     "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
@@ -79,11 +79,11 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "14.0.0",
+    "@babel/core": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
+    "@gitlab/eslint-plugin": "15.0.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.30.0",
+    "@gitlab/svgs": "2.33.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -106,7 +106,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.19.0",
+    "eslint": "8.20.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.1",
@@ -129,7 +129,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-scss": "4.0.4",
     "prettier": "2.6.2",
-    "puppeteer": "11.0.0",
+    "puppeteer": "15.5.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
     "rollup-plugin-babel": "^4.4.0",

package/src/directives/safe_html/constants.js

@@ -1,3 +1,12 @@
 // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421#note_617098438
 // for more details
-export const forbiddenDataAttrs = ['data-remote', 'data-url', 'data-type', 'data-method'];
+export const forbiddenDataAttrs = [
+  'data-remote',
+  'data-url',
+  'data-type',
+  'data-method',
+  'data-disable-with',
+  'data-disabled',
+  'data-disable',
+  'data-turbo',
+];

package/src/directives/safe_html/safe_html.spec.js

@@ -74,24 +74,20 @@ describe('safe html directive', () => {
     });
 
     describe('handles data attributes correctly', () => {
-      const acceptedDataAttrs = ['data-safe', 'data-random'];
+      const allowedDataAttrs = ['data-safe', 'data-random'];
 
-      it.each(forbiddenDataAttrs)('removes %s attributes', (attr) => {
-        createComponent({
-          html: `<a ${attr}="true"></a>`,
-        });
+      it.each(forbiddenDataAttrs)('removes dangerous `%s` attribute', (attr) => {
+        const html = `<a ${attr}="true"></a>`;
+        createComponent({ html });
 
-        expect(wrapper.html()).toEqual('<div><a></a></div>');
+        expect(wrapper.html()).not.toContain(html);
       });
 
-      it.each(acceptedDataAttrs)('does not remove %s attributes', (attr) => {
-        const attrWithValue = `${attr}="true"`;
-
-        createComponent({
-          html: `<a ${attrWithValue}="true"></a>`,
-        });
+      it.each(allowedDataAttrs)('does not remove allowed `%s` attribute', (attr) => {
+        const html = `<a ${attr}="true"></a>`;
+        createComponent({ html });
 
-        expect(wrapper.html()).toEqual(`<div><a ${attrWithValue}></a></div>`);
+        expect(wrapper.html()).toContain(html);
       });
     });
   });

package/src/scss/utilities.scss

@@ -3236,6 +3236,18 @@
   }
 }
 
+.gl-lg-flex-direction-column {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-flex-direction-column;
+  }
+}
+
+.gl-lg-flex-direction-column\! {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-flex-direction-column;
+  }
+}
+
 .gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
@@ -7499,6 +7511,12 @@
 .gl-text-transform-none\! {
   text-transform: none !important;
 }
+.gl-text-transform-capitalize {
+  text-transform: capitalize;
+}
+.gl-text-transform-capitalize\! {
+  text-transform: capitalize !important;
+}
 .gl-text-overflow-ellipsis {
   text-overflow: ellipsis;
 }

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

@@ -95,6 +95,12 @@
   }
 }
 
+@mixin gl-lg-flex-direction-column {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-flex-direction-column;
+  }
+}
+
 @mixin gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;

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

@@ -50,6 +50,10 @@
   text-transform: none;
 }
 
+@mixin gl-text-transform-capitalize {
+  text-transform: capitalize;
+}
+
 /**
 * Text overflow utilities
 *