@gitlab/ui 32.54.0 → 32.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.54.0",
+  "version": "32.56.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -84,9 +84,9 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "10.0.0",
+    "@gitlab/eslint-plugin": "10.0.1",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "2.0.0",
+    "@gitlab/svgs": "2.2.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-breadcrumbs">
+  <nav class="gl-breadcrumbs" aria-label="Breadcrumb">
     <!-- @slot The avatar to display. -->
     <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
@@ -60,5 +60,5 @@ export default {
         </b-breadcrumb-item>
       </template>
     </b-breadcrumb>
-  </div>
+  </nav>
 </template>

package/src/components/charts/line/line.spec.js

@@ -139,7 +139,14 @@ describe('line component', () => {
     const dataTooltipTitle = 'FooBar';
 
     beforeEach(() => {
-      createShallowWrapper();
+      createShallowWrapper(
+        {},
+        {
+          stubs: {
+            'chart-tooltip': ChartTooltipStub,
+          },
+        }
+      );
     });
 
     it('is initialized', () => {

package/src/components/charts/line/line.vue

@@ -354,19 +354,15 @@ export default {
       :top="dataTooltipPosition.top"
       :left="dataTooltipPosition.left"
     >
-      <template v-if="formatTooltipText">
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <slot slot="title" name="tooltip-title"></slot>
-        <slot name="tooltip-content"></slot>
-      </template>
-      <template v-else>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title">
+      <template #title>
+        <slot v-if="formatTooltipText" name="tooltip-title"></slot>
+        <div v-else>
           {{ dataTooltipTitle }}
           <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
         </div>
-        <tooltip-default-format :tooltip-content="dataTooltipContent" />
       </template>
+      <slot v-if="formatTooltipText" name="tooltip-content"></slot>
+      <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

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

@@ -97,7 +97,7 @@ export default {
 
 <template>
   <section
-    class="gl-display-flex gl-flex-wrap"
+    class="gl-display-flex"
     :class="{
       'empty-state gl-text-center gl-flex-direction-column': !compact,
       'gl-flex-direction-row': compact,

package/src/scss/bootstrap_vue.scss

@@ -0,0 +1,39 @@
+// stylelint-disable scss/at-import-partial-extension-blacklist
+
+// imports from https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/index.scss
+
+@import 'bootstrap-vue/src/variables.scss';
+@import 'bootstrap-vue/src/utilities.scss';
+
+// Used by BFormSpinbutton, BFormDatepicker, BFormTimepicker, BTime, BCalendar
+@import 'bootstrap-vue/src/custom-controls.scss';
+
+// Comment out components we are not importing in gitlab-ui
+// Still listed for easy comparison
+// @import 'bootstrap-vue/src/components/avatar/index.scss';
+// @import 'bootstrap-vue/src/components/calendar/index.scss';
+@import 'bootstrap-vue/src/components/card/index.scss';
+@import 'bootstrap-vue/src/components/dropdown/index.scss';
+@import 'bootstrap-vue/src/components/form-checkbox/index.scss';
+// @import 'bootstrap-vue/src/components/form-file/index.scss';
+@import 'bootstrap-vue/src/components/form-input/index.scss';
+@import 'bootstrap-vue/src/components/form-radio/index.scss';
+// @import 'bootstrap-vue/src/components/form-rating/index.scss';
+// @import 'bootstrap-vue/src/components/form-spinbutton/index.scss';
+@import 'bootstrap-vue/src/components/form-tags/index.scss';
+@import 'bootstrap-vue/src/components/input-group/index.scss';
+// @import 'bootstrap-vue/src/components/media/index.scss';
+@import 'bootstrap-vue/src/components/modal/index.scss';
+@import 'bootstrap-vue/src/components/nav/index.scss';
+@import 'bootstrap-vue/src/components/navbar/index.scss';
+// @import 'bootstrap-vue/src/components/pagination/index.scss';
+// @import 'bootstrap-vue/src/components/pagination-nav/index.scss';
+@import 'bootstrap-vue/src/components/popover/index.scss';
+// @import 'bootstrap-vue/src/components/skeleton/index.scss';
+// @import 'bootstrap-vue/src/components/sidebar/index.scss';
+@import 'bootstrap-vue/src/components/table/index.scss';
+// @import 'bootstrap-vue/src/components/time/index.scss';
+@import 'bootstrap-vue/src/components/toast/index.scss';
+@import 'bootstrap-vue/src/components/tooltip/index.scss';
+
+// @import 'bootstrap-vue/src/icons/icons.scss';

package/src/scss/gitlab_ui.scss

@@ -1,6 +1,6 @@
 @import 'bootstrap';
 
-@import 'bootstrap-vue/src/index.scss'; // stylelint-disable-line
+@import 'bootstrap_vue';
 
 // Settings
 @import 'functions';

package/src/scss/storybook.scss

@@ -5,7 +5,7 @@
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
 
-@import 'bootstrap-vue/src/index.scss'; // stylelint-disable-line
+@import 'bootstrap_vue';
 
 @import 'mixins';
 @import 'utility-mixins/index';

package/src/scss/utilities.scss

@@ -5518,6 +5518,16 @@
   margin-left: -#{$gl-spacing-scale-6} !important;
   margin-right: -#{$gl-spacing-scale-6} !important;
 }
+.gl-gap-x-3 {
+  * + * {
+    margin-left: #{$gl-spacing-scale-3};
+  }
+}
+.gl-gap-x-3\! {
+  * + * {
+    margin-left: #{$gl-spacing-scale-3} !important;
+  }
+}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;
@@ -5798,6 +5808,16 @@
   padding-right: $gl-spacing-scale-2 !important;
   }
 }
+.gl-md-pr-5 {
+  @include gl-media-breakpoint-up(md) {
+  padding-right: $gl-spacing-scale-5;
+  }
+}
+.gl-md-pr-5\! {
+  @include gl-media-breakpoint-up(md) {
+  padding-right: $gl-spacing-scale-5 !important;
+  }
+}
 .gl-lg-pr-5 {
   @include gl-media-breakpoint-up(lg) {
   padding-right: $gl-spacing-scale-5;

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

@@ -732,6 +732,21 @@
   margin-right: -#{$gl-spacing-scale-6};
 }
 
+/**
+* Gap utilities
+*
+* naming convention: gl-gap-{direction}-{spacing-scale-index}
+* notes:
+* - Utilities should strictly follow $gl-spacing-scale
+* - Utilities should be refactored to use gap after dropping Safari 13.x support
+*/
+
+@mixin gl-gap-x-3 {
+  * + * {
+    margin-left: #{$gl-spacing-scale-3};
+  }
+}
+
 /**
 * Responsive margin utilities.
 *
@@ -909,6 +924,12 @@
   }
 }
 
+@mixin gl-md-pr-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-5;
+  }
+}
+
 @mixin gl-lg-pr-5 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pr-5;