Skip to content
This repository has been archived by the owner on Feb 1, 2024. It is now read-only.

[FRONT-476] make Menu scrollable #2618

Merged
merged 34 commits into from
Apr 12, 2023

Conversation

farazatarodi
Copy link
Collaborator

@farazatarodi farazatarodi commented Apr 6, 2023

Description

I meant to make Menu scrollable, but I basically rewrote it.

### Added

- `Menu`: It is now scrollable when the available space is less than the height

### Changed

- [BREAKING] `Menu`: State management now should happen in the parent component.
- `Menu`: Shadow and border now use the values from the design system.
- [BREAKING] `Menu`: The `onHide` prop is now called `onInactive`.

### Removed

- [BREAKING] `Menu`: The `onShow` property is removed as the state management is now moved to the parent component.

### Fixed

- [BREAKING] `Menu`: It now requires an anchor element for positioning when it is not static. Previously it was based on the parent element, which caused layout bugs in `flex` elements.

Screenshot before this PR

image
image

Screenshot after this PR

image
image

Breaking changes

  • Menu: State management now should happen in the parent component.
  • Menu: The onHide prop is now called onInactive.
  • Menu: The onShow property is removed as the state management is now moved to the parent component.
  • Menu: It now requires an anchor element for positioning when it is not static. Previously it was based on the parent element, which caused layout bugs in flex elements.

@farazatarodi farazatarodi self-assigned this Apr 6, 2023
@farazatarodi farazatarodi requested review from a team and lorgan3 and removed request for a team April 6, 2023 16:00
JorenSaeyTL
JorenSaeyTL previously approved these changes Apr 7, 2023
@farazatarodi
Copy link
Collaborator Author

@lowiebenoot I don't see it necessary, but in the case that we want to add it, I would add it in another PR. This one is huge enough.

lorgan3
lorgan3 previously approved these changes Apr 7, 2023
@lowiebenoot
Copy link
Collaborator

@lowiebenoot I don't see it necessary, but in the case that we want to add it, I would add it in another PR. This one is huge enough.

I thought we had it in the current Menu component, but apparently not, so nevermind. It's probably in popover that we have it.

lowiebenoot
lowiebenoot previously approved these changes Apr 7, 2023
CHANGELOG.md Outdated Show resolved Hide resolved
lorgan3
lorgan3 previously approved these changes Apr 11, 2023
const { height: viewportHeight } = getViewport();

if (positionState === POSITION.TOP_LEFT || positionState === POSITION.TOP_RIGHT) {
return viewportHeight - top;
return viewportHeight - top - height - 24;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PP make 24 a constant

src/components/menu/Menu.tsx Outdated Show resolved Hide resolved
@lorgan3
Copy link
Contributor

lorgan3 commented Apr 12, 2023

✅ checked

@farazatarodi farazatarodi merged commit 03ba553 into next-release Apr 12, 2023
@farazatarodi farazatarodi deleted the FRONT-476-make-menu-scrollable branch April 12, 2023 10:12
@lowiebenoot lowiebenoot mentioned this pull request Apr 13, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants