@gitlab/ui 72.14.0 → 73.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [73.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.14.0...v73.0.0) (2024-01-30)
+
+
+### Features
+
+* remove deprecated GlDropdown usage from GlSorting ([9621e68](https://gitlab.com/gitlab-org/gitlab-ui/commit/9621e6872f650570a106a5534ed007c1b76c40f3))
+
+
+### BREAKING CHANGES
+
+* Remove `GlSortingItem` component and deprecated API
+from GlSorting
+
 # [72.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.13.0...v72.14.0) (2024-01-30)
 
 

package/dist/components/base/sorting/sorting.js

@@ -3,7 +3,6 @@ import GlButton from '../button/button';
 import GlButtonGroup from '../button_group/button_group';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox';
 import { isOption } from '../new_dropdowns/listbox/utils';
-import GlDropdown from '../dropdown/dropdown';
 import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -12,8 +11,7 @@ var script = {
   components: {
     GlButton,
     GlButtonGroup,
-    GlCollapsibleListbox,
-    GlDropdown
+    GlCollapsibleListbox
   },
   directives: {
     GlTooltip: GlTooltipDirective
@@ -33,7 +31,7 @@ var script = {
     sortOptions: {
       type: Array,
       required: false,
-      default: null,
+      default: () => [],
       // eslint-disable-next-line unicorn/no-array-callback-reference
       validator: sortOptions => sortOptions.every(isOption)
     },
@@ -64,7 +62,7 @@ var script = {
       default: null
     },
     /**
-     * Additional class(es) to apply to the root element of the GlDropdown.
+     * Additional class(es) to apply to the root element of the GlCollapsibleListbox.
      */
     dropdownClass: {
       type: String,
@@ -96,9 +94,6 @@ var script = {
       if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
       return this.isAscending ? translate('GlSorting.sortAscending', 'Sort direction: ascending') : translate('GlSorting.sortDescending', 'Sort direction: descending');
     },
-    useListbox() {
-      return Boolean(this.sortOptions);
-    },
     listboxToggleClass() {
       return [this.dropdownToggleClass, 'gl-rounded-top-right-none!', 'gl-rounded-bottom-right-none!', 'gl-focus-z-index-1'];
     }
@@ -136,7 +131,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[(_vm.useListbox)?_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.listboxToggleClass,"placement":"right"},on:{"select":_vm.onSortByChanged}}):_c('gl-dropdown',_vm._b({class:_vm.dropdownClass,attrs:{"text":_vm.text,"category":"secondary","toggle-class":_vm.dropdownToggleClass,"right":""}},'gl-dropdown',_vm.$props,false),[_vm._t("default")],2),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.listboxToggleClass,"placement":"right"},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText},on:{"click":_vm.toggleSortDirection}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/index.js

@@ -67,7 +67,6 @@ export { default as GlDatepicker } from './components/base/datepicker/datepicker
 export { default as GlDaterangePicker } from './components/base/daterange_picker/daterange_picker';
 export { default as GlToggle } from './components/base/toggle/toggle';
 export { default as GlSorting } from './components/base/sorting/sorting';
-export { default as GlSortingItem } from './components/base/sorting/sorting_item';
 export { default as GlInfiniteScroll } from './components/base/infinite_scroll/infinite_scroll';
 export { default as GlAlert } from './components/base/alert/alert';
 export { default as GlSegmentedControl } from './components/base/segmented_control/segmented_control';

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jan 2024 18:03:42 GMT
+ * Generated on Tue, 30 Jan 2024 19:03:35 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jan 2024 18:03:42 GMT
+ * Generated on Tue, 30 Jan 2024 19:03:35 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jan 2024 18:03:42 GMT
+ * Generated on Tue, 30 Jan 2024 19:03:35 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 30 Jan 2024 18:03:42 GMT
+ * Generated on Tue, 30 Jan 2024 19:03:35 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 30 Jan 2024 18:03:43 GMT
+// Generated on Tue, 30 Jan 2024 19:03:35 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 30 Jan 2024 18:03:42 GMT
+// Generated on Tue, 30 Jan 2024 19:03:35 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

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

@@ -1,7 +1,6 @@
 import GlDropdown from '../dropdown/dropdown.vue';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import GlSorting from '../sorting/sorting.vue';
-import GlSortingItem from '../sorting/sorting_item.vue';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -501,15 +500,31 @@ BadgeWithSROnlyText.parameters = { controls: { disable: true } };
 
 export const SortingDropdownSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { GlSorting, GlSortingItem },
+  components: { GlSorting },
   template: `
-    <gl-sorting text="Sorting options">
-      <gl-sorting-item active>First item</gl-sorting-item>
-      <gl-sorting-item>Second item</gl-sorting-item>
-      <gl-sorting-item>Last item</gl-sorting-item>
-    </gl-sorting>
+    <gl-sorting
+      text="Sorting options"
+      :sort-options="sortOptions"
+      sort-by="first"
+    />
   `,
 });
+SortingDropdownSplitButton.args = {
+  sortOptions: [
+    {
+      value: 'first',
+      text: 'First item',
+    },
+    {
+      value: 'second',
+      text: 'Second item',
+    },
+    {
+      value: 'last',
+      text: 'Last item',
+    },
+  ],
+};
 SortingDropdownSplitButton.parameters = { controls: { disable: true } };
 
 export default {

package/src/components/base/sorting/sorting.md

@@ -78,66 +78,3 @@ export default {
 }
 </script>
 ```
-
-## Deprecated usage
-
-> **NOTE:** This documents the deprecated API, which will be removed in a future major release.
-
-The dropdown part of the sorting component is a standard `gl-dropdown` component, with the items
-exposed as a slot. Inside the `gl-sorting` component, you should add a list of `gl-sorting-item`
-components to construct your sorting options. The check icon will be displayed when a
-`gl-sorting-item` has its `active` prop set to `true`.
-
-The `gl-sorting` component expects its parent component to manage the `text` and `is-ascending`
-props. It does not track these using internal state.
-
-A sort update should be triggered by clicking a `gl-sorting-item` component (and therefore should
-have a `@click` event bound or a `href` prop in the case of navigation) or by clicking the direction
-button. You should bind a function to the `sortDirectionChange` event to receive the new
-`is-ascending` value and re-order your data appropriately.
-
-A complete implementation example might look like:
-
-```html
-<template>
-  <gl-sorting
-    :text="dropdownText"
-    :is-ascending="isAscending"
-    @sortDirectionChange="onDirectionChange"
-  >
-    <gl-sorting-item @click="onSortItemClick('Item 1')">Item 1</gl-sorting-item>
-    <gl-sorting-item @click="onSortItemClick('Item 2')">Item 2</gl-sorting-item>
-    <gl-sorting-item @click="onSortItemClick('Item 3')">Item 3</gl-sorting-item>
-  </gl-sorting>
-</template>
-
-<script>
-import { GlSorting, GlSortingItem } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlSorting,
-    GlSortingItem,
-  },
-  data() {
-    return {
-      isAscending: false,
-      dropdownText: 'Sort...'
-    }
-  },
-  methods: {
-    onSortItemClick(sortByItem) {
-      this.dropdownText = sortByItem;
-      this.sortMyData(sortByItem, this.isAscending);
-    },
-    onDirectionChange(isAscending) {
-      this.isAscending = isAscending;
-      this.sortMyData(this.dropdownText, this.isAscending);
-    },
-    sortMyData(sortBy, isAscending) {
-      // Use sortBy and direction to sort your data
-    },
-  }
-}
-</script>
-```

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

@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { useMockIntersectionObserver } from '~/utils/use_mock_intersection_observer';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
-import GlDropdown from '../dropdown/dropdown.vue';
 import GlIcon from '../icon/icon.vue';
 import GlSorting from './sorting.vue';
 
@@ -18,7 +17,6 @@ describe('sorting component', () => {
 
   const selectDropdownButton = () => wrapper.find('button');
   const selectDirectionButton = () => wrapper.findAll('button').at(1);
-  const selectDropdown = () => wrapper.findComponent(GlDropdown);
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findListboxItem = (text) =>
     wrapper
@@ -35,91 +33,6 @@ describe('sorting component', () => {
     });
   };
 
-  it('should display default text in dropdown', () => {
-    createComponent();
-
-    expect(selectDropdownButton().text()).toBe(defaultDropdownText);
-  });
-
-  it('should have a default sort direction of desc and displays the descending icon', () => {
-    createComponent();
-
-    expect(selectDirectionButton().findComponent(GlIcon).props('name')).toBe('sort-highest');
-  });
-
-  it('should show new text value when passed in as a prop', () => {
-    const newDropdownText = 'Some new text';
-
-    createComponent({
-      text: newDropdownText,
-    });
-
-    expect(selectDropdownButton().text()).toBe(newDropdownText);
-  });
-
-  it('should accept isAscending true as a default sort direction and display the ascending icon', () => {
-    createComponent({
-      isAscending: true,
-    });
-
-    expect(selectDirectionButton().findComponent(GlIcon).props('name')).toBe('sort-lowest');
-  });
-
-  it('should emit the sortDirectionChange event when direction button is clicked', () => {
-    createComponent();
-
-    selectDirectionButton().trigger('click');
-
-    expect(wrapper.emitted('sortDirectionChange')[0]).toEqual([true]);
-  });
-
-  it('should allow custom sort direction text to be applied', () => {
-    const newDirectionTooltip = 'New tooltip text';
-
-    createComponent({
-      sortDirectionToolTip: newDirectionTooltip,
-    });
-
-    expect(selectDirectionButton().attributes('title')).toBe(newDirectionTooltip);
-    expect(selectDirectionButton().attributes('aria-label')).toBe(newDirectionTooltip);
-  });
-
-  it('adds classes passed in `dropdownClass` prop to dropdown', () => {
-    createComponent({
-      dropdownClass: 'foo-bar',
-    });
-
-    expect(selectDropdown().classes()).toContain('foo-bar');
-  });
-
-  it('adds classes passed in `dropdownToggleClass` prop to dropdown toggle', () => {
-    createComponent({
-      dropdownToggleClass: 'foo-bar',
-    });
-
-    expect(selectDropdownButton().classes()).toEqual(expect.arrayContaining(['foo-bar']));
-  });
-
-  it('adds classes passed in `sortDirectionToggleClass` prop to sort direction toggle', () => {
-    createComponent({
-      sortDirectionToggleClass: 'foo-bar',
-    });
-
-    expect(selectDirectionButton().classes()).toEqual(
-      expect.arrayContaining(['sorting-direction-button', 'foo-bar'])
-    );
-  });
-
-  it('sets aria-label of sort direction button', async () => {
-    createComponent();
-
-    expect(selectDirectionButton().attributes('aria-label')).toBe('Sort direction: descending');
-
-    await wrapper.setProps({ isAscending: true });
-
-    expect(selectDirectionButton().attributes('aria-label')).toBe('Sort direction: ascending');
-  });
-
   describe('using listbox', () => {
     useMockIntersectionObserver();
 
@@ -129,6 +42,16 @@ describe('sorting component', () => {
       expect(selectDropdownButton().text()).toBe(defaultDropdownText);
     });
 
+    it('should show new text value when passed in as a prop', () => {
+      const newDropdownText = 'Some new text';
+
+      createComponent({
+        text: newDropdownText,
+      });
+
+      expect(selectDropdownButton().text()).toBe(newDropdownText);
+    });
+
     it('should use the selected sort option text in dropdown if text is not given', () => {
       createComponent({ text: null, sortOptions: [{ value: 0, text: 'Foo' }], sortBy: 0 });
 
@@ -194,6 +117,7 @@ describe('sorting component', () => {
       });
 
       expect(selectDirectionButton().attributes('title')).toBe(newDirectionTooltip);
+      expect(selectDirectionButton().attributes('aria-label')).toBe(newDirectionTooltip);
     });
 
     it('adds classes passed in `dropdownClass` prop to dropdown', () => {

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

@@ -1,11 +1,9 @@
 import { makeContainer } from '../../../utils/story_decorators/container';
-import GlSortingItem from './sorting_item.vue';
 import GlSorting from './sorting.vue';
 import readme from './sorting.md';
 
 const components = {
   GlSorting,
-  GlSortingItem,
 };
 
 const propDefault = (prop) => GlSorting.props[prop].default;
@@ -33,59 +31,27 @@ const generateProps = ({
 const template = `
   <gl-sorting
     :text="text"
+    :sort-options="sortOptions"
+    :sort-by="sortBy"
     :is-ascending="isAscending"
     :sort-direction-tool-tip="sortDirectionToolTip"
     :dropdown-class="dropdownClass"
     :dropdown-toggle-class="dropdownToggleClass"
     :sort-direction-toggle-class="sortDirectionToggleClass"
-  >
-    <gl-sorting-item active>First item</gl-sorting-item>
-    <gl-sorting-item>Second item</gl-sorting-item>
-    <gl-sorting-item>Last item</gl-sorting-item>
-  </gl-sorting>`;
+  />
+`;
 
 const Template = (args) => ({
   components,
   props: Object.keys(args),
   mounted() {
-    this.$nextTick(() => this.$el.querySelector('.gl-dropdown-toggle').click());
+    this.$nextTick(() => this.$el.querySelector('button').click());
   },
   template,
 });
 
 export const Default = Template.bind({});
 Object.assign(Default, {
-  args: generateProps(),
-  parameters: {
-    controls: {
-      // These props/events only apply when using the listbox form, so don't
-      // show their controls.
-      exclude: ['sortBy', 'sortOptions', 'sortByChange'],
-    },
-  },
-});
-
-export const UsingListbox = (args) => ({
-  components,
-  props: Object.keys(args),
-  mounted() {
-    // The first button is the dropdown trigger.
-    this.$nextTick(() => this.$el.querySelector('button').click());
-  },
-  template: `
-    <gl-sorting
-      :text="text"
-      :sort-options="sortOptions"
-      :sort-by="sortBy"
-      :is-ascending="isAscending"
-      :sort-direction-tool-tip="sortDirectionToolTip"
-      :dropdown-class="dropdownClass"
-      :dropdown-toggle-class="dropdownToggleClass"
-      :sort-direction-toggle-class="sortDirectionToggleClass"
-    />
-  `,
-});
-Object.assign(UsingListbox, {
   args: generateProps({
     text: '',
     sortOptions: [
@@ -104,12 +70,7 @@ Object.assign(UsingListbox, {
     ],
     sortBy: 'first',
   }),
-  parameters: {
-    controls: {
-      // The default slot is deprecated, so don't show it in the controls.
-      exclude: ['default'],
-    },
-  },
+  parameters: {},
 });
 
 export default {

package/src/components/base/sorting/sorting.vue

@@ -4,7 +4,6 @@ import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
 import { isOption } from '../new_dropdowns/listbox/utils';
-import GlDropdown from '../dropdown/dropdown.vue';
 import { translate } from '../../../utils/i18n';
 
 export default {
@@ -13,7 +12,6 @@ export default {
     GlButton,
     GlButtonGroup,
     GlCollapsibleListbox,
-    GlDropdown,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -33,7 +31,7 @@ export default {
     sortOptions: {
       type: Array,
       required: false,
-      default: null,
+      default: () => [],
       // eslint-disable-next-line unicorn/no-array-callback-reference
       validator: (sortOptions) => sortOptions.every(isOption),
     },
@@ -64,7 +62,7 @@ export default {
       default: null,
     },
     /**
-     * Additional class(es) to apply to the root element of the GlDropdown.
+     * Additional class(es) to apply to the root element of the GlCollapsibleListbox.
      */
     dropdownClass: {
       type: String,
@@ -99,9 +97,6 @@ export default {
         ? translate('GlSorting.sortAscending', 'Sort direction: ascending')
         : translate('GlSorting.sortDescending', 'Sort direction: descending');
     },
-    useListbox() {
-      return Boolean(this.sortOptions);
-    },
     listboxToggleClass() {
       return [
         this.dropdownToggleClass,
@@ -144,7 +139,6 @@ export default {
 <template>
   <gl-button-group class="gl-sorting">
     <gl-collapsible-listbox
-      v-if="useListbox"
       :toggle-text="text"
       :items="sortOptions"
       :selected="sortBy"
@@ -153,18 +147,6 @@ export default {
       placement="right"
       @select="onSortByChanged"
     />
-    <gl-dropdown
-      v-else
-      v-bind="$props"
-      :text="text"
-      category="secondary"
-      :class="dropdownClass"
-      :toggle-class="dropdownToggleClass"
-      right
-    >
-      <!-- @slot Deprecated slot to place the dropdown items, works best with a gl-sorting-item component. -->
-      <slot></slot>
-    </gl-dropdown>
     <gl-button
       v-gl-tooltip
       :title="sortDirectionText"

package/src/index.js

@@ -76,7 +76,6 @@ export { default as GlDatepicker } from './components/base/datepicker/datepicker
 export { default as GlDaterangePicker } from './components/base/daterange_picker/daterange_picker.vue';
 export { default as GlToggle } from './components/base/toggle/toggle.vue';
 export { default as GlSorting } from './components/base/sorting/sorting.vue';
-export { default as GlSortingItem } from './components/base/sorting/sorting_item.vue';
 export { default as GlInfiniteScroll } from './components/base/infinite_scroll/infinite_scroll.vue';
 export { default as GlAlert } from './components/base/alert/alert.vue';
 export { default as GlSegmentedControl } from './components/base/segmented_control/segmented_control.vue';

package/dist/components/base/sorting/sorting_item.js

@@ -1,109 +0,0 @@
-import GlDropdownItem from '../dropdown/dropdown_item';
-import GlIcon from '../icon/icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/**
- * Sorting Item
- *
- * NOTE: This component is deprecated. Instead, use the `sortOptions` prop of
- * `GlSorting`.
- *
- * This is written as a functional component because it is a simple wrapper over
- * the GlDropdownItem component and does not use internal state. Functional
- * components are cheaper to render and often used as wrappers like this. We're
- * not using the <template functional> syntax here because it does not support
- * custom child components wihtout extra work inside GitLab or extra work
- * required by the user.
- */
-
-var script = {
-  name: 'GlSortingItem',
-  functional: true,
-  props: {
-    /**
-     * Adds a check mark next to the item to indicate it is active.
-     */
-    active: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    /**
-     * If given, makes the item a link pointing to the given value. Otherwise,
-     * the item is a button.
-     */
-    href: {
-      type: String,
-      default: null,
-      required: false
-    }
-  },
-  /**
-   * The content of the item.
-   * @slot default
-   */
-  render(createElement, _ref) {
-    let {
-      scopedSlots,
-      data,
-      props = {}
-    } = _ref;
-    const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${props.active ? '' : 'inactive gl-visibility-hidden'}`;
-    const icon = createElement(GlIcon, {
-      class: classNames,
-      attrs: {
-        name: 'mobile-issue-close',
-        size: 16,
-        ariaLabel: 'Selected'
-      }
-    });
-    return createElement(GlDropdownItem, {
-      ...data,
-      attrs: {
-        ...props
-      },
-      scopedSlots: {
-        default: () => {
-          var _scopedSlots$default;
-          return [icon, (_scopedSlots$default = scopedSlots.default) === null || _scopedSlots$default === void 0 ? void 0 : _scopedSlots$default.call(scopedSlots)];
-        }
-      }
-    });
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = undefined;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    {},
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/base/sorting/sorting_item.md

@@ -1,5 +0,0 @@
-> **NOTE:** This component is deprecated. Instead, use the `sortOptions` prop of `GlSorting`.
-
-The sorting item component is meant to be used for clickable entries inside a `gl-sorting` component.
-This is a wrapper around the `gl-dropdown-item` component and includes a check icon when active,
-and an empty space for alignment when not.

package/src/components/base/sorting/sorting_item.spec.js

@@ -1,65 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlSortingItem from './sorting_item.vue';
-
-describe('sorting item component', () => {
-  let wrapper;
-
-  const sortingItemText = 'Some test text';
-
-  const defaultProps = {};
-
-  const findActiveIcon = () => wrapper.find('.js-active-icon');
-  const findGlDropdownItem = () => wrapper.findComponent(GlDropdownItem);
-
-  const createComponent = (propsData) => {
-    wrapper = shallowMount(GlSortingItem, {
-      context: {
-        props: {
-          ...defaultProps,
-          ...propsData,
-        },
-      },
-      slots: {
-        default: sortingItemText,
-      },
-      stubs: {
-        GlDropdownItem,
-      },
-    });
-  };
-
-  it('should render and display the supplied text', () => {
-    createComponent();
-
-    expect(wrapper.text()).toBe(sortingItemText);
-  });
-
-  it('does not show the check icon when the active prop is not provided', () => {
-    createComponent();
-
-    expect(findActiveIcon().exists()).toBe(true);
-    expect(findActiveIcon().classes()).toContain('inactive');
-  });
-
-  it('does render a check icon when the active prop is provided', () => {
-    createComponent({
-      active: true,
-    });
-
-    expect(findActiveIcon().exists()).toBe(true);
-    expect(findActiveIcon().classes()).not.toContain('inactive');
-  });
-
-  it('passes the props down to the gl-dropdown-item component', () => {
-    const url = 'https://about.gitlab.com';
-
-    createComponent({
-      active: true,
-      href: url,
-    });
-
-    expect(findGlDropdownItem().attributes('active')).toBe('true');
-    expect(findGlDropdownItem().attributes('href')).toBe(url);
-  });
-});

package/src/components/base/sorting/sorting_item.stories.js

@@ -1,50 +0,0 @@
-import { makeContainer } from '../../../utils/story_decorators/container';
-import GlSortingItem from './sorting_item.vue';
-import GlSorting from './sorting.vue';
-import readme from './sorting_item.md';
-
-const components = {
-  GlSorting,
-  GlSortingItem,
-};
-
-const generateProps = ({ href = null, active = false } = {}) => ({
-  href,
-  active,
-});
-
-const template = `
-  <gl-sorting text="Sorting options">
-    <gl-sorting-item :href="href" :active="active">Some item</gl-sorting-item>
-  </gl-sorting>`;
-
-const Template = (args) => ({
-  components,
-  props: Object.keys(args),
-  mounted() {
-    this.$nextTick(() => this.$el.querySelector('.gl-dropdown-toggle').click());
-  },
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithHref = Template.bind({});
-WithHref.args = generateProps({ href: 'https://about.gitlab.com/' });
-
-export const WithActive = Template.bind({});
-WithActive.args = generateProps({ active: true });
-
-export default {
-  title: 'base/sorting/sorting-item',
-  component: GlSortingItem,
-  decorators: [makeContainer({ height: '50px', paddingLeft: '100px' })],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/sorting/sorting_item.vue

@@ -1,69 +0,0 @@
-<script>
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlIcon from '../icon/icon.vue';
-
-/**
- * Sorting Item
- *
- * NOTE: This component is deprecated. Instead, use the `sortOptions` prop of
- * `GlSorting`.
- *
- * This is written as a functional component because it is a simple wrapper over
- * the GlDropdownItem component and does not use internal state. Functional
- * components are cheaper to render and often used as wrappers like this. We're
- * not using the <template functional> syntax here because it does not support
- * custom child components wihtout extra work inside GitLab or extra work
- * required by the user.
- */
-
-export default {
-  name: 'GlSortingItem',
-  functional: true,
-  props: {
-    /**
-     * Adds a check mark next to the item to indicate it is active.
-     */
-    active: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    /**
-     * If given, makes the item a link pointing to the given value. Otherwise,
-     * the item is a button.
-     */
-    href: {
-      type: String,
-      default: null,
-      required: false,
-    },
-  },
-  /**
-   * The content of the item.
-   * @slot default
-   */
-  render(createElement, { scopedSlots, data, props = {} }) {
-    const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${
-      props.active ? '' : 'inactive gl-visibility-hidden'
-    }`;
-    const icon = createElement(GlIcon, {
-      class: classNames,
-      attrs: {
-        name: 'mobile-issue-close',
-        size: 16,
-        ariaLabel: 'Selected',
-      },
-    });
-
-    return createElement(GlDropdownItem, {
-      ...data,
-      attrs: {
-        ...props,
-      },
-      scopedSlots: {
-        default: () => [icon, scopedSlots.default?.()],
-      },
-    });
-  },
-};
-</script>