@gitlab/ui 50.1.1 → 51.0.0

package/dist/utils/charts/theme.js

@@ -9,7 +9,6 @@ const gray200 = '#bfbfc3';
 const gray300 = '#a4a3a8';
 const gray500 = '#737278';
 const gray600 = '#626168';
-const gray700 = '#535158';
 const gray900 = '#333238';
 const dataVizGreen500 = '#619025';
 const dataVizGreen600 = '#4e7f0e';
@@ -164,11 +163,11 @@ const createTheme = function () {
       emphasis: {
         iconStyle: {
           borderWidth: 0,
-          color: gray700
+          color: gray900
         }
       },
       iconStyle: {
-        color: gray200,
+        color: gray500,
         borderWidth: 0
       },
       itemGap: 8,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "50.1.1",
+  "version": "51.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,7 +85,7 @@
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.9.0",
+    "@gitlab/svgs": "3.11.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -113,7 +113,7 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.1.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.27.0",
+    "eslint": "8.28.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.7",

package/src/components/base/dropdown/dropdown.scss

@@ -1,4 +1,4 @@
-.gl-new-dropdown {
+.gl-dropdown {
   .dropdown-menu {
     @include gl-bg-white;
     @include gl-border-1;
@@ -19,7 +19,7 @@
     @include gl-p-0;
   }
 
-  .gl-new-dropdown-inner {
+  .gl-dropdown-inner {
     @include gl-display-flex;
     @include gl-flex-direction-column;
     max-height: $gl-max-dropdown-max-height;
@@ -33,12 +33,12 @@
     }
   }
 
-  .gl-new-dropdown-contents {
+  .gl-dropdown-contents {
     @include gl-flex-grow-1;
     overflow-y: auto;
   }
 
-  .gl-new-dropdown-header-top {
+  .gl-dropdown-header-top {
     @include gl-border-1;
     @include gl-border-b-solid;
     @include gl-border-gray-200;
@@ -53,13 +53,13 @@
     @include gl-px-5;
   }
 
-  .gl-new-dropdown-header {
+  .gl-dropdown-header {
     @include gl-border-b-1;
     @include gl-border-b-solid;
     @include gl-border-b-gray-200;
   }
 
-  .gl-new-dropdown-footer {
+  .gl-dropdown-footer {
     @include gl-border-t-1;
     @include gl-border-t-solid;
     @include gl-border-t-gray-200;
@@ -138,7 +138,7 @@
     }
   }
 
-  .gl-new-dropdown-button-text {
+  .gl-dropdown-button-text {
     @include gl-mr-auto;
     @include gl-overflow-hidden;
     @include gl-text-overflow-ellipsis;

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

@@ -187,25 +187,25 @@ describe('new dropdown', () => {
 
     it('renders the header', () => {
       buildWrapper({}, slots);
-      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBe(true);
+      expect(wrapper.find('.gl-dropdown-header').exists()).toBe(true);
       expect(wrapper.html()).toContain('Header Content');
     });
 
     it('has the "gl-border-b-0!" class when header border disabled', () => {
       buildWrapper({ hideHeaderBorder: true }, slots);
-      expect(wrapper.find('.gl-new-dropdown-header').classes()).toContain('gl-border-b-0!');
+      expect(wrapper.find('.gl-dropdown-header').classes()).toContain('gl-border-b-0!');
     });
   });
 
   describe('with no header slot exists', () => {
     it('does not render the header', () => {
       buildWrapper();
-      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBe(false);
+      expect(wrapper.find('.gl-dropdown-header').exists()).toBe(false);
     });
 
     it('does render the header if headerText provided', () => {
       buildWrapper({ headerText: 'Legacy Header Prop Text' });
-      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBe(true);
+      expect(wrapper.find('.gl-dropdown-header').exists()).toBe(true);
       expect(wrapper.html()).toContain('Legacy Header Prop Text');
     });
   });
@@ -215,7 +215,7 @@ describe('new dropdown', () => {
 
     it('renders the footer', () => {
       buildWrapper({}, slots);
-      expect(wrapper.find('.gl-new-dropdown-footer').exists()).toBe(true);
+      expect(wrapper.find('.gl-dropdown-footer').exists()).toBe(true);
       expect(wrapper.html()).toContain('Footer Content');
     });
   });
@@ -223,7 +223,7 @@ describe('new dropdown', () => {
   describe('with no footer slot exists', () => {
     it('does not render the footer', () => {
       buildWrapper();
-      expect(wrapper.find('.gl-new-dropdown-footer').exists()).toBe(false);
+      expect(wrapper.find('.gl-dropdown-footer').exists()).toBe(false);
     });
   });
 

package/src/components/base/dropdown/dropdown.vue

@@ -235,7 +235,7 @@ export default {
 <template>
   <b-dropdown
     ref="dropdown"
-    class="gl-new-dropdown"
+    class="gl-dropdown"
     v-bind="$attrs"
     :split="split"
     :variant="variant"
@@ -248,13 +248,13 @@ export default {
     :popper-opts="popperOptions"
     v-on="$listeners"
   >
-    <div class="gl-new-dropdown-inner">
+    <div class="gl-dropdown-inner">
       <div
         v-if="hasSlotContents('header') || headerText"
-        class="gl-new-dropdown-header"
+        class="gl-dropdown-header"
         :class="{ 'gl-border-b-0!': hideHeaderBorder }"
       >
-        <p v-if="headerText" class="gl-new-dropdown-header-top">
+        <p v-if="headerText" class="gl-dropdown-header-top">
           {{ headerText }}
         </p>
         <slot name="header"></slot>
@@ -288,7 +288,7 @@ export default {
           >
         </div>
       </div>
-      <div class="gl-new-dropdown-contents">
+      <div class="gl-dropdown-contents">
         <div
           v-if="hasHighlightedItemsContent"
           class="gl-overflow-visible"
@@ -299,7 +299,7 @@ export default {
         </div>
         <slot></slot>
       </div>
-      <div v-if="hasSlotContents('footer')" class="gl-new-dropdown-footer">
+      <div v-if="hasSlotContents('footer')" class="gl-dropdown-footer">
         <slot name="footer"></slot>
       </div>
     </div>
@@ -307,7 +307,7 @@ export default {
       <slot name="button-content">
         <gl-loading-icon v-if="loading" :class="{ 'gl-mr-2': !isIconOnly }" />
         <gl-icon v-if="icon && !(isIconOnly && loading)" class="dropdown-icon" :name="icon" />
-        <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+        <span class="gl-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
           <slot name="button-text">{{ buttonText }}</slot>
         </span>
         <gl-icon v-if="renderCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />

package/src/components/base/dropdown/dropdown_divider.scss

@@ -1,4 +1,4 @@
-@mixin gl-tmp-new-dropdown-divider-style {
+@mixin gl-tmp-dropdown-divider-style {
   @include gl-overflow-hidden;
   @include gl-h-0;
   @include gl-my-2;
@@ -10,13 +10,13 @@
 }
 
 /* Styling when the component is used on its own */
-.gl-new-dropdown-divider {
-  @include gl-tmp-new-dropdown-divider-style;
+.gl-dropdown-divider {
+  @include gl-tmp-dropdown-divider-style;
 }
 
 /* Styling to override the vue-bootstrap CSS included in GitLab CSS */
-.gl-new-dropdown {
-  .gl-new-dropdown-divider {
-    @include gl-tmp-new-dropdown-divider-style;
+.gl-dropdown {
+  .gl-dropdown-divider {
+    @include gl-tmp-dropdown-divider-style;
   }
 }

package/src/components/base/dropdown/dropdown_divider.vue

@@ -10,5 +10,5 @@ export default {
 </script>
 
 <template>
-  <b-dropdown-divider class="gl-new-dropdown-divider" v-bind="$attrs" v-on="$listeners" />
+  <b-dropdown-divider class="gl-dropdown-divider" v-bind="$attrs" v-on="$listeners" />
 </template>

package/src/components/base/dropdown/dropdown_item.scss

@@ -17,7 +17,7 @@
   @include gl-white-space-normal;
 }
 
-.gl-new-dropdown-item {
+.gl-dropdown-item {
   .dropdown-item {
     @include gl-tmp-dropdown-item-style;
     @include gl-cursor-pointer;
@@ -27,27 +27,27 @@
       @include gl-mr-3;
     }
 
-    .gl-new-dropdown-item-check-icon {
+    .gl-dropdown-item-check-icon {
       @include gl-flex-shrink-0;
       @include gl-mr-3;
       @include gl-text-gray-700;
     }
 
-    .gl-new-dropdown-item-icon {
+    .gl-dropdown-item-icon {
       @include gl-flex-shrink-0;
       @include gl-mr-3;
     }
 
-    .gl-new-dropdown-item-text-primary {
+    .gl-dropdown-item-text-primary {
       @include gl-m-0;
     }
 
-    .gl-new-dropdown-item-text-secondary {
+    .gl-dropdown-item-text-secondary {
       @include gl-m-0;
       @include gl-text-gray-700;
     }
 
-    .gl-new-dropdown-item-text-wrapper {
+    .gl-dropdown-item-text-wrapper {
       @include gl-min-w-0;
       @include gl-flex-grow-1;
       @include gl-mr-3;

package/src/components/base/dropdown/dropdown_item.spec.js

@@ -41,7 +41,7 @@ describe('dropdown item', () => {
         });
 
         expect(findCheckbox().classes()).toEqual([
-          'gl-new-dropdown-item-check-icon',
+          'gl-dropdown-item-check-icon',
           ...expectedClasses,
         ]);
       }

package/src/components/base/dropdown/dropdown_item.vue

@@ -88,31 +88,22 @@ export default {
 </script>
 
 <template>
-  <component
-    :is="bootstrapComponent"
-    class="gl-new-dropdown-item"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
+  <component :is="bootstrapComponent" class="gl-dropdown-item" v-bind="$attrs" v-on="$listeners">
     <gl-icon
       v-if="shouldShowCheckIcon"
       name="mobile-issue-close"
       data-testid="dropdown-item-checkbox"
       :class="[
-        'gl-new-dropdown-item-check-icon',
+        'gl-dropdown-item-check-icon',
         { 'gl-visibility-hidden': !isChecked },
         checkedClasses,
       ]"
     />
-    <gl-icon
-      v-if="iconName"
-      :name="iconName"
-      :class="['gl-new-dropdown-item-icon', iconColorCss]"
-    />
+    <gl-icon v-if="iconName" :name="iconName" :class="['gl-dropdown-item-icon', iconColorCss]" />
     <gl-avatar v-if="avatarUrl" :size="32" :src="avatarUrl" />
-    <div class="gl-new-dropdown-item-text-wrapper">
-      <p class="gl-new-dropdown-item-text-primary"><slot></slot></p>
-      <p v-if="secondaryText" class="gl-new-dropdown-item-text-secondary">{{ secondaryText }}</p>
+    <div class="gl-dropdown-item-text-wrapper">
+      <p class="gl-dropdown-item-text-primary"><slot></slot></p>
+      <p v-if="secondaryText" class="gl-dropdown-item-text-secondary">{{ secondaryText }}</p>
     </div>
     <gl-button
       v-if="iconRightName"

package/src/components/base/dropdown/dropdown_section_header.scss

@@ -1,4 +1,4 @@
-@mixin gl-tmp-new-dropdown-section-header-style {
+@mixin gl-tmp-dropdown-section-header-style {
   @include gl-font-base;
   @include gl-text-gray-900;
   @include gl-line-height-normal;
@@ -10,13 +10,13 @@
 }
 
 /* Styling when the component is used on its own */
-.gl-new-dropdown-section-header .dropdown-header {
-  @include gl-tmp-new-dropdown-section-header-style;
+.gl-dropdown-section-header .dropdown-header {
+  @include gl-tmp-dropdown-section-header-style;
 }
 
 /* Styling to override the vue-bootstrap CSS included in GitLab CSS */
-.gl-new-dropdown {
-  .gl-new-dropdown-section-header .dropdown-header {
-    @include gl-tmp-new-dropdown-section-header-style;
+.gl-dropdown {
+  .gl-dropdown-section-header .dropdown-header {
+    @include gl-tmp-dropdown-section-header-style;
   }
 }

package/src/components/base/dropdown/dropdown_section_header.vue

@@ -10,7 +10,7 @@ export default {
 </script>
 
 <template>
-  <b-dropdown-header class="gl-new-dropdown-section-header" v-bind="$attrs" v-on="$listeners">
+  <b-dropdown-header class="gl-dropdown-section-header" v-bind="$attrs" v-on="$listeners">
     <slot></slot>
   </b-dropdown-header>
 </template>

package/src/components/base/dropdown/dropdown_text.scss

@@ -1,4 +1,4 @@
-.gl-new-dropdown-text {
+.gl-dropdown-text {
   .b-dropdown-text {
     @include gl-tmp-dropdown-item-style;
     @include gl-py-3;

package/src/components/base/dropdown/dropdown_text.vue

@@ -10,7 +10,7 @@ export default {
 </script>
 
 <template>
-  <b-dropdown-text class="gl-new-dropdown-text" v-bind="$attrs" v-on="$listeners">
+  <b-dropdown-text class="gl-dropdown-text" v-bind="$attrs" v-on="$listeners">
     <slot></slot>
   </b-dropdown-text>
 </template>

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

@@ -123,7 +123,7 @@ export default {
     },
     focusItem(index) {
       this.$refs.suggestionsMenu
-        .querySelectorAll('.gl-new-dropdown-item')
+        .querySelectorAll('.gl-dropdown-item')
         [index]?.querySelector('button')
         .focus();
     },

package/src/components/base/nav/nav_item_dropdown.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <b-nav-item-dropdown class="gl-new-dropdown" v-bind="$attrs" v-on="$listeners">
+  <b-nav-item-dropdown class="gl-dropdown" v-bind="$attrs" v-on="$listeners">
     <template #default>
       <slot></slot>
     </template>

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -84,7 +84,7 @@ describe('base dropdown', () => {
 
     it('renders the content', () => {
       buildWrapper({}, slots);
-      expect(wrapper.find('.gl-new-dropdown-inner').html()).toContain(defaultContent);
+      expect(wrapper.find('.gl-dropdown-inner').html()).toContain(defaultContent);
     });
   });
 

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -195,7 +195,7 @@ export default {
 </script>
 
 <template>
-  <div v-outside="close" class="gl-new-dropdown dropdown btn-group">
+  <div v-outside="close" class="gl-dropdown dropdown btn-group">
     <gl-button
       :id="toggleId"
       ref="toggle"
@@ -212,7 +212,7 @@ export default {
       :aria-labelledby="toggleLabelledBy"
       @click="toggle"
     >
-      <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+      <span class="gl-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
         {{ toggleText }}
       </span>
       <gl-icon v-if="!noCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
@@ -225,7 +225,7 @@ export default {
       :class="{ show: visible }"
       @keydown.esc.stop.prevent="closeAndFocus"
     >
-      <div class="gl-new-dropdown-inner">
+      <div class="gl-dropdown-inner">
         <slot></slot>
       </div>
     </div>

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

@@ -529,7 +529,7 @@ export default {
       ref="list"
       :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
       role="listbox"
-      class="gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0"
+      class="gl-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0"
       tabindex="-1"
       @keydown="onKeydown"
     >

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

@@ -51,7 +51,7 @@ export default {
 
 <template>
   <li
-    class="gl-new-dropdown-item"
+    class="gl-dropdown-item"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"
@@ -63,12 +63,12 @@ export default {
         name="mobile-issue-close"
         data-testid="dropdown-item-checkbox"
         :class="[
-          'gl-new-dropdown-item-check-icon',
+          'gl-dropdown-item-check-icon',
           { 'gl-visibility-hidden': !isSelected },
           checkedClasses,
         ]"
       />
-      <span class="gl-new-dropdown-item-text-wrapper">
+      <span class="gl-dropdown-item-text-wrapper">
         <slot></slot>
       </span>
     </span>

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

@@ -14,7 +14,7 @@ describe('sorting component', () => {
     isAscending,
   };
 
-  const selectDropdownButton = () => wrapper.find('.gl-new-dropdown button');
+  const selectDropdownButton = () => wrapper.find('.gl-dropdown button');
   const selectDirectionButton = () => wrapper.find('.sorting-direction-button');
   const selectDropdown = () => wrapper.findComponent(GlDropdown);
 

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -172,7 +172,7 @@ export default {
 </script>
 
 <template>
-  <div class="dropdown b-dropdown gl-new-dropdown gl-relative" :class="{ show }">
+  <div class="dropdown b-dropdown gl-dropdown gl-relative" :class="{ show }">
     <ul
       ref="dropdownMenu"
       role="menu"

package/src/utils/charts/theme.js

@@ -5,7 +5,6 @@ import {
   gray300,
   gray500,
   gray600,
-  gray700,
   gray900,
   red500,
   whiteNormal,
@@ -209,11 +208,11 @@ export const createTheme = (options = {}) => ({
     emphasis: {
       iconStyle: {
         borderWidth: 0,
-        color: gray700,
+        color: gray900,
       },
     },
     iconStyle: {
-      color: gray200,
+      color: gray500,
       borderWidth: 0,
     },
     itemGap: 8,