Skip to content

Commit

Permalink
feat(Page): add prop to set width of drawer (#10279)
Browse files Browse the repository at this point in the history
* Add drawerWidth prop

* Add min and max sizes

* Update prop descriptions
  • Loading branch information
jessiehuff authored Apr 26, 2024
1 parent 75849b0 commit 24df4bd
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
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
15 changes: 14 additions & 1 deletion packages/react-core/src/components/Page/Page.tsx
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

0 comments on commit 24df4bd

Please sign in to comment.