@gitlab/ui 32.49.0 → 32.51.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/components/base/breadcrumb/breadcrumb.documentation.js +1 -1
  3. package/dist/components/base/form/form.documentation.js +1 -5
  4. package/dist/components/base/form/form_select/form_select.documentation.js +2 -17
  5. package/dist/components/base/modal/modal.js +15 -1
  6. package/dist/index.css +1 -1
  7. package/dist/index.css.map +1 -1
  8. package/dist/utility_classes.css +1 -1
  9. package/dist/utility_classes.css.map +1 -1
  10. package/dist/utils/string_utils.js +6 -2
  11. package/documentation/documented_stories.js +2 -0
  12. package/package.json +5 -3
  13. package/scss_to_js/scss_variables.js +2 -0
  14. package/scss_to_js/scss_variables.json +10 -0
  15. package/src/components/base/breadcrumb/breadcrumb.md +6 -5
  16. package/src/components/base/breadcrumb/breadcrumb.scss +1 -1
  17. package/src/components/base/breadcrumb/breadcrumb.stories.js +4 -1
  18. package/src/components/base/form/form.documentation.js +0 -3
  19. package/src/components/base/form/form.stories.js +99 -14
  20. package/src/components/base/form/form_select/form_select.documentation.js +0 -19
  21. package/src/components/base/form/form_select/form_select.md +0 -2
  22. package/src/components/base/form/form_select/form_select.stories.js +98 -80
  23. package/src/components/base/modal/modal.vue +56 -35
  24. package/src/scss/utilities.scss +16 -0
  25. package/src/scss/utility-mixins/sizing.scss +8 -0
  26. package/src/scss/variables.scss +2 -0
  27. package/src/utils/string_utils.js +6 -2
  28. package/src/utils/string_utils.spec.js +8 -0
  29. package/dist/components/base/form/examples/form.basic.example.js +0 -76
  30. package/dist/components/base/form/examples/form.edit.example.js +0 -66
  31. package/dist/components/base/form/examples/form.inline.example.js +0 -62
  32. package/dist/components/base/form/examples/form.novalidate.example.js +0 -61
  33. package/dist/components/base/form/examples/index.js +0 -27
  34. package/dist/components/base/form/form_select/examples/form_select.basic.example.js +0 -55
  35. package/dist/components/base/form/form_select/examples/form_select.disabled.example.js +0 -55
  36. package/dist/components/base/form/form_select/examples/form_select.manual_options.example.js +0 -48
  37. package/dist/components/base/form/form_select/examples/form_select.mixed_options.example.js +0 -55
  38. package/dist/components/base/form/form_select/examples/index.js +0 -27
  39. package/src/components/base/form/examples/form.basic.example.vue +0 -73
  40. package/src/components/base/form/examples/form.edit.example.vue +0 -37
  41. package/src/components/base/form/examples/form.inline.example.vue +0 -36
  42. package/src/components/base/form/examples/form.novalidate.example.vue +0 -30
  43. package/src/components/base/form/examples/index.js +0 -32
  44. package/src/components/base/form/form_select/examples/form_select.basic.example.vue +0 -17
  45. package/src/components/base/form/form_select/examples/form_select.disabled.example.vue +0 -17
  46. package/src/components/base/form/form_select/examples/form_select.manual_options.example.vue +0 -17
  47. package/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue +0 -21
  48. package/src/components/base/form/form_select/examples/index.js +0 -32
package/CHANGELOG.md CHANGED
@@ -1,3 +1,31 @@
1
+ ## [32.51.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.1...v32.51.2) (2022-01-06)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **GlBreadcrumb:** update breadcrumb's item avatar styles ([28aa091](https://gitlab.com/gitlab-org/gitlab-ui/commit/28aa09195c6bda5eb6abd3107d77a3e5fc7f9e28))
7
+
8
+ ## [32.51.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.51.0...v32.51.1) (2022-01-05)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * **Avatar:** Add support for multiple-character emojis ([f3fcb2f](https://gitlab.com/gitlab-org/gitlab-ui/commit/f3fcb2ff5a2e74f77b3a96dc8922a3821c86e2fa))
14
+
15
+ # [32.51.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.50.0...v32.51.0) (2021-12-29)
16
+
17
+
18
+ ### Features
19
+
20
+ * **css:** Added gl-max-w-26 and gl-max-w-62 classes ([69a6829](https://gitlab.com/gitlab-org/gitlab-ui/commit/69a6829bbcaa5dc821a4fa29c4f3ec79e4b7aa5e))
21
+
22
+ # [32.50.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.49.0...v32.50.0) (2021-12-16)
23
+
24
+
25
+ ### Features
26
+
27
+ * Add support for @gitlab/svgs@2 peer dependency ([77076b7](https://gitlab.com/gitlab-org/gitlab-ui/commit/77076b7d717f4245a29df115113c96d72b002540))
28
+
1
29
  # [32.49.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.48.0...v32.49.0) (2021-12-15)
2
30
 
3
31
 
@@ -1,4 +1,4 @@
1
- var description = "## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`\nso an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each breadcrumb.\n\n**note:** the component supports passing the property `to` in the list items to enable navigation\nthrough `vue-router`\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n <template #avatar>\n <img\n class=\"gl-breadcrumb-avatar-tile\"\n src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15\"\n width=\"15\"\n height=\"15\"\n />\n </template>\n <template #separator>\n <svg width=\"100\" height=\"15\">\n <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n </svg>\n </template>\n</gl-breadcrumb>\n```\n";
1
+ var description = "## Usage\n\nThis component provides two `<slot>` elements for customization. The first is a `<slot #avatar>`\nso an avatar can appear before the first breadcrumb. The second is a `<slot #separator>` to\ncustomize the icon that appears between each breadcrumb.\n\n**note:** the component supports passing the property `to` in the list items to enable navigation\nthrough `vue-router`\n\n### Example\n\nYou can use any kind of separator you want in the slot, like below, which uses `<svg>`\nto draw a `/`\n\n```html\n<gl-breadcrumb :items=\"items\">\n <template #avatar>\n <img \n alt=\"\"\n class=\"gl-breadcrumb-avatar-tile\"\n src=\"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16\"\n width=\"16\"\n height=\"16\"\n />\n </template>\n <template #separator>\n <svg height=\"16\">\n <line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" stroke=\"gray\" />\n </svg>\n </template>\n</gl-breadcrumb>\n```\n";
2
2
 
3
3
  var breadcrumb_documentation = {
4
4
  followsDesignSystem: true,
@@ -1,11 +1,7 @@
1
- import examples from './examples';
2
-
3
1
  var description = "A wrapper element for `gl-form-*` input elements. Supports `@submit` and `@reset` events, as well as\ncontrolling validation settings for form inputs.\n";
4
2
 
5
3
  var form_documentation = {
6
- description,
7
- examples,
8
- bootstrapComponent: 'b-form'
4
+ description
9
5
  };
10
6
 
11
7
  export default form_documentation;
@@ -1,23 +1,8 @@
1
- import examples from './examples';
2
-
3
- var description = "# Form Select\n\nForm select component used to select from group of options in a form.\n";
1
+ var description = "Form select component used to select from group of options in a form.\n";
4
2
 
5
3
  var form_select_documentation = {
6
4
  description,
7
- examples,
8
- followDesignSystem: true,
9
- bootstrapComponent: 'b-form-select',
10
- events: [{
11
- event: 'change',
12
- description: 'Emitted with the select value changes via user interaction.'
13
- }, {
14
- event: 'input',
15
- description: 'Emitted with the select value changes.'
16
- }],
17
- slots: [{
18
- name: 'first',
19
- description: 'Slot to place option tags above options provided via options prop'
20
- }]
5
+ followDesignSystem: true
21
6
  };
22
7
 
23
8
  export default form_select_documentation;
@@ -75,6 +75,20 @@ var script = {
75
75
  default: false
76
76
  }
77
77
  },
78
+ computed: {
79
+ shouldRenderModalOk() {
80
+ return Boolean(this.$slots['modal-ok']);
81
+ },
82
+
83
+ shouldRenderModalCancel() {
84
+ return Boolean(this.$slots['modal-cancel']);
85
+ },
86
+
87
+ shouldRenderModalFooter() {
88
+ return Boolean(this.actionCancel || this.actionSecondary || this.actionPrimary || this.$slots['modal-footer']);
89
+ }
90
+
91
+ },
78
92
  methods: {
79
93
  show() {
80
94
  this.$refs.modal.show();
@@ -151,7 +165,7 @@ var script = {
151
165
  const __vue_script__ = script;
152
166
 
153
167
  /* template */
154
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true}],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),_vm._v(" "),_vm._t("modal-ok",null,{"slot":"modal-ok"}),_vm._v(" "),_vm._t("modal-cancel",null,{"slot":"modal-cancel"}),_vm._v(" "),_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n "+_vm._s(_vm.actionCancel.text)+"\n ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n "+_vm._s(_vm.actionSecondary.text)+"\n ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n "+_vm._s(_vm.actionPrimary.text)+"\n ")]):_vm._e()],{"slot":"modal-footer"})],2)};
168
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n "+_vm._s(_vm.actionCancel.text)+"\n ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n "+_vm._s(_vm.actionSecondary.text)+"\n ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n "+_vm._s(_vm.actionPrimary.text)+"\n ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
155
169
  var __vue_staticRenderFns__ = [];
156
170
 
157
171
  /* style */