@gitlab/ui 36.6.0 → 36.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [36.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.6.0...v36.7.0) (2022-02-17)
+
+
+### Features
+
+* **pagination:** Remove abbreviation from prev text ([f959077](https://gitlab.com/gitlab-org/gitlab-ui/commit/f959077da8ec3bf2107f2229a25fd09ff6771993))
+
 # [36.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.5.1...v36.6.0) (2022-02-14)
 
 

package/dist/components/base/form/form_radio_group/form_radio_group.documentation.js

@@ -1,54 +1,8 @@
-import examples from './examples';
-
-var description = "# GlFormRadioGroup\n\nThe `GlFormRadioGroup` component provides an alternative and sometimes more\ncompact way of setting up a group of `GlFormRadio` components.\n\n## Usage\n\n`GlFormRadioGroup` can be used in a few ways to build a group of `GlFormRadio`\ncomponents: implicitly, explicitly, or a mix of both.\n\nBelow is an example which demonstrates all three approaches, written such that\nall of them produce the same visual result.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selected: 'one',\n      options: [\n        {\n          value: 'one',\n          text: 'One',\n        },\n        {\n          value: 'two',\n          text: 'Two',\n        },\n        {\n          value: 'three',\n          text: 'Three',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <!-- Implicit -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"options\" name=\"implicit\" />\n\n    <!-- Explicit -->\n    <gl-form-radio-group v-model=\"selected\" name=\"explicit\">\n      <gl-form-radio value=\"one\">One</gl-form-radio>\n      <gl-form-radio value=\"two\">Two</gl-form-radio>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n\n    <!-- Mixed -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"[options[1]]\" name=\"mixed\">\n      <template #first>\n        <gl-form-radio value=\"one\">One</gl-form-radio>\n      </template>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n  </div>\n</template>\n```\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-radio-group>` be `stacked` by default and\nis non-changeable at this time.\n";
+var description = "The `GlFormRadioGroup` component provides an alternative and sometimes more\ncompact way of setting up a group of `GlFormRadio` components.\n\n## Usage\n\n`GlFormRadioGroup` can be used in a few ways to build a group of `GlFormRadio`\ncomponents: implicitly, explicitly, or a mix of both.\n\nBelow is an example which demonstrates all three approaches, written such that\nall of them produce the same visual result.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selected: 'one',\n      options: [\n        {\n          value: 'one',\n          text: 'One',\n        },\n        {\n          value: 'two',\n          text: 'Two',\n        },\n        {\n          value: 'three',\n          text: 'Three',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <!-- Implicit -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"options\" name=\"implicit\" />\n\n    <!-- Explicit -->\n    <gl-form-radio-group v-model=\"selected\" name=\"explicit\">\n      <gl-form-radio value=\"one\">One</gl-form-radio>\n      <gl-form-radio value=\"two\">Two</gl-form-radio>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n\n    <!-- Mixed -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"[options[1]]\" name=\"mixed\">\n      <template #first>\n        <gl-form-radio value=\"one\">One</gl-form-radio>\n      </template>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n  </div>\n</template>\n```\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-radio-group>` be `stacked` by default and\nis non-changeable at this time.\n";
 
 var form_radio_group_documentation = {
   description,
-  examples,
-  followsDesignSystem: true,
-  bootstrapComponent: 'b-form-radio-group',
-  propsInfo: {
-    options: {
-      additionalInfo: 'Array of objects representing the radios to render'
-    },
-    valueField: {
-      additionalInfo: 'Field name in the options prop that should be used for the value'
-    },
-    textField: {
-      additionalInfo: 'Field name in the options prop that should be used for the text label'
-    },
-    htmlField: {
-      additionalInfo: 'Field name in the options prop that should be used for the html label instead of text field. Use with caution.'
-    },
-    disabledField: {
-      additionalInfo: 'Field name in the options prop that should be used for the disabled state'
-    },
-    checked: {
-      additionalInfo: 'The current value of the checked radio in the group'
-    }
-  },
-  events: [{
-    event: 'input',
-    args: [{
-      arg: 'checked',
-      description: 'current selected value of radio group'
-    }],
-    description: 'Emitted when the selected value is changed'
-  }, {
-    event: 'change',
-    args: [{
-      arg: 'checked',
-      description: 'current selected value of radio group'
-    }],
-    description: 'Emitted when the selected value is changed due to user interaction'
-  }],
-  slots: [{
-    name: 'first',
-    description: 'Slot for GlFormRadios that will appear before radios generated from options prop'
-  }, {
-    name: 'default',
-    description: 'Slot for GlFormRadios that will appear after radios generated from options prop'
-  }]
+  followsDesignSystem: true
 };
 
 export default form_radio_group_documentation;

package/dist/components/base/form/form_radio_group/form_radio_group.js

@@ -17,14 +17,34 @@ var script = {
   },
   mixins: [formOptionsMixin],
   inheritAttrs: false,
-  model
+  model,
+  methods: {
+    onInput(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', e);
+    },
+
+    onChange(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event change
+       */
+      this.$emit('change', e);
+    }
+
+  }
 };
 
 /* 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('b-form-radio-group',_vm._g(_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"input":function($event){return _vm.$emit('input', $event)},"change":function($event){return _vm.$emit('change', $event)}}},'b-form-radio-group',_vm.$attrs,false),_vm.$listeners),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-radio',{key:idx,attrs:{"value":option.value,"disabled":option.disabled}},[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-radio-group',_vm._g(_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"input":_vm.onInput,"change":_vm.onChange}},'b-form-radio-group',_vm.$attrs,false),_vm.$listeners),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-radio',{key:idx,attrs:{"value":option.value,"disabled":option.disabled}},[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/pagination/pagination.js

@@ -88,7 +88,7 @@ var script = {
     prevText: {
       type: String,
       required: false,
-      default: 'Prev'
+      default: 'Previous'
     },
 
     /**

package/dist/components/charts/heatmap/heatmap.documentation.js

@@ -1,10 +1,7 @@
-import examples from './examples';
-
 var description = "## Heatmaps\n\n**Note** This component uses `<gl-legend>`, which should allow a user to click on any data point(s)\nin the legend and make the corresponding data point(s) on the chart rendered disappear.\n_See [area chart](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default)\nfor an example_ For this particular chart, there is a [known issue](https://gitlab.com/gitlab-org/gitlab-ui/issues/352)\nwith the functionality of the legend, where clicking on it does nothing.\n";
 
 var heatmap_documentation = {
   description,
-  examples,
   followsDesignSystem: true
 };
 

package/dist/components/charts/series_label/series_label.documentation.js

@@ -1,10 +1,7 @@
-import examples from './examples';
-
-var description = "# Chart Series Label\n\nDisplays chart data series name as a label for chart legend, tooltip, etc.\n";
+var description = "Displays chart data series name as a label for chart legend, tooltip, etc.\n";
 
 var series_label_documentation = {
-  description,
-  examples
+  description
 };
 
 export default series_label_documentation;

package/documentation/documented_stories.js

@@ -129,6 +129,9 @@ export const setupStorybookReadme = () =>
         'GlPopover',
         'GlSingleStat',
         'GlDrawer',
+        'GlHeatmap',
+        'GlFormRadioGroup',
+        'GlChartSeriesLabel',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "36.6.0",
+  "version": "36.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -76,7 +76,8 @@
     "vue": "^2.6.10"
   },
   "resolutions": {
-    "chokidar": "^3.5.2"
+    "chokidar": "^3.5.2",
+    "sane": "^5.0.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.6",
@@ -122,7 +123,6 @@
     "mockdate": "^2.0.5",
     "node-sass": "^4.14.1",
     "node-sass-magic-importer": "^5.3.2",
-    "nodemon": "^1.11.0",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",

package/src/components/base/form/form_radio_group/form_radio_group.documentation.js

@@ -1,54 +1,6 @@
-import examples from './examples';
 import description from './form_radio_group.md';
 
 export default {
   description,
-  examples,
   followsDesignSystem: true,
-  bootstrapComponent: 'b-form-radio-group',
-  propsInfo: {
-    options: {
-      additionalInfo: 'Array of objects representing the radios to render',
-    },
-    valueField: {
-      additionalInfo: 'Field name in the options prop that should be used for the value',
-    },
-    textField: {
-      additionalInfo: 'Field name in the options prop that should be used for the text label',
-    },
-    htmlField: {
-      additionalInfo:
-        'Field name in the options prop that should be used for the html label instead of text field. Use with caution.',
-    },
-    disabledField: {
-      additionalInfo: 'Field name in the options prop that should be used for the disabled state',
-    },
-    checked: {
-      additionalInfo: 'The current value of the checked radio in the group',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed',
-    },
-    {
-      event: 'change',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed due to user interaction',
-    },
-  ],
-  slots: [
-    {
-      name: 'first',
-      description:
-        'Slot for GlFormRadios that will appear before radios generated from options prop',
-    },
-    {
-      name: 'default',
-      description:
-        'Slot for GlFormRadios that will appear after radios generated from options prop',
-    },
-  ],
 };

package/src/components/base/form/form_radio_group/form_radio_group.md

@@ -1,5 +1,3 @@
-# GlFormRadioGroup
-
 The `GlFormRadioGroup` component provides an alternative and sometimes more
 compact way of setting up a group of `GlFormRadio` components.
 

package/src/components/base/form/form_radio_group/form_radio_group.stories.js

@@ -1,30 +1,16 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
+import { GlFormRadioGroup } from '../../../../index';
 import readme from './form_radio_group.md';
 
-const components = {
-  GlFormRadioGroup,
-  GlFormRadio,
-};
-
 const defaultOptions = [
   { value: 'pizza', text: 'Pizza' },
   { value: 'tacos', text: 'Tacos' },
   { value: 'burger', text: 'Burger', disabled: true },
 ];
-
-function generateProps({ name = 'radio-group-name', options = defaultOptions } = {}) {
-  return {
-    name: {
-      type: String,
-      default: text('name', name),
-    },
-    options: {
-      default: object('options', options),
-    },
-  };
-}
+const data = () => ({ selected: 'slot-option' });
+const generateProps = ({ name = 'radio-group-name', options = defaultOptions } = {}) => ({
+  name,
+  options,
+});
 
 const template = `
   <div>
@@ -45,13 +31,48 @@ const template = `
     </gl-form-radio-group>
   </div>`;
 
-const data = () => ({ selected: 'slot-option' });
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlFormRadioGroup,
+  },
+  props: Object.keys(argTypes),
+  template,
+  data,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/form/form-radio-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    data,
-    template,
-  }));
+export default {
+  title: 'base/form/form-radio-group',
+  component: GlFormRadioGroup,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-form-radio-group',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description: 'Array of objects representing the radios to render',
+    },
+    valueField: {
+      description: 'Field name in the options prop that should be used for the value',
+    },
+    textField: {
+      description: 'Field name in the options prop that should be used for the text label',
+    },
+    htmlField: {
+      description:
+        'Field name in the options prop that should be used for the html label instead of text field. Use with caution.',
+    },
+    disabledField: {
+      description: 'Field name in the options prop that should be used for the disabled state',
+    },
+    checked: {
+      description: 'The current value of the checked radio in the group',
+    },
+  },
+};

package/src/components/base/form/form_radio_group/form_radio_group.vue

@@ -17,6 +17,24 @@ export default {
   mixins: [formOptionsMixin],
   inheritAttrs: false,
   model,
+  methods: {
+    onInput(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event input
+       */
+      this.$emit('input', e);
+    },
+    onChange(e) {
+      /**
+       * Emitted when the selected value is changed.
+       *
+       * @event change
+       */
+      this.$emit('change', e);
+    },
+  },
 };
 </script>
 <template>
@@ -25,9 +43,10 @@ export default {
     stacked
     v-bind="$attrs"
     v-on="$listeners"
-    @input="$emit('input', $event)"
-    @change="$emit('change', $event)"
+    @input="onInput"
+    @change="onChange"
   >
+    <!-- @slot Slot for GlFormRadios that will appear before radios generated from options prop -->
     <slot name="first"></slot>
     <gl-form-radio
       v-for="(option, idx) in formOptions"
@@ -38,6 +57,7 @@ export default {
       <span v-if="option.html" v-safe-html="option.html"></span>
       <span v-else>{{ option.text }}</span>
     </gl-form-radio>
+    <!-- @slot Slot for GlFormRadios that will appear after radios generated from options prop -->
     <slot></slot>
   </b-form-radio-group>
 </template>

package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap

@@ -42,7 +42,7 @@ exports[`Paginated List Pagination renders 1 item on page 7 with page size of 2
     limits="[object Object]"
     nexttext="Next"
     perpage="2"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="7"
   />
@@ -119,7 +119,7 @@ exports[`Paginated List Pagination renders 3 items on page 2 with default page s
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="2"
   />
@@ -222,7 +222,7 @@ exports[`Paginated List Pagination renders 5 items on page 1 for a page size of
     limits="[object Object]"
     nexttext="Next"
     perpage="5"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -390,7 +390,7 @@ exports[`Paginated List Pagination renders 10 items for a default page size of 1
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -597,7 +597,7 @@ exports[`Paginated List Pagination renders 13 items for a default page size of 2
     limits="[object Object]"
     nexttext="Next"
     perpage="20"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -717,7 +717,7 @@ exports[`Paginated List Search states renders the list filtered by search result
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="2"
     value="1"
   />
@@ -837,7 +837,7 @@ exports[`Paginated List Searchless states renders the list with nested items, wh
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="2"
     value="1"
   />
@@ -888,7 +888,7 @@ exports[`Paginated List props filter filters on default "id" key 1`] = `
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />
@@ -939,7 +939,7 @@ exports[`Paginated List props filter filters on provided "myKey" key 1`] = `
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />
@@ -990,7 +990,7 @@ exports[`Paginated List props filter filters with provided filter function 1`] =
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />

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

@@ -4,7 +4,11 @@ import GlPagination from './pagination.vue';
 
 const components = { GlPagination };
 
-const generateBaseProps = ({ prevText = 'Prev', nextText = 'Next', disabled = false } = {}) => ({
+const generateBaseProps = ({
+  prevText = 'Previous',
+  nextText = 'Next',
+  disabled = false,
+} = {}) => ({
   prevText,
   nextText,
   disabled,

package/src/components/base/pagination/pagination.vue

@@ -82,7 +82,7 @@ export default {
     prevText: {
       type: String,
       required: false,
-      default: 'Prev',
+      default: 'Previous',
     },
     /**
      * When using the compact pagination, use this prop to pass the next page number

package/src/components/charts/heatmap/heatmap.documentation.js

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

package/src/components/charts/heatmap/heatmap.stories.js

@@ -1,12 +1,7 @@
 import { GlHeatmap } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { toolbox } from '../../../utils/charts/story_config';
 import readme from '../area/area.md';
 
-const components = {
-  GlHeatmap,
-};
-
 function generateData() {
   let data = [
     [5, 0, 5],
@@ -21,46 +16,68 @@ function generateData() {
   return data;
 }
 
-documentedStoriesOf('charts/heatmap', readme)
-  .add('default', () => ({
-    data() {
-      return {
-        data: generateData(),
-        xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-        yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
-        xAxisName: 'Hour',
-        yAxisName: 'Day',
-      };
-    },
-    components,
-    template: `<gl-heatmap
+const template = `
+    <gl-heatmap
       :data-series="data"
       :x-axis-labels="xAxisLabels"
       :y-axis-labels="yAxisLabels"
       :x-axis-name="xAxisName"
       :y-axis-name="yAxisName"
-    />`,
-  }))
-  .add('with toolbox', () => ({
-    data() {
-      return {
-        data: generateData(),
-        xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-        yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
-        xAxisName: 'Hour',
-        yAxisName: 'Day',
-        option: {
-          toolbox,
-        },
-      };
+      :options="options"
+    />
+`;
+
+const generateProps = ({
+  data = generateData(),
+  xAxisLabels = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+  yAxisLabels = ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
+  xAxisName = 'Hour',
+  yAxisName = 'Day',
+  options = {},
+} = {}) => ({
+  data,
+  xAxisLabels,
+  yAxisLabels,
+  xAxisName,
+  yAxisName,
+  options,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlHeatmap,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({ options: { toolbox } });
+
+export default {
+  title: 'charts/heatmap',
+  component: GlHeatmap,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    components,
-    template: `<gl-heatmap
-      :data-series="data"
-      :x-axis-labels="xAxisLabels"
-      :y-axis-labels="yAxisLabels"
-      :x-axis-name="xAxisName"
-      :y-axis-name="yAxisName"
-      :options="option"
-    />`,
-  }));
+  },
+  argTypes: {
+    showToolbox: { control: { disable: true } },
+    toolboxZoomIconPath: { control: { disable: true } },
+    toolboxBackIconPath: { control: { disable: true } },
+    toolboxRestoreIconPath: { control: { disable: true } },
+    toolboxSaveAsImageIconPath: { control: { disable: true } },
+    dataSeries: { control: { disable: true } },
+    formatTooltipText: { control: { disable: true } },
+    legendAverageText: { control: { disable: true } },
+    legendMaxText: { control: { disable: true } },
+    responsive: { control: { disable: true } },
+  },
+};

package/src/components/charts/series_label/series_label.documentation.js

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

package/src/components/charts/series_label/series_label.md

@@ -1,3 +1 @@
-# Chart Series Label
-
 Displays chart data series name as a label for chart legend, tooltip, etc.