@gitlab/ui 36.5.0 → 36.7.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [36.7.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.7.0...v36.7.1) (2022-02-18)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.3.6 ([266b5a7](https://gitlab.com/gitlab-org/gitlab-ui/commit/266b5a7deb3496c80418fa6d39e944ddab4cab0d))
+
+# [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)
+
+
+### Features
+
+* **css:** Add shorthand border util classes ([318c99c](https://gitlab.com/gitlab-org/gitlab-ui/commit/318c99c4764b7cc889a4b97d93215ab322b03025))
+
+## [36.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.5.0...v36.5.1) (2022-02-11)
+
+
+### Bug Fixes
+
+* **breadcrumb:** Use sentence case for examples ([ace4a4f](https://gitlab.com/gitlab-org/gitlab-ui/commit/ace4a4fa048131c768b0442ac0b677f20258446a))
+
 # [36.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v36.4.0...v36.5.0) (2022-02-10)
 
 

package/dist/components/base/drawer/drawer.documentation.js

@@ -1,11 +1,8 @@
-import examples from './examples';
-
-var description = "# Drawer\n\n<!-- STORY -->\n\n## Usage\n\nThe drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
+var description = "The drawer is used to show more information about a certain resource in the UI and potentially\nhandle actions on the information.\n\n### By default\n\n```html\n<gl-drawer :open=\"open\" @close=\"close\">\n  <template #header>Your Title</template>\n  <template>\n   ...children\n  </template>\n</gl-drawer>\n```\n\n- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will\nbe a function that will toggle open to `false`.\n";
 
 var drawer_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 
 export default drawer_documentation;

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;