feat(drawer): use the breakpoint mods prop instead of width props

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -2,6 +2,36 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerContext } from './Drawer';
+import { formatBreakpointMods } from '../../helpers/util';
+
+export const DrawerModifiers = {
+  25: 'width_25',
+  33: 'width_33',
+  50: 'width_50',
+  66: 'width_66',
+  75: 'width_75',
+  100: 'width_100'
+} as const;
+
+export enum DrawerBreakpoints {
+  none = '',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl'
+}
+
+export interface DrawerBreakpointMod {
+  modifier:
+    | 'width_25'
+    | 'width_33'
+    | 'width_50'
+    | 'width_66'
+    | 'width_75'
+    | 'width_100'
+    | typeof DrawerModifiers[keyof typeof DrawerModifiers];
+  /** The breakpoint at which to apply the modifier */
+  breakpoint: '' | 'lg' | 'xl' | '2xl' | DrawerBreakpoints;
+}
 
 export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the drawer. */
@@ -11,23 +41,14 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   /** Flag indicating that the drawer panel should not have a border. */
   hasNoBorder?: boolean;
   /** Default width for drawer panel */
-  width?: 25 | 33 | 50 | 66 | 75 | 100;
-  /** Drawer panel width on large viewports */
-  widthOnLg?: 25 | 33 | 50 | 66 | 75 | 100;
-  /** Drawer panel width on xl viewports */
-  widthOnXl?: 25 | 33 | 50 | 66 | 75 | 100;
-  /** Drawer panel width on 2xl viewports */
-  widthOn2Xl?: 25 | 33 | 50 | 66 | 75 | 100;
+  breakpointMods?: DrawerBreakpointMod[];
 }
 
 export const DrawerPanelContent: React.SFC<DrawerPanelContentProps> = ({
   className = '',
   children,
   hasNoBorder = false,
-  width,
-  widthOnLg,
-  widthOnXl,
-  widthOn2Xl,
+  breakpointMods = [] as DrawerBreakpointMod[],
   ...props
 }: DrawerPanelContentProps) => (
   <DrawerContext.Consumer>
@@ -36,10 +57,7 @@ export const DrawerPanelContent: React.SFC<DrawerPanelContentProps> = ({
         className={css(
           styles.drawerPanel,
           hasNoBorder && styles.modifiers.noBorder,
-          width && styles.modifiers[`width_${width}` as keyof typeof styles.modifiers],
-          widthOnLg && styles.modifiers[`width_${widthOnLg}OnLg` as keyof typeof styles.modifiers],
-          widthOnXl && styles.modifiers[`width_${widthOnXl}OnXl` as keyof typeof styles.modifiers],
-          widthOn2Xl && styles.modifiers[`width_${widthOn2Xl}On_2xl` as keyof typeof styles.modifiers],
+          formatBreakpointMods(breakpointMods, styles),
           className
         )}
         hidden={isStatic ? false : !isExpanded}

packages/react-core/src/components/Drawer/examples/Drawer.md

@@ -802,3 +802,70 @@ StaticDrawer = () => {
   );
 };
 ```
+
+```js title=Breakpoint
+import React, { ReactFragment } from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+class SimpleDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isExpanded: false
+    };
+
+    this.onClick = () => {
+      const isExpanded = !this.state.isExpanded;
+      this.setState({
+        isExpanded
+      });
+    };
+
+    this.onCloseClick = () => {
+      this.setState({
+        isExpanded: false
+      });
+    };
+  }
+
+  render() {
+    const { isExpanded } = this.state;
+    const panelContent = (
+      <DrawerPanelContent breakpointMods={[{modifier: 'width_33', breakpoint: ''}]}>
+        <DrawerHead>
+          <span>drawer-panel</span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const drawerContent =
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+    return (
+      <React.Fragment>
+        <Button aria-expanded={isExpanded} onClick={this.onClick}>
+          Toggle Drawer
+        </Button>
+        <Drawer isExpanded={isExpanded}>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
+  }
+}
+```

packages/react-core/src/helpers/util.ts

@@ -5,6 +5,7 @@ import { FlexBreakpointMod, FlexItemBreakpointMod } from '../layouts/Flex/FlexUt
 import { DataListActionBreakpointMod } from '../components/DataList/DataListActionBreakpoints';
 import { PageSectionBreakpointMod } from '../components/Page/PageSection';
 import { PageHeaderToolsBreakpointMod } from '../components/Page/PageHeaderTools';
+import { DrawerBreakpointMod } from '../components/Drawer';
 
 /**
  * @param {string} input - String to capitalize first letter
@@ -239,11 +240,12 @@ export function pluralize(i: number, singular: string, plural?: string) {
 
 /** This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
  *
- * @param {(ToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod | PageSectionBreakpointMod | DataListActionBreakpointMod | PageHeaderToolsBreakpointMod)[]} breakpointMods The modifiers object
+ * @param {(DrawerBreakpointMod | ToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod | PageSectionBreakpointMod | DataListActionBreakpointMod | PageHeaderToolsBreakpointMod)[]} breakpointMods The modifiers object
  * @param {any} styles The appropriate styles object for the component
  */
 export const formatBreakpointMods = (
   breakpointMods: (
+    | DrawerBreakpointMod
     | ToolbarBreakpointMod
     | FlexBreakpointMod
     | FlexItemBreakpointMod
@@ -255,6 +257,7 @@ export const formatBreakpointMods = (
   breakpointMods
     .map(mod => `${mod.modifier}${mod.breakpoint ? `-on-${mod.breakpoint}` : ''}`)
     .map(toCamel)
+    .map(mod => mod.replace(/-2xl$/gi, '_2xl'))
     .map(modifierKey => styles.modifiers[modifierKey])
     .filter(Boolean)
     .join(' ');

packages/react-integration/demo-app-ts/src/components/demos/DrawerDemo/DrawerDemo.tsx

@@ -8,7 +8,9 @@ import {
   DrawerSection,
   DrawerHead,
   DrawerActions,
+  DrawerBreakpoints,
   DrawerCloseButton,
+  DrawerModifiers,
   DrawerProps
 } from '@patternfly/react-core';
 
@@ -40,7 +42,14 @@ export class DrawerDemo extends React.Component<DrawerProps, DrawerDemoState> {
   render() {
     const { isExpanded } = this.state;
     const panelContent = (
-      <DrawerPanelContent width={100} widthOnLg={50} widthOnXl={33} widthOn2Xl={25}>
+      <DrawerPanelContent
+        breakpointMods={[
+          { modifier: DrawerModifiers[100], breakpoint: DrawerBreakpoints.none },
+          { modifier: DrawerModifiers[50], breakpoint: DrawerBreakpoints.lg },
+          { modifier: DrawerModifiers[33], breakpoint: DrawerBreakpoints.xl },
+          { modifier: DrawerModifiers[25], breakpoint: DrawerBreakpoints['2xl'] }
+        ]}
+      >
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>