@gitlab/ui 40.6.6 → 41.0.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [41.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.7.1...v41.0.0) (2022-05-31)
+
+
+### Features
+
+* **GlModal:** Remove deprecated slots modal-ok and modal-cancel ([7e116ec](https://gitlab.com/gitlab-org/gitlab-ui/commit/7e116ec5295d21a2afefc157c57312a733459bbd))
+
+
+### BREAKING CHANGES
+
+* **GlModal:** This removes the modal-ok and modal-cancel slots from
+the modal component. These slots have been deprecated and are now no
+longer supported.
+
+Use the props `action-primary`, `action-secondary` and `action-cancel`
+instead.
+
+## [40.7.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.7.0...v40.7.1) (2022-05-31)
+
+
+### Bug Fixes
+
+* **GlToggle:** Fix overflow of long help text ([8947400](https://gitlab.com/gitlab-org/gitlab-ui/commit/89474002e1f9333675ac6ed626277a18595d9d89))
+
+# [40.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.6.6...v40.7.0) (2022-05-31)
+
+
+### Features
+
+* **GlSingleStat:** support string and number for value prop ([9217ee4](https://gitlab.com/gitlab-org/gitlab-ui/commit/9217ee42c9b54e04a8c98c56c50f9018896bc32d))
+
 ## [40.6.6](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.6.5...v40.6.6) (2022-05-30)
 
 

package/dist/components/base/modal/modal.js

@@ -82,20 +82,6 @@ var script = {
       default: ''
     }
   },
-  computed: {
-    shouldRenderModalOk() {
-      return Boolean(this.$slots['modal-ok']);
-    },
-
-    shouldRenderModalCancel() {
-      return Boolean(this.$slots['modal-cancel']);
-    },
-
-    shouldRenderModalFooter() {
-      return Boolean(this.actionCancel || this.actionSecondary || this.actionPrimary || this.$slots['modal-footer']);
-    }
-
-  },
 
   mounted() {
     if (!this.ariaLabel && !this.title) {
@@ -179,7 +165,7 @@ var 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-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"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))};
+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,"aria-label":_vm.ariaLabel || _vm.title,"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},{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,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/toggle/toggle.js

@@ -131,11 +131,11 @@ var 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('div',{staticClass:"gl-toggle-wrapper gl-display-flex gl-mb-0 gl-w-max-content",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-toggle-wrapper gl-display-flex gl-mb-0",class:{
     'gl-flex-direction-column': _vm.labelPosition === 'top' || _vm.labelPosition === 'hidden',
     'gl-toggle-label-inline': _vm.labelPosition === 'left',
     'is-disabled': _vm.disabled,
-  },attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label",class:{ 'gl-sr-only': _vm.labelPosition === 'hidden' },attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",[_vm._v(_vm._s(_vm.label))])],2),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{class:{
+  },attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label gl-flex-shrink-0",class:{ 'gl-sr-only': _vm.labelPosition === 'hidden' },attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",[_vm._v(_vm._s(_vm.label))])],2),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{staticClass:"gl-flex-shrink-0",class:{
       'gl-toggle': true,
       'is-checked': _vm.value,
       'is-disabled': _vm.disabled,

package/dist/components/charts/single_stat/single_stat.js

@@ -16,11 +16,11 @@ var script = {
       required: true
     },
     value: {
-      type: String,
+      type: [String, Number],
       required: true
     },
     unit: {
-      type: [String, Number],
+      type: String,
       required: false,
       default: null
     },

package/package.json

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

package/src/components/base/modal/modal.md

@@ -7,11 +7,7 @@ should serve a single purpose dedicated to completing the user’s task.
 You can use the `v-model` directive to control the modal’s visibility. The `v-model`
 directive interfaces with the `visible` property and the `@change` event.
 
-## Deprecation Warning
-
-We are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the
-`modal-footer` slot content is populated. This is in order to align this component with the design
-system.
+## Modal footer
 
 The `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and
 `action-cancel`. These props allow you to handle how a primary, secondary and cancel button will

package/src/components/base/modal/modal.vue

@@ -86,22 +86,6 @@ export default {
       default: '',
     },
   },
-  computed: {
-    shouldRenderModalOk() {
-      return Boolean(this.$slots['modal-ok']);
-    },
-    shouldRenderModalCancel() {
-      return Boolean(this.$slots['modal-cancel']);
-    },
-    shouldRenderModalFooter() {
-      return Boolean(
-        this.actionCancel ||
-          this.actionSecondary ||
-          this.actionPrimary ||
-          this.$slots['modal-footer']
-      );
-    },
-  },
   mounted() {
     if (!this.ariaLabel && !this.title) {
       logWarning(
@@ -168,7 +152,7 @@ export default {
 </script>
 
 <template>
-  <!-- 
+  <!--
   Emitted when the modal visibility changes
   @event change
  -->
@@ -202,14 +186,8 @@ export default {
       <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
-    <template v-if="shouldRenderModalOk" #modal-ok>
-      <slot name="modal-ok"></slot>
-    </template>
-    <template v-if="shouldRenderModalCancel" #modal-cancel>
-      <slot name="modal-cancel"></slot>
-    </template>
     <!-- @slot Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary. -->
-    <template v-if="shouldRenderModalFooter" #modal-footer>
+    <template #modal-footer>
       <slot name="modal-footer">
         <!--
         Emitted when clicked on modal-action-cancel

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

@@ -5,6 +5,10 @@ import readme from './toggle.md';
 
 const defaultValue = (prop) => GlToggle.props[prop].default;
 
+const longHelp = `This is a toggle component with a long help message. 
+  You can notice how the text wraps when the width of the container
+  is not enough to fix the entire text.`;
+
 const generateProps = ({
   value = true,
   disabled = defaultValue('disabled'),
@@ -43,6 +47,11 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const WithLongHelp = Template.bind({});
+WithLongHelp.args = generateProps({
+  help: longHelp,
+});
+
 export default {
   title: 'base/toggle',
   component: GlToggle,

package/src/components/base/toggle/toggle.vue

@@ -118,7 +118,7 @@ export default {
 
 <template>
   <div
-    class="gl-toggle-wrapper gl-display-flex gl-mb-0 gl-w-max-content"
+    class="gl-toggle-wrapper gl-display-flex gl-mb-0"
     :class="{
       'gl-flex-direction-column': labelPosition === 'top' || labelPosition === 'hidden',
       'gl-toggle-label-inline': labelPosition === 'left',
@@ -129,7 +129,7 @@ export default {
     <span
       :id="labelId"
       :class="{ 'gl-sr-only': labelPosition === 'hidden' }"
-      class="gl-toggle-label"
+      class="gl-toggle-label gl-flex-shrink-0"
       data-testid="toggle-label"
     >
       <!-- @slot The toggle's label. -->
@@ -146,6 +146,7 @@ export default {
         'is-checked': value,
         'is-disabled': disabled,
       }"
+      class="gl-flex-shrink-0"
       type="button"
       @click.prevent="toggleFeature"
     >

package/src/components/charts/single_stat/single_stat.vue

@@ -16,11 +16,11 @@ export default {
       required: true,
     },
     value: {
-      type: String,
+      type: [String, Number],
       required: true,
     },
     unit: {
-      type: [String, Number],
+      type: String,
       required: false,
       default: null,
     },