@gitlab/ui 32.55.0 → 32.59.0

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

@@ -206,20 +206,44 @@
   }
 }
 
+@mixin gl-sm-w-half {
+  @include gl-media-breakpoint-up(sm) {
+    width: 50%;
+  }
+}
+
 @mixin gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;
   }
 }
 
+@mixin gl-md-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
 @mixin gl-lg-w-1px {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     width: 1px;
   }
 }
 
-@mixin gl-md-w-50p {
-  @include gl-media-breakpoint-up(md) {
+@mixin gl-lg-w-auto {
+  @include gl-media-breakpoint-up(lg) {
+    width: auto;
+  }
+}
+
+@mixin gl-lg-w-25p {
+  @include gl-media-breakpoint-up(lg) {
+    width: 25%;
+  }
+}
+
+@mixin gl-lg-w-50p {
+  @include gl-media-breakpoint-up(lg) {
     width: 50%;
   }
 }

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.
 *
@@ -806,6 +821,12 @@
   }
 }
 
+@mixin gl-md-ml-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-3;
+  }
+}
+
 @mixin gl-md-mr-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-mr-3;
@@ -879,18 +900,187 @@
 * notes:
 * - Utilities should strictly follow $gl-spacing-scale
 */
+
+@mixin gl-sm-pt-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-sm-pt-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-sm-pt-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-sm-pt-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-sm-pt-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-sm-pt-5 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-5;
+  }
+}
+
+@mixin gl-sm-pr-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-0;
+  }
+}
+
+@mixin gl-sm-pr-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-sm-pr-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-2;
+  }
+}
+
+@mixin gl-sm-pr-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-sm-pr-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-sm-pr-5 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-5;
   }
 }
 
+@mixin gl-sm-pb-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-sm-pb-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-sm-pb-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-sm-pb-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-sm-pb-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-sm-pb-5 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-sm-pl-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-sm-pl-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-sm-pl-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-sm-pl-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-3;
+  }
+}
+
+@mixin gl-sm-pl-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-4;
+  }
+}
+
 @mixin gl-sm-pl-5 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-5;
   }
 }
 
+@mixin gl-md-pt-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-md-pt-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-md-pt-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-md-pt-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-md-pt-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-md-pt-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-5;
+  }
+}
+
 @mixin gl-md-pr-0 {
   @include gl-media-breakpoint-up(md) {
     @include gl-pr-0;
@@ -909,24 +1099,240 @@
   }
 }
 
+@mixin gl-md-pr-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-md-pr-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-md-pr-5 {
   @include gl-media-breakpoint-up(md) {
     @include gl-pr-5;
   }
 }
 
+@mixin gl-md-pb-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-md-pb-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-md-pb-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-md-pb-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-md-pb-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-md-pb-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-md-pl-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-md-pl-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-md-pl-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-md-pl-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-3;
+  }
+}
+
+@mixin gl-md-pl-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-4;
+  }
+}
+
+@mixin gl-md-pl-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-5;
+  }
+}
+
+@mixin gl-lg-pt-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-lg-pt-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-lg-pt-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-lg-pt-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-lg-pt-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-lg-pt-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-5;
+  }
+}
+
+@mixin gl-lg-pr-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-0;
+  }
+}
+
+@mixin gl-lg-pr-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-lg-pr-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-2;
+  }
+}
+
+@mixin gl-lg-pr-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-lg-pr-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-lg-pr-5 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pr-5;
   }
 }
 
-@mixin gl-md-pl-3 {
-  @include gl-media-breakpoint-up(md) {
+@mixin gl-lg-pb-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-lg-pb-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-lg-pb-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-lg-pb-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-lg-pb-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-lg-pb-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-lg-pl-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-lg-pl-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-lg-pl-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-lg-pl-3 {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-pl-3;
   }
 }
 
+@mixin gl-lg-pl-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-4;
+  }
+}
+
+@mixin gl-lg-pl-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-5;
+  }
+}
+
 /**
   * Remove margin and padding from empty elements
   * to prevent them from inadvertantly taking up

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

@@ -110,6 +110,10 @@
   font-size: $gl-font-size-compact-markdown-h1;
 }
 
+@mixin gl-reset-font-size {
+  font-size: inherit;
+}
+
 /**
 * Font-weight utilities.
 *

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

@@ -1,19 +0,0 @@
-import component from './table.basic.example';
-import componentCustomFields from './table.custom_fields.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'table-basic',
-    name: 'Basic',
-    description: 'Basic Table',
-    component
-  }, {
-    id: 'table-custom-fields',
-    name: 'Custom Fields',
-    description: 'Custom component fields',
-    component: componentCustomFields
-  }]
-}];
-
-export default index;

package/dist/components/base/table/examples/table.basic.example.js

@@ -1,59 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  fields: [{
-    key: 'column_one',
-    label: 'Column One'
-  }, {
-    key: 'col_2',
-    label: 'Column 2'
-  }],
-  items: [{
-    column_one: 'test',
-    col_2: 1234
-  }, {
-    column_one: 'test2',
-    col_2: 5678
-  }, {
-    column_one: 'test3',
-    col_2: 9101
-  }]
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-table',{attrs:{"items":_vm.$options.items,"fields":_vm.$options.fields}})};
-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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/table/examples/table.custom_fields.example.js

@@ -1,66 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  fields: [{
-    key: 'column_one',
-    label: 'Column One'
-  }, {
-    key: 'col_2',
-    label: 'Styled Column 2'
-  }, {
-    key: 'custom_markup',
-    label: 'Styled Virtual Column'
-  }],
-  items: [{
-    column_one: 'test',
-    col_2: 1234
-  }, {
-    column_one: 'test2',
-    col_2: 5678
-  }, {
-    column_one: 'test3',
-    col_2: 9101
-  }]
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-table',{attrs:{"items":_vm.$options.items,"fields":_vm.$options.fields},scopedSlots:_vm._u([{key:"cell(col_2)",fn:function(ref){
-var value = ref.value;
-return [_c('span',{staticClass:"gl-font-weight-bold gl-text-green-500"},[_vm._v(_vm._s(value))])]}},{key:"cell(custom_markup)",fn:function(ref){
-var index = ref.index;
-return [_c('span',{staticClass:"gl-font-style-italic gl-text-red-500"},[_vm._v("Index: "+_vm._s(index + 1))])]}}])})};
-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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/base/table/examples/index.js

@@ -1,22 +0,0 @@
-import component from './table.basic.example.vue';
-import componentCustomFields from './table.custom_fields.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'table-basic',
-        name: 'Basic',
-        description: 'Basic Table',
-        component,
-      },
-      {
-        id: 'table-custom-fields',
-        name: 'Custom Fields',
-        description: 'Custom component fields',
-        component: componentCustomFields,
-      },
-    ],
-  },
-];

package/src/components/base/table/examples/table.basic.example.vue

@@ -1,32 +0,0 @@
-<script>
-export default {
-  fields: [
-    {
-      key: 'column_one',
-      label: 'Column One',
-    },
-    {
-      key: 'col_2',
-      label: 'Column 2',
-    },
-  ],
-  items: [
-    {
-      column_one: 'test',
-      col_2: 1234,
-    },
-    {
-      column_one: 'test2',
-      col_2: 5678,
-    },
-    {
-      column_one: 'test3',
-      col_2: 9101,
-    },
-  ],
-};
-</script>
-
-<template>
-  <gl-table :items="$options.items" :fields="$options.fields" />
-</template>