@gitlab/ui 58.2.1 → 58.4.0

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -19,7 +19,9 @@ export const glSpacingScale26 = '13rem'
 export const glSpacingScale28 = '14rem'
 export const glSpacingScale30 = '15rem'
 export const glSpacingScale34 = '17rem'
+export const glSpacingScale48 = '24rem'
 export const glSpacingScale62 = '31rem'
+export const glSpacingScale75 = '37.5rem'
 export const glSpacingScale80 = '40rem'
 export const breakpointSm = '576px'
 export const breakpointMd = '768px'
@@ -253,6 +255,7 @@ export const glFontWeightNormal = '400'
 export const glFontWeightSemibold = '500'
 export const glFontWeightBold = '600'
 export const glFontWeights = '("normal": 400, "bold": 600)'
+export const glLineHeight12 = '0.75rem'
 export const glLineHeight16 = '1rem'
 export const glLineHeight20 = '1.25rem'
 export const glLineHeight24 = '1.5rem'
@@ -263,6 +266,7 @@ export const glLineHeight42 = '2.625rem'
 export const glLineHeight44 = '2.75rem'
 export const glLineHeight52 = '3.25rem'
 export const glFontSize = '0.875rem'
+export const glFontSizeXs = '0.625rem'
 export const glFontSizeSm = '0.75rem'
 export const glFontSizeLg = '1rem'
 export const glFontSizeHDisplay = '1.75rem'

package/scss_to_js/scss_variables.json

@@ -105,11 +105,21 @@
       "value": "34 * $grid-size",
       "compiledValue": "17rem"
     },
+    {
+      "name": "$gl-spacing-scale-48",
+      "value": "48 * $grid-size",
+      "compiledValue": "24rem"
+    },
     {
       "name": "$gl-spacing-scale-62",
       "value": "62 * $grid-size",
       "compiledValue": "31rem"
     },
+    {
+      "name": "$gl-spacing-scale-75",
+      "value": "75 * $grid-size",
+      "compiledValue": "37.5rem"
+    },
     {
       "name": "$gl-spacing-scale-80",
       "value": "80 * $grid-size",
@@ -1314,6 +1324,11 @@
       ],
       "compiledValue": "(\"normal\": 400, \"bold\": 600)"
     },
+    {
+      "name": "$gl-line-height-12",
+      "value": "px-to-rem(12px)",
+      "compiledValue": "0.75rem"
+    },
     {
       "name": "$gl-line-height-16",
       "value": "px-to-rem(16px)",
@@ -1364,6 +1379,11 @@
       "value": "px-to-rem(14px)",
       "compiledValue": "0.875rem"
     },
+    {
+      "name": "$gl-font-size-xs",
+      "value": "px-to-rem(10px)",
+      "compiledValue": "0.625rem"
+    },
     {
       "name": "$gl-font-size-sm",
       "value": "px-to-rem(12px)",

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

@@ -63,6 +63,36 @@ describe('GlCollapsibleListbox', () => {
     });
   });
 
+  describe('toggle classes', () => {
+    describe.each`
+      toggleClass              | multiple | selected                  | expectedToggleClasses
+      ${'customClass'}         | ${false} | ${mockOptions[0].value}   | ${['customClass']}
+      ${{ customClass: true }} | ${false} | ${mockOptions[0].value}   | ${[{ customClass: true }]}
+      ${['customClass']}       | ${false} | ${mockOptions[0].value}   | ${[['customClass']]}
+      ${'customClass'}         | ${false} | ${null}                   | ${['customClass', 'gl-text-gray-500!']}
+      ${{ customClass: true }} | ${false} | ${undefined}              | ${[{ customClass: true }, 'gl-text-gray-500!']}
+      ${['customClass']}       | ${false} | ${null}                   | ${[['customClass'], 'gl-text-gray-500!']}
+      ${'customClass'}         | ${true}  | ${[mockOptions[0].value]} | ${['customClass']}
+      ${{ customClass: true }} | ${true}  | ${[mockOptions[0].value]} | ${[{ customClass: true }]}
+      ${['customClass']}       | ${true}  | ${[mockOptions[0].value]} | ${[['customClass']]}
+      ${'customClass'}         | ${true}  | ${null}                   | ${['customClass', 'gl-text-gray-500!']}
+      ${{ customClass: true }} | ${true}  | ${undefined}              | ${[{ customClass: true }, 'gl-text-gray-500!']}
+      ${['customClass']}       | ${true}  | ${null}                   | ${[['customClass'], 'gl-text-gray-500!']}
+    `('when listbox', ({ toggleClass, multiple, selected, expectedToggleClasses }) => {
+      beforeEach(() => {
+        buildWrapper({ items: mockOptions, toggleClass, multiple, selected });
+      });
+
+      it(`is ${multiple ? 'multi' : 'single'}-select and ${
+        selected
+          ? 'has selected - does not set non-selected styles'
+          : 'does not have selected - sets the non-selected styles'
+      }`, () => {
+        expect(findBaseDropdown().props('toggleClass')).toEqual(expectedToggleClasses);
+      });
+    });
+  });
+
   describe('ARIA attributes', () => {
     it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container`', async () => {
       await buildWrapper({ items: mockOptions });

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -45,6 +45,7 @@ const generateProps = ({
   searchPlaceholder = defaultValue('searchPlaceholder'),
   noCaret = defaultValue('noCaret'),
   placement = defaultValue('placement'),
+  toggleClass,
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
   headerText = defaultValue('headerText'),
@@ -71,6 +72,7 @@ const generateProps = ({
   searchPlaceholder,
   noCaret,
   placement,
+  toggleClass,
   toggleText,
   textSrOnly,
   headerText,
@@ -100,6 +102,7 @@ const makeBindings = (overrides = {}) =>
     ':search-placeholder': 'searchPlaceholder',
     ':no-caret': 'noCaret',
     ':placement': 'placement',
+    ':toggle-class': 'toggleClass',
     ':toggle-text': 'toggleText',
     ':text-sr-only': 'textSrOnly',
     ':header-text': 'headerText',
@@ -231,9 +234,10 @@ export const CustomListItem = (args, { argTypes }) => ({
   },
   computed: {
     customToggleText() {
-      return this.selected.length !== 1
-        ? `${this.selected.length} assignees`
-        : this.items.find(({ value }) => value === this.selected[0]).text;
+      if (this.selected.length === 0) return 'Select assignee(s)';
+      if (this.selected.length === 1)
+        return this.items.find(({ value }) => value === this.selected[0]).text;
+      return `${this.selected.length} assignees`;
     },
   },
   methods: {

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

@@ -349,6 +349,17 @@ export default {
     hasCustomToggle() {
       return Boolean(this.$scopedSlots.toggle);
     },
+    hasSelection() {
+      return Boolean(this.selectedValues.length);
+    },
+    toggleButtonClasses() {
+      const toggleClasses = [this.toggleClass];
+
+      if (!this.hasSelection) {
+        toggleClasses.push('gl-text-gray-500!');
+      }
+      return toggleClasses;
+    },
   },
   watch: {
     selected: {
@@ -561,7 +572,7 @@ export default {
     :block="block"
     :toggle-id="toggleId"
     :toggle-text="listboxToggleText"
-    :toggle-class="toggleClass"
+    :toggle-class="toggleButtonClasses"
     :text-sr-only="textSrOnly"
     :category="category"
     :variant="variant"