@gitlab/ui 80.6.0 → 80.7.0

package/package.json

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

package/src/components/base/form/form_group/form_group.scss

@@ -20,7 +20,8 @@
 
   .invalid-feedback,
   .valid-feedback,
-  .text-gl-muted {
+  .text-gl-muted,
+  .gl-text-secondary {
     @include gl-font-base;
     @include gl-line-height-normal;
   }
@@ -29,13 +30,16 @@
     + .invalid-feedback,
     + .valid-feedback,
     + .text-gl-muted,
-    &.is-valid + .invalid-feedback + .text-gl-muted {
+    &.is-valid + .invalid-feedback + .text-gl-muted,
+    + .gl-text-secondary,
+    &.is-valid + .invalid-feedback + .gl-text-secondary {
       // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2806
       // for the reasoning behind the "valid+invalid" selector above
       @include gl-mt-3;
     }
   }
 
+  // Deprecated, soon to be removed
   .text-gl-muted {
     @include gl-text-gray-500;
   }

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,
 });