@gitlab/ui 32.61.0 → 32.64.1

package/documentation/documented_stories.js

@@ -117,6 +117,8 @@ export const setupStorybookReadme = () =>
         'GlKeysetPagination',
         'GlForm',
         'GlTable',
+        'GlToast',
+        'GlPaginatedList',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.61.0",
+  "version": "32.64.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,15 +90,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.10",
-    "@storybook/addon-docs": "6.4.10",
-    "@storybook/addon-essentials": "6.4.10",
+    "@storybook/addon-a11y": "6.4.13",
+    "@storybook/addon-docs": "6.4.13",
+    "@storybook/addon-essentials": "6.4.13",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.10",
-    "@storybook/addon-storyshots-puppeteer": "6.4.10",
-    "@storybook/addon-viewport": "6.4.10",
-    "@storybook/theming": "6.4.10",
-    "@storybook/vue": "6.4.10",
+    "@storybook/addon-storyshots": "6.4.13",
+    "@storybook/addon-storyshots-puppeteer": "6.4.13",
+    "@storybook/addon-viewport": "6.4.13",
+    "@storybook/theming": "6.4.13",
+    "@storybook/vue": "6.4.13",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/scss_to_js/scss_variables.js

@@ -240,6 +240,7 @@ export const glLineHeight24 = '1.5rem'
 export const glLineHeight28 = '1.75rem'
 export const glLineHeight32 = '2rem'
 export const glLineHeight36 = '2.25rem'
+export const glLineHeight42 = '2.625rem'
 export const glLineHeight44 = '2.75rem'
 export const glLineHeight52 = '3.25rem'
 export const glFontSize = '0.875rem'

package/scss_to_js/scss_variables.json

@@ -1249,6 +1249,11 @@
       "value": "px-to-rem(36px)",
       "compiledValue": "2.25rem"
     },
+    {
+      "name": "$gl-line-height-42",
+      "value": "px-to-rem(42px)",
+      "compiledValue": "2.625rem"
+    },
     {
       "name": "$gl-line-height-44",
       "value": "px-to-rem(44px)",

package/src/components/base/paginated_list/paginated_list.documentation.js

@@ -1,7 +1,5 @@
-import examples from './examples';
 import description from './paginated_list.md';
 
 export default {
   description,
-  examples,
 };

package/src/components/base/paginated_list/paginated_list.md

@@ -1,3 +1 @@
-### Paginated list
-
 The paginated list component allows the easy creation of list with pagination and client side sorting.

package/src/components/base/paginated_list/paginated_list.stories.js

@@ -1,14 +1,7 @@
-import { withKnobs, object, array, boolean, number, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlPaginatedList, GlButton } from '../../../../index';
 import readme from './paginated_list.md';
 
-const components = {
-  GlPaginatedList,
-  GlButton,
-};
-
-const list = [
+const sampleList = [
   { id: 'foo' },
   { id: 'bar' },
   { id: 'baz' },
@@ -33,167 +26,182 @@ const template = `
   :page="page"
   :filterable="filterable"
   :filter="filter"
+  :item-key="itemKey"
   :emptyMessage="emptyMessage"
   :emptySearchMessage="emptySearchMessage"
   />
 `;
 
-const templateWithSubheader = `
-  <gl-paginated-list
-  :list="list"
-  :perPage="perPage"
-  :page="page"
-  :filterable="filterable"
-  :filter="filter"
-  :emptyMessage="emptyMessage"
-  :emptySearchMessage="emptySearchMessage"
-  >
+const generateProps = ({
+  list = [...sampleList],
+  perPage = 10,
+  page = 1,
+  filterable = true,
+  filter = 'id',
+  itemKey = 'id',
+  emptyMessage = 'There are currently no items in this list.',
+  emptySearchMessage = 'Sorry, your filter produced no results.',
+} = {}) => ({
+  list,
+  perPage,
+  page,
+  filterable,
+  filter,
+  itemKey,
+  emptyMessage,
+  emptySearchMessage,
+});
 
-  <template #subheader>
-    Dropdown content can go here when like when an action button is clicked 
-  </template>
-  
-  </gl-paginated-list>
-`;
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlPaginatedList,
+    GlButton,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
 
-const templateWithHeader = `
-  <gl-paginated-list
-  :list="list"
-  :perPage="perPage"
-  :page="page"
-  :filterable="filterable"
-  :filter="filter"
-  :emptyMessage="emptyMessage"
-  :emptySearchMessage="emptySearchMessage"
-  >
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-    <template #header>
-      <gl-button
-        variant="success"
-        class="order-1"
-        @click="alert"
-      >
-        Foo Button
-      </gl-button>
-    </template>
-  
-  </gl-paginated-list>
-`;
+export const NoFilter = (args, { argTypes }) => ({
+  components: {
+    GlPaginatedList,
+    GlButton,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+NoFilter.args = generateProps({
+  filterable: false,
+});
 
-const templateWithRow = `
-<gl-paginated-list
-:list="list"
-:perPage="perPage"
-:page="page"
-:filterable="filterable"
-:filter="filter"
-:emptyMessage="emptyMessage"
-:emptySearchMessage="emptySearchMessage"
->
+export const WithEmptyList = (args, { argTypes }) => ({
+  components: {
+    GlPaginatedList,
+    GlButton,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+WithEmptyList.args = generateProps({
+  list: emptyList,
+});
 
-  <template slot-scope="{ listItem }"  >
-    <gl-button
-    variant="success"
-    class="order-1"
-    @click="alert"
+export const WithHeaderSlot = (args, { argTypes }) => ({
+  components: {
+    GlPaginatedList,
+    GlButton,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-paginated-list
+    :list="list"
+    :perPage="perPage"
+    :page="page"
+    :filterable="filterable"
+    :filter="filter"
+    :item-key="itemKey"
+    :emptyMessage="emptyMessage"
+    :emptySearchMessage="emptySearchMessage"
     >
-      {{ listItem.id }}
-    </gl-button>
-  </template>
 
-</gl-paginated-list>
-`;
+      <template #header>
+        <gl-button
+          variant="success"
+          class="order-1"
+          @click="alert"
+        >
+          Foo Button
+        </gl-button>
+      </template>
 
-function generateProps() {
-  return {
-    list: {
-      type: Array,
-      default: object('list', list),
-    },
-    perPage: {
-      type: Number,
-      default: number('perPage', 10),
-    },
-    page: {
-      type: Number,
-      default: number('page', 1),
-    },
-    filterable: {
-      type: Boolean,
-      default: boolean('filterable', true),
-    },
-    filter: {
-      type: String,
-      default: text('filter', 'id'),
-    },
-    itemKey: {
-      type: String,
-      default: text('itemKey', 'id'),
+    </gl-paginated-list>
+    `,
+  methods: {
+    alert() {
+      // eslint-disable-next-line no-alert
+      window.alert('clicked');
     },
-    emptyMessage: {
-      type: String,
-      default: text('emptyMessage', 'There are currently no items in this list.'),
-    },
-    emptySearchMessage: {
-      type: String,
-      default: text('emptySearchMessage', 'Sorry, your filter produced no results.'),
-    },
-  };
-}
+  },
+});
+WithHeaderSlot.args = generateProps();
 
-documentedStoriesOf('base/paginated-list', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('no filter', () => ({
-    props: {
-      ...generateProps(),
-      filterable: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    components,
-    template,
-  }))
-  .add('with empty list', () => ({
-    props: {
-      ...generateProps(),
-      list: {
-        type: Array,
-        default: array('list', emptyList),
-      },
-    },
-    components,
-    template,
-  }))
-  .add('with header slot', () => ({
-    props: generateProps(),
-    components,
-    template: templateWithHeader,
-    methods: {
-      alert() {
-        // eslint-disable-next-line no-alert
-        window.alert('clicked');
-      },
+export const WithSubheaderSlot = (args, { argTypes }) => ({
+  components: {
+    GlPaginatedList,
+    GlButton,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-paginated-list
+    :list="list"
+    :perPage="perPage"
+    :page="page"
+    :filterable="filterable"
+    :filter="filter"
+    :item-key="itemKey"
+    :emptyMessage="emptyMessage"
+    :emptySearchMessage="emptySearchMessage"
+    >
+
+    <template #subheader>
+      Dropdown content can go here when like when an action button is clicked 
+    </template>
+    
+    </gl-paginated-list>
+  `,
+});
+WithSubheaderSlot.args = generateProps();
+
+export const WithRowSlot = (args, { argTypes }) => ({
+  components: {
+    GlPaginatedList,
+    GlButton,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-paginated-list
+    :list="list"
+    :perPage="perPage"
+    :page="page"
+    :filterable="filterable"
+    :filter="filter"
+    :item-key="itemKey"
+    :emptyMessage="emptyMessage"
+    :emptySearchMessage="emptySearchMessage"
+    >
+    
+      <template slot-scope="{ listItem }"  >
+        <gl-button
+        variant="success"
+        class="order-1"
+        @click="alert"
+        >
+          {{ listItem.id }}
+        </gl-button>
+      </template>
+    
+    </gl-paginated-list>
+    `,
+  methods: {
+    alert() {
+      // eslint-disable-next-line no-alert
+      window.alert('clicked');
     },
-  }))
-  .add('with subheader slot', () => ({
-    props: generateProps(),
-    components,
-    template: templateWithSubheader,
-  }))
-  .add('with row slot', () => ({
-    props: generateProps(),
-    components,
-    template: templateWithRow,
-    methods: {
-      alert() {
-        // eslint-disable-next-line no-alert
-        window.alert('clicked');
+  },
+});
+WithRowSlot.args = generateProps();
+
+export default {
+  title: 'base/paginated-list',
+  component: GlPaginatedList,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-  }));
+  },
+};

package/src/components/base/toast/toast.documentation.js

@@ -1,8 +1,6 @@
-import examples from './examples';
 import description from './toast.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
 };

package/src/components/base/toast/toast.md

@@ -1,8 +1,3 @@
-# Toast
-
-<!-- STORY -->
-
-## Usage
 
 Toasts are used to display system messages. The messages are short and straightforward. It may
 contain a dismiss button, and an action button depending on the situation.
@@ -51,9 +46,3 @@ Below are the options you can pass to create a toast
 | action        | Object        | close       | Add single actions to toast              |
 | toastClass    | String, Array | 'gl-toast'  | Custom css class name of the toast       |
 | onComplete    | Function      | null        | Trigger when toast is completed          |
-
-## Under the hood
-
-Toast uses [`BToast`] internally. So please take a look at their extensive documentation for more information.
-
-[`btoast`]: https://bootstrap-vue.org/docs/components/toast

package/src/components/base/toast/toast.stories.js

@@ -1,66 +1,82 @@
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlToast } from '../../../../index';
 import readme from './toast.md';
 
 Vue.use(GlToast);
 
-function generateDefault() {
-  return () => ({
-    template: `<gl-button @click="showToast()">Show default toast</gl-button>`,
-    methods: {
-      showToast() {
-        this.$toast.show('This is the default toast.');
-      },
+const Template = () => ({
+  components: { GlToast },
+  template: `
+  <gl-button @click="showToast()">
+    Show default toast
+  </gl-button>`,
+  methods: {
+    showToast() {
+      this.$toast.show('This is the default toast.');
     },
-    mounted() {
-      this.showToast();
+  },
+  mounted() {
+    this.showToast();
+  },
+});
+
+export const Default = Template.bind({});
+
+export const WithActions = () => ({
+  components: { GlToast },
+  template: `
+  <gl-button @click="showToast()">
+    Show toast with actions
+  </gl-button>`,
+  methods: {
+    showToast() {
+      this.$toast.show('This is a toast with an action.', {
+        action: {
+          text: 'Undo',
+          onClick: () => {},
+        },
+      });
     },
-  });
-}
+  },
+  mounted() {
+    this.showToast();
+  },
+});
 
-function generateWithActions() {
-  return () => ({
-    template: `<gl-button @click="showToast()">Show toast with actions</gl-button>`,
-    methods: {
-      showToast() {
-        this.$toast.show('This is a toast with an action.', {
+export const WithLongContent = () => ({
+  components: { GlToast },
+  template: `
+  <gl-button @click="showToast()">
+    Show toast with a long content
+  </gl-button>`,
+  methods: {
+    showToast() {
+      this.$toast.show(
+        'This is a toast with a long content and an action. Notice how the text wraps to multiple lines when the max-width is reached.',
+        {
           action: {
-            text: 'Undo',
+            text: 'Undo action',
             onClick: () => {},
           },
-        });
-      },
+        }
+      );
     },
-    mounted() {
-      this.showToast();
-    },
-  });
-}
+  },
+  mounted() {
+    this.showToast();
+  },
+});
 
-function generateLong() {
-  return () => ({
-    template: `<gl-button @click="showToast()">Show toast with a long content</gl-button>`,
-    methods: {
-      showToast() {
-        this.$toast.show(
-          'This is a toast with a long content and an action. Notice how the text wraps to multiple lines when the max-width is reached.',
-          {
-            action: {
-              text: 'Undo action',
-              onClick: () => {},
-            },
-          }
-        );
+export default {
+  title: 'base/toast',
+  component: GlToast,
+  parameters: {
+    bootstrapComponent: 'toast',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    mounted() {
-      this.showToast();
-    },
-  });
-}
-
-documentedStoriesOf('base/toast', readme)
-  .add('default', generateDefault())
-  .add('with actions', generateWithActions())
-  .add('with long content', generateLong());
+  },
+};

package/src/scss/utilities.scss

@@ -2940,6 +2940,18 @@
   }
 }
 
+.gl-md-flex-direction-column {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
+.gl-md-flex-direction-column\! {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
 .gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;
@@ -4666,6 +4678,12 @@
 .gl-pr-9\! {
   padding-right: $gl-spacing-scale-9 !important;
 }
+.gl-pr-10 {
+  padding-right: $gl-spacing-scale-10;
+}
+.gl-pr-10\! {
+  padding-right: $gl-spacing-scale-10 !important;
+}
 .gl-pl-0 {
   padding-left: 0;
 }
@@ -4726,6 +4744,12 @@
 .gl-pl-9\! {
   padding-left: $gl-spacing-scale-9 !important;
 }
+.gl-pl-10 {
+  padding-left: $gl-spacing-scale-10;
+}
+.gl-pl-10\! {
+  padding-left: $gl-spacing-scale-10 !important;
+}
 .gl-pl-11 {
   padding-left: $gl-spacing-scale-11;
 }
@@ -5567,12 +5591,12 @@
   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;
   }
 }
@@ -7307,6 +7331,14 @@
   line-height: $gl-line-height-36 !important;
 }
 
+.gl-line-height-42 {
+  line-height: $gl-line-height-42;
+}
+
+.gl-line-height-42\! {
+  line-height: $gl-line-height-42 !important;
+}
+
 .gl-line-height-52 {
   line-height: $gl-line-height-52;
 }

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

@@ -96,6 +96,12 @@
   }
 }
 
+@mixin gl-md-flex-direction-column {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-flex-direction-column;
+  }
+}
+
 @mixin gl-xs-flex-direction-column {
   @include gl-media-breakpoint-down(sm) {
     flex-direction: column;