@gitlab/ui 74.5.0 → 74.7.0

package/dist/utils/play_utils.js

@@ -1,4 +1,4 @@
-import { userEvent } from '@storybook/testing-library';
+import { userEvent } from '@storybook/test';
 
 const triggerBlurEvent = async () => userEvent.pointer([{
   keys: '[MouseLeft]',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.5.0",
+  "version": "74.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -61,7 +61,7 @@
     "markdownlint": "markdownlint '**/*.md' --ignore node_modules --ignore CHANGELOG.md",
     "markdownlint:fix": "yarn markdownlint --fix",
     "lint": "run-p prettier eslint stylelint markdownlint",
-    "lint:fix": "run-s prettier:fix eslint:fix stylelint:fix markdownlint:fix",
+    "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
     "generate:component": "plop",
     "translations:collect": "make translations.json",
     "tailwind-config-viewer": "tailwind-config-viewer -o"
@@ -106,21 +106,19 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.6.13",
-    "@storybook/addon-docs": "7.6.13",
-    "@storybook/addon-essentials": "7.6.13",
-    "@storybook/addon-interactions": "7.6.13",
-    "@storybook/addon-viewport": "7.6.13",
-    "@storybook/builder-webpack5": "7.6.13",
-    "@storybook/jest": "0.2.3",
+    "@storybook/addon-a11y": "7.6.14",
+    "@storybook/addon-docs": "7.6.14",
+    "@storybook/addon-essentials": "7.6.14",
+    "@storybook/addon-interactions": "7.6.14",
+    "@storybook/addon-viewport": "7.6.14",
+    "@storybook/builder-webpack5": "7.6.14",
+    "@storybook/test": "7.6.14",
     "@storybook/test-runner": "0.16.0",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.13",
-    "@storybook/vue": "7.6.13",
-    "@storybook/vue-webpack5": "7.6.13",
-    "@storybook/vue3": "7.6.13",
-    "@storybook/vue3-webpack5": "7.6.13",
-    "@types/jest": "^29.5.11",
+    "@storybook/theming": "7.6.14",
+    "@storybook/vue": "7.6.14",
+    "@storybook/vue-webpack5": "7.6.14",
+    "@storybook/vue3": "7.6.14",
+    "@storybook/vue3-webpack5": "7.6.14",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
@@ -172,7 +170,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.6.13",
+    "storybook": "7.6.14",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

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

@@ -1,6 +1,5 @@
 import last from 'lodash/last';
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';

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

@@ -1,4 +1,4 @@
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import { stringTokenList, labelText, objectTokenList, actionsList } from './constants';
 import readme from './form_combobox.md';

package/src/components/base/form/form_fields/form_fields.spec.js

@@ -345,6 +345,22 @@ describe('GlFormFields', () => {
         });
       }
     );
+
+    describe('when there is a server validation message', () => {
+      beforeEach(async () => {
+        await submitForm();
+
+        wrapper.setProps({
+          serverValidations: { username: 'Username has already been taken.' },
+        });
+      });
+
+      it('renders error message', () => {
+        expect(
+          findFormGroupFromLabel(TEST_FIELDS.username.label).attributes('invalid-feedback')
+        ).toBe('Username has already been taken.');
+      });
+    });
   });
 
   describe('with scoped slot', () => {

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

@@ -3,6 +3,7 @@ import omit from 'lodash/omit';
 import GlModal from '../../modal/modal.vue';
 import GlButton from '../../button/button.vue';
 import GlListbox from '../../new_dropdowns/listbox/listbox.vue';
+import { setStoryTimeout } from '../../../../utils/test_utils';
 import GlFormFields from './form_fields.vue';
 import readme from './form_fields.md';
 import { required } from './validators';
@@ -49,6 +50,8 @@ const Template = () => ({
       },
       formValues: {},
       testFormId: uniqueId('form_fields_story_'),
+      serverValidations: {},
+      loading: false,
     };
   },
   computed: {
@@ -61,7 +64,27 @@ const Template = () => ({
     },
   },
   methods: {
-    onSubmit() {
+    onInputField({ name }) {
+      this.$delete(this.serverValidations, name);
+    },
+    async onSubmit() {
+      this.loading = true;
+
+      // Simulate waiting for API request to resolve
+      await new Promise((resolve) => {
+        setStoryTimeout(resolve, 1000);
+      });
+
+      this.loading = false;
+
+      // Manually checking field and validating for this example.
+      // In practice this error message would come from the API response.
+      if (this.formValues.USERNAME === 'FOO') {
+        this.$set(this.serverValidations, 'USERNAME', 'Username has already been taken.');
+
+        return;
+      }
+
       this.$refs.modal.show();
     },
   },
@@ -69,7 +92,7 @@ const Template = () => ({
     <div>
       <h3>Fields</h3>
       <form :id="testFormId" @submit.prevent>
-        <gl-form-fields :fields="fields" v-model="formValues" :form-id="testFormId" @submit="onSubmit">
+        <gl-form-fields :fields="fields" v-model="formValues" :form-id="testFormId" :server-validations="serverValidations" @input-field="onInputField" @submit="onSubmit">
           <template #input(custom)="{ id, value, input, blur }">
             <button :id="id" @click="input(value + 1)" @blur="blur" type="button">{{value}}</button>
           </template>
@@ -77,7 +100,7 @@ const Template = () => ({
             <gl-listbox :id="id" :items="$options.ITEMS" :selected="value" @select="input" @hidden="blur" />
           </template>
         </gl-form-fields>
-        <gl-button type="submit" category="primary">Submit</gl-button>
+        <gl-button type="submit" category="primary" :loading="loading">Submit</gl-button>
       </form>
       <gl-modal ref="modal" modal-id="submission-modal" title="Form submission"><pre>{{ valuesJSON }}</pre></gl-modal>
     </div>

package/src/components/base/form/form_fields/form_fields.vue

@@ -51,6 +51,16 @@ export default {
       type: String,
       required: true,
     },
+    /**
+     * Validation errors from the server. Generally passed to the component after making an API call.
+     */
+    serverValidations: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -64,7 +74,8 @@ export default {
     },
     fieldValidationProps() {
       return mapValues(this.fields, (_, fieldName) => {
-        const invalidFeedback = this.fieldValidations[fieldName] || '';
+        const invalidFeedback =
+          this.serverValidations[fieldName] || this.fieldValidations[fieldName] || '';
 
         return {
           invalidFeedback,

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import GlSorting from './sorting.vue';
 import readme from './sorting.md';

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import Vue from 'vue';
 import GlButton from '../button/button.vue';
 import GlToast from './toast';

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import readme from './token_selector.md';
 import GlTokenSelector from './token_selector.vue';
 

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

@@ -1,5 +1,4 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../button/button.vue';
 import GlTooltip from './tooltip.vue';

package/src/scss/utilities.scss

@@ -481,6 +481,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   background-color: $purple-50 !important
 }
 
+.gl-bg-purple-500 {
+  background-color: $purple-500
+}
+
+.gl-bg-purple-500\! {
+  background-color: $purple-500 !important
+}
+
 .gl-bg-purple-800 {
   background-color: $purple-800
 }
@@ -1388,6 +1396,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   border-color: $purple-300 !important;
 }
 
+.gl-border-purple-500 {
+  border-color: $purple-500;
+}
+
+.gl-border-purple-500\! {
+  border-color: $purple-500 !important;
+}
+
 .gl-border-purple-700 {
   border-color: $purple-700;
 }
@@ -2816,6 +2832,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   color: $red-900 !important;
 }
 
+.gl-text-purple-500 {
+  color: $purple-500;
+}
+
+.gl-text-purple-500\! {
+  color: $purple-500 !important;
+}
+
 .gl-text-purple-600 {
   color: $purple-600;
 }

package/src/scss/utility-mixins/background.scss

@@ -150,6 +150,10 @@
   background-color: $purple-50;
 }
 
+@mixin gl-bg-purple-500 {
+  background-color: $purple-500;
+}
+
 @mixin gl-bg-purple-800 {
   background-color: $purple-800;
 }

package/src/scss/utility-mixins/border.scss

@@ -183,6 +183,10 @@
   border-color: $purple-300;
 }
 
+@mixin gl-border-purple-500 {
+  border-color: $purple-500;
+}
+
 @mixin gl-border-purple-700 {
   border-color: $purple-700;
 }

package/src/scss/utility-mixins/color.scss

@@ -193,6 +193,10 @@
   color: $red-900;
 }
 
+@mixin gl-text-purple-500 {
+  color: $purple-500;
+}
+
 @mixin gl-text-purple-600 {
   color: $purple-600;
 }

package/src/utils/play_utils.js

@@ -1,4 +1,4 @@
-import { userEvent } from '@storybook/testing-library';
+import { userEvent } from '@storybook/test';
 
 export const triggerBlurEvent = async () =>
   userEvent.pointer([