@gitlab/ui 40.6.3 → 40.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.6.3",
+  "version": "40.6.6",
   "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.4",
-    "@storybook/addon-docs": "6.5.4",
-    "@storybook/addon-essentials": "6.5.4",
+    "@storybook/addon-a11y": "6.5.5",
+    "@storybook/addon-docs": "6.5.5",
+    "@storybook/addon-essentials": "6.5.5",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.5.4",
-    "@storybook/addon-storyshots-puppeteer": "6.5.4",
-    "@storybook/addon-viewport": "6.5.4",
-    "@storybook/theming": "6.5.4",
-    "@storybook/vue": "6.5.4",
+    "@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",
     "@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/form/form_group/form_group.scss

@@ -18,6 +18,7 @@
   }
 
   .invalid-feedback,
+  .valid-feedback,
   .text-gl-muted {
     @include gl-font-base;
     @include gl-line-height-normal;
@@ -25,6 +26,7 @@
 
   .form-control {
     + .invalid-feedback,
+    + .valid-feedback,
     + .text-gl-muted,
     &.is-valid + .invalid-feedback + .text-gl-muted {
       // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2806

package/src/components/base/form/form_group/form_group.stories.js

@@ -74,31 +74,18 @@ WithLabelDescription.args = generateProps({
 export const WithValidations = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { ...components, GlFormInput },
-  computed: {
-    state() {
-      return this.name.length >= 4;
-    },
-    invalidFeedback() {
-      let feedbackText = 'This field is required.';
-
-      if (this.name.length >= 4) {
-        feedbackText = '';
-      } else if (this.name.length > 0) {
-        feedbackText = 'Enter at least 4 characters.';
-      }
-
-      return feedbackText;
-    },
-  },
-  data() {
-    return {
-      name: '',
-    };
-  },
-  template: wrap(
-    '<gl-form-input :id="id" :state="state" v-model.trim="name" />',
-    ':invalid-feedback="invalidFeedback"'
-  ),
+  template: `
+    <div>
+      ${wrap(
+        '<gl-form-input :id="id" :state="false" />',
+        'invalid-feedback="This field is required."'
+      )}
+      ${wrap(
+        '<gl-form-input :id="id" :state="true" value="Sidney Jones" />',
+        'valid-feedback="This field is valid."'
+      )}
+    </div>
+  `,
 });
 WithValidations.args = generateProps({
   label: 'Name',

package/src/components/base/form/form_input/form_input.scss

@@ -38,6 +38,10 @@
     }
   }
 
+  &.is-valid {
+    background-image: none;
+  }
+
   &::placeholder {
     @include gl-text-gray-400;
   }

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -41,17 +41,16 @@
     }
   }
 
-  .input-group {
+  &.input-group {
     > .input-group-prepend,
     > .input-group-append {
       @include gl-bg-white;
     }
+  }
 
-    .gl-search-box-by-click-search-button {
-      @include gl-text-gray-500;
-      @include gl-p-3;
-      @include gl-inset-border-1-gray-400;
-    }
+  .gl-search-box-by-click-search-button {
+    @include gl-text-gray-500;
+    @include gl-inset-border-1-gray-400;
   }
 
   .gl-search-box-by-click-input {

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.vue

@@ -118,8 +118,13 @@ 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 gl-w-max-content"
+    :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"