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

jessiehuff · 2024-04-15T19:46:10Z

What: Closes #10133

patternfly-build · 2024-04-15T19:51:17Z

Preview: https://patternfly-react-pr-10279.surge.sh

A11y report: https://patternfly-react-pr-10279-a11y.surge.sh

tlabaj · 2024-04-16T14:46:06Z

packages/react-core/src/components/Page/Page.tsx

@@ -302,6 +305,7 @@ class Page extends React.Component<PageProps, PageState> {
        className={css(styles.pageMain)}
        tabIndex={mainTabIndex}
        aria-label={mainAriaLabel}
+        style={{ width: `${drawerWidth}` }}


@mcoker do we want to set the --pf-v5-c-drawer__panel--md--FlexBasis css var here instead?

I'm actually not sure what this is doing... it's being added to the page's main element inside of drawer content. Here's a screenshot of drawerWidth set to 500px. The drawer panel gets the correct width, but you can see the page main element is also 500px - is that intentional?

mcoker

Nice!! Left a few comments for review 👍

packages/react-core/src/components/Page/Page.tsx

mcoker · 2024-04-17T20:27:20Z

packages/react-core/src/components/Page/Page.tsx

@@ -302,6 +305,7 @@ class Page extends React.Component<PageProps, PageState> {
        className={css(styles.pageMain)}
        tabIndex={mainTabIndex}
        aria-label={mainAriaLabel}
+        style={{ width: `${drawerWidth}` }}


I'm actually not sure what this is doing... it's being added to the page's main element inside of drawer content. Here's a screenshot of drawerWidth set to 500px. The drawer panel gets the correct width, but you can see the page main element is also 500px - is that intentional?

packages/react-core/src/components/Page/Page.tsx

mcoker

woot! LGTM, left some meta comments, the only one I think needs to update before merging is for drawerMinSize since the comment is currently "The starting size of a resizable drawer" and should say the minimum drawer size instead.

mcoker · 2024-04-22T18:28:12Z

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. */


nit - should this comment match the others?

Suggested change

/** The minimum size of a drawer, in either pixels or percentage. */

/** The minimum size of a drawer. */

mcoker · 2024-04-22T18:31:40Z

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. */


Sorry I didn't notice this before, but this says starting size of a resizable drawer, but from what I can tell, this prop sets the size on any drawer (not just resizable)

mcoker · 2024-04-22T20:30:22Z

packages/react-core/src/components/Page/Page.tsx

@@ -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 width size */


It sets vertical drawers, too, so we can probably just leave off "width"

Suggested change

/** Sets default drawer width size */

/** Sets default drawer size */

mcoker · 2024-04-22T20:31:01Z

packages/react-core/src/components/Page/Page.tsx

@@ -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 width size */
+  drawerDefaultSize?: string;
+  /** The starting size of a resizable drawer */


If we match the wording of the default prop

Suggested change

/** The starting size of a resizable drawer */

/** Sets the minimum drawer size */

mcoker · 2024-04-22T20:31:17Z

packages/react-core/src/components/Page/Page.tsx

+  drawerDefaultSize?: string;
+  /** The starting size of a resizable drawer */
+  drawerMinSize?: string;
+  /** The maximum size of a drawer */


Suggested change

/** The maximum size of a drawer */

/** Sets the max drawer size */

tlabaj

LGTM

mcoker

🎃

jessiehuff changed the title ~~Add drawerWidth prop~~ feat(Page): add prop to set width of drawer Apr 15, 2024

kmcfaul approved these changes Apr 16, 2024

View reviewed changes

tlabaj reviewed Apr 16, 2024

View reviewed changes

tlabaj added the css review label Apr 16, 2024

tlabaj requested a review from mcoker April 16, 2024 14:46

mcoker reviewed Apr 17, 2024

View reviewed changes

jessiehuff force-pushed the drawer-width branch from 8fbbe26 to 80f0343 Compare April 22, 2024 15:11

jessiehuff requested a review from mcoker April 22, 2024 15:27

mcoker reviewed Apr 23, 2024

View reviewed changes

jessiehuff added 3 commits April 25, 2024 10:29

Add drawerWidth prop

23cd9b6

Add min and max sizes

5d3b4ae

Update prop descriptions

269ac65

jessiehuff force-pushed the drawer-width branch from 80f0343 to 269ac65 Compare April 25, 2024 14:30

tlabaj approved these changes Apr 26, 2024

View reviewed changes

mcoker approved these changes Apr 26, 2024

View reviewed changes

tlabaj merged commit 24df4bd into patternfly:main Apr 26, 2024
13 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jessiehuff commented Apr 15, 2024

patternfly-build commented Apr 15, 2024 •

edited

Loading

tlabaj Apr 16, 2024

mcoker Apr 17, 2024

mcoker left a comment

mcoker Apr 17, 2024

mcoker left a comment

mcoker Apr 22, 2024

mcoker Apr 22, 2024

mcoker Apr 22, 2024

mcoker Apr 22, 2024

mcoker Apr 22, 2024

tlabaj left a comment

mcoker left a comment

		@@ -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. */

	/** The minimum size of a drawer, in either pixels or percentage. */
	/** The minimum size of a drawer. */

	/** Sets default drawer width size */
	/** Sets default drawer size */

	/** The starting size of a resizable drawer */
	/** Sets the minimum drawer size */

	/** The maximum size of a drawer */
	/** Sets the max drawer size */

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

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

Conversation

jessiehuff commented Apr 15, 2024

patternfly-build commented Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tlabaj left a comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

patternfly-build commented Apr 15, 2024 •

edited

Loading