@gitlab/ui 66.30.0 → 66.31.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [66.31.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.31.0...v66.31.1) (2023-10-13)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox:** Visibility of Reset button ([f71f767](https://gitlab.com/gitlab-org/gitlab-ui/commit/f71f767553a93237167c65772479e990c8913f93))
+
+# [66.31.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.30.0...v66.31.0) (2023-10-13)
+
+
+### Features
+
+* **InfiniteScroll:** Add support for scrolling behavior ([ca91a07](https://gitlab.com/gitlab-org/gitlab-ui/commit/ca91a07706107652d4b659e8bece8b5bfea31d89))
+
 # [66.30.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.29.0...v66.30.0) (2023-10-12)
 
 

package/dist/components/base/infinite_scroll/infinite_scroll.js

@@ -115,13 +115,18 @@ var script = {
      *
      * @param params.top - Number of pixels along Y axis to
      * scroll the list container.
+     * @param params.behavior - Determines whether scrolling
+     * is instant or animates smoothly. Can be 'auto', 'instant', or 'smooth'
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)
      */
     scrollTo(_ref) {
       let {
-        top
+        top,
+        behavior
       } = _ref;
       this.$refs.infiniteContainer.scrollTo({
-        top
+        top,
+        behavior
       });
     },
     topReached: throttle(function topReachedThrottled() {

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

@@ -408,10 +408,9 @@ var script = {
       if (!this.selected || this.selected.length === 0) {
         return false;
       }
-      if (this.multiple) {
-        return this.selected.length === this.flattenedOptions.length;
-      }
-      return Boolean(this.selected);
+
+      // only show reset button if show all button is not there
+      return !this.showSelectAllButton;
     },
     showSelectAllButton() {
       if (!this.showSelectAllButtonLabel) {

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -1,4 +1,4 @@
-import { GlDuoUserFeedback } from '../../../../../../index';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';

package/dist/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.js

@@ -1,4 +1,5 @@
-import { GlIcon, GlLink } from '../../../../../../index';
+import GlIcon from '../../../../../base/icon/icon';
+import GlLink from '../../../../../base/link/link';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.js

@@ -1,4 +1,4 @@
-import { GlButton } from '../../../../../../index';
+import GlButton from '../../../../../base/button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {

package/dist/components/experimental/duo/user_feedback/user_feedback.js

@@ -1,4 +1,4 @@
-import { GlButton } from '../../../../index';
+import GlButton from '../../../base/button/button';
 import FeedbackModal from './user_feedback_modal';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/components/experimental/duo/user_feedback/user_feedback_modal.js

@@ -1,4 +1,7 @@
-import { GlModal, GlFormCheckboxGroup, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlModal from '../../../base/modal/modal';
+import GlFormGroup from '../../../base/form/form_group/form_group';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea';
+import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -1,5 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
-import { GlBadge, GlPopover, GlLink } from '../../../index';
+import GlBadge from '../../base/badge/badge';
+import GlLink from '../../base/link/link';
+import GlPopover from '../../base/popover/popover';
 import GlSprintf from '../../utilities/sprintf/sprintf';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 16:02:49 GMT
+ * Generated on Fri, 13 Oct 2023 20:03:52 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 16:02:49 GMT
+ * Generated on Fri, 13 Oct 2023 20:03:52 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 16:02:49 GMT
+ * Generated on Fri, 13 Oct 2023 20:03:52 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 16:02:49 GMT
+ * Generated on Fri, 13 Oct 2023 20:03:52 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 12 Oct 2023 16:02:49 GMT
+// Generated on Fri, 13 Oct 2023 20:03:52 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 12 Oct 2023 16:02:49 GMT
+// Generated on Fri, 13 Oct 2023 20:03:52 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

package/src/components/base/dropdown/dropdown.md

@@ -1,15 +1,15 @@
 The dropdown component offers a user multiple items or actions to choose from which are initially
 collapsed behind a button.
 
-> **NOTE**: This component will eventually be deprecated in favor of components
+> **NOTE**: This component has been deprecated in favor of components
 > more suited to the various use cases for dropdowns. Consider using a more
 > appropriate component instead:
 >
 > - For single or multiselect options, use `GlCollapsibleListbox`.
 > - For displaying a list of actions like "Edit user", "Delete user", use `GlDisclosureDropdown`.
 >
-> See [this epic](https://gitlab.com/groups/gitlab-org/-/epics/1059) for the
-> most up-to-date information about what to use and when.
+> See [Which component should you use?](https://design.gitlab.com/components/dropdown-overview#which-component-should-you-use)
+> for what to use and when.
 
 ### Icon-only dropdown
 

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

@@ -536,7 +536,7 @@ export const OnRightEdge = (args, { argTypes }) => ({
 OnRightEdge.args = generateProps({ text: 'Some dropdown' });
 
 export default {
-  title: 'base/dropdown',
+  title: 'base/dropdown/deprecated',
   component: GlDropdown,
   subcomponents: {
     GlDropdownDivider,

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

@@ -90,7 +90,7 @@ CheckedWithSecondaryText.args = generateProps({
 });
 
 export default {
-  title: 'base/dropdown/dropdown-item',
+  title: 'base/dropdown/deprecated/dropdown-item',
   component: GlDropdownItem,
   parameters: {
     bootstrapComponent: 'b-dropdown-item',

package/src/components/base/infinite_scroll/infinite_scroll.md

@@ -15,7 +15,9 @@ Useful public methods you can call via `$refs`:
 
 - `.scrollUp()`: Scrolls to the top of the container.
 - `.scrollDown()`: Scrolls to the bottom of the container.
-- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.
+- `.scrollTo({ top, behavior })`: Scrolls to a number of pixels
+  along the Y axis of the container. The scrolling behavior can also be specified,
+  as per MDN spec (<https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo>)
 
 ## Implementation Example
 

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

@@ -174,9 +174,9 @@ describe('Infinite Scroll component', () => {
 
     it('scrollTo', () => {
       createComponent();
-      wrapper.vm.scrollTo({ top: 250 });
+      wrapper.vm.scrollTo({ top: 250, behavior: 'instant' });
 
-      expect(mockScrollTo).toHaveBeenCalledWith({ top: 250 });
+      expect(mockScrollTo).toHaveBeenCalledWith({ top: 250, behavior: 'instant' });
     });
   });
 });

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -107,9 +107,12 @@ export default {
      *
      * @param params.top - Number of pixels along Y axis to
      * scroll the list container.
+     * @param params.behavior - Determines whether scrolling
+     * is instant or animates smoothly. Can be 'auto', 'instant', or 'smooth'
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)
      */
-    scrollTo({ top }) {
-      this.$refs.infiniteContainer.scrollTo({ top });
+    scrollTo({ top, behavior }) {
+      this.$refs.infiniteContainer.scrollTo({ top, behavior });
     },
 
     topReached: throttle(function topReachedThrottled() {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -333,7 +333,7 @@ MiscellaneousContent.args = {
 MiscellaneousContent.decorators = [makeContainer({ height: '200px' })];
 
 export default {
-  title: 'base/new-dropdowns/disclosure',
+  title: 'base/dropdown/disclosure-dropdown',
   component: GlDisclosureDropdown,
   parameters: {
     docs: {

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

@@ -517,6 +517,18 @@ describe('GlCollapsibleListbox', () => {
       }
     );
 
+    it('shows the button if the label is provided and only one option is selected in multi select', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        items: mockOptions,
+        multiple: true,
+        selected: mockOptionsValues.slice(0, 1),
+      });
+
+      expect(findResetButton().exists()).toBe(true);
+    });
+
     it.each`
       description        | props
       ${'multi-select'}  | ${{ multiple: true, selected: [] }}
@@ -598,6 +610,7 @@ describe('GlCollapsibleListbox', () => {
     describe.each`
       multiple | resetVisible | selectAllVisible | selected
       ${false} | ${false}     | ${false}         | ${[]}
+      ${false} | ${false}     | ${false}         | ${undefined}
       ${true}  | ${false}     | ${true}          | ${[]}
     `(
       'when label is provided, selection is empty and multiple option is $multiple',
@@ -623,6 +636,20 @@ describe('GlCollapsibleListbox', () => {
       }
     );
 
+    it('when label is provided and one option is selected in multiselect', () => {
+      buildWrapper({
+        headerText: 'Select assignee',
+        resetButtonLabel: 'Unassign',
+        showSelectAllButtonLabel: 'Select All',
+        items: mockOptions,
+        selected: mockOptionsValues.slice(0, 1),
+        multiple: true,
+      });
+
+      expect(findSelectAllButton().exists()).toBe(true);
+      expect(findResetButton().exists()).toBe(false);
+    });
+
     it('hides select all button if dropdown has no items', () => {
       buildWrapper({
         headerText: 'Select assignee',

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

@@ -450,7 +450,7 @@ GroupWithoutLabel.args = generateProps({
 });
 
 export default {
-  title: 'base/new-dropdowns/listbox',
+  title: 'base/dropdown/collapsible-listbox',
   component: GlCollapsibleListbox,
   parameters: {
     docs: {

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

@@ -419,10 +419,8 @@ export default {
         return false;
       }
 
-      if (this.multiple) {
-        return this.selected.length === this.flattenedOptions.length;
-      }
-      return Boolean(this.selected);
+      // only show reset button if show all button is not there
+      return !this.showSelectAllButton;
     },
     showSelectAllButton() {
       if (!this.showSelectAllButtonLabel) {

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { GlButton } from '../../../../index';
+import GlButton from '../../button/button.vue';
 import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlTab from '../tab/tab.vue';
 import GlTabs from './tabs.vue';

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import { GlDuoUserFeedback } from '../../../../../../index';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import {
   MOCK_USER_PROMPT_MESSAGE,
   MOCK_RESPONSE_MESSAGE,

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlDuoUserFeedback } from '../../../../../../index';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlIcon, GlLink } from '../../../../../../index';
+import GlIcon from '../../../../../base/icon/icon.vue';
+import GlLink from '../../../../../base/link/link.vue';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 import GlDuoChatMessageSources from './duo_chat_message_sources.vue';
 

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue

@@ -1,5 +1,6 @@
 <script>
-import { GlIcon, GlLink } from '../../../../../../index';
+import GlIcon from '../../../../../base/icon/icon.vue';
+import GlLink from '../../../../../base/link/link.vue';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 
 export const i18n = {

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '../../../../../../index';
+import GlButton from '../../../../../base/button/button.vue';
 import GlDuoChatPredefinedPrompts from './duo_chat_predefined_prompts.vue';
 
 describe('GlDuoChatPredefinedPrompts', () => {

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '../../../../../../index';
+import GlButton from '../../../../../base/button/button.vue';
 
 export default {
   name: 'GlDuoChatPredefinedPrompts',

package/src/components/experimental/duo/user_feedback/user_feedback.spec.js

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import { GlButton } from '../../../../index';
+import GlButton from '../../../base/button/button.vue';
 import FeedbackModal from './user_feedback_modal.vue';
 import UserFeedback, { i18n } from './user_feedback.vue';
 

package/src/components/experimental/duo/user_feedback/user_feedback.stories.js

@@ -1,4 +1,6 @@
-import { GlAlert, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlAlert from '../../../base/alert/alert.vue';
+import GlFormGroup from '../../../base/form/form_group/form_group.vue';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
 import GlDuoUserFeedback from './user_feedback.vue';
 import readme from './user_feedback.md';
 

package/src/components/experimental/duo/user_feedback/user_feedback.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '../../../../index';
+import GlButton from '../../../base/button/button.vue';
 import FeedbackModal from './user_feedback_modal.vue';
 
 export const i18n = {

package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js

@@ -1,5 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlModal, GlFormCheckboxGroup, GlFormCheckbox, GlFormTextarea } from '../../../../index';
+import GlModal from '../../../base/modal/modal.vue';
+import GlFormCheckbox from '../../../base/form/form_checkbox/form_checkbox.vue';
+import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
 import FeedbackModal, { feedbackOptions } from './user_feedback_modal.vue';
 
 const DummyComponent = {

package/src/components/experimental/duo/user_feedback/user_feedback_modal.vue

@@ -1,5 +1,8 @@
 <script>
-import { GlModal, GlFormCheckboxGroup, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlModal from '../../../base/modal/modal.vue';
+import GlFormGroup from '../../../base/form/form_group/form_group.vue';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
+import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
 
 export const i18n = {
   MODAL_TITLE: 'Give feedback on AI content',

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -1,6 +1,8 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { GlBadge, GlLink, GlPopover } from '../../../index';
+import GlBadge from '../../base/badge/badge.vue';
+import GlLink from '../../base/link/link.vue';
+import GlPopover from '../../base/popover/popover.vue';
 import GlSprintf from '../../utilities/sprintf/sprintf.vue';
 
 export const i18n = {