@gitlab/ui 66.15.0 → 66.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.15.0",
+  "version": "66.18.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -98,18 +98,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.4.3",
-    "@storybook/addon-docs": "7.4.3",
-    "@storybook/addon-essentials": "7.4.3",
-    "@storybook/addon-storyshots": "7.4.3",
-    "@storybook/addon-storyshots-puppeteer": "7.4.3",
-    "@storybook/addon-viewport": "7.4.3",
-    "@storybook/builder-webpack5": "7.4.3",
-    "@storybook/theming": "7.4.3",
-    "@storybook/vue": "7.4.3",
-    "@storybook/vue-webpack5": "7.4.3",
-    "@storybook/vue3": "7.4.3",
-    "@storybook/vue3-webpack5": "7.4.3",
+    "@storybook/addon-a11y": "7.4.5",
+    "@storybook/addon-docs": "7.4.5",
+    "@storybook/addon-essentials": "7.4.5",
+    "@storybook/addon-storyshots": "7.4.5",
+    "@storybook/addon-storyshots-puppeteer": "7.4.5",
+    "@storybook/addon-viewport": "7.4.5",
+    "@storybook/builder-webpack5": "7.4.5",
+    "@storybook/theming": "7.4.5",
+    "@storybook/vue": "7.4.5",
+    "@storybook/vue-webpack5": "7.4.5",
+    "@storybook/vue3": "7.4.5",
+    "@storybook/vue3-webpack5": "7.4.5",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.4.3",
+    "storybook": "7.4.5",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/modal/modal.scss

@@ -57,9 +57,7 @@ body.modal-open {
     @include gl-border-none;
 
     .modal-title {
-      @include gl-font-lg;
-      @include gl-font-weight-bold;
-      @include gl-line-height-24;
+      @include gl-heading-scale-500;
     }
   }
 

package/src/components/base/modal/modal.spec.js

@@ -85,7 +85,7 @@ describe('Modal component', () => {
       createComponent({
         slots: { 'modal-header': slot },
       });
-      const defaultHeader = wrapper.find('h4.modal-title');
+      const defaultHeader = wrapper.find('h2.modal-title');
       const customHeader = wrapper.find('h4.custom-title');
 
       expect(defaultHeader.exists()).toBe(false);
@@ -98,7 +98,7 @@ describe('Modal component', () => {
       createComponent({
         slots: { 'modal-title': slot },
       });
-      const defaultHeader = wrapper.find('h4.modal-title');
+      const defaultHeader = wrapper.find('h2.modal-title');
       const customTitle = defaultHeader.find('h4.custom-title');
 
       expect(defaultHeader.exists()).toBe(true);

package/src/components/base/modal/modal.vue

@@ -206,10 +206,10 @@ export default {
     <template #modal-header>
       <!-- @slot Entire modal header container contents (including the close button on the top right corner) -->
       <slot name="modal-header">
-        <h4 class="modal-title">
+        <h2 class="modal-title">
           <!-- @slot Modal title. If modal-header slot is used, this slot will not be shown. -->
           <slot name="modal-title">{{ title }}</slot>
-        </h4>
+        </h2>
       </slot>
       <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />

package/src/components/regions/empty_state/empty_state.scss

@@ -0,0 +1,3 @@
+.gl-empty-state-content {
+    max-width: 65ch;
+}

package/src/components/regions/empty_state/empty_state.spec.js

@@ -249,8 +249,18 @@ describe('empty state component', () => {
   describe('with custom content class', () => {
     const findContentContainer = () => component.find('[data-testid="gl-empty-state-content"]');
     const customContentClass = 'gl-p-0';
-    const expectedDefaultContentClasses = ['gl-max-w-88', 'gl-m-auto', customContentClass];
+    const expectedDefaultContentClasses = [
+      'gl-empty-state-content',
+      'gl-mx-auto',
+      'gl-my-0',
+      'gl-m-auto',
+      'gl-p-5',
+      customContentClass,
+    ];
     const expectedCompactContentClasses = [
+      'gl-empty-state-content',
+      'gl-mx-auto',
+      'gl-my-0',
       'gl-flex-grow-1',
       'gl-flex-basis-0',
       'gl-px-4',

package/src/components/regions/empty_state/empty_state.vue

@@ -108,7 +108,7 @@ export default {
     },
     contentClasses() {
       return [
-        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-88 gl-m-auto',
+        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-m-auto gl-p-5',
         this.contentClass,
       ];
     },
@@ -127,68 +127,69 @@ export default {
     <div
       :class="{ 'gl-display-none gl-sm-display-block gl-px-4': compact, 'gl-max-w-full': !compact }"
     >
-      <div v-if="svgPath">
-        <img
-          :src="svgPath"
-          alt=""
-          role="img"
-          :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
-          class="gl-max-w-full"
-          :height="height"
-        />
-      </div>
+      <img
+        v-if="svgPath"
+        :src="svgPath"
+        alt=""
+        role="img"
+        :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
+        class="gl-max-w-full"
+        :height="height"
+      />
     </div>
-    <div :class="contentClasses" data-testid="gl-empty-state-content">
-      <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
+    <div
+      class="gl-empty-state-content gl-mx-auto gl-my-0"
+      :class="contentClasses"
+      data-testid="gl-empty-state-content"
+    >
+      <!--
+          @slot Use this slot to customize the empty state's title area.
+          Overrides the `title` prop.
+        -->
+      <slot ref="title" name="title">
+        <h1
+          class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0"
+          :class="compact ? 'h5' : 'h4'"
+        >
+          {{ title }}
+        </h1>
+      </slot>
+      <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-4 gl-mb-0">
         <!--
-            @slot Use this slot to customize the empty state's title area.
-            Overrides the `title` prop.
-          -->
-        <slot ref="title" name="title">
-          <h1
-            class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0"
-            :class="compact ? 'h5' : 'h4'"
+          @slot Use this slot to customize the empty state's description
+          area. Overrides the `description` prop.
+        -->
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </p>
+      <div
+        class="gl-display-flex gl-flex-wrap gl-mt-5"
+        :class="{ 'gl-justify-content-center': !compact }"
+      >
+        <!--
+          @slot Use this slot to customize the empty state's actions area,
+          where the buttons are. Overrides button-related props:
+          `primaryButtonLink`, `primaryButtonText`, `secondaryButtonLink`,
+          `secondaryButtonText`.
+        -->
+        <slot name="actions">
+          <gl-button
+            v-if="shouldRenderPrimaryButton"
+            variant="confirm"
+            :class="compact ? 'gl-mr-3' : 'gl-mx-2'"
+            class="gl-mb-3"
+            :href="primaryButtonLink"
+            >{{ primaryButtonText }}</gl-button
           >
-            {{ title }}
-          </h1>
+          <gl-button
+            v-if="shouldRenderSecondaryButton"
+            class="gl-mb-3 gl-mr-3"
+            :class="{ 'gl-mx-2!': !compact }"
+            :href="secondaryButtonLink"
+            >{{ secondaryButtonText }}
+          </gl-button>
         </slot>
-        <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-4 gl-mb-0">
-          <!--
-            @slot Use this slot to customize the empty state's description
-            area. Overrides the `description` prop.
-          -->
-          <slot name="description">
-            {{ description }}
-          </slot>
-        </p>
-        <div
-          class="gl-display-flex gl-flex-wrap gl-mt-5"
-          :class="{ 'gl-justify-content-center': !compact }"
-        >
-          <!--
-            @slot Use this slot to customize the empty state's actions area,
-            where the buttons are. Overrides button-related props:
-            `primaryButtonLink`, `primaryButtonText`, `secondaryButtonLink`,
-            `secondaryButtonText`.
-          -->
-          <slot name="actions">
-            <gl-button
-              v-if="shouldRenderPrimaryButton"
-              variant="confirm"
-              :class="compact ? 'gl-mr-3' : 'gl-mx-2'"
-              class="gl-mb-3"
-              :href="primaryButtonLink"
-              >{{ primaryButtonText }}</gl-button
-            >
-            <gl-button
-              v-if="shouldRenderSecondaryButton"
-              class="gl-mb-3 gl-mr-3"
-              :class="{ 'gl-mx-2!': !compact }"
-              :href="secondaryButtonLink"
-              >{{ secondaryButtonText }}
-            </gl-button>
-          </slot>
-        </div>
       </div>
     </div>
   </section>

package/src/scss/components.scss

@@ -78,3 +78,4 @@
 @import '../components/base/new_dropdowns/dropdown';
 @import '../components/base/new_dropdowns/dropdown_item';
 @import '../components/base/new_dropdowns/listbox/listbox';
+@import '../components/regions/empty_state/empty_state';

package/src/scss/mixins.scss

@@ -123,9 +123,14 @@
   }
 }
 
-// Helper functions to aid maintenance of heading styles
 
-// Because we can't interpolate into a variable name we have to do some stuff
+/**
+* Helper function to resolve font-size value from $gl-font-sizes and
+* $gl-font-sizes-fixed maps.
+*
+* @param $size Number font-size scale
+* @param $fixed Boolean toggle default and fixed font size scales
+*/
 @function get-font-size-variable($size, $fixed) {
   @if $fixed == true {
     @if map-has-key($gl-font-sizes-fixed, $size) {
@@ -144,17 +149,22 @@
   }
 }
 
-// Set fixed as false by default, matching desired usage in the product
-// Headings do not have margin included, margin is determined by the context
-@mixin gl-heading($size, $fixed: false) {
-  // These settings apply to all headings
+/**
+* Defines default properties for heading typography based on font-size
+* scale value and default or fixed sizing.
+*
+* Note: overrides Bootstrap margin-top, other margin is determined by
+* individual context
+*
+* @param $size Number font-size scale
+* @param $fixed Boolean toggle default and fixed font size scales
+*/
+@mixin gl-heading-scale($size, $fixed: false) {
   font-weight: $gl-font-weight-heading;
   margin-top: 0; // override bootstrap reset in GitLab
-
-  // Because we can't interpolate into a variable name we have to do some stuff
   font-size: get-font-size-variable($size, $fixed);
 
-  // Larger headings have less letter spacing
+  // Larger headings have reduced letter spacing
   @if ($size <= 500) {
     letter-spacing: $gl-letter-spacing-heading;
   } @else {