@gitlab/ui 32.65.1 → 33.0.0

package/documentation/documented_stories.js

@@ -119,6 +119,7 @@ export const setupStorybookReadme = () =>
         'GlTable',
         'GlToast',
         'GlPaginatedList',
+        'GlIntersectionObserver',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.65.1",
+  "version": "33.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -41,7 +41,7 @@
     "test:unit:watch": "yarn test:unit --watch --notify",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js'",
-    "test:visual:update": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js --updateSnapshot'",
+    "test:visual:update": "NODE_ENV=test IS_VISUAL_TEST=true JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js --updateSnapshot'",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",

package/scss_to_js/scss_variables.js

@@ -16,6 +16,7 @@ export const glSpacingScale13 = '6rem'
 export const glSpacingScale15 = '7.5rem'
 export const glSpacingScale20 = '10rem'
 export const glSpacingScale26 = '13rem'
+export const glSpacingScale28 = '14rem'
 export const glSpacingScale62 = '31rem'
 export const breakpointSm = '576px'
 export const breakpointMd = '768px'

package/scss_to_js/scss_variables.json

@@ -90,6 +90,11 @@
       "value": "26 * $grid-size",
       "compiledValue": "13rem"
     },
+    {
+      "name": "$gl-spacing-scale-28",
+      "value": "28 * $grid-size",
+      "compiledValue": "14rem"
+    },
     {
       "name": "$gl-spacing-scale-62",
       "value": "62 * $grid-size",

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

@@ -1,28 +1,5 @@
-import examples from './examples';
 import * as description from './intersection_observer.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    options: {
-      additionalInfo: 'Extra options to pass directly to the intersection observer API.',
-    },
-  },
-  events: [
-    {
-      event: 'appear',
-      description: 'Emitted when the element appears on the page',
-    },
-    {
-      event: 'disappear',
-      description: 'Emitted when the element disappears from the page',
-    },
-  ],
-  slots: [
-    {
-      slot: 'default',
-      description: "The element you wish to observe, or a fallback if the observer doesn't work.",
-    },
-  ],
 };

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

@@ -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%;
 }
@@ -4459,6 +4455,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 +4502,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 +4816,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 +5078,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;
   }
@@ -5616,6 +5626,16 @@
     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

@@ -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%;
 }
@@ -335,6 +339,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 +362,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;
   }
@@ -755,6 +749,12 @@
   }
 }
 
+@mixin gl-gap-x-5 {
+  > * + * {
+    margin-left: #{$gl-spacing-scale-5};
+  }
+}
+
 /**
 * Responsive margin utilities.
 *

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/utilities/intersection_observer/examples/index.js

@@ -1,19 +0,0 @@
-import ImageExample from './intersection_observer.image.example';
-import LastAppearedExample from './intersection_observer.last_appeared.example';
-
-var index = [{
-  name: 'Intersection observer',
-  items: [{
-    id: 'intersection-observer-last-appeared',
-    name: 'Last appeared at',
-    description: 'Logs when the component last appeared on the screen',
-    component: LastAppearedExample
-  }, {
-    id: 'intersection-observer-lazy-loaded-image',
-    name: 'Lazy loaded image',
-    description: "This image switches between a gif and a still image when it's on or off the screen",
-    component: ImageExample
-  }]
-}];
-
-export default index;

package/dist/components/utilities/intersection_observer/examples/intersection_observer.image.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data: () => ({
-    isInView: false
-  }),
-  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';
-    }
-
-  },
-  methods: {
-    appear() {
-      this.isInView = true;
-    },
-
-    disappear() {
-      this.isInView = false;
-    }
-
-  }
-};
-
-/* 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-intersection-observer',{on:{"appear":_vm.appear,"disappear":_vm.disappear}},[_c('img',{staticStyle:{"max-width":"100%","height":"auto"},attrs:{"src":_vm.imageUrl}})])};
-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__;