@gitlab/ui 59.3.0 → 59.3.2

package/dist/utils/utils.js

@@ -119,11 +119,13 @@ function isDev() {
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
+ * @param {HTMLElement} element component that triggered the warning
  */
 function logWarning() {
   let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   if (message.length && isDev()) {
-    console.warn(message); // eslint-disable-line no-console
+    console.warn(message, element); // eslint-disable-line no-console
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.3.0",
+  "version": "59.3.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -119,9 +119,9 @@
     "bootstrap": "4.6.2",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.36.0",
+    "eslint": "8.37.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-cypress": "2.13.2",
     "eslint-plugin-storybook": "0.6.11",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",

package/src/components/base/button/button.vue

@@ -121,7 +121,10 @@ export default {
   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/src/components/base/modal/modal.vue

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

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -92,6 +92,13 @@ describe('base dropdown', () => {
       wrapper.destroy();
       expect(destroyPopper).toHaveBeenCalled();
     });
+
+    it('should not destroy popper instance when component is not initiated', async () => {
+      buildWrapper();
+      wrapper.destroy();
+      await nextTick();
+      expect(destroyPopper).not.toHaveBeenCalled();
+    });
   });
 
   describe('renders content to the default slot', () => {

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -214,14 +214,15 @@ export default {
     this.checkToggleFocusable();
   },
   beforeDestroy() {
-    this.popper.destroy();
+    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
         );
       }
     },

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

@@ -7,8 +7,15 @@ describe('GlSkeletonLoader', () => {
   const findDefaultLines = () => wrapper.findAll('clipPath rect');
   const findSvg = () => wrapper.find('svg');
 
-  const createComponent = (options = {}) => {
-    wrapper = shallowMount(GlSkeletonLoader, options);
+  const createComponent = ({ propsData, slots, reducedMotion } = {}) => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: reducedMotion,
+      })),
+    });
+
+    wrapper = shallowMount(GlSkeletonLoader, { propsData, slots });
   };
 
   describe('when default skeleton is used', () => {
@@ -126,4 +133,19 @@ describe('GlSkeletonLoader', () => {
       });
     });
   });
+
+  it.each`
+    reducedMotion | hasLinearGradient
+    ${false}      | ${'has'}
+    ${true}       | ${'does not have'}
+  `(
+    '$hasLinearGradient linear-gradient when reduced motion is $reducedMotion',
+    ({ reducedMotion }) => {
+      createComponent({ reducedMotion });
+
+      const gradient = wrapper.find('linearGradient');
+
+      expect(gradient.exists()).toBe(!reducedMotion);
+    }
+  );
 });

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -106,6 +106,8 @@ export default {
       return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
     };
 
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
     const svg = createElement(
       'svg',
       {
@@ -122,13 +124,15 @@ export default {
       [
         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(),
+            ...(reducedMotion
+              ? { class: 'gl-fill-gray-100' }
+              : { fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)` }),
           },
         }),
         createElement('defs', {}, [
@@ -153,73 +157,74 @@ export default {
                   })
                 )
           ),
-          createElement(
-            'linearGradient',
-            {
-              attrs: {
-                id: `${props.uniqueKey}-idGradient`,
-              },
-            },
-            [
-              createElement(
-                'stop',
-                {
-                  class: 'primary-stop',
-                  attrs: {
-                    offset: '0%',
-                  },
+          !reducedMotion &&
+            createElement(
+              'linearGradient',
+              {
+                attrs: {
+                  id: `${props.uniqueKey}-idGradient`,
                 },
-                [
-                  createElement('animate', {
+              },
+              [
+                createElement(
+                  'stop',
+                  {
+                    class: 'primary-stop',
                     attrs: {
-                      attributeName: 'offset',
-                      values: '-2; 1',
-                      dur: '1s',
-                      repeatCount: 'indefinite',
+                      offset: '0%',
                     },
-                  }),
-                ]
-              ),
-              createElement(
-                'stop',
-                {
-                  class: 'secondary-stop',
-                  attrs: {
-                    offset: '50%',
                   },
-                },
-                [
-                  createElement('animate', {
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-2; 1',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+                createElement(
+                  'stop',
+                  {
+                    class: 'secondary-stop',
                     attrs: {
-                      attributeName: 'offset',
-                      values: '-1.5; 1.5',
-                      dur: '1s',
-                      repeatCount: 'indefinite',
+                      offset: '50%',
                     },
-                  }),
-                ]
-              ),
-              createElement(
-                'stop',
-                {
-                  class: 'primary-stop',
-                  attrs: {
-                    offset: '100%',
                   },
-                },
-                [
-                  createElement('animate', {
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-1.5; 1.5',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+                createElement(
+                  'stop',
+                  {
+                    class: 'primary-stop',
                     attrs: {
-                      attributeName: 'offset',
-                      values: '-1; 2',
-                      dur: '1s',
-                      repeatCount: 'indefinite',
+                      offset: '100%',
                     },
-                  }),
-                ]
-              ),
-            ]
-          ),
+                  },
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-1; 2',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+              ]
+            ),
         ]),
       ]
     );

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

@@ -35,7 +35,7 @@ describe('GlTable', () => {
     factory();
     await waitForAnimationFrame();
 
-    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning);
+    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning, wrapper.element);
   });
 
   it('should not log a warning when given a prop which qualifies for the usage of GlTable', async () => {

package/src/components/base/table/table.vue

@@ -30,7 +30,7 @@ export default {
     // 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);
     }
   },
 };

package/src/scss/utilities.scss

@@ -7809,6 +7809,14 @@
   stroke: transparent !important
 }
 
+.gl-fill-gray-100 {
+  fill: $gray-100
+}
+
+.gl-fill-gray-100\! {
+  fill: $gray-100 !important
+}
+
 .gl-fill-gray-200 {
   fill: $gray-200
 }

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

@@ -46,6 +46,10 @@
   stroke: transparent;
 }
 
+@mixin gl-fill-gray-100 {
+  fill: $gray-100;
+}
+
 @mixin gl-fill-gray-200 {
   fill: $gray-200;
 }

package/src/utils/utils.js

@@ -130,10 +130,11 @@ export function isDev() {
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
+ * @param {HTMLElement} element component that triggered the warning
  */
-export function logWarning(message = '') {
+export function logWarning(message = '', element = '') {
   if (message.length && isDev()) {
-    console.warn(message); // eslint-disable-line no-console
+    console.warn(message, element); // eslint-disable-line no-console
   }
 }