Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Page): add prop to set width of drawer #10279

Merged
merged 3 commits into from
Apr 26, 2024
Merged

feat(Page): add prop to set width of drawer #10279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
23cd9b6
Add drawerWidth prop
jessiehuff Apr 15, 2024
5d3b4ae
Add min and max sizes
jessiehuff Apr 22, 2024
269ac65
Update prop descriptions
jessiehuff Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@
isResizable?: boolean;
/** Callback for resize end. */
onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
/** The minimum size of a drawer, in either pixels or percentage. */
/** The minimum size of a drawer. */
minSize?: string;
/** The starting size of a resizable drawer, in either pixels or percentage. */
/** The starting size of a drawer. */
defaultSize?: string;
/** The maximum size of a drawer, in either pixels or percentage. */
/** The maximum size of a drawer. */
maxSize?: string;
/** The increment amount for keyboard drawer resizing, in pixels. */
/** The increment amount for keyboard drawer resizing. */
increment?: number;
/** Aria label for the resizable drawer splitter. */
resizeAriaLabel?: string;
Expand Down Expand Up @@ -242,7 +242,7 @@
drawerRef.current.classList.remove(css(styles.modifiers.resizing));
isResizing = false;
onResize && onResize(e, currWidth, id);
setInitialVals = true;

Check warning on line 245 in packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

View workflow job for this annotation

GitHub Actions / lint 

Assignments to the 'setInitialVals' variable from inside React Hook React.useCallback will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside React.useCallback
document.removeEventListener('mousemove', callbackMouseMove);
document.removeEventListener('mouseup', callbackMouseUp);
};
Expand All @@ -258,7 +258,7 @@
document.removeEventListener('touchend', callbackTouchEnd);
};

const callbackMouseMove = React.useCallback(handleMouseMove, []);

Check warning on line 261 in packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

View workflow job for this annotation

GitHub Actions / lint 

React Hook React.useCallback has missing dependencies: 'handleControlMove' and 'position'. Either include them or remove the dependency array
const callbackTouchEnd = React.useCallback(handleTouchEnd, []);
const callbackTouchMove = React.useCallback(handleTouchMove, []);
const callbackMouseUp = React.useCallback(handleMouseup, []);
Expand Down
15 changes: 14 additions & 1 deletion packages/react-core/src/components/Page/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
notificationDrawer?: React.ReactNode;
/** Flag indicating Notification drawer in expanded */
isNotificationDrawerExpanded?: boolean;
/** Sets default drawer size */
drawerDefaultSize?: string;
/** Sets the minimum drawer size*/
drawerMinSize?: string;
/** Sets the maximum drawer size */
drawerMaxSize?: string;
/** Flag indicating if breadcrumb width should be limited */
isBreadcrumbWidthLimited?: boolean;
/** Callback when notification drawer panel is finished expanding. */
Expand Down Expand Up @@ -219,6 +225,9 @@ class Page extends React.Component<PageProps, PageState> {
notificationDrawer,
isNotificationDrawerExpanded,
onNotificationDrawerExpand,
drawerDefaultSize,
drawerMinSize,
drawerMaxSize,
isTertiaryNavWidthLimited,
skipToContent,
role,
Expand Down Expand Up @@ -310,7 +319,11 @@ class Page extends React.Component<PageProps, PageState> {
</Component>
);

const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
const panelContent = (
<DrawerPanelContent defaultSize={drawerDefaultSize} minSize={drawerMinSize} maxSize={drawerMaxSize}>
{notificationDrawer}
</DrawerPanelContent>
);

return (
<PageContextProvider value={context}>
Expand Down
Loading