@gitlab/ui 64.21.2 → 64.23.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 19 Jul 2023 12:51:04 GMT
+ * Generated on Tue, 25 Jul 2023 14:18:39 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 19 Jul 2023 12:51:04 GMT
+ * Generated on Tue, 25 Jul 2023 14:18:39 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 19 Jul 2023 12:51:04 GMT
+ * Generated on Tue, 25 Jul 2023 14:18:39 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 19 Jul 2023 12:51:04 GMT
+ * Generated on Tue, 25 Jul 2023 14:18:39 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 19 Jul 2023 12:51:04 GMT
+// Generated on Tue, 25 Jul 2023 14:18:39 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 19 Jul 2023 12:51:04 GMT
+// Generated on Tue, 25 Jul 2023 14:18:39 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.21.2",
+  "version": "64.23.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.55.0",
+    "@gitlab/svgs": "3.57.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -118,9 +118,9 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.17.1",
+    "cypress": "12.17.2",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.44.0",
+    "eslint": "8.45.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-storybook": "0.6.12",

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

@@ -24,5 +24,8 @@ interface FieldDefinition<TValue> {
 
   // Properties that are passed to the actual input for this field.
   inputAttrs?: {};
+
+  // Properties that are passed to the group wrapping this field.
+  groupAttrs?: {};
 }
 ```

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

@@ -24,6 +24,7 @@ const TEST_FIELDS = {
       (val) => (val % 2 === 1 ? 'Count must be even' : ''),
     ],
     inputAttrs: { size: 'xs', type: 'number' },
+    groupAttrs: { class: 'unique-class' },
   },
   allCaps: {
     label: 'All caps (optional)',
@@ -68,6 +69,7 @@ describe('GlFormFields', () => {
       label: formGroup.attributes('label'),
       state: formGroup.attributes('state'),
       invalidFeedback: formGroup.attributes('invalid-feedback'),
+      class: formGroup.attributes('class'),
       input: {
         // Ensure that "value" is present even if undefined
         value: input.attributes('value'),
@@ -110,6 +112,7 @@ describe('GlFormFields', () => {
           label: TEST_FIELDS.username.label,
           state: undefined,
           invalidFeedback: '',
+          class: undefined,
           input: {
             id: 'gl-form-field-testunique',
             value: undefined,
@@ -119,6 +122,7 @@ describe('GlFormFields', () => {
           label: TEST_FIELDS.evenCount.label,
           state: undefined,
           invalidFeedback: '',
+          class: TEST_FIELDS.evenCount.groupAttrs.class,
           input: {
             id: 'gl-form-field-testunique',
             value: '0',
@@ -129,6 +133,7 @@ describe('GlFormFields', () => {
           label: TEST_FIELDS.allCaps.label,
           state: undefined,
           invalidFeedback: '',
+          class: undefined,
           input: {
             id: 'gl-form-field-testunique',
             value: undefined,
@@ -222,6 +227,7 @@ describe('GlFormFields', () => {
             label: TEST_FIELDS.username.label,
             invalidFeedback: 'User name is required',
             state: undefined,
+            class: undefined,
             input: {
               value: undefined,
               id: 'gl-form-field-testunique',
@@ -231,6 +237,7 @@ describe('GlFormFields', () => {
             label: TEST_FIELDS.evenCount.label,
             invalidFeedback: 'Count is required',
             state: undefined,
+            class: TEST_FIELDS.evenCount.groupAttrs.class,
             input: expect.objectContaining({
               value: '0',
               id: 'gl-form-field-testunique',
@@ -240,6 +247,7 @@ describe('GlFormFields', () => {
             label: TEST_FIELDS.allCaps.label,
             invalidFeedback: '',
             state: undefined,
+            class: undefined,
             input: {
               value: undefined,
               id: 'gl-form-field-testunique',
@@ -274,6 +282,7 @@ describe('GlFormFields', () => {
         label: TEST_FIELDS.evenCount.label,
         invalidFeedback: 'Count must be even',
         state: undefined,
+        class: TEST_FIELDS.evenCount.groupAttrs.class,
         input: {
           ...TEST_FIELDS.evenCount.inputAttrs,
           id: 'gl-form-field-testunique',

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

@@ -24,8 +24,9 @@ const Template = () => ({
           validators: [required('NAME IS REQUIRED!!!')],
         },
         password: {
-          label: 'Password',
+          label: 'Password with group styling',
           inputAttrs: { type: 'password' },
+          groupAttrs: { class: 'gl-bg-purple-50 gl-w-20' },
           validators: [required('Password is required')],
         },
         confirmPassword: {

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

@@ -25,6 +25,7 @@ export default {
      * @typedef {object} FieldDefinition
      * @template TValue=string
      * @property {string} label - Label text to show for this field.
+     * @property {undefined | Object} groupAttrs - Properties that are passed to the group wrapping this field.
      * @property {undefined | Object} inputAttrs - Properties that are passed to the actual input for this field.
      * @property {undefined | function(string): TValue} mapValue - Function that maps the inputted string value to the field's actual value (e.g. a Number).
      * @property {undefined | Array<function(TValue): string | undefined>=} validators - Collection of validator functions.
@@ -188,6 +189,7 @@ export default {
   <div>
     <gl-form-group
       v-for="(field, fieldName) in fieldsToRender"
+      v-bind="field.groupAttrs"
       :key="fieldName"
       :label="field.label"
       :label-for="field.id"

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

@@ -0,0 +1,6 @@
+.gl-input-group-text {
+  @include gl-bg-gray-10;
+  @include gl-h-7;
+  @include gl-font-base;
+  @include gl-text-gray-900;
+}

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

@@ -6,4 +6,9 @@ describe('GlInputGroupText', () => {
     const wrapper = shallowMount(GlInputGroupText);
     expect(wrapper).toBeInstanceOf(Object);
   });
+
+  it('applies gl-input-group-text class', () => {
+    const wrapper = shallowMount(GlInputGroupText);
+    expect(wrapper.classes('gl-input-group-text')).toBe(true);
+  });
 });

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

@@ -11,7 +11,7 @@ export default {
 </script>
 
 <template>
-  <b-input-group-text v-bind="$attrs" v-on="$listeners">
+  <b-input-group-text v-bind="$attrs" class="gl-input-group-text" v-on="$listeners">
     <slot></slot>
   </b-input-group-text>
 </template>

package/src/scss/components.scss

@@ -44,6 +44,7 @@
 @import '../components/base/form/form_select/form_select';
 @import '../components/base/form/form_textarea/form_textarea';
 @import '../components/base/form/form_combobox/form_combobox';
+@import '../components/base/form/input_group_text/input_group_text';
 @import '../components/base/icon/icon';
 @import '../components/base/infinite_scroll/infinite_scroll';
 @import '../components/base/label/label';