@gitlab/ui 66.5.0 → 66.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.5.0",
+  "version": "66.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,9 +88,9 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.11",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/core": "^7.22.17",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
@@ -126,7 +126,7 @@
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.48.0",
+    "eslint": "8.49.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.14.0",
     "eslint-plugin-storybook": "0.6.13",

package/scss_to_js/scss_variables.js

@@ -24,6 +24,7 @@ export const glSpacingScale48 = '24rem'
 export const glSpacingScale62 = '31rem'
 export const glSpacingScale75 = '37.5rem'
 export const glSpacingScale80 = '40rem'
+export const glSpacingScale88 = '44rem'
 export const breakpointSm = '576px'
 export const breakpointMd = '768px'
 export const breakpointLg = '992px'

package/scss_to_js/scss_variables.json

@@ -130,6 +130,11 @@
       "value": "80 * $grid-size",
       "compiledValue": "40rem"
     },
+    {
+      "name": "$gl-spacing-scale-88",
+      "value": "88 * $grid-size",
+      "compiledValue": "44rem"
+    },
     {
       "name": "$breakpoint-sm",
       "value": "576px",

package/src/components/base/avatar/avatar.stories.js

@@ -53,7 +53,7 @@ export const Image = (args, { argTypes }) => ({
       <gl-avatar
         :size="size"
         :shape="shape"
-        src="./img/gitlab-summit-south-africa.jpg"
+        src="./img/avatar_1.png"
       />
     `,
 });
@@ -66,7 +66,7 @@ export const ResponsiveImage = (args, { argTypes }) => ({
       <gl-avatar
         :size="size"
         :shape="shape"
-        src="./img/gitlab-summit-south-africa.jpg"
+        src="./img/avatar_1.png"
       />
     `,
 });
@@ -97,7 +97,7 @@ export const WithTooltip = (args, { argTypes }) => ({
         :size="size"
         :shape="shape"
         :title="tooltipText"
-        src="./img/gitlab-summit-south-africa.jpg"
+        src="./img/avatar_1.png"
         v-gl-tooltip="{ placement }"
       />
     `,

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

@@ -8,7 +8,7 @@ describe('empty state component', () => {
     title: 'Empty State Title',
     description: 'Empty state description.',
     svgPath: 'https://www.example.com/test.jpg',
-    svgHeight: 150,
+    svgHeight: 144,
     primaryButtonText: 'Primary Button',
     primaryButtonLink: 'http://example.com/primary',
     secondaryButtonText: 'Secondary Button',
@@ -249,7 +249,7 @@ 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-full', 'gl-m-auto', customContentClass];
+    const expectedDefaultContentClasses = ['gl-max-w-88', 'gl-m-auto', customContentClass];
     const expectedCompactContentClasses = [
       'gl-flex-grow-1',
       'gl-flex-basis-0',

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

@@ -29,7 +29,7 @@ const Template = (args) => ({
 const generateProps = ({
   title = 'This state is empty',
   svgPath = securityDashboardEmptyStateSvg,
-  svgHeight = 145,
+  svgHeight = 144,
   description = 'The title and message should be clear, concise, and explain why the user is seeing this screen.',
   primaryButtonText = 'Something actionable',
   secondaryButtonText = 'Something else',

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

@@ -29,7 +29,7 @@ export default {
     svgHeight: {
       type: Number,
       required: false,
-      default: null,
+      default: 144,
     },
     /**
      * The desciption/body text of the empty state.
@@ -108,7 +108,7 @@ export default {
     },
     contentClasses() {
       return [
-        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto',
+        this.compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-88 gl-m-auto',
         this.contentClass,
       ];
     },
@@ -120,14 +120,14 @@ export default {
   <section
     class="gl-display-flex"
     :class="{
-      'empty-state gl-text-center gl-flex-direction-column': !compact,
+      'gl-empty-state gl-text-center gl-flex-direction-column': !compact,
       'gl-flex-direction-row': compact,
     }"
   >
     <div
       :class="{ 'gl-display-none gl-sm-display-block gl-px-4': compact, 'gl-max-w-full': !compact }"
     >
-      <div v-if="svgPath" :class="{ 'svg-content': !compact }" class="svg-250">
+      <div v-if="svgPath">
         <img
           :src="svgPath"
           alt=""
@@ -145,11 +145,14 @@ export default {
             Overrides the `title` prop.
           -->
         <slot ref="title" name="title">
-          <h1 class="gl-font-size-h-display gl-line-height-36" :class="compact ? 'h5' : 'h4'">
+          <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-3">
+        <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.
@@ -159,7 +162,7 @@ export default {
           </slot>
         </p>
         <div
-          class="gl-display-flex gl-flex-wrap"
+          class="gl-display-flex gl-flex-wrap gl-mt-5"
           :class="{ 'gl-justify-content-center': !compact }"
         >
           <!--

package/src/scss/utilities.scss

@@ -1169,10 +1169,18 @@
   border-color: $gray-100;
 }
 
+.gl-hover-border-gray-100:hover {
+  border-color: $gray-100;
+}
+
 .gl-border-gray-100\! {
   border-color: $gray-100 !important;
 }
 
+.gl-hover-border-gray-100\!:hover {
+  border-color: $gray-100 !important;
+}
+
 .gl-border-gray-200 {
   border-color: $gray-200;
 }
@@ -3954,6 +3962,18 @@
   grid-template-columns: 1fr 1fr 1fr 1fr !important;
 }
 
+.gl-md-grid-template-columns-4 {
+  @include gl-media-breakpoint-up(md) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.gl-md-grid-template-columns-4\! {
+  @include gl-media-breakpoint-up(md) {
+    grid-template-columns: repeat(4, 1fr) !important;
+  }
+}
+
 .gl-lg-grid-template-columns-4 {
   @include gl-media-breakpoint-up(lg) {
     grid-template-columns: repeat(4, 1fr);
@@ -5424,6 +5444,14 @@
   max-width: $gl-spacing-scale-80 !important;
 }
 
+.gl-max-w-88 {
+  max-width: $gl-spacing-scale-88;
+}
+
+.gl-max-w-88\! {
+  max-width: $gl-spacing-scale-88 !important;
+}
+
 .gl-max-w-none {
   max-width: none;
 }

package/src/scss/utility-mixins/border.scss

@@ -127,7 +127,7 @@
   border-color: $gray-50;
 }
 
-@mixin gl-border-gray-100 {
+@mixin gl-border-gray-100($hover: true) {
   border-color: $gray-100;
 }
 

package/src/scss/utility-mixins/grid.scss

@@ -37,6 +37,12 @@
   grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 
+@mixin gl-md-grid-template-columns-4 {
+  @include gl-media-breakpoint-up(md) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
 @mixin gl-lg-grid-template-columns-4 {
   @include gl-media-breakpoint-up(lg) {
     grid-template-columns: repeat(4, 1fr);

package/src/scss/utility-mixins/sizing.scss

@@ -452,6 +452,10 @@
   max-width: $gl-spacing-scale-80;
 }
 
+@mixin gl-max-w-88 {
+  max-width: $gl-spacing-scale-88;
+}
+
 @mixin gl-max-w-none {
   max-width: none;
 }

package/src/scss/variables.scss

@@ -27,6 +27,7 @@ $gl-spacing-scale-48: 48 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;
 $gl-spacing-scale-75: 75 * $grid-size;
 $gl-spacing-scale-80: 80 * $grid-size;
+$gl-spacing-scale-88: 88 * $grid-size;
 
 // Responsive breakpoints