@gitlab/ui 64.10.2 → 64.11.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [64.11.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.11.0...v64.11.1) (2023-06-19)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox:** revert to previous clear all logic ([a9ef6d6](https://gitlab.com/gitlab-org/gitlab-ui/commit/a9ef6d6ce69b470be3d2f0c1471d164e0eea24bd))
+
+# [64.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.10.2...v64.11.0) (2023-06-16)
+
+
+### Features
+
+* **Typography:** add text size scale variables ([355c159](https://gitlab.com/gitlab-org/gitlab-ui/commit/355c159d5d1753273a65d6ff98c598c7d6b130c3))
+
 ## [64.10.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.10.1...v64.10.2) (2023-06-16)
 
 

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -399,7 +399,7 @@ var script = {
         return false;
       }
       if (this.multiple) {
-        return this.selected.length === this.items.length;
+        return this.selected.length > 0;
       }
       return Boolean(this.selected);
     },
@@ -418,7 +418,7 @@ var script = {
       if (!this.hasItems) {
         return false;
       }
-      return this.selected.length !== this.items.length;
+      return this.selected.length === 0;
     },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;

package/dist/components/base/new_dropdowns/listbox/mock_data.js

@@ -35,12 +35,6 @@ const mockOptions = [{
   value: 'sup',
   text: 'Support'
 }];
-const mockOptionsValues = mockOptions.map(_ref => {
-  let {
-    value
-  } = _ref;
-  return value;
-});
 const mockGroups = [{
   text: 'Branches',
   options: [{
@@ -109,4 +103,4 @@ const mockUsers = [{
   icon: 'bin'
 }];
 
-export { mockGroups, mockGroupsWithTextSrOnly, mockOptions, mockOptionsValues, mockUsers };
+export { mockGroups, mockGroupsWithTextSrOnly, mockOptions, mockUsers };

package/package.json

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

package/scss_to_js/scss_variables.js

@@ -266,6 +266,22 @@ export const glLineHeight36 = '2.25rem'
 export const glLineHeight42 = '2.625rem'
 export const glLineHeight44 = '2.75rem'
 export const glLineHeight52 = '3.25rem'
+export const glFontSize100Fixed = '0.75rem'
+export const glFontSize200Fixed = '0.8125rem'
+export const glFontSize300Fixed = '0.875rem'
+export const glFontSize400Fixed = '1rem'
+export const glFontSize500Fixed = '1.125rem'
+export const glFontSize600Fixed = '1.3125rem'
+export const glFontSize700Fixed = '1.5rem'
+export const glFontSize800Fixed = '1.75rem'
+export const glFontSize100 = '0.75rem'
+export const glFontSize200 = '0.8125rem'
+export const glFontSize300 = '0.875rem'
+export const glFontSize400 = '1rem'
+export const glFontSize500 = 'clamp(1.125rem, calc(0.9027777778rem + 0.462962963vw), 1.25rem)'
+export const glFontSize600 = 'clamp(1.3125rem, calc(0.8680555556rem + 0.9259259259vw), 1.5625rem)'
+export const glFontSize700 = 'clamp(1.5rem, calc(0.8333333333rem + 1.3888888889vw), 1.875rem)'
+export const glFontSize800 = 'clamp(1.75rem, calc(0.8611111111rem + 1.8518518519vw), 2.25rem)'
 export const glFontSize = '0.875rem'
 export const glFontSizeXs = '0.625rem'
 export const glFontSizeSm = '0.75rem'

package/scss_to_js/scss_variables.json

@@ -1379,6 +1379,86 @@
       "value": "px-to-rem(52px)",
       "compiledValue": "3.25rem"
     },
+    {
+      "name": "$gl-font-size-100-fixed",
+      "value": "px-to-rem(12px)",
+      "compiledValue": "0.75rem"
+    },
+    {
+      "name": "$gl-font-size-200-fixed",
+      "value": "px-to-rem(13px)",
+      "compiledValue": "0.8125rem"
+    },
+    {
+      "name": "$gl-font-size-300-fixed",
+      "value": "px-to-rem(14px)",
+      "compiledValue": "0.875rem"
+    },
+    {
+      "name": "$gl-font-size-400-fixed",
+      "value": "px-to-rem(16px)",
+      "compiledValue": "1rem"
+    },
+    {
+      "name": "$gl-font-size-500-fixed",
+      "value": "px-to-rem(18px)",
+      "compiledValue": "1.125rem"
+    },
+    {
+      "name": "$gl-font-size-600-fixed",
+      "value": "px-to-rem(21px)",
+      "compiledValue": "1.3125rem"
+    },
+    {
+      "name": "$gl-font-size-700-fixed",
+      "value": "px-to-rem(24px)",
+      "compiledValue": "1.5rem"
+    },
+    {
+      "name": "$gl-font-size-800-fixed",
+      "value": "px-to-rem(28px)",
+      "compiledValue": "1.75rem"
+    },
+    {
+      "name": "$gl-font-size-100",
+      "value": "$gl-font-size-100-fixed",
+      "compiledValue": "0.75rem"
+    },
+    {
+      "name": "$gl-font-size-200",
+      "value": "$gl-font-size-200-fixed",
+      "compiledValue": "0.8125rem"
+    },
+    {
+      "name": "$gl-font-size-300",
+      "value": "$gl-font-size-300-fixed",
+      "compiledValue": "0.875rem"
+    },
+    {
+      "name": "$gl-font-size-400",
+      "value": "$gl-font-size-400-fixed",
+      "compiledValue": "1rem"
+    },
+    {
+      "name": "$gl-font-size-500",
+      "value": "#{clamp-between($gl-font-size-500-fixed, px-to-rem(20px))}",
+      "compiledValue": "clamp(1.125rem, calc(0.9027777778rem + 0.462962963vw), 1.25rem)"
+    },
+    {
+      "name": "$gl-font-size-600",
+      "value": "#{clamp-between($gl-font-size-600-fixed, px-to-rem(25px))}",
+      "compiledValue": "clamp(1.3125rem, calc(0.8680555556rem + 0.9259259259vw), 1.5625rem)"
+    },
+    {
+      "name": "$gl-font-size-700",
+      "value": "#{clamp-between($gl-font-size-700-fixed, px-to-rem(30px))}",
+      "compiledValue": "clamp(1.5rem, calc(0.8333333333rem + 1.3888888889vw), 1.875rem)"
+    },
+    {
+      "name": "$gl-font-size-800",
+      "value": "#{clamp-between($gl-font-size-800-fixed, px-to-rem(36px))}",
+      "compiledValue": "clamp(1.75rem, calc(0.8611111111rem + 1.8518518519vw), 2.25rem)"
+    },
     {
       "name": "$gl-font-size",
       "value": "px-to-rem(14px)",

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

@@ -18,7 +18,7 @@ import GlIntersectionObserver from '../../../utilities/intersection_observer/int
 import GlCollapsibleListbox, { ITEM_SELECTOR } from './listbox.vue';
 import GlListboxItem from './listbox_item.vue';
 import GlListboxGroup from './listbox_group.vue';
-import { mockOptions, mockOptionsValues, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
+import { mockOptions, mockGroups, mockGroupsWithTextSrOnly } from './mock_data';
 
 jest.mock('@floating-ui/dom');
 autoUpdate.mockImplementation(() => {
@@ -485,16 +485,16 @@ describe('GlCollapsibleListbox', () => {
     });
 
     it.each`
-      title      | multiple | selected
-      ${'shows'} | ${true}  | ${mockOptionsValues}
-      ${'hides'} | ${false} | ${mockOptions[1].value}
+      multiple
+      ${true}
+      ${false}
     `(
-      '$title the reset button if the label is provided and the selection is complete and mode if multiple mode is $multiple',
-      ({ multiple, selected }) => {
+      'shows the reset button if the label is provided and the selection is not empty and mode if multiple mode is $multiple',
+      ({ multiple }) => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
-          selected,
+          selected: mockOptions[1].value,
           items: mockOptions,
           multiple,
         });
@@ -503,7 +503,7 @@ describe('GlCollapsibleListbox', () => {
       }
     );
 
-    it('hides reset button if the label is provided and the selection is not complete', () => {
+    it('shows the reset button if the label is provided and the selection is not empty', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
@@ -512,7 +512,7 @@ describe('GlCollapsibleListbox', () => {
         multiple: true,
       });
 
-      expect(findResetButton().exists()).toBe(false);
+      expect(findResetButton().text()).toBe('Unassign');
     });
 
     it('hides reset button if dropdown has no items', () => {
@@ -546,7 +546,7 @@ describe('GlCollapsibleListbox', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        selected: mockOptionsValues,
+        selected: mockOptions[1].value,
         items: mockOptions,
         multiple: true,
       });
@@ -605,32 +605,6 @@ describe('GlCollapsibleListbox', () => {
       expect(findSelectAllButton().exists()).toBe(false);
     });
 
-    it('hides select all button if all items are selected', () => {
-      buildWrapper({
-        headerText: 'Select assignee',
-        resetButtonLabel: 'Unassign',
-        showSelectAllButtonLabel: 'Select All',
-        selected: mockOptionsValues,
-        items: mockOptions,
-        multiple: true,
-      });
-
-      expect(findSelectAllButton().exists()).toBe(false);
-    });
-
-    it('has the label text "Select All" if the label is provided and some items are selected', () => {
-      buildWrapper({
-        headerText: 'Select assignee',
-        resetButtonLabel: 'Unassign',
-        showSelectAllButtonLabel: 'Select All',
-        selected: [mockOptions[1].value],
-        items: mockOptions,
-        multiple: true,
-      });
-
-      expect(findSelectAllButton().text()).toBe('Select All');
-    });
-
     it('has the label text "Select All" if the label is provided and the selection is empty', () => {
       buildWrapper({
         headerText: 'Select assignee',

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

@@ -411,7 +411,7 @@ export default {
       }
 
       if (this.multiple) {
-        return this.selected.length === this.items.length;
+        return this.selected.length > 0;
       }
       return Boolean(this.selected);
     },
@@ -432,7 +432,7 @@ export default {
         return false;
       }
 
-      return this.selected.length !== this.items.length;
+      return this.selected.length === 0;
     },
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;

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

@@ -49,8 +49,6 @@ export const mockOptions = [
   },
 ];
 
-export const mockOptionsValues = mockOptions.map(({ value }) => value);
-
 export const mockGroups = [
   {
     text: 'Branches',

package/src/scss/variables.scss

@@ -342,6 +342,32 @@ $gl-line-height-42: px-to-rem(42px);
 $gl-line-height-44: px-to-rem(44px);
 $gl-line-height-52: px-to-rem(52px);
 
+// New UI type scale
+// Implements the type scale from https://gitlab.com/groups/gitlab-org/gitlab-services/-/epics/15
+// Old variables and styles need to be removed after intergration
+
+// Font size scale
+
+// fixed scale (compact markdown)
+$gl-font-size-100-fixed: px-to-rem(12px);
+$gl-font-size-200-fixed: px-to-rem(13px);
+$gl-font-size-300-fixed: px-to-rem(14px);
+$gl-font-size-400-fixed: px-to-rem(16px);
+$gl-font-size-500-fixed: px-to-rem(18px);
+$gl-font-size-600-fixed: px-to-rem(21px);
+$gl-font-size-700-fixed: px-to-rem(24px);
+$gl-font-size-800-fixed: px-to-rem(28px);
+
+// dynamic scale (default) resizes based on viewport width
+$gl-font-size-100: $gl-font-size-100-fixed;
+$gl-font-size-200: $gl-font-size-200-fixed;
+$gl-font-size-300: $gl-font-size-300-fixed;
+$gl-font-size-400: $gl-font-size-400-fixed;
+$gl-font-size-500: #{clamp-between($gl-font-size-500-fixed, px-to-rem(20px))};
+$gl-font-size-600: #{clamp-between($gl-font-size-600-fixed, px-to-rem(25px))};
+$gl-font-size-700: #{clamp-between($gl-font-size-700-fixed, px-to-rem(30px))};
+$gl-font-size-800: #{clamp-between($gl-font-size-800-fixed, px-to-rem(36px))};
+
 // UI typescale
 
 // default (min-width: 0)