Add min and max sizes

patternfly · Apr 22, 2024 · 80f0343 · 80f0343
1 parent a672d38
commit 80f0343
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
@@ -39,11 +39,11 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer, in either pixels or percentage. */
   minSize?: string;
-  /** The starting size of a resizable drawer, in either pixels or percentage. */
+  /** The starting size of a resizable 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;

diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx
@@ -27,8 +27,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   notificationDrawer?: React.ReactNode;
   /** Flag indicating Notification drawer in expanded */
   isNotificationDrawerExpanded?: boolean;
-  /** Sets drawer width, in either pixels or percentage. */
-  drawerWidth?: string;
+  /** Sets default drawer width size */
+  drawerDefaultSize?: string;
+  /** The starting size of a resizable drawer */
+  drawerMinSize?: string;
+  /** The maximum size of a drawer */
+  drawerMaxSize?: string;
   /** Flag indicating if breadcrumb width should be limited */
   isBreadcrumbWidthLimited?: boolean;
   /** Callback when notification drawer panel is finished expanding. */
@@ -221,7 +225,9 @@ class Page extends React.Component<PageProps, PageState> {
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
-      drawerWidth,
+      drawerDefaultSize,
+      drawerMinSize,
+      drawerMaxSize,
       isTertiaryNavWidthLimited,
       skipToContent,
       role,
@@ -305,7 +311,6 @@ class Page extends React.Component<PageProps, PageState> {
         className={css(styles.pageMain)}
         tabIndex={mainTabIndex}
         aria-label={mainAriaLabel}
-        style={{ width: `${drawerWidth}` }}
       >
         {group}
         {!isTertiaryNavGrouped && nav}
@@ -314,7 +319,11 @@ class Page extends React.Component<PageProps, PageState> {
       </Component>
     );
 
-    const panelContent = <DrawerPanelContent defaultSize={drawerWidth}>{notificationDrawer}</DrawerPanelContent>;
+    const panelContent = (
+      <DrawerPanelContent defaultSize={drawerDefaultSize} minSize={drawerMinSize} maxSize={drawerMaxSize}>
+        {notificationDrawer}
+      </DrawerPanelContent>
+    );
 
     return (
       <PageContextProvider value={context}>