@gitlab/ui 43.21.0 → 44.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "43.21.0",
+  "version": "44.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,8 +77,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.19.1",
-    "@babel/preset-env": "^7.19.1",
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.3",
     "@gitlab/eslint-plugin": "18.0.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.4.0",
@@ -102,7 +102,7 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.5.3",
-    "cypress": "^10.8.0",
+    "cypress": "^10.9.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.24.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -112,9 +112,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.0.3",
-    "jest-circus": "29.0.3",
-    "jest-environment-jsdom": "29.0.3",
+    "jest": "^29.1.2",
+    "jest-circus": "29.1.2",
+    "jest-environment-jsdom": "29.1.2",
     "jest-serializer-vue": "^2.0.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",

package/src/components/base/alert/alert.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { buttonCategoryOptions } from '../../../utils/constants';
+import { alertVariantOptions, buttonCategoryOptions } from '../../../utils/constants';
 import GlAlert from './alert.vue';
 
 const DummyComponent = {
@@ -191,4 +191,24 @@ describe('Alert component', () => {
       });
     });
   });
+
+  describe('aria-live', () => {
+    it.each([alertVariantOptions.danger, alertVariantOptions.warning])(
+      'for %p variant, has aria-live assertive attribute',
+      (variant) => {
+        createComponent({ propsData: { variant } });
+
+        expect(wrapper.find('[aria-live=assertive').exists()).toBe(true);
+      }
+    );
+
+    it.each([alertVariantOptions.info, alertVariantOptions.success, alertVariantOptions.tip])(
+      'for %p variant, has aria-live polite attribute',
+      (variant) => {
+        createComponent({ propsData: { variant } });
+
+        expect(wrapper.find('[aria-live=polite]').exists()).toBe(true);
+      }
+    );
+  });
 });

package/src/components/base/alert/alert.vue

@@ -90,6 +90,13 @@ export default {
     },
   },
   computed: {
+    ariaLive() {
+      if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
+        return 'assertive';
+      }
+
+      return 'polite';
+    },
     iconName() {
       return alertVariantIconMap[this.variant];
     },
@@ -185,7 +192,7 @@ export default {
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />
 
-    <div class="gl-alert-content" role="alert">
+    <div class="gl-alert-content" role="alert" :aria-live="ariaLive">
       <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 
       <div class="gl-alert-body">

package/src/scss/utilities.scss

@@ -6704,66 +6704,6 @@
   margin-top: $gl-spacing-scale-5 !important;
   }
 }
-.gl-sm-pt-0 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: 0;
-  }
-}
-.gl-sm-pt-0\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: 0 !important;
-  }
-}
-.gl-sm-pt-1 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-1;
-  }
-}
-.gl-sm-pt-1\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-1 !important;
-  }
-}
-.gl-sm-pt-2 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-2;
-  }
-}
-.gl-sm-pt-2\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-2 !important;
-  }
-}
-.gl-sm-pt-3 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-3;
-  }
-}
-.gl-sm-pt-3\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-3 !important;
-  }
-}
-.gl-sm-pt-4 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-4;
-  }
-}
-.gl-sm-pt-4\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-4 !important;
-  }
-}
-.gl-sm-pt-5 {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-5;
-  }
-}
-.gl-sm-pt-5\! {
-  @include gl-media-breakpoint-down(sm) {
-  padding-top: $gl-spacing-scale-5 !important;
-  }
-}
 .gl-sm-pr-0 {
   @include gl-media-breakpoint-down(sm) {
   padding-right: 0;

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

@@ -1060,48 +1060,6 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
-@mixin gl-sm-pt-0 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pt-0;
-  }
-}
-
-@mixin gl-sm-pt-1 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pt-1;
-  }
-}
-
-@mixin gl-sm-pt-2 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pt-2;
-  }
-}
-
-@mixin gl-sm-pt-3 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pt-3;
-  }
-}
-
-@mixin gl-sm-pt-4 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pt-4;
-  }
-}
-
-@mixin gl-sm-pt-5 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-pt-5;
-  }
-}
-
 @mixin gl-sm-pr-0 {
   // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
   @include gl-media-breakpoint-down(sm) {