@gitlab/ui 32.34.0 → 32.37.0

package/dist/utils/constants.js

@@ -97,7 +97,7 @@ const badgeForButtonOptions = {
   [buttonVariantOptions.confirm]: badgeVariantOptions.info,
   [buttonVariantOptions.danger]: badgeVariantOptions.danger
 };
-const newDropdownVariantOptions = {
+const dropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',
@@ -251,4 +251,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, newDropdownVariantOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -226,6 +226,8 @@ export const tGrayA04 = 'rgba(0, 0, 0, 0.04)'
 export const tGrayA06 = 'rgba(0, 0, 0, 0.06)'
 export const tGrayA08 = 'rgba(0, 0, 0, 0.08)'
 export const tGrayA24 = 'rgba(0, 0, 0, 0.24)'
+export const glTextColor = '#303030'
+export const glTextColorSecondary = '#666'
 export const glFontWeightLight = '300'
 export const glFontWeightNormal = '400'
 export const glFontWeightBold = '600'

package/scss_to_js/scss_variables.json

@@ -1167,6 +1167,16 @@
       "value": "rgba(#000, 0.24)",
       "compiledValue": "rgba(0, 0, 0, 0.24)"
     },
+    {
+      "name": "$gl-text-color",
+      "value": "$gray-900",
+      "compiledValue": "#303030"
+    },
+    {
+      "name": "$gl-text-color-secondary",
+      "value": "$gray-500",
+      "compiledValue": "#666"
+    },
     {
       "name": "$gl-font-weight-light",
       "value": "300",
@@ -1624,7 +1634,7 @@
     },
     {
       "name": "$body-color",
-      "value": "$gray-900",
+      "value": "$gl-text-color",
       "compiledValue": "#303030"
     },
     {

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 
-import { newDropdownVariantOptions } from '../../../utils/constants';
+import { dropdownVariantOptions } from '../../../utils/constants';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlDropdown from './dropdown.vue';
 
@@ -175,14 +175,11 @@ describe('new dropdown', () => {
   });
 
   describe('secondary category', () => {
-    it.each(Object.keys(newDropdownVariantOptions))(
-      'applies %s variant class properly',
-      (variant) => {
-        buildWrapper({ category: 'secondary', variant });
-
-        expect(findDropdownToggle().classes()).toContain(`btn-${variant}-secondary`);
-      }
-    );
+    it.each(Object.keys(dropdownVariantOptions))('applies %s variant class properly', (variant) => {
+      buildWrapper({ category: 'secondary', variant });
+
+      expect(findDropdownToggle().classes()).toContain(`btn-${variant}-secondary`);
+    });
   });
 
   describe('when the header slot exists', () => {

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

@@ -12,8 +12,8 @@ import {
 } from '../../../../index';
 import {
   buttonCategoryOptions,
-  newDropdownVariantOptions,
   buttonSizeOptions,
+  dropdownVariantOptions,
 } from '../../../utils/constants';
 import readme from './dropdown.md';
 
@@ -57,7 +57,7 @@ function generateProps({
     },
     variant: {
       type: String,
-      default: select('variant', Object.values(newDropdownVariantOptions), variant),
+      default: select('variant', Object.values(dropdownVariantOptions), variant),
     },
     size: {
       type: String,
@@ -197,7 +197,7 @@ documentedStoriesOf('base/dropdown', readme)
     props: generateProps({
       text: 'Some dropdown',
       category: buttonCategoryOptions.secondary,
-      variant: newDropdownVariantOptions.confirm,
+      variant: dropdownVariantOptions.confirm,
     }),
     components,
     template: wrap`

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

@@ -3,8 +3,8 @@ import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
 import {
   buttonCategoryOptions,
-  newDropdownVariantOptions,
   buttonSizeOptions,
+  dropdownVariantOptions,
 } from '../../../utils/constants';
 import { ButtonMixin } from '../../mixins/button_mixin';
 import GlButton from '../button/button.vue';
@@ -106,8 +106,8 @@ export default {
     variant: {
       type: String,
       required: false,
-      default: newDropdownVariantOptions.default,
-      validator: (value) => Object.keys(newDropdownVariantOptions).includes(value),
+      default: dropdownVariantOptions.default,
+      validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
     },
     size: {
       type: String,

package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js

@@ -82,8 +82,8 @@ describe('Filtered search suggestion list component', () => {
       },
       template: `
         <div>
-          <gl-filtered-search-suggestion value="1">1</gl-filtered-search-suggestion>
-          <gl-filtered-search-suggestion value="2">2</gl-filtered-search-suggestion>
+          <gl-filtered-search-suggestion value="One">One</gl-filtered-search-suggestion>
+          <gl-filtered-search-suggestion value="Two">Two</gl-filtered-search-suggestion>
         </div>
       `,
     };
@@ -112,7 +112,7 @@ describe('Filtered search suggestion list component', () => {
     it('selects first suggestion', () => {
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('1');
+        expect(wrapper.vm.getValue()).toBe('One');
       });
     });
 
@@ -120,7 +120,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('2');
+        expect(wrapper.vm.getValue()).toBe('Two');
       });
     });
 
@@ -146,7 +146,7 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.prevItem();
       wrapper.vm.prevItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('2');
+        expect(wrapper.vm.getValue()).toBe('Two');
       });
     });
 
@@ -156,14 +156,21 @@ describe('Filtered search suggestion list component', () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('1');
+        expect(wrapper.vm.getValue()).toBe('One');
       });
     });
 
     it('highlights suggestion if initial-value is provided', () => {
-      wrapper.setProps({ initialValue: '2' });
+      wrapper.setProps({ initialValue: 'Two' });
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('2');
+        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
+      });
+    });
+
+    it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
+      wrapper.setProps({ initialValue: 'two' });
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
       });
     });
 

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -33,14 +33,23 @@ export default {
 
   watch: {
     initialValue(newValue) {
-      this.activeIdx = this.registeredItems.findIndex((item) => item.value === newValue);
+      this.activeIdx = this.registeredItems.findIndex((item) =>
+        this.valuesMatch(item.value, newValue)
+      );
     },
   },
 
   methods: {
+    valuesMatch(firstValue, secondValue) {
+      if (!firstValue || !secondValue) return false;
+
+      return typeof firstValue === 'string'
+        ? firstValue.toLowerCase() === secondValue.toLowerCase()
+        : firstValue === secondValue;
+    },
     register(item) {
       this.registeredItems.push(item);
-      if (item.value === this.initialValue) {
+      if (this.valuesMatch(item.value, this.initialValue)) {
         this.activeIdx = this.registeredItems.length - 1;
       }
     },

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

@@ -42,4 +42,13 @@ describe('GlPopover', () => {
       expect(findBVPopover().props('triggers')).toBe(triggers);
     });
   });
+
+  describe('title slot', () => {
+    it('renders title slot content', () => {
+      const title = 'Popover title';
+      createWrapper({ title });
+
+      expect(findBVPopover().props('title')).toBe(title);
+    });
+  });
 });

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

@@ -2,6 +2,12 @@ import { withKnobs, select, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { popoverPlacements } from '../../../utils/constants';
 
+const contentString = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
+  pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
+  massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
+`;
+
 const template = `
   <div class="gl-display-flex gl-justify-content-center gl-p-6">
     <gl-button id="pop-top">{{placement}}</gl-button>
@@ -9,13 +15,29 @@ const template = `
       triggers="hover focus"
       :title="title"
       :placement="placement"
-      :content="content"
+      content="${contentString}"
+      data-testid="popover-with-props"
       show
       />
   </div>
   `;
 
-function generateProps({ placement = popoverPlacements.top, title = 'Popover' } = {}) {
+const scopedSlotTemplate = `
+  <div class="gl-display-flex gl-justify-content-center gl-p-6">
+    <gl-button id="pop-top-two" data-testid="popover-button-click">{{placement}}</gl-button>
+    <gl-popover target="pop-top-two"
+      triggers="click"
+      :placement="placement"
+      content="${contentString}"
+    >
+      <template #title>
+        <span data-testid="popover-title">Popover title</span>
+      </template>
+    </gl-popover>
+  </div>
+`;
+
+function generateProps({ placement = popoverPlacements.top, title = 'Popover', triggers } = {}) {
   return {
     placement: {
       type: String,
@@ -25,6 +47,10 @@ function generateProps({ placement = popoverPlacements.top, title = 'Popover' }
       type: String,
       default: text('title', title),
     },
+    triggers: {
+      type: String,
+      default: text('hover focus', triggers),
+    },
   };
 }
 
@@ -33,13 +59,12 @@ documentedStoriesOf('base/popover', '')
   .add('default', () => ({
     template,
     props: generateProps(),
-    computed: {
-      content() {
-        return `
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat a nisi non
-          pellentesque. Pellentesque efficitur vulputate rutrum. Fusce nisl magna, porttitor in
-          massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
-        `;
-      },
-    },
-  }));
+  }))
+  .add(
+    'on click',
+    () => ({
+      template: scopedSlotTemplate,
+      props: generateProps(),
+    }),
+    { storyshots: false }
+  );

package/src/components/base/popover/popover.vue

@@ -39,8 +39,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-    <template slot="title">
+    <template v-if="$scopedSlots.title" #title>
       <slot name="title"></slot>
     </template>
     <slot></slot>

package/src/scss/utilities.scss

@@ -1997,6 +1997,14 @@
   color: $body-color !important;
 }
 
+.gl-text-secondary {
+  color: $gl-text-color-secondary;
+}
+
+.gl-text-secondary\! {
+  color: $gl-text-color-secondary !important;
+}
+
 .gl-sm-text-body {
   @include gl-media-breakpoint-up(sm) {
   color: $body-color;
@@ -4201,6 +4209,18 @@
   }
 }
 
+.gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
+.gl-lg-w-1px\! {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px !important;
+  }
+}
+
 .gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;
@@ -4352,6 +4372,18 @@
     max-width: 30% !important;
   }
 }
+
+.gl-md-max-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50%;
+  }
+}
+
+.gl-md-max-w-50p\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50% !important;
+  }
+}
 .gl-p-0 {
   padding: 0;
 }

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

@@ -19,6 +19,10 @@
   color: $body-color;
 }
 
+@mixin gl-text-secondary {
+  color: $gl-text-color-secondary;
+}
+
 @mixin gl-sm-text-body {
   @include gl-media-breakpoint-up(sm) {
     @include gl-text-body;

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

@@ -212,6 +212,12 @@
   }
 }
 
+@mixin gl-lg-w-1px {
+  @media (min-width: $breakpoint-lg) {
+    width: 1px;
+  }
+}
+
 @mixin gl-md-w-50p {
   @include gl-media-breakpoint-up(md) {
     width: 50%;
@@ -302,3 +308,9 @@
     max-width: 30%;
   }
 }
+
+@mixin gl-md-max-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 50%;
+  }
+}

package/src/scss/variables.scss

@@ -295,6 +295,9 @@ $t-gray-a-08: rgba(#000, 0.08);
 $t-gray-a-24: rgba(#000, 0.24);
 
 // Text
+$gl-text-color: $gray-900 !default;
+$gl-text-color-secondary: $gray-500 !default;
+
 $gl-font-weight-light: 300;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
@@ -453,7 +456,7 @@ $modal-backdrop-opacity: 0.64;
 // Bootstrap overrides
 // these should ideally be moved further up in the file to the compoent-relevant sections
 // but they can wait here for now
-$body-color: $gray-900 !default;
+$body-color: $gl-text-color !default;
 
 $secondary: $gray-50;
 $success: $green-500;

package/src/utils/constants.js

@@ -115,7 +115,7 @@ export const badgeForButtonOptions = {
   [buttonVariantOptions.danger]: badgeVariantOptions.danger,
 };
 
-export const newDropdownVariantOptions = {
+export const dropdownVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   info: 'info (deprecated)',