@gitlab/ui 40.6.5 → 40.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.6.5",
+  "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",
@@ -106,7 +106,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "7.32.0",
+    "eslint": "8.16.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.5.12",

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

@@ -202,8 +202,10 @@ const LabelToken = {
     },
     containerStyle() {
       if (this.activeLabel) {
+        // eslint-disable-next-line camelcase
         const { color, text_color } = this.activeLabel;
 
+        // eslint-disable-next-line camelcase
         return { backgroundColor: color, color: text_color };
       }
       return {};

package/src/components/base/toggle/toggle.scss

@@ -22,7 +22,6 @@
   @include gl-line-height-normal;
   @include gl-font-weight-normal;
   @include gl-display-inline-flex;
-  @include gl-flex-direction-column;
 
   &.is-disabled {
     @include gl-opacity-4;

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

@@ -109,18 +109,23 @@ describe('toggle', () => {
 
   describe('label position', () => {
     describe.each`
-      state       | labelPosition                 | hasGlSrOnlyClass
-      ${'top'}    | ${toggleLabelPosition.top}    | ${false}
-      ${'left'}   | ${toggleLabelPosition.left}   | ${false}
-      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}
-    `('when $state', ({ labelPosition, hasGlSrOnlyClass }) => {
+      state       | labelPosition                 | hasGlSrOnlyClass | flexDirection
+      ${'top'}    | ${toggleLabelPosition.top}    | ${false}         | ${'gl-flex-direction-column'}
+      ${'left'}   | ${toggleLabelPosition.left}   | ${false}         | ${'gl-toggle-label-inline'}
+      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}          | ${'gl-flex-direction-column'}
+    `('when $state', ({ labelPosition, hasGlSrOnlyClass, flexDirection }) => {
       beforeEach(() => {
         createWrapper({ labelPosition });
       });
 
+      it(`${flexDirection} class is added to the label`, () => {
+        const cssClasses = wrapper.find('[data-testid="toggle-wrapper"]').classes();
+
+        return expect(cssClasses).toContain(flexDirection);
+      });
+
       it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
         const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
-
         return hasGlSrOnlyClass
           ? expect(cssClasses).toContain('gl-sr-only')
           : expect(cssClasses).not.toContain('gl-sr-only');

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,13 +118,18 @@ export default {
 
 <template>
   <div
-    class="gl-toggle-wrapper gl-display-flex gl-flex-direction-column gl-mb-0 gl-w-max-content"
-    :class="{ 'gl-toggle-label-inline': labelPosition === 'left', 'is-disabled': disabled }"
+    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',
+      'is-disabled': disabled,
+    }"
+    data-testid="toggle-wrapper"
   >
     <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. -->
@@ -141,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,
     },