@gitlab/ui 32.64.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.64.0",
+  "version": "32.64.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -5591,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;
   }
 }

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

@@ -750,7 +750,7 @@
 */
 
 @mixin gl-gap-x-3 {
-  * + * {
+  > * + * {
     margin-left: #{$gl-spacing-scale-3};
   }
 }

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__;