@gitlab/ui 123.12.0 → 124.1.0

package/package.json

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

package/src/components/base/alert/alert.vue

@@ -90,7 +90,13 @@ export default {
       required: false,
       default: false,
     },
-    // only set to 'assertive' if alert requires immediate user action, otherwise use a default value
+    /**
+     * Set the aria-live attribute on the alert.
+     *
+     * Only set to 'assertive' if alert requires immediate user action.
+     * Otherwise, rely on the default value.
+     *
+     */
     politeness: {
       type: String,
       required: false,
@@ -196,6 +202,8 @@ export default {
 
 <template>
   <div
+    :role="role"
+    :aria-live="politeness"
     :class="[
       'gl-alert',
       { 'gl-alert-sticky': sticky },
@@ -208,7 +216,7 @@ export default {
     <div v-if="showIcon" class="gl-alert-icon-container">
       <gl-icon :name="iconName" class="gl-alert-icon" />
     </div>
-    <div class="gl-alert-content" :role="role" :aria-live="politeness">
+    <div class="gl-alert-content">
       <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 
       <div class="gl-alert-body">

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

@@ -6,6 +6,7 @@ import GlFormGroup from '../form_group/form_group.vue';
 import GlFormInput from '../form_input/form_input.vue';
 import { setObjectProperty } from '../../../../utils/set_utils';
 import GlFormFieldValidator from './form_field_validator.vue';
+import GlFormFieldsLoop from './form_fields_loop.vue';
 
 export default {
   name: 'GlFormFields',
@@ -13,6 +14,7 @@ export default {
     GlFormGroup,
     GlFormInput,
     GlFormFieldValidator,
+    GlFormFieldsLoop,
   },
   model: {
     prop: 'values',
@@ -67,6 +69,7 @@ export default {
     return {
       fieldDirtyStatuses: {},
       fieldValidations: {},
+      fieldIds: {},
     };
   },
   computed: {
@@ -98,7 +101,7 @@ export default {
     },
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
-        const id = uniqueId('gl-form-field-');
+        const id = this.memoizeAndReturnFieldId(field, fieldName);
 
         const inputSlotName = `input(${fieldName})`;
         const groupPassthroughSlotName = `group(${fieldName})-`;
@@ -173,6 +176,18 @@ export default {
 
       return val;
     },
+    memoizeAndReturnFieldId(field, fieldName) {
+      const memoizedId = this.fieldIds[fieldName];
+
+      if (memoizedId) {
+        return memoizedId;
+      }
+
+      const id = field.id || uniqueId('gl-form-field-');
+      this.fieldIds[fieldName] = id;
+
+      return id;
+    },
     onFieldValidationUpdate(fieldName, invalidFeedback) {
       this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
 
@@ -220,11 +235,11 @@ export default {
 </script>
 
 <template>
-  <div>
-    <template v-for="(field, fieldName) in fieldsToRender">
-      <!-- eslint-disable-next-line vue/valid-v-for -->
+  <gl-form-fields-loop :fields="fieldsToRender">
+    <template #default="{ field, fieldName }">
       <gl-form-group
         v-bind="field.groupAttrs"
+        :key="field.id"
         :label="field.label"
         :label-for="field.id"
         :invalid-feedback="fieldValidationProps[fieldName].invalidFeedback"
@@ -259,5 +274,5 @@ export default {
       <!-- @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>
+  </gl-form-fields-loop>
 </template>

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

@@ -0,0 +1,44 @@
+<script>
+import Vue from 'vue';
+
+export default {
+  name: 'GlFormFieldsLoop',
+  props: {
+    fields: {
+      type: Object,
+      required: true,
+    },
+  },
+  render(createElement) {
+    const { Fragment } = Vue;
+
+    // Vue 3, key goes on `Fragment` (<template> element)
+    if (Fragment) {
+      return createElement(
+        'div',
+        Object.entries(this.fields).map(([fieldName, field]) =>
+          createElement(
+            Fragment,
+            { key: field.id },
+            this.$scopedSlots.default({
+              fieldName,
+              field,
+            }),
+          ),
+        ),
+      );
+    }
+
+    // Vue 2, key goes on element (rendered via default slot)
+    return createElement(
+      'div',
+      Object.entries(this.fields).map(([fieldName, field]) =>
+        this.$scopedSlots.default({
+          fieldName,
+          field,
+        }),
+      ),
+    );
+  },
+};
+</script>

package/src/components/base/pagination/pagination.vue

@@ -168,11 +168,6 @@ export default {
       default: alignOptions.left,
       validator: (value) => Object.keys(alignOptions).includes(value),
     },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
@@ -312,7 +307,6 @@ export default {
     },
     pageIsDisabled(page) {
       return (
-        this.disabled ||
         page < 1 ||
         (this.isCompactPagination && page > this.value && !this.nextPage) ||
         (!this.isCompactPagination && page > this.totalPages)
@@ -399,7 +393,6 @@ export default {
   <nav v-if="isVisible" class="gl-pagination" :aria-label="labelNav">
     <ul :class="wrapperClasses">
       <li
-        :aria-disabled="prevPageIsDisabled"
         :aria-hidden="prevPageIsDisabled"
         :class="{
           disabled: prevPageIsDisabled,
@@ -465,7 +458,6 @@ export default {
       </li>
 
       <li
-        :aria-disabled="nextPageIsDisabled"
         :aria-hidden="nextPageIsDisabled"
         :class="{
           disabled: nextPageIsDisabled,

package/src/tokens/build/css/tokens.css

@@ -232,10 +232,23 @@
   --gl-color-brand-pink-01g: #ffb9c9;
   --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
   --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
+  --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */
+  --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
+  --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */
+  --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */
+  --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */
+  --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-size-xs: 0.625rem;
-  --gl-font-size-sm: 0.75rem;
-  --gl-font-size-md: 0.875rem;
-  --gl-font-size-lg: 1rem;
+  --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */
+  --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */
+  --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
+  --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */
+  --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */
+  --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */
+  --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-weight-100: 100;
   --gl-font-weight-300: 300;
   --gl-font-weight-normal: 400;
@@ -584,7 +597,9 @@
   --gl-border-radius-xl: var(--gl-spacing-scale-4);
   --gl-border-radius-2xl: var(--gl-spacing-scale-5);
   --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-font-size-base: var(--gl-font-size-md);
+  --gl-font-size-sm: var(--gl-font-size-100);
+  --gl-font-size-md: var(--gl-font-size-300);
+  --gl-font-size-lg: var(--gl-font-size-400);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-16); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
@@ -938,6 +953,7 @@
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
   --gl-border-color-section: var(--gl-border-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-border-radius-default: var(--gl-border-radius-md);
+  --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */

package/src/tokens/build/css/tokens.dark.css

@@ -232,10 +232,23 @@
   --gl-color-brand-pink-01g: #ffb9c9;
   --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
   --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
+  --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
+  --gl-font-size-200: 0.8125rem; /** Used for level 6 headings. */
+  --gl-font-size-300: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
+  --gl-font-size-400: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); /** Used for responsive level 3 headings. */
+  --gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); /** Used for responsive level 2 headings. */
+  --gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); /** Used for responsive level 1 headings */
+  --gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); /** Used for a responsive display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-size-xs: 0.625rem;
-  --gl-font-size-sm: 0.75rem;
-  --gl-font-size-md: 0.875rem;
-  --gl-font-size-lg: 1rem;
+  --gl-font-size-100-fixed: 0.75rem; /** Used for meta text and small labels. */
+  --gl-font-size-200-fixed: 0.8125rem; /** Used for level 6 headings. */
+  --gl-font-size-300-fixed: 0.875rem; /** Used for level 5 headings, body text, input labels, and help text. */
+  --gl-font-size-400-fixed: 1rem; /** Used for level 4 headings, large body text. */
+  --gl-font-size-500-fixed: 1.125rem; /** Used for level 3 headings. */
+  --gl-font-size-600-fixed: 1.3125rem; /** Used for level 2 headings. */
+  --gl-font-size-700-fixed: 1.5rem; /** Used for level 1 headings */
+  --gl-font-size-800-fixed: 1.75rem; /** Used for a display option that can be applied to a level 1 heading to increase its prominence. */
   --gl-font-weight-100: 100;
   --gl-font-weight-300: 300;
   --gl-font-weight-normal: 400;
@@ -595,7 +608,9 @@
   --gl-border-radius-xl: var(--gl-spacing-scale-4);
   --gl-border-radius-2xl: var(--gl-spacing-scale-5);
   --gl-border-radius-3xl: var(--gl-spacing-scale-6);
-  --gl-font-size-base: var(--gl-font-size-md);
+  --gl-font-size-sm: var(--gl-font-size-100);
+  --gl-font-size-md: var(--gl-font-size-300);
+  --gl-font-size-lg: var(--gl-font-size-400);
   --gl-shadow-color-default: var(--gl-color-alpha-dark-40); /** Used for the default shadow color. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /** Used for the border center color of a neutral alert. */
   --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a neutral alert. */
@@ -955,6 +970,7 @@
   --gl-text-color-disabled: var(--gl-color-neutral-400); /** Used for disabled text. */
   --gl-border-color-section: var(--gl-background-color-default); /** Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
   --gl-border-radius-default: var(--gl-border-radius-md);
+  --gl-font-size-base: var(--gl-font-size-md);
   --gl-shadow-sm: 0 0 2px var(--gl-shadow-color-default), 0 1px 4px var(--gl-shadow-color-default); /** Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board. */
   --gl-shadow-md: 0 0 1px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 2px 8px var(--gl-shadow-color-default); /** Used for surfaces that need boundary definition and appear on hover. For example, popovers. */
   --gl-shadow-lg: 0 0 2px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default), 0 4px 12px var(--gl-shadow-color-default); /** Used for large surfaces that present additional context to the user. */