diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-06 21:07:33 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-06 21:07:33 +0300 |
commit | 9e5484cee690f8bb2c1796013345d8cbc1872d77 (patch) | |
tree | 7b5c95c7de5eaba5ebb053da65c83184af1cf74c /app/assets/javascripts/super_sidebar | |
parent | 638e2f1c5f55988135da63c7aa57bcecb9355a2b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/super_sidebar')
5 files changed, 6 insertions, 81 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher.vue b/app/assets/javascripts/super_sidebar/components/context_switcher.vue index d1297b19579..c5f3410a68f 100644 --- a/app/assets/javascripts/super_sidebar/components/context_switcher.vue +++ b/app/assets/javascripts/super_sidebar/components/context_switcher.vue @@ -5,7 +5,6 @@ import { s__ } from '~/locale'; import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import searchUserProjectsAndGroups from '../graphql/queries/search_user_groups_and_projects.query.graphql'; import { trackContextAccess, formatContextSwitcherItems } from '../utils'; -import { maxSize, applyMaxSize } from '../popper_max_size_modifier'; import NavItem from './nav_item.vue'; import ProjectsList from './projects_list.vue'; import GroupsList from './groups_list.vue'; @@ -142,9 +141,6 @@ export default { }, }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS, - popperOptions: { - modifiers: [maxSize, applyMaxSize], - }, }; </script> @@ -153,7 +149,6 @@ export default { ref="disclosure-dropdown" class="context-switcher gl-w-full" placement="center" - :popper-options="$options.popperOptions" @shown="onDisclosureDropdownShown" @hidden="onDisclosureDropdownHidden" > diff --git a/app/assets/javascripts/super_sidebar/components/create_menu.vue b/app/assets/javascripts/super_sidebar/components/create_menu.vue index 8e5aeba1ec2..0ce856c9af8 100644 --- a/app/assets/javascripts/super_sidebar/components/create_menu.vue +++ b/app/assets/javascripts/super_sidebar/components/create_menu.vue @@ -44,16 +44,7 @@ export default { }, }, toggleId: 'create-menu-toggle', - popperOptions: { - modifiers: [ - { - name: 'offset', - options: { - offset: [DROPDOWN_X_OFFSET, DROPDOWN_Y_OFFSET], - }, - }, - ], - }, + dropdownOffset: { mainAxis: DROPDOWN_Y_OFFSET, crossAxis: DROPDOWN_X_OFFSET }, TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN, }; </script> @@ -67,7 +58,7 @@ export default { text-sr-only :toggle-text="$options.i18n.createNew" :toggle-id="$options.toggleId" - :popper-options="$options.popperOptions" + :dropdown-offset="$options.dropdownOffset" data-qa-selector="new_menu_toggle" data-testid="new-menu-toggle" @shown="dropdownOpen = true" diff --git a/app/assets/javascripts/super_sidebar/components/help_center.vue b/app/assets/javascripts/super_sidebar/components/help_center.vue index 03f6a9c2122..1a965f21ef5 100644 --- a/app/assets/javascripts/super_sidebar/components/help_center.vue +++ b/app/assets/javascripts/super_sidebar/components/help_center.vue @@ -204,22 +204,13 @@ export default { }); }, }, - popperOptions: { - modifiers: [ - { - name: 'offset', - options: { - offset: [DROPDOWN_X_OFFSET, DROPDOWN_Y_OFFSET], - }, - }, - ], - }, + dropdownOffset: { mainAxis: DROPDOWN_Y_OFFSET, crossAxis: DROPDOWN_X_OFFSET }, }; </script> <template> <gl-disclosure-dropdown - :popper-options="$options.popperOptions" + :dropdown-offset="$options.dropdownOffset" @shown="trackDropdownToggle(true)" @hidden="trackDropdownToggle(false)" > diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue index e08fb630fb7..7d4991fbe96 100644 --- a/app/assets/javascripts/super_sidebar/components/user_menu.vue +++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue @@ -221,16 +221,7 @@ export default { }); }, }, - popperOptions: { - modifiers: [ - { - name: 'offset', - options: { - offset: [DROPDOWN_X_OFFSET, DROPDOWN_Y_OFFSET], - }, - }, - ], - }, + dropdownOffset: { mainAxis: DROPDOWN_Y_OFFSET, crossAxis: DROPDOWN_X_OFFSET }, }; </script> @@ -238,7 +229,7 @@ export default { <div> <gl-disclosure-dropdown ref="userDropdown" - :popper-options="$options.popperOptions" + :dropdown-offset="$options.dropdownOffset" data-testid="user-dropdown" data-qa-selector="user_menu" :auto-close="false" diff --git a/app/assets/javascripts/super_sidebar/popper_max_size_modifier.js b/app/assets/javascripts/super_sidebar/popper_max_size_modifier.js deleted file mode 100644 index 6581d521107..00000000000 --- a/app/assets/javascripts/super_sidebar/popper_max_size_modifier.js +++ /dev/null @@ -1,43 +0,0 @@ -import { detectOverflow } from '@popperjs/core'; - -/** - * These modifiers were copied from the community modifier popper-max-size-modifier - * https://www.npmjs.com/package/popper-max-size-modifier. - * We are considering upgrading Popper.js to Floating UI, at which point the behavior this - * introduces will be available out of the box. - * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2213 - */ - -export const maxSize = { - name: 'maxSize', - enabled: true, - phase: 'main', - requiresIfExists: ['offset', 'preventOverflow', 'flip'], - fn({ state, name }) { - const overflow = detectOverflow(state); - const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 }; - const { width, height } = state.rects.popper; - const [basePlacement] = state.placement.split('-'); - - const widthProp = basePlacement === 'left' ? 'left' : 'right'; - const heightProp = basePlacement === 'top' ? 'top' : 'bottom'; - - state.modifiersData[name] = { - width: width - overflow[widthProp] - x, - height: height - overflow[heightProp] - y, - }; - }, -}; - -export const applyMaxSize = { - name: 'applyMaxSize', - enabled: true, - phase: 'write', - requires: ['maxSize'], - fn({ state }) { - // The `maxSize` modifier provides this data - const { width, height } = state.modifiersData.maxSize; - state.elements.popper.style.maxWidth = `${width}px`; - state.elements.popper.style.maxHeight = `${height}px`; - }, -}; |