@gitlab/ui 32.66.0 → 33.0.1

package/src/scss/utilities.scss

@@ -2908,18 +2908,6 @@
   }
 }
 
-.gl-flex-sm-wrap {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: wrap;
-  }
-}
-
-.gl-flex-sm-wrap\! {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: wrap !important;
-  }
-}
-
 .gl-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -3196,13 +3184,13 @@
   justify-content: flex-start !important;
 }
 
-.gl-justify-content-md-start {
+.gl-md-justify-content-start {
   @include gl-media-breakpoint-up(md) {
   justify-content: flex-start;
   }
 }
 
-.gl-justify-content-md-start\! {
+.gl-md-justify-content-start\! {
   @include gl-media-breakpoint-up(md) {
   justify-content: flex-start !important;
   }
@@ -3967,6 +3955,14 @@
   width: $gl-spacing-scale-20 !important;
 }
 
+.gl-w-28 {
+  width: $gl-spacing-scale-28;
+}
+
+.gl-w-28\! {
+  width: $gl-spacing-scale-28 !important;
+}
+
 .gl-w-eighth {
   width: 12.5%;
 }
@@ -4339,6 +4335,14 @@
   min-width: $gl-spacing-scale-8 !important;
 }
 
+.gl-min-w-9 {
+  min-width: $gl-spacing-scale-9;
+}
+
+.gl-min-w-9\! {
+  min-width: $gl-spacing-scale-9 !important;
+}
+
 .gl-min-w-10 {
   min-width: $gl-spacing-scale-10;
 }
@@ -4459,6 +4463,18 @@
   max-width: 100vw !important;
 }
 
+.gl-md-max-w-15p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 15%;
+  }
+}
+
+.gl-md-max-w-15p\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 15% !important;
+  }
+}
+
 .gl-md-max-w-30p {
   @include gl-media-breakpoint-up(md) {
     max-width: 30%;
@@ -4494,6 +4510,18 @@
     max-width: 70% !important;
   }
 }
+
+.gl-lg-max-w-80p {
+  @include gl-media-breakpoint-up(lg) {
+    max-width: 80%;
+  }
+}
+
+.gl-lg-max-w-80p\! {
+  @include gl-media-breakpoint-up(lg) {
+    max-width: 80% !important;
+  }
+}
 .gl-p-0 {
   padding: 0;
 }
@@ -4796,16 +4824,6 @@
 .gl-pt-2\! {
   padding-top: $gl-spacing-scale-2 !important;
 }
-.gl-pt-md-2 {
-  @include gl-media-breakpoint-up(md) {
-    padding-top: $gl-spacing-scale-2;
-  }
-}
-.gl-pt-md-2\! {
-  @include gl-media-breakpoint-up(md) {
-    padding-top: $gl-spacing-scale-2 !important;
-  }
-}
 .gl-pt-3 {
   padding-top: $gl-spacing-scale-3;
 }
@@ -5068,12 +5086,12 @@
 .gl-mt-n1\! {
   margin-top: -$gl-spacing-scale-1 !important;
 }
-.gl-mt-md-n2 {
+.gl-md-mt-n2 {
   @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2;
   }
 }
-.gl-mt-md-n2\! {
+.gl-md-mt-n2\! {
   @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2 !important;
   }

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

@@ -79,13 +79,6 @@
   }
 }
 
-// Deprecated, prefer `gl-sm-flex-wrap`
-@mixin gl-flex-sm-wrap {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-flex-wrap;
-  }
-}
-
 @mixin gl-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -224,7 +217,7 @@
   justify-content: flex-start;
 }
 
-@mixin gl-justify-content-md-start {
+@mixin gl-md-justify-content-start {
   @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-start;
   }

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

@@ -65,6 +65,10 @@
   width: $gl-spacing-scale-20;
 }
 
+@mixin gl-w-28 {
+  width: $gl-spacing-scale-28;
+}
+
 @mixin gl-w-eighth {
   width: 12.5%;
 }
@@ -267,6 +271,10 @@
   min-width: $gl-spacing-scale-8;
 }
 
+@mixin gl-min-w-9 {
+  min-width: $gl-spacing-scale-9;
+}
+
 @mixin gl-min-w-10 {
   min-width: $gl-spacing-scale-10;
 }
@@ -335,6 +343,12 @@
 * - Utilities should strictly follow $gl-spacing-scale
 */
 
+@mixin gl-md-max-w-15p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 15%;
+  }
+}
+
 @mixin gl-md-max-w-30p {
   @include gl-media-breakpoint-up(md) {
     max-width: 30%;
@@ -352,3 +366,9 @@
     max-width: 70%;
   }
 }
+
+@mixin gl-lg-max-w-80p {
+  @include gl-media-breakpoint-up(lg) {
+    max-width: 80%;
+  }
+}

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

@@ -202,12 +202,6 @@
   padding-top: $gl-spacing-scale-2;
 }
 
-@mixin gl-pt-md-2 {
-  @include gl-media-breakpoint-up(md) {
-    padding-top: $gl-spacing-scale-2;
-  }
-}
-
 @mixin gl-pt-3 {
   padding-top: $gl-spacing-scale-3;
 }
@@ -386,7 +380,7 @@
   margin-top: -$gl-spacing-scale-1;
 }
 
-@mixin gl-mt-md-n2 {
+@mixin gl-md-mt-n2 {
   @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2;
   }

package/src/scss/variables.scss

@@ -19,6 +19,7 @@ $gl-spacing-scale-13: 12 * $grid-size;
 $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 $gl-spacing-scale-26: 26 * $grid-size;
+$gl-spacing-scale-28: 28 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;
 
 // Responsive breakpoints

package/dist/components/charts/column/examples/column.basic.example.js

@@ -1,49 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-column-chart',{attrs:{"bars":[
-    {
-      name: 'Full',
-      data: [
-        ['Joe', 1220],
-        ['Sarah', 932],
-        ['Tom', 901],
-        ['Mary', 934],
-        ['Mike', 1290],
-        ['Ben', 1330],
-        ['Jane', 1320] ],
-    } ],"option":{},"y-axis-title":"Pushes by day","x-axis-title":"User","x-axis-type":"category"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/charts/column/examples/index.js

@@ -1,13 +0,0 @@
-import ColumnChartBasicExample from './column.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'column-basic',
-    name: 'Basic',
-    description: 'Basic Column Chart',
-    component: ColumnChartBasicExample
-  }]
-}];
-
-export default index;

package/src/components/charts/column/column.md

@@ -1 +0,0 @@
-### Column Chart

package/src/components/charts/column/examples/column.basic.example.vue

@@ -1,22 +0,0 @@
-<template>
-  <gl-column-chart
-    :bars="[
-      {
-        name: 'Full',
-        data: [
-          ['Joe', 1220],
-          ['Sarah', 932],
-          ['Tom', 901],
-          ['Mary', 934],
-          ['Mike', 1290],
-          ['Ben', 1330],
-          ['Jane', 1320],
-        ],
-      },
-    ]"
-    :option="{}"
-    y-axis-title="Pushes by day"
-    x-axis-title="User"
-    x-axis-type="category"
-  />
-</template>

package/src/components/charts/column/examples/index.js

@@ -1,15 +0,0 @@
-import ColumnChartBasicExample from './column.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'column-basic',
-        name: 'Basic',
-        description: 'Basic Column Chart',
-        component: ColumnChartBasicExample,
-      },
-    ],
-  },
-];