@gitlab/ui 64.22.0 → 64.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.22.0",
+  "version": "64.24.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/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -216,6 +216,18 @@ export default {
         },
       };
     },
+    toggleListeners() {
+      return this.toggleOptions.listeners;
+    },
+
+    toggleAttributes() {
+      const { listeners, is, ...attributes } = this.toggleOptions;
+
+      return attributes;
+    },
+    toggleComponent() {
+      return this.toggleOptions.is;
+    },
     toggleElement() {
       return this.$refs.toggle.$el || this.$refs.toggle?.firstElementChild;
     },
@@ -400,12 +412,12 @@ export default {
 <template>
   <div v-outside="close" class="gl-new-dropdown" :class="{ 'gl-display-block!': block }">
     <component
-      :is="toggleOptions.is"
-      v-bind="toggleOptions"
+      :is="toggleComponent"
+      v-bind="toggleAttributes"
       :id="toggleId"
       ref="toggle"
       data-testid="base-dropdown-toggle"
-      v-on="toggleOptions.listeners"
+      v-on="toggleListeners"
     >
       <!-- @slot Custom toggle button content -->
       <slot name="toggle">

package/src/components/base/tabs/tabs/tabs.scss

@@ -51,13 +51,12 @@
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
   @include gl-text-gray-900;
-  @include gl-inset-border-b-2-theme-accent;
+  @include gl-inset-border-b-2-blue-500;
 
   &:active,
   &:focus,
   &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500),
-      $focus-ring;
+    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500, $focus-ring;
     @include gl-outline-none;
   }
 }

package/src/scss/utilities.scss

@@ -2048,6 +2048,14 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $blue-600 !important
 }
 
+.gl-inset-border-b-2-blue-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500
+}
+
+.gl-inset-border-b-2-blue-500\! {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500 !important
+}
+
 .gl-inset-border-1-green-500 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $green-500
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -85,6 +85,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $blue-600;
 }
 
+@mixin gl-inset-border-b-2-blue-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500;
+}
+
 @mixin gl-inset-border-1-green-500 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $green-500;
 }