@gitlab/ui 59.3.0 → 59.3.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [59.3.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v59.3.1...v59.3.2) (2023-04-05)
+
+
+### Bug Fixes
+
+* **GlSkeletonLoader:** Disable animation for reduced motion ([a70e810](https://gitlab.com/gitlab-org/gitlab-ui/commit/a70e8104361a4f51f36076d4466989df2de53f94))
+
+## [59.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v59.3.0...v59.3.1) (2023-04-05)
+
+
+### Bug Fixes
+
+* **base_dropdown:** conditional chaining to destroy popper ([05cf79e](https://gitlab.com/gitlab-org/gitlab-ui/commit/05cf79e0fdaf55d9403fcdaba062d416294b3815))
+
 # [59.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v59.2.0...v59.3.0) (2023-04-04)
 
 

package/dist/components/base/button/button.js

@@ -106,7 +106,7 @@ var script = {
   mounted() {
     // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
     if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
-      logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.');
+      logWarning('[gl-button]: Accessible name missing. Please add inner text or aria-label.', this.$el);
     }
   }
 };

package/dist/components/base/modal/modal.js

@@ -102,7 +102,7 @@ var script = {
   },
   mounted() {
     if (!this.ariaLabel && !this.title) {
-      logWarning('[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.');
+      logWarning('[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.', this.$el);
     }
   },
   methods: {

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -200,19 +200,20 @@ var script = {
     this.checkToggleFocusable();
   },
   beforeDestroy() {
-    this.popper.destroy();
+    var _this$popper;
+    (_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.destroy();
   },
   methods: {
     checkToggleFocusable() {
       if (!isElementFocusable(this.toggleElement) && !isElementTabbable(this.toggleElement)) {
         logWarning(`GlDisclosureDropdown/GlCollapsibleListbox: Toggle is missing a 'tabindex' and cannot be focused.
-          Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`);
+          Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`, this.$el);
       }
     },
     async toggle() {
       this.visible = !this.visible;
       if (this.visible) {
-        var _this$popper;
+        var _this$popper2;
         /* Initially dropdown is hidden with `display="none"`.
           When `visible` prop is toggled ON, with the `nextTick` we wait for the DOM update -
           dropdown's `display="block"` is set (adding CSS class `show`).
@@ -224,7 +225,7 @@ var script = {
           e.g. set focus.
          */
         await this.$nextTick();
-        await ((_this$popper = this.popper) === null || _this$popper === void 0 ? void 0 : _this$popper.update());
+        await ((_this$popper2 = this.popper) === null || _this$popper2 === void 0 ? void 0 : _this$popper2.update());
         this.$emit(GL_DROPDOWN_SHOWN);
       } else {
         this.$emit(GL_DROPDOWN_HIDDEN);

package/dist/components/base/skeleton_loader/skeleton_loader.js

@@ -97,6 +97,7 @@ var script = {
       }
       return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
     };
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     const svg = createElement('svg', {
       class: {
         'gl-skeleton-loader': true,
@@ -108,15 +109,17 @@ var script = {
         preserveAspectRatio: props.preserveAspectRatio
       }
     }, [createElement('title', {}, ['Loading']), createElement('rect', {
-      style: {
-        fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)`
-      },
       attrs: {
         'clip-path': `url(${props.baseUrl}#${props.uniqueKey}-idClip)`,
         x: 0,
         y: 0,
         width: width(),
-        height: height()
+        height: height(),
+        ...(reducedMotion ? {
+          class: 'gl-fill-gray-100'
+        } : {
+          fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)`
+        })
       }
     }), createElement('defs', {}, [createElement('clipPath', {
       attrs: {
@@ -130,7 +133,7 @@ var script = {
         height: DEFAULT_LINE_HEIGHT,
         rx: 4
       }
-    }))), createElement('linearGradient', {
+    }))), !reducedMotion && createElement('linearGradient', {
       attrs: {
         id: `${props.uniqueKey}-idGradient`
       }

package/dist/components/base/table/table.js

@@ -31,7 +31,7 @@ var script = {
     // logWarning will call isDev before logging any message
     // this additional call to isDev is being made to exit the condition early when run in production
     if (isDev() && !shouldUseFullTable(this)) {
-      logWarning(glTableLiteWarning);
+      logWarning(glTableLiteWarning, this.$el);
     }
   }
 };