@gitlab/ui 66.6.0 → 66.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.6.0",
+  "version": "66.7.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,7 +88,7 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.15",
+    "@babel/core": "^7.22.17",
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@gitlab/eslint-plugin": "19.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/new_dropdowns/dropdown_item.scss

@@ -16,14 +16,45 @@
     @include gl-mb-0;
   }
 
-  &:active,
   &:hover,
-  &:focus,
+  &:focus {
+    .gl-new-dropdown-item-content {
+      @include gl-bg-gray-50;
+    }
+  }
+
+  &:active,
   &:focus:active {
+    .gl-new-dropdown-item-content {
+      @include gl-bg-gray-100;
+    }
+  }
+
+  &[aria-selected="true"] {
     .gl-new-dropdown-item-content {
       @include gl-bg-gray-50;
-      @include gl-text-decoration-none;
-      @include gl-text-gray-900;
+    }
+
+    &:hover,
+    &:focus {
+      .gl-new-dropdown-item-content {
+        @include gl-bg-gray-100;
+      }
+
+      .gl-new-dropdown-item-check-icon {
+        @include gl-text-blue-600
+      }
+    }
+    
+    &:active,
+    &:focus:active {
+      .gl-new-dropdown-item-content {
+        @include gl-bg-gray-200;
+      }
+      
+      .gl-new-dropdown-item-check-icon {
+        @include gl-text-blue-700
+      }
     }
   }
 
@@ -52,6 +83,7 @@
     @include gl-py-0;
     @include gl-relative;
     @include gl-rounded-base;
+    @include gl-text-decoration-none;
     @include gl-text-gray-900;
     @include gl-text-left;
     @include gl-white-space-normal;
@@ -59,7 +91,7 @@
     .gl-new-dropdown-item-check-icon {
       @include gl-flex-shrink-0;
       @include gl-mr-3;
-      @include gl-text-blue-400;
+      @include gl-text-blue-500;
     }
 
     .gl-new-dropdown-item-icon {

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -59,7 +59,7 @@ export default {
     @click="toggleSelection"
     @keydown="onKeydown"
   >
-    <span class="gl-new-dropdown-item-content" :class="{ 'gl-bg-gray-50!': isSelected }">
+    <span class="gl-new-dropdown-item-content">
       <gl-icon
         name="mobile-issue-close"
         data-testid="dropdown-item-checkbox"

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

@@ -3962,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);
@@ -5432,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/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