@gitlab/ui 80.5.0 → 80.6.1

package/dist/tokens/scss/_tokens.dark.scss

@@ -11,199 +11,199 @@ $gl-text-color-default: #ececef !default; // Used for the default text color.
 $gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
 $gl-text-secondary: #89888d !default; // Use text.color.subtle instead
 $gl-text-primary: #ececef !default; // Use text.color.default instead
-$red-950: #fff4f3;
-$red-900: #fcf1ef;
-$red-800: #fdd4cd;
-$red-700: #fcb5aa;
-$red-600: #f57f6c;
-$red-500: #ec5941;
-$red-400: #dd2b0e;
-$red-300: #c91c00;
-$red-200: #ae1800;
-$red-100: #8d1300;
-$red-50: #660e00;
-$purple-950: #f4f0ff;
-$purple-900: #e1d8f9;
-$purple-800: #cbbbf2;
-$purple-700: #ac93e6;
-$purple-600: #9475db;
-$purple-500: #7b58cf;
-$purple-400: #694cc0;
-$purple-300: #5943b6;
-$purple-200: #453894;
-$purple-100: #2f2a6b;
-$purple-50: #232150;
-$orange-950: #fff4e1;
-$orange-900: #fdf1dd;
-$orange-800: #f5d9a8;
-$orange-700: #e9be74;
-$orange-600: #d99530;
-$orange-500: #c17d10;
-$orange-400: #ab6100;
-$orange-300: #9e5400;
-$orange-200: #8f4700;
-$orange-100: #703800;
-$orange-50: #5c2900;
-$green-950: #f1fdf6;
-$green-900: #ecf4ee;
-$green-800: #c3e6cd;
-$green-700: #91d4a8;
-$green-600: #52b87a;
-$green-500: #2da160;
-$green-400: #108548;
-$green-300: #217645;
-$green-200: #24663b;
-$green-100: #0d532a;
-$green-50: #0a4020;
-$gray-950: #fbfafd;
-$gray-900: #ececef;
-$gray-800: #dcdcde;
-$gray-700: #bfbfc3;
-$gray-600: #a4a3a8;
-$gray-500: #89888d;
-$gray-400: #737278;
-$gray-300: #626168;
-$gray-200: #535158;
-$gray-100: #434248;
-$gray-50: #333238;
-$gray-10: #1f1e24;
-$blue-950: #f2f9ff;
-$blue-900: #e9f3fc;
-$blue-800: #cbe2f9;
-$blue-700: #9dc7f1;
-$blue-600: #63a6e9;
-$blue-500: #428fdc;
-$blue-400: #1f75cb;
-$blue-300: #1068bf;
-$blue-200: #0b5cad;
-$blue-100: #064787;
-$blue-50: #033464;
-$white: #333238;
-$black: #fff;
-$theme-light-red-950: #fdf9f8;
-$theme-light-red-900: #faf2f1;
-$theme-light-red-800: #f6d9d5;
-$theme-light-red-700: #ebada2;
-$theme-light-red-600: #e07f6f;
-$theme-light-red-500: #d36250;
-$theme-light-red-400: #c24b38;
-$theme-light-red-300: #b53a26;
-$theme-light-red-200: #a02e1c;
-$theme-light-red-100: #8b2212;
-$theme-light-red-50: #751709;
-$theme-light-red-10: #5c1105;
-$theme-red-950: #faf4f3;
-$theme-red-900: #f4e9e7;
-$theme-red-800: #ecd3d0;
-$theme-red-700: #e3bab5;
-$theme-red-600: #d59086;
-$theme-red-500: #c66e60;
-$theme-red-400: #ad4a3b;
-$theme-red-300: #a13322;
-$theme-red-200: #8f2110;
-$theme-red-100: #761405;
-$theme-red-50: #580d02;
-$theme-red-10: #380700;
-$theme-green-950: #eef4ef;
-$theme-green-900: #dde9de;
-$theme-green-800: #b1d6b5;
-$theme-green-700: #8cc497;
-$theme-green-600: #69af7d;
-$theme-green-500: #499767;
-$theme-green-400: #308258;
-$theme-green-300: #25744c;
-$theme-green-200: #1b653f;
-$theme-green-100: #155635;
-$theme-green-50: #0e4328;
-$theme-green-10: #052e19;
-$theme-light-blue-950: #eef3f7;
-$theme-light-blue-900: #dde6ee;
-$theme-light-blue-800: #c1d4e6;
-$theme-light-blue-700: #a0bedc;
-$theme-light-blue-600: #74a3d3;
-$theme-light-blue-500: #4f8bc7;
-$theme-light-blue-400: #3476b9;
-$theme-light-blue-300: #2268ae;
-$theme-light-blue-200: #145aa1;
-$theme-light-blue-100: #0e4d8d;
-$theme-light-blue-50: #0c4277;
-$theme-light-blue-10: #0a3764;
-$theme-blue-950: #e6ecf0;
-$theme-blue-900: #cdd8e3;
-$theme-blue-800: #b9cadc;
-$theme-blue-700: #a6bdd5;
-$theme-blue-600: #81a5c9;
-$theme-blue-500: #628eb9;
-$theme-blue-400: #4977a5;
-$theme-blue-300: #346596;
-$theme-blue-200: #235180;
-$theme-blue-100: #153c63;
-$theme-blue-50: #0b2640;
-$theme-blue-10: #04101c;
-$theme-indigo-950: #f8f8ff;
-$theme-indigo-900: #f1f1ff;
-$theme-indigo-800: #dbdbf8;
-$theme-indigo-700: #c7c7f2;
-$theme-indigo-600: #a2a2e6;
-$theme-indigo-500: #8181d7;
-$theme-indigo-400: #6666c4;
-$theme-indigo-300: #5252b5;
-$theme-indigo-200: #41419f;
-$theme-indigo-100: #303083;
-$theme-indigo-50: #222261;
-$theme-indigo-10: #14143d;
-$data-viz-orange-950: #fae8d1;
-$data-viz-orange-900: #f5d6b3;
-$data-viz-orange-800: #eebd8c;
-$data-viz-orange-700: #e99b60;
-$data-viz-orange-600: #e07e41;
-$data-viz-orange-500: #c95d2e;
-$data-viz-orange-400: #b14f18;
-$data-viz-orange-300: #92430a;
-$data-viz-orange-200: #6f3500;
-$data-viz-orange-100: #5e2f05;
-$data-viz-orange-50: #4b2707;
-$data-viz-magenta-950: #ffe3eb;
-$data-viz-magenta-900: #ffccdb;
-$data-viz-magenta-800: #fcacc5;
-$data-viz-magenta-700: #f88aaf;
-$data-viz-magenta-600: #e86e9a;
-$data-viz-magenta-500: #cf4d81;
-$data-viz-magenta-400: #b93d71;
-$data-viz-magenta-300: #9a2e5d;
-$data-viz-magenta-200: #7c214f;
-$data-viz-magenta-100: #661e3a;
-$data-viz-magenta-50: #541d31;
-$data-viz-blue-950: #e9ebff;
-$data-viz-blue-900: #d2dcff;
-$data-viz-blue-800: #b7c6ff;
-$data-viz-blue-700: #97acff;
-$data-viz-blue-600: #7992f5;
-$data-viz-blue-500: #617ae2;
-$data-viz-blue-400: #4e65cd;
-$data-viz-blue-300: #3f51ae;
-$data-viz-blue-200: #374291;
-$data-viz-blue-100: #303470;
-$data-viz-blue-50: #2a2b59;
-$data-viz-aqua-950: #b5fefd;
-$data-viz-aqua-900: #93f2ef;
-$data-viz-aqua-800: #5edee3;
-$data-viz-aqua-700: #32c5d2;
-$data-viz-aqua-600: #00acc4;
-$data-viz-aqua-500: #0090b1;
-$data-viz-aqua-400: #007b9b;
-$data-viz-aqua-300: #006381;
-$data-viz-aqua-200: #00516c;
-$data-viz-aqua-100: #004059;
-$data-viz-aqua-50: #00344b;
-$data-viz-green-950: #ddfab7;
-$data-viz-green-900: #c6ed94;
-$data-viz-green-800: #b0d97b;
-$data-viz-green-700: #94c25e;
-$data-viz-green-600: #81ac41;
-$data-viz-green-500: #619025;
-$data-viz-green-400: #4e7f0e;
-$data-viz-green-300: #366800;
-$data-viz-green-200: #275600;
-$data-viz-green-100: #1a4500;
-$data-viz-green-50: #133a03;
+$red-950: #fff4f3 !default;
+$red-900: #fcf1ef !default;
+$red-800: #fdd4cd !default;
+$red-700: #fcb5aa !default;
+$red-600: #f57f6c !default;
+$red-500: #ec5941 !default;
+$red-400: #dd2b0e !default;
+$red-300: #c91c00 !default;
+$red-200: #ae1800 !default;
+$red-100: #8d1300 !default;
+$red-50: #660e00 !default;
+$purple-950: #f4f0ff !default;
+$purple-900: #e1d8f9 !default;
+$purple-800: #cbbbf2 !default;
+$purple-700: #ac93e6 !default;
+$purple-600: #9475db !default;
+$purple-500: #7b58cf !default;
+$purple-400: #694cc0 !default;
+$purple-300: #5943b6 !default;
+$purple-200: #453894 !default;
+$purple-100: #2f2a6b !default;
+$purple-50: #232150 !default;
+$orange-950: #fff4e1 !default;
+$orange-900: #fdf1dd !default;
+$orange-800: #f5d9a8 !default;
+$orange-700: #e9be74 !default;
+$orange-600: #d99530 !default;
+$orange-500: #c17d10 !default;
+$orange-400: #ab6100 !default;
+$orange-300: #9e5400 !default;
+$orange-200: #8f4700 !default;
+$orange-100: #703800 !default;
+$orange-50: #5c2900 !default;
+$green-950: #f1fdf6 !default;
+$green-900: #ecf4ee !default;
+$green-800: #c3e6cd !default;
+$green-700: #91d4a8 !default;
+$green-600: #52b87a !default;
+$green-500: #2da160 !default;
+$green-400: #108548 !default;
+$green-300: #217645 !default;
+$green-200: #24663b !default;
+$green-100: #0d532a !default;
+$green-50: #0a4020 !default;
+$gray-950: #fbfafd !default;
+$gray-900: #ececef !default;
+$gray-800: #dcdcde !default;
+$gray-700: #bfbfc3 !default;
+$gray-600: #a4a3a8 !default;
+$gray-500: #89888d !default;
+$gray-400: #737278 !default;
+$gray-300: #626168 !default;
+$gray-200: #535158 !default;
+$gray-100: #434248 !default;
+$gray-50: #333238 !default;
+$gray-10: #1f1e24 !default;
+$blue-950: #f2f9ff !default;
+$blue-900: #e9f3fc !default;
+$blue-800: #cbe2f9 !default;
+$blue-700: #9dc7f1 !default;
+$blue-600: #63a6e9 !default;
+$blue-500: #428fdc !default;
+$blue-400: #1f75cb !default;
+$blue-300: #1068bf !default;
+$blue-200: #0b5cad !default;
+$blue-100: #064787 !default;
+$blue-50: #033464 !default;
+$white: #333238 !default;
+$black: #fff !default;
+$theme-light-red-950: #fdf9f8 !default;
+$theme-light-red-900: #faf2f1 !default;
+$theme-light-red-800: #f6d9d5 !default;
+$theme-light-red-700: #ebada2 !default;
+$theme-light-red-600: #e07f6f !default;
+$theme-light-red-500: #d36250 !default;
+$theme-light-red-400: #c24b38 !default;
+$theme-light-red-300: #b53a26 !default;
+$theme-light-red-200: #a02e1c !default;
+$theme-light-red-100: #8b2212 !default;
+$theme-light-red-50: #751709 !default;
+$theme-light-red-10: #5c1105 !default;
+$theme-red-950: #faf4f3 !default;
+$theme-red-900: #f4e9e7 !default;
+$theme-red-800: #ecd3d0 !default;
+$theme-red-700: #e3bab5 !default;
+$theme-red-600: #d59086 !default;
+$theme-red-500: #c66e60 !default;
+$theme-red-400: #ad4a3b !default;
+$theme-red-300: #a13322 !default;
+$theme-red-200: #8f2110 !default;
+$theme-red-100: #761405 !default;
+$theme-red-50: #580d02 !default;
+$theme-red-10: #380700 !default;
+$theme-green-950: #eef4ef !default;
+$theme-green-900: #dde9de !default;
+$theme-green-800: #b1d6b5 !default;
+$theme-green-700: #8cc497 !default;
+$theme-green-600: #69af7d !default;
+$theme-green-500: #499767 !default;
+$theme-green-400: #308258 !default;
+$theme-green-300: #25744c !default;
+$theme-green-200: #1b653f !default;
+$theme-green-100: #155635 !default;
+$theme-green-50: #0e4328 !default;
+$theme-green-10: #052e19 !default;
+$theme-light-blue-950: #eef3f7 !default;
+$theme-light-blue-900: #dde6ee !default;
+$theme-light-blue-800: #c1d4e6 !default;
+$theme-light-blue-700: #a0bedc !default;
+$theme-light-blue-600: #74a3d3 !default;
+$theme-light-blue-500: #4f8bc7 !default;
+$theme-light-blue-400: #3476b9 !default;
+$theme-light-blue-300: #2268ae !default;
+$theme-light-blue-200: #145aa1 !default;
+$theme-light-blue-100: #0e4d8d !default;
+$theme-light-blue-50: #0c4277 !default;
+$theme-light-blue-10: #0a3764 !default;
+$theme-blue-950: #e6ecf0 !default;
+$theme-blue-900: #cdd8e3 !default;
+$theme-blue-800: #b9cadc !default;
+$theme-blue-700: #a6bdd5 !default;
+$theme-blue-600: #81a5c9 !default;
+$theme-blue-500: #628eb9 !default;
+$theme-blue-400: #4977a5 !default;
+$theme-blue-300: #346596 !default;
+$theme-blue-200: #235180 !default;
+$theme-blue-100: #153c63 !default;
+$theme-blue-50: #0b2640 !default;
+$theme-blue-10: #04101c !default;
+$theme-indigo-950: #f8f8ff !default;
+$theme-indigo-900: #f1f1ff !default;
+$theme-indigo-800: #dbdbf8 !default;
+$theme-indigo-700: #c7c7f2 !default;
+$theme-indigo-600: #a2a2e6 !default;
+$theme-indigo-500: #8181d7 !default;
+$theme-indigo-400: #6666c4 !default;
+$theme-indigo-300: #5252b5 !default;
+$theme-indigo-200: #41419f !default;
+$theme-indigo-100: #303083 !default;
+$theme-indigo-50: #222261 !default;
+$theme-indigo-10: #14143d !default;
+$data-viz-orange-950: #fae8d1 !default;
+$data-viz-orange-900: #f5d6b3 !default;
+$data-viz-orange-800: #eebd8c !default;
+$data-viz-orange-700: #e99b60 !default;
+$data-viz-orange-600: #e07e41 !default;
+$data-viz-orange-500: #c95d2e !default;
+$data-viz-orange-400: #b14f18 !default;
+$data-viz-orange-300: #92430a !default;
+$data-viz-orange-200: #6f3500 !default;
+$data-viz-orange-100: #5e2f05 !default;
+$data-viz-orange-50: #4b2707 !default;
+$data-viz-magenta-950: #ffe3eb !default;
+$data-viz-magenta-900: #ffccdb !default;
+$data-viz-magenta-800: #fcacc5 !default;
+$data-viz-magenta-700: #f88aaf !default;
+$data-viz-magenta-600: #e86e9a !default;
+$data-viz-magenta-500: #cf4d81 !default;
+$data-viz-magenta-400: #b93d71 !default;
+$data-viz-magenta-300: #9a2e5d !default;
+$data-viz-magenta-200: #7c214f !default;
+$data-viz-magenta-100: #661e3a !default;
+$data-viz-magenta-50: #541d31 !default;
+$data-viz-blue-950: #e9ebff !default;
+$data-viz-blue-900: #d2dcff !default;
+$data-viz-blue-800: #b7c6ff !default;
+$data-viz-blue-700: #97acff !default;
+$data-viz-blue-600: #7992f5 !default;
+$data-viz-blue-500: #617ae2 !default;
+$data-viz-blue-400: #4e65cd !default;
+$data-viz-blue-300: #3f51ae !default;
+$data-viz-blue-200: #374291 !default;
+$data-viz-blue-100: #303470 !default;
+$data-viz-blue-50: #2a2b59 !default;
+$data-viz-aqua-950: #b5fefd !default;
+$data-viz-aqua-900: #93f2ef !default;
+$data-viz-aqua-800: #5edee3 !default;
+$data-viz-aqua-700: #32c5d2 !default;
+$data-viz-aqua-600: #00acc4 !default;
+$data-viz-aqua-500: #0090b1 !default;
+$data-viz-aqua-400: #007b9b !default;
+$data-viz-aqua-300: #006381 !default;
+$data-viz-aqua-200: #00516c !default;
+$data-viz-aqua-100: #004059 !default;
+$data-viz-aqua-50: #00344b !default;
+$data-viz-green-950: #ddfab7 !default;
+$data-viz-green-900: #c6ed94 !default;
+$data-viz-green-800: #b0d97b !default;
+$data-viz-green-700: #94c25e !default;
+$data-viz-green-600: #81ac41 !default;
+$data-viz-green-500: #619025 !default;
+$data-viz-green-400: #4e7f0e !default;
+$data-viz-green-300: #366800 !default;
+$data-viz-green-200: #275600 !default;
+$data-viz-green-100: #1a4500 !default;
+$data-viz-green-50: #133a03 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.5.0",
+  "version": "80.6.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -138,7 +138,7 @@
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.1.0",
+    "eslint-plugin-cypress": "3.1.1",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

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

@@ -614,7 +614,7 @@ describe('GlCollapsibleListbox', () => {
   describe('with select all action', () => {
     it('throws an error when enabling the select action without a header', () => {
       expect(() => {
-        buildWrapper({ showSelectAllButtonLabel: 'Select All' });
+        buildWrapper({ showSelectAllButtonLabel: 'Select all' });
       }).toThrow(
         'The select all button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the showSelectAllButtonLabel prop.'
       );
@@ -633,7 +633,7 @@ describe('GlCollapsibleListbox', () => {
           buildWrapper({
             headerText: 'Select assignee',
             resetButtonLabel: 'Unassign',
-            showSelectAllButtonLabel: 'Select All',
+            showSelectAllButtonLabel: 'Select all',
             items: mockOptions,
             selected,
             multiple,
@@ -654,7 +654,7 @@ describe('GlCollapsibleListbox', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        showSelectAllButtonLabel: 'Select All',
+        showSelectAllButtonLabel: 'Select all',
         items: mockOptions,
         selected: mockOptionsValues.slice(0, 1),
         multiple: true,
@@ -668,7 +668,7 @@ describe('GlCollapsibleListbox', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        showSelectAllButtonLabel: 'Select All',
+        showSelectAllButtonLabel: 'Select all',
         items: [],
         multiple: true,
       });
@@ -680,7 +680,7 @@ describe('GlCollapsibleListbox', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        showSelectAllButtonLabel: 'Select All',
+        showSelectAllButtonLabel: 'Select all',
         selected: mockOptionsValues,
         items: mockOptions,
         multiple: true,
@@ -689,37 +689,37 @@ describe('GlCollapsibleListbox', () => {
       expect(findSelectAllButton().exists()).toBe(false);
     });
 
-    it('has the label text "Select All" if the label is provided and some items are selected', () => {
+    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',
+        showSelectAllButtonLabel: 'Select all',
         selected: [mockOptions[1].value],
         items: mockOptions,
         multiple: true,
       });
 
-      expect(findSelectAllButton().text()).toBe('Select All');
+      expect(findSelectAllButton().text()).toBe('Select all');
     });
 
-    it('has the label text "Select All" if the label is provided and the selection is empty', () => {
+    it('has the label text "Select all" if the label is provided and the selection is empty', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        showSelectAllButtonLabel: 'Select All',
+        showSelectAllButtonLabel: 'Select all',
         selected: [],
         items: mockOptions,
         multiple: true,
       });
 
-      expect(findSelectAllButton().text()).toBe('Select All');
+      expect(findSelectAllButton().text()).toBe('Select all');
     });
 
     it('on click, emits the `select-all` event and calls `closeAndFocus`', () => {
       buildWrapper({
         headerText: 'Select assignee',
         resetButtonLabel: 'Unassign',
-        showSelectAllButtonLabel: 'Select All',
+        showSelectAllButtonLabel: 'Select all',
         selected: [],
         items: mockOptions,
         multiple: true,
@@ -737,7 +737,7 @@ describe('GlCollapsibleListbox', () => {
         buildWrapper({
           headerText: 'Select assignee',
           resetButtonLabel: 'Unassign',
-          showSelectAllButtonLabel: 'Select All',
+          showSelectAllButtonLabel: 'Select all',
           selected: mockGroupOptionsValues,
           items: mockGroups,
           multiple: true,

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

@@ -175,22 +175,10 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
       selected: [],
     };
   },
-  methods: {
-    selectAllItems() {
-      const allValues = mockOptions.map(({ value }) => value);
-      this.selected = [...allValues];
-    },
-    onReset() {
-      this.selected = [];
-    },
-  },
   template: template(
     `
     <template #footer>
        <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
-        <gl-button @click="selectAllItems" category="tertiary" block class="gl-justify-content-start! gl-mt-2!">
-          Select all
-        </gl-button>
         <gl-button category="tertiary" block class="gl-justify-content-start! gl-mt-2!" data-testid="footer-bottom-button">
           Manage departments
         </gl-button>
@@ -251,7 +239,7 @@ HeaderActions.args = generateProps({
   toggleText: 'Header actions',
   headerText: 'Assign to department',
   resetButtonLabel: 'Unassign',
-  showSelectAllButtonLabel: 'Select All',
+  showSelectAllButtonLabel: 'Select all',
   multiple: true,
   block: true,
 });