@gitlab/ui 32.51.2 → 32.54.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.51.2",
+  "version": "32.54.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,15 +90,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-docs": "6.4.9",
-    "@storybook/addon-essentials": "6.4.9",
+    "@storybook/addon-a11y": "6.4.10",
+    "@storybook/addon-docs": "6.4.10",
+    "@storybook/addon-essentials": "6.4.10",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.9",
-    "@storybook/addon-storyshots-puppeteer": "6.4.9",
-    "@storybook/addon-viewport": "6.4.9",
-    "@storybook/theming": "6.4.9",
-    "@storybook/vue": "6.4.9",
+    "@storybook/addon-storyshots": "6.4.10",
+    "@storybook/addon-storyshots-puppeteer": "6.4.10",
+    "@storybook/addon-viewport": "6.4.10",
+    "@storybook/theming": "6.4.10",
+    "@storybook/vue": "6.4.10",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

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

@@ -3,8 +3,8 @@ import LoadingIcon from './loading_icon.vue';
 
 describe('loading icon component', () => {
   let wrapper;
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(LoadingIcon, { propsData });
+  const createComponent = ({ attrs, ...propsData } = {}) => {
+    wrapper = shallowMount(LoadingIcon, { propsData, attrs });
   };
 
   const baseCssClass = 'gl-spinner';
@@ -83,4 +83,19 @@ describe('loading icon component', () => {
       expect(spinnerEl.attributes('aria-label')).toBe(label);
     });
   });
+
+  describe('role', () => {
+    it('should have default role value as status', () => {
+      createComponent();
+
+      expect(wrapper.attributes('role')).toBe('status');
+    });
+
+    it('should have role value as custom value passed', () => {
+      const role = 'dialog';
+      createComponent({ attrs: { role } });
+
+      expect(wrapper.attributes('role')).toBe(role);
+    });
+  });
 });

package/src/components/base/loading_icon/loading_icon.vue

@@ -63,7 +63,7 @@ export default {
 };
 </script>
 <template>
-  <component :is="rootElementType" class="gl-spinner-container">
+  <component :is="rootElementType" class="gl-spinner-container" role="status">
     <span :class="cssClasses" class="align-text-bottom" :aria-label="label"></span>
   </component>
 </template>

package/src/components/base/popover/popover.scss

@@ -67,6 +67,11 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-font-sm;
     @include gl-font-weight-bold;
     @include gl-m-0;
+
+    .gl-button.close {
+      margin-top: -$gl-spacing-scale-3;
+      margin-right: -$gl-spacing-scale-4;
+    }
   }
 
   .popover-body {

package/src/components/regions/empty_state/empty_state.vue

@@ -96,14 +96,22 @@ export default {
 </script>
 
 <template>
-  <section class="row" :class="{ 'empty-state text-center': !compact }">
-    <div :class="{ 'col-3 d-none d-sm-block': compact, 'col-12': !compact }">
+  <section
+    class="gl-display-flex gl-flex-wrap"
+    :class="{
+      'empty-state gl-text-center gl-flex-direction-column': !compact,
+      'gl-flex-direction-row': compact,
+    }"
+  >
+    <div
+      :class="{ 'gl-display-none gl-sm-display-block gl-px-4': compact, 'gl-max-w-full': !compact }"
+    >
       <div v-if="svgPath" :class="{ 'svg-content': !compact }" class="svg-250">
         <img :src="svgPath" alt="" role="img" class="gl-max-w-full" :height="height" />
       </div>
     </div>
-    <div :class="compact ? 'col-sm-9' : 'col-12'">
-      <div class="text-content gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
+    <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">
+      <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
         <h1
           ref="title"
           class="gl-font-size-h-display gl-line-height-36"

package/src/scss/utilities.scss

@@ -3306,6 +3306,12 @@
   mask-position: center !important;
   mask-size: cover !important
 }
+.gl-mix-blend-mode-luminosity {
+  mix-blend-mode: luminosity
+}
+.gl-mix-blend-mode-luminosity\! {
+  mix-blend-mode: luminosity !important
+}
 .gl-opacity-0 {
   opacity: 0
 }

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

@@ -29,6 +29,7 @@
 @import './grid';
 @import './list-style';
 @import './masks';
+@import './mix-blend-mode';
 @import './opacity';
 @import './outline';
 @import './overflow';

package/src/scss/utility-mixins/mix-blend-mode.scss

@@ -0,0 +1,3 @@
+@mixin gl-mix-blend-mode-luminosity {
+  mix-blend-mode: luminosity;
+}