@gitlab/ui 40.7.0 → 40.7.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.7.0",
+  "version": "40.7.1",
   "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/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"
     >