@gitlab/ui 32.64.0 → 32.66.0

package/src/components/utilities/intersection_observer/intersection_observer.stories.js

@@ -1,4 +1,3 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlIntersectionObserver } from '../../../../index';
 import readme from './intersection_observer.md';
 
@@ -31,17 +30,16 @@ const generateItems = (startingId = 0) => {
   });
 };
 
-documentedStoriesOf('utilities/intersection-observer', readme)
-  .add('default', () => ({
-    components,
-    data: commonData,
-    methods: commonMethods,
-    computed: {
-      visibility() {
-        return this.isInView ? 'The observer is in view' : 'The observer is not in view';
-      },
+export const Default = () => ({
+  components,
+  data: commonData,
+  methods: commonMethods,
+  computed: {
+    visibility() {
+      return this.isInView ? 'The observer is in view' : 'The observer is not in view';
     },
-    template: `
+  },
+  template: `
     <div style="height: 200px; overflow-y: scroll;">
       <h1>{{ visibility }}</h1>
       <p>This one is a hard one to demonstrate as it's invisible by nature.</p>
@@ -55,26 +53,27 @@ documentedStoriesOf('utilities/intersection-observer', readme)
       />
       <p>This line appears just after the observer.</p>
     </div>
-    `,
-  }))
-  .add('big table', () => ({
-    components,
-    data() {
-      return {
-        values: Array(100)
-          .fill(1)
-          .map(() => Array(10).fill(0)),
-      };
+  `,
+});
+
+export const BigTable = () => ({
+  components,
+  data() {
+    return {
+      values: Array(100)
+        .fill(1)
+        .map(() => Array(10).fill(0)),
+    };
+  },
+  methods: {
+    update(row, col, { intersectionRatio }) {
+      this.$set(this.values[row], col, intersectionRatio);
     },
-    methods: {
-      update(row, col, { intersectionRatio }) {
-        this.$set(this.values[row], col, intersectionRatio);
-      },
-      disappear(row, col) {
-        this.values[row][col] = 0;
-      },
+    disappear(row, col) {
+      this.values[row][col] = 0;
     },
-    template: `
+  },
+  template: `
     <div style="height: 600px; overflow-y: scroll;">
       <table>
         <tr v-for="(cols, row) in values" :key="row">
@@ -87,20 +86,21 @@ documentedStoriesOf('utilities/intersection-observer', readme)
       </table>
     </div>
     `,
-  }))
-  .add('lazy loaded image', () => ({
-    components,
-    data: commonData,
-    methods: commonMethods,
-    computed: {
-      imageUrl() {
-        // If the image is in view, return the high res one. If not return nothing, or a low res one
-        return this.isInView
-          ? '../../img/gitlab-summit-south-africa.jpg'
-          : '../../img/gitlab-summit-south-africa-min.jpg';
-      },
+});
+
+export const LazyLoadedImage = () => ({
+  components,
+  data: commonData,
+  methods: commonMethods,
+  computed: {
+    imageUrl() {
+      // If the image is in view, return the high res one. If not return nothing, or a low res one
+      return this.isInView
+        ? '../../img/gitlab-summit-south-africa.jpg'
+        : '../../img/gitlab-summit-south-africa-min.jpg';
     },
-    template: `
+  },
+  template: `
     <div>
       <p>The image below will load a low-res version until it appears on the poage, then it will switch out for a higher res version.</p>
       <p>It's also set up to switch back to the low res version when it disappears off the page. This is not what you would usually do for lazily loaded images, but it helps to demonstrate the effect in this example.</p>
@@ -111,42 +111,53 @@ documentedStoriesOf('utilities/intersection-observer', readme)
         <img :src="imageUrl" style="max-width: 100%; height: auto;"/>
       </gl-intersection-observer>
     </div>
-    `,
-  }))
-  .add(
-    'infinite scrolling',
-    () => ({
-      components,
-      data: () => ({
-        items: generateItems(),
-      }),
-      computed: {
-        lastItemId() {
-          return this.items[this.items.length - 1].id;
-        },
-        endOfList() {
-          return this.lastItemId >= 1000;
-        },
-      },
-      methods: {
-        fetchMoreItems() {
-          if (!this.endOfList) {
-            this.items.push(...generateItems(this.lastItemId));
-          }
-        },
+  `,
+});
+
+export const InfiniteScrolling = () => ({
+  components,
+  data: () => ({
+    items: generateItems(),
+  }),
+  computed: {
+    lastItemId() {
+      return this.items[this.items.length - 1].id;
+    },
+    endOfList() {
+      return this.lastItemId >= 1000;
+    },
+  },
+  methods: {
+    fetchMoreItems() {
+      if (!this.endOfList) {
+        this.items.push(...generateItems(this.lastItemId));
+      }
+    },
+  },
+  template: `
+    <div>
+      <h2>Infinitely scrollable list</h2>
+      <p>This data will procedurally generate 1000 items, 20 at a time</p>
+      <ul>
+        <li v-for="item in items" :key="item.id">{{ item.title }}</li>
+      </ul>
+      <gl-intersection-observer v-if="!endOfList" @appear="fetchMoreItems">
+        <button @click="fetchMoreItems">Fetch more items</button>
+      </gl-intersection-observer>
+    </div>
+`,
+});
+
+export default {
+  title: 'utilities/intersection-observer',
+  component: GlIntersectionObserver,
+  parameters: {
+    knobs: { disable: true },
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
-      template: `
-      <div>
-        <h2>Infinitely scrollable list</h2>
-        <p>This data will procedurally generate 1000 items, 20 at a time</p>
-        <ul>
-          <li v-for="item in items" :key="item.id">{{ item.title }}</li>
-        </ul>
-        <gl-intersection-observer v-if="!endOfList" @appear="fetchMoreItems">
-          <button @click="fetchMoreItems">Fetch more items</button>
-        </gl-intersection-observer>
-      </div>
-    `,
-    }),
-    { storyshots: false }
-  );
+    },
+  },
+};

package/src/components/utilities/intersection_observer/intersection_observer.vue

@@ -13,6 +13,9 @@ const getObserver = memoize(
 export default {
   name: 'GlIntersectionObserver',
   props: {
+    /**
+     * Extra options to pass directly to the intersection observer API.
+     */
     options: {
       type: Object,
       required: false,
@@ -23,11 +26,20 @@ export default {
     const observer = getObserver(this.options);
 
     this.$el.$_gl_intersectionHandler = (entry) => {
+      /**
+       * Emitted when the element's visibility changes
+       */
       this.$emit('update', entry);
 
       if (entry.isIntersecting) {
+        /**
+         * Emitted when the element appears on the page
+         */
         this.$emit('appear');
       } else {
+        /**
+         * Emitted when the element disappears from the page
+         */
         this.$emit('disappear');
       }
     };
@@ -47,6 +59,9 @@ export default {
 
 <template>
   <div>
+    <!--
+    @slot The element you wish to observe, or a fallback if the observer doesn't work.
+    -->
     <slot></slot>
   </div>
 </template>

package/src/scss/utilities.scss

@@ -3145,13 +3145,13 @@
 }
 
 .gl-sm-justify-content-end {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-media-breakpoint-up(sm) {
   justify-content: flex-end;
   }
 }
 
 .gl-sm-justify-content-end\! {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-media-breakpoint-up(sm) {
   justify-content: flex-end !important;
   }
 }
@@ -3356,6 +3356,22 @@
   opacity: 0.5 !important
 }
 
+.gl-opacity-6 {
+  opacity: 0.6
+}
+
+.gl-opacity-6\! {
+  opacity: 0.6 !important
+}
+
+.gl-opacity-7 {
+  opacity: 0.7
+}
+
+.gl-opacity-7\! {
+  opacity: 0.7 !important
+}
+
 .gl-opacity-10 {
   opacity: 1
 }
@@ -5591,15 +5607,25 @@
   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-gap-x-5 {
+  > * + * {
+    margin-left: #{$gl-spacing-scale-5};
+  }
+}
+.gl-gap-x-5\! {
+  > * + * {
+    margin-left: #{$gl-spacing-scale-5} !important;
+  }
+}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;

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

@@ -199,7 +199,7 @@
 }
 
 @mixin gl-sm-justify-content-end {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-justify-content-end;
   }
 }

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

@@ -19,6 +19,14 @@
   opacity: 0.5;
 }
 
+@mixin gl-opacity-6 {
+  opacity: 0.6;
+}
+
+@mixin gl-opacity-7 {
+  opacity: 0.7;
+}
+
 @mixin gl-opacity-10 {
   opacity: 1;
 }

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

@@ -750,11 +750,17 @@
 */
 
 @mixin gl-gap-x-3 {
-  * + * {
+  > * + * {
     margin-left: #{$gl-spacing-scale-3};
   }
 }
 
+@mixin gl-gap-x-5 {
+  > * + * {
+    margin-left: #{$gl-spacing-scale-5};
+  }
+}
+
 /**
 * Responsive margin utilities.
 *

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

@@ -1,49 +0,0 @@
-import PaginatedListBasicExample from './paginated_list.basic.example';
-import PaginatedListNoFilterExample from './paginated_list.no_filter.example';
-import PaginatedListWithEmptyListExample from './paginated_list.with_empty_list.example';
-import PaginatedListWithFilterFunctionExample from './paginated_list.with_filter_function.example';
-import PaginatedListWithHeaderSlotExample from './paginated_list.with_header_slot.example';
-import PaginatedListWithRowSlotExample from './paginated_list.with_row_slot.example';
-import PaginatedListWithSubheaderSlotExample from './paginated_list.with_subheader_slot.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'paginated-list-basic',
-    name: 'Basic',
-    description: 'Basic Paginated List',
-    component: PaginatedListBasicExample
-  }, {
-    id: 'paginated-list-no-filter',
-    name: 'No Filter',
-    description: 'Paginated List with no button',
-    component: PaginatedListNoFilterExample
-  }, {
-    id: 'paginated-list-with-empty-list',
-    name: 'With empty list',
-    description: 'Paginated List empty list',
-    component: PaginatedListWithEmptyListExample
-  }, {
-    id: 'paginated-list-with-header-slot',
-    name: 'With header slot',
-    description: 'Paginated List header slot',
-    component: PaginatedListWithHeaderSlotExample
-  }, {
-    id: 'paginated-list-with-subheader-slot',
-    name: 'With subheader slot',
-    description: 'Paginated List subheader slot',
-    component: PaginatedListWithSubheaderSlotExample
-  }, {
-    id: 'paginated-list-with-row-slot',
-    name: 'With row slot',
-    description: 'Paginated List with row slot',
-    component: PaginatedListWithRowSlotExample
-  }, {
-    id: 'paginated-list-with-filter-function',
-    name: 'With filter function',
-    description: 'Paginated List with filter function',
-    component: PaginatedListWithFilterFunctionExample
-  }]
-}];
-
-export default index;

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

@@ -1,51 +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-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ]}})};
-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/base/paginated_list/examples/paginated_list.no_filter.example.js

@@ -1,51 +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-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ],"filterable":false}})};
-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/base/paginated_list/examples/paginated_list.with_empty_list.example.js

@@ -1,38 +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-paginated-list',{attrs:{"list":[]}})};
-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/base/paginated_list/examples/paginated_list.with_filter_function.example.js

@@ -1,51 +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-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ],"filter":function (item, queryStr) { return item.id.includes(queryStr); }}})};
-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/base/paginated_list/examples/paginated_list.with_header_slot.example.js

@@ -1,51 +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-paginated-list',{attrs:{"list":[
-    { id: 'foo' },
-    { id: 'bar' },
-    { id: 'baz' },
-    { id: 'qux' },
-    { id: 'quux' },
-    { id: 'corge' },
-    { id: 'grault' },
-    { id: 'garply' },
-    { id: 'waldo' },
-    { id: 'fred' },
-    { id: 'xyzzy' },
-    { id: 'plugh' },
-    { id: 'thud' } ]},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('gl-button',{staticClass:"order-1",attrs:{"variant":"success"}},[_vm._v("Foo Button")])]},proxy:true}])})};
-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__;