@gitlab/ui 78.7.0 → 78.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [78.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.7.0...v78.8.0) (2024-04-04)
+
+
+### Features
+
+* **GlFormFields:** add support for additional slots ([6ff8a22](https://gitlab.com/gitlab-org/gitlab-ui/commit/6ff8a22adbbfa0df280482cf9681f7b751f11e43))
+
 # [78.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.6.1...v78.7.0) (2024-04-03)
 
 

package/dist/components/base/form/form_fields/form_fields.js

@@ -95,21 +95,33 @@ var script = {
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
         const id = uniqueId('gl-form-field-');
-        const scopedSlotName = `input(${fieldName})`;
-        const hasScopedSlot = this.$scopedSlots[scopedSlotName];
-        const scopedSlotAttrs = hasScopedSlot && {
-          value: this.fieldValues[fieldName],
-          input: val => this.onFieldInput(fieldName, val),
-          blur: () => this.onFieldBlur(fieldName),
-          validation: this.fieldValidationProps[fieldName],
-          id
+        const inputSlotName = `input(${fieldName})`;
+        const groupPassthroughSlotName = `group(${fieldName})-`;
+        const afterSlotName = `after(${fieldName})`;
+        const inputSlot = {
+          slotName: inputSlotName,
+          attrs: {
+            value: this.fieldValues[fieldName],
+            input: val => this.onFieldInput(fieldName, val),
+            blur: () => this.onFieldBlur(fieldName),
+            validation: this.fieldValidationProps[fieldName],
+            id
+          }
         };
+        const groupPassthroughSlots = Object.keys(this.$scopedSlots).filter(slotName => slotName.startsWith(groupPassthroughSlotName)).map(slotName => {
+          const childSlotName = slotName.replace(groupPassthroughSlotName, '');
+          return {
+            slotName,
+            childSlotName
+          };
+        });
         return {
           ...field,
           id,
           label: field.label || fieldName,
-          scopedSlotName,
-          scopedSlotAttrs
+          inputSlot,
+          groupPassthroughSlots,
+          afterSlotName
         };
       });
     }
@@ -189,7 +201,10 @@ 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',_vm._l((_vm.fieldsToRender),function(field,fieldName){return _c('gl-form-group',_vm._b({key:fieldName,attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state}},'gl-form-group',field.groupAttrs,false),[_c('gl-form-field-validator',{attrs:{"value":_vm.fieldValues[fieldName],"validators":field.validators,"should-validate":_vm.fieldDirtyStatuses[fieldName]},on:{"update":function($event){return _vm.onFieldValidationUpdate(fieldName, $event)}}}),_vm._v(" "),(field.scopedSlotAttrs)?[_vm._t(field.scopedSlotName,null,null,field.scopedSlotAttrs)]:[_c('gl-form-input',_vm._b({attrs:{"id":field.id,"value":_vm.fieldValues[fieldName],"state":_vm.fieldValidationProps[fieldName].state},on:{"input":function($event){return _vm.onFieldInput(fieldName, $event)},"blur":function($event){return _vm.onFieldBlur(fieldName)}}},'gl-form-input',field.inputAttrs,false))]],2)}),1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_vm._l((_vm.fieldsToRender),function(field,fieldName){return [_c('gl-form-group',_vm._b({attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
+var slotName = ref.slotName;
+var childSlotName = ref.childSlotName;
+return {key:childSlotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)},'gl-form-group',field.groupAttrs,false),[_c('gl-form-field-validator',{attrs:{"value":_vm.fieldValues[fieldName],"validators":field.validators,"should-validate":_vm.fieldDirtyStatuses[fieldName]},on:{"update":function($event){return _vm.onFieldValidationUpdate(fieldName, $event)}}}),_vm._v(" "),_vm._v(" "),_vm._t(field.inputSlot.slotName,function(){return [_c('gl-form-input',_vm._b({attrs:{"id":field.id,"value":_vm.fieldValues[fieldName],"state":_vm.fieldValidationProps[fieldName].state},on:{"input":function($event){return _vm.onFieldInput(fieldName, $event)},"blur":function($event){return _vm.onFieldBlur(fieldName)}}},'gl-form-input',field.inputAttrs,false))]},null,field.inputSlot.attrs)],2),_vm._v(" "),_vm._t(field.afterSlotName)]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Apr 2024 15:46:06 GMT
+ * Generated on Thu, 04 Apr 2024 06:17:51 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Apr 2024 15:46:06 GMT
+ * Generated on Thu, 04 Apr 2024 06:17:51 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Apr 2024 15:46:06 GMT
+ * Generated on Thu, 04 Apr 2024 06:17:51 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 03 Apr 2024 15:46:06 GMT
+ * Generated on Thu, 04 Apr 2024 06:17:51 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 03 Apr 2024 15:46:06 GMT
+// Generated on Thu, 04 Apr 2024 06:17:51 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 03 Apr 2024 15:46:06 GMT
+// Generated on Thu, 04 Apr 2024 06:17:51 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.7.0",
+  "version": "78.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -29,3 +29,13 @@ interface FieldDefinition<TValue> {
   groupAttrs?: {};
 }
 ```
+
+## Slots
+
+| Name | Description |
+| ------ | ------ |
+| `input(<fieldName>)` | Used to render components other than `GlFormInput`. |
+| `group(<fieldName>)-label` | Used for `label` slot on `GlFormGroup` of a specific field. |
+| `group(<fieldName>)-description` | Used for `description` slot on `GlFormGroup` of a specific field. |
+| `group(<fieldName>)-label-description` | Used for `label-description` slot on `GlFormGroup` of a specific field. |
+| `after(<fieldName>)` | Used to render content after `GlFormGroup` of a specific field. |

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

@@ -1,7 +1,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 import mapValues from 'lodash/mapValues';
 import { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import GlFormGroup from '../form_group/form_group.vue';
 import GlInput from '../form_input/form_input.vue';
 import GlFormFields from './form_fields.vue';
@@ -43,11 +43,11 @@ describe('GlFormFields', () => {
   let wrapper;
 
   // region: factory --------------------------------------------------
-  const createComponent = (props = {}, options = {}) => {
+  const createComponent = (props = {}, options = {}, mountFn = shallowMount) => {
     // why: Clone the constant so Vue doesn't turn it reactive
     const fields = cloneDeep(TEST_FIELDS);
 
-    wrapper = shallowMount(GlFormFields, {
+    wrapper = mountFn(GlFormFields, {
       propsData: {
         fields,
         values: {},
@@ -56,6 +56,7 @@ describe('GlFormFields', () => {
       },
       stubs: {
         GlFormFieldValidator,
+        ...options.stubs,
       },
       ...options,
     });
@@ -81,7 +82,7 @@ describe('GlFormFields', () => {
   // eslint-disable-next-line unicorn/no-array-callback-reference
   const findFormGroupsAsData = () => findFormGroups().map(mapFormGroupToData);
   const findFormGroupFromLabel = (label) =>
-    wrapper.findAllComponents(GlFormGroup).wrappers.find((x) => x.attributes('label') === label);
+    wrapper.findAllComponents(GlFormGroup).wrappers.find((x) => x.vm.$attrs.label === label);
   const findInputFromLabel = (label) => findFormGroupFromLabel(label).findComponent(GlInput);
   const findCustomInputFromLabel = (label) =>
     findFormGroupFromLabel(label).find('[data-testid="test-custom-input"]');
@@ -363,7 +364,7 @@ describe('GlFormFields', () => {
     });
   });
 
-  describe('with scoped slot', () => {
+  describe('with input scoped slot', () => {
     beforeEach(() => {
       createComponent(
         {
@@ -415,6 +416,86 @@ describe('GlFormFields', () => {
     });
   });
 
+  describe('with form group scoped slots', () => {
+    it('renders description slot', () => {
+      createComponent(
+        {},
+        {
+          scopedSlots: {
+            'group(username)-description': '<div data-testid="group-description-slot"></div>',
+          },
+        },
+        mount
+      );
+
+      expect(
+        findFormGroupFromLabel(TEST_FIELDS.username.label)
+          .find('[data-testid="group-description-slot"]')
+          .exists()
+      ).toBe(true);
+    });
+
+    it('renders label slot', () => {
+      createComponent(
+        {},
+        {
+          scopedSlots: {
+            'group(username)-label': `<div data-testid="group-label-slot">${TEST_FIELDS.username.label}</div>`,
+          },
+        },
+        mount
+      );
+
+      expect(
+        wrapper
+          .findAllComponents(GlFormGroup)
+          .wrappers.find((x) => x.text().includes(TEST_FIELDS.username.label))
+          .find('[data-testid="group-label-slot"]')
+          .exists()
+      ).toBe(true);
+    });
+
+    it('renders label description slot', () => {
+      createComponent(
+        {},
+        {
+          scopedSlots: {
+            'group(username)-label-description':
+              '<div data-testid="group-label-description-slot"></div>',
+          },
+        },
+        mount
+      );
+
+      expect(
+        findFormGroupFromLabel(TEST_FIELDS.username.label)
+          .find('[data-testid="group-label-description-slot"]')
+          .exists()
+      ).toBe(true);
+    });
+  });
+
+  describe('with after slot', () => {
+    beforeEach(() => {
+      createComponent(
+        {},
+        {
+          scopedSlots: {
+            'after(username)': '<div data-testid="after-slot"></div>',
+          },
+        }
+      );
+    });
+
+    it('renders after slot', () => {
+      expect(
+        findFormGroupFromLabel(TEST_FIELDS.username.label).element.nextElementSibling.getAttribute(
+          'data-testid'
+        )
+      ).toBe('after-slot');
+    });
+  });
+
   // why: We have to do some manual reactivity to optimize how often we call
   //      field validators. Let's test that here.
   describe('validation performance', () => {

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

@@ -2,7 +2,9 @@ import uniqueId from 'lodash/uniqueId';
 import omit from 'lodash/omit';
 import GlModal from '../../modal/modal.vue';
 import GlButton from '../../button/button.vue';
+import GlAlert from '../../alert/alert.vue';
 import GlListbox from '../../new_dropdowns/listbox/listbox.vue';
+import GlIcon from '../../icon/icon.vue';
 import { setStoryTimeout } from '../../../../utils/test_utils';
 import GlFormFields from './form_fields.vue';
 import readme from './form_fields.md';
@@ -11,7 +13,7 @@ import { mapToNumber } from './mappers';
 
 const Template = () => ({
   ITEMS: ['Pizza', 'Keyboards', 'Guitars', 'Rocket ships'].map((text) => ({ text, value: text })),
-  components: { GlFormFields, GlButton, GlModal, GlListbox },
+  components: { GlFormFields, GlButton, GlModal, GlListbox, GlAlert, GlIcon },
   data() {
     return {
       // why: We declare fields here so that we can test what binding the
@@ -62,6 +64,13 @@ const Template = () => ({
       // JSON doesn't allow undefined values
       return JSON.stringify(this.values, (key, value) => (value === undefined ? null : value), 2);
     },
+    favoriteItemToggleText() {
+      if (!this.formValues.favoriteItem) {
+        return 'Select an item';
+      }
+
+      return null;
+    },
   },
   methods: {
     onInputField({ name }) {
@@ -93,11 +102,26 @@ const Template = () => ({
       <h3>Fields</h3>
       <form :id="testFormId" @submit.prevent>
         <gl-form-fields :fields="fields" v-model="formValues" :form-id="testFormId" :server-validations="serverValidations" @input-field="onInputField" @submit="onSubmit">
+          <template #group(confirmPassword)-label>
+            <div class="gl-display-flex gl-align-items-center gl-column-gap-3">
+              <span>Confirm Password</span>
+              <gl-icon name="information-o" />
+            </div>
+          </template>
+          <template #group(confirmPassword)-description>
+            Description using <code>group(confirmPassword)-description</code> slot
+          </template>
+          <template #after(confirmPassword)>
+            <gl-alert class="gl-mb-5" :dismissible="false">Custom content using <code>after(confirmPassword)</code> slot</gl-alert>
+          </template>
           <template #input(custom)="{ id, value, input, blur }">
             <button :id="id" @click="input(value + 1)" @blur="blur" type="button">{{value}}</button>
           </template>
           <template #input(favoriteItem)="{ id, value, input, blur }">
-            <gl-listbox :id="id" :items="$options.ITEMS" :selected="value" @select="input" @hidden="blur" />
+            <gl-listbox :id="id" :items="$options.ITEMS" :selected="value" :toggle-text="favoriteItemToggleText" @select="input" @hidden="blur" />
+          </template>
+          <template #group(favoriteItem)-label-description>
+            Label description using <code>group(favoriteItem)-label-description</code> slot
           </template>
         </gl-form-fields>
         <gl-button type="submit" category="primary" :loading="loading">Submit</gl-button>

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

@@ -99,22 +99,39 @@ export default {
       return mapValues(this.fields, (field, fieldName) => {
         const id = uniqueId('gl-form-field-');
 
-        const scopedSlotName = `input(${fieldName})`;
-        const hasScopedSlot = this.$scopedSlots[scopedSlotName];
-        const scopedSlotAttrs = hasScopedSlot && {
-          value: this.fieldValues[fieldName],
-          input: (val) => this.onFieldInput(fieldName, val),
-          blur: () => this.onFieldBlur(fieldName),
-          validation: this.fieldValidationProps[fieldName],
-          id,
+        const inputSlotName = `input(${fieldName})`;
+        const groupPassthroughSlotName = `group(${fieldName})-`;
+        const afterSlotName = `after(${fieldName})`;
+
+        const inputSlot = {
+          slotName: inputSlotName,
+          attrs: {
+            value: this.fieldValues[fieldName],
+            input: (val) => this.onFieldInput(fieldName, val),
+            blur: () => this.onFieldBlur(fieldName),
+            validation: this.fieldValidationProps[fieldName],
+            id,
+          },
         };
 
+        const groupPassthroughSlots = Object.keys(this.$scopedSlots)
+          .filter((slotName) => slotName.startsWith(groupPassthroughSlotName))
+          .map((slotName) => {
+            const childSlotName = slotName.replace(groupPassthroughSlotName, '');
+
+            return {
+              slotName,
+              childSlotName,
+            };
+          });
+
         return {
           ...field,
           id,
           label: field.label || fieldName,
-          scopedSlotName,
-          scopedSlotAttrs,
+          inputSlot,
+          groupPassthroughSlots,
+          afterSlotName,
         };
       });
     },
@@ -198,35 +215,43 @@ export default {
 
 <template>
   <div>
-    <gl-form-group
-      v-for="(field, fieldName) in fieldsToRender"
-      v-bind="field.groupAttrs"
-      :key="fieldName"
-      :label="field.label"
-      :label-for="field.id"
-      :invalid-feedback="fieldValidationProps[fieldName].invalidFeedback"
-      :state="fieldValidationProps[fieldName].state"
-    >
-      <gl-form-field-validator
-        :value="fieldValues[fieldName]"
-        :validators="field.validators"
-        :should-validate="fieldDirtyStatuses[fieldName]"
-        @update="onFieldValidationUpdate(fieldName, $event)"
-      />
-      <template v-if="field.scopedSlotAttrs">
-        <!-- @slot scoped slot that can be used for components other than `GlFormInput`. The name of the slot is `input(<fieldName>)`. -->
-        <slot :name="field.scopedSlotName" v-bind="field.scopedSlotAttrs"></slot>
-      </template>
-      <template v-else>
-        <gl-form-input
-          :id="field.id"
+    <template v-for="(field, fieldName) in fieldsToRender">
+      <!-- eslint-disable-next-line vue/valid-v-for -->
+      <gl-form-group
+        v-bind="field.groupAttrs"
+        :label="field.label"
+        :label-for="field.id"
+        :invalid-feedback="fieldValidationProps[fieldName].invalidFeedback"
+        :state="fieldValidationProps[fieldName].state"
+      >
+        <gl-form-field-validator
           :value="fieldValues[fieldName]"
-          :state="fieldValidationProps[fieldName].state"
-          v-bind="field.inputAttrs"
-          @input="onFieldInput(fieldName, $event)"
-          @blur="onFieldBlur(fieldName)"
+          :validators="field.validators"
+          :should-validate="fieldDirtyStatuses[fieldName]"
+          @update="onFieldValidationUpdate(fieldName, $event)"
         />
-      </template>
-    </gl-form-group>
+
+        <template
+          v-for="{ slotName, childSlotName } in field.groupPassthroughSlots"
+          #[childSlotName]
+        >
+          <!-- @slot Can be used to pass slots to `GlFormGroup`. -->
+          <slot :name="slotName"></slot>
+        </template>
+        <!-- @slot Scoped slot that can be used for components other than `GlFormInput`. The name of the slot is `input(<fieldName>)`. -->
+        <slot :name="field.inputSlot.slotName" v-bind="field.inputSlot.attrs">
+          <gl-form-input
+            :id="field.id"
+            :value="fieldValues[fieldName]"
+            :state="fieldValidationProps[fieldName].state"
+            v-bind="field.inputAttrs"
+            @input="onFieldInput(fieldName, $event)"
+            @blur="onFieldBlur(fieldName)"
+          />
+        </slot>
+      </gl-form-group>
+      <!-- @slot Can be used to add content the form group of a field. The name of the slot is `after(<fieldName>)`.-->
+      <slot :name="field.afterSlotName"></slot>
+    </template>
   </div>
 </template>