feat(Drawer): resizer, portal rendering, hide veil #270
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
StepanKirichenko
requested review from
DarkGenius,
Lunory and
sunduckcow
as code owners
|
Preview is ready. |
StepanKirichenko
force-pushed
the
resizable-drawer
branch
from
904ab2e to
3e94231
Compare
|
I get some points after testing Drawer in Storybook preview
|
Lunory
reviewed
Jul 18, 2024
There was a problem hiding this comment.
Describe CSS API in Readme please
e.g. https://github.com/gravity-ui/navigation/tree/main/src/components/AsideHeader#css-api
src/components/Drawer/Drawer.tsx
Outdated
| }; | ||
|
|
||
| export type {DrawerDirection} from './utils'; |
There was a problem hiding this comment.
Let's move to the top or you can move to Drawer/index btw
|
DarkGenius
reviewed
Jul 18, 2024
src/components/Drawer/README.md
Outdated
| @@ -57,3 +87,16 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`. | |||
| | style | Optional inline styles to be applied to the drawer component. | `React.CSSProperties` | | | |||
| | onVeilClick | Optional callback function that is called when the veil (overlay) is clicked. | `(event: React.MouseEvent) => void` | | | |||
| | onEscape | Optional callback function that is called when the escape key is pressed, if the drawer is open. | `() => void` | | | |||
| | hideVeil | Optional flag to hide the background darkening | `boolean` | | | |||
| | disablePortal | Optional flag to hide the background darkening | `boolean` | | | |||
There was a problem hiding this comment.
Let's fix description for disablePortal
Lunory
approved these changes
Jul 19, 2024
DarkGenius
approved these changes
Jul 19, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds new functionality to Drawer.
Resizable drawer item
DrawerItem can be optionally made resizable, with the ability to save the width of the element.
New DrawerItem props:
resizable: (optional) Whether the item should be able to resizewidth: (optional) The width of the resizable drawer item. If not provided, the current width will be stored internally in the component.onResize: (optional) Callback that can be used to save the new item widthminResizeWidth: (optional) The minimum width the item can be resized tomaxResizeWidth: (optional) The maximum width the item can be resized toPortal
Drawer renders itself in
<Portal>by default. This can be disabled by passingdisablePortal={true}prop.Hide veil
The background veil element can be disabled by passing
hideVeil={true}prop.