PF4: Drawer updates for Master/Detail Support

packages/react-catalog-view-extension/package.json

@@ -40,7 +40,7 @@
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose --source-maps"
   },
   "dependencies": {
-    "@patternfly/patternfly": "2.65.3",
+    "@patternfly/patternfly": "2.66.0",
     "@patternfly/react-core": "^3.144.1",
     "@patternfly/react-styles": "^3.7.6",
     "classnames": "^2.2.5",

packages/react-charts/package.json

@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/patternfly": "2.65.3",
+    "@patternfly/patternfly": "2.66.0",
     "@patternfly/react-styles": "^3.7.6",
     "@patternfly/react-tokens": "^2.8.6",
     "hoist-non-react-statics": "^3.3.0",

packages/react-core/package.json

@@ -57,7 +57,7 @@
     "@babel/plugin-transform-typescript": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@patternfly/patternfly": "2.65.3",
+    "@patternfly/patternfly": "2.66.0",
     "@types/exenv": "^1.2.0",
     "@types/jest": "^24.0.11",
     "@types/react": "^16.4.0",

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

@@ -7,41 +7,46 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content rendered in the left hand panel */
   children?: React.ReactNode;
-  /** Indicate if the drawer is expanded */
+  /** Indicates if the drawer is expanded */
   isExpanded?: boolean;
   /** Indicates if the content element and panel element are displayed side by side. */
   isInline?: boolean;
+  /* Indicates if the drawer will always show both content and panel. */
+  isStatic?: boolean;
+  /* Position of the drawer panel */
+  position?: 'left' | 'right';
 }
 
-export class Drawer extends React.Component<DrawerProps> {
-  static hasWarnBeta = false;
-  constructor(props: DrawerProps) {
-    super(props);
-  }
-
-  componentDidMount() {
-    if (!Drawer.hasWarnBeta && process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.warn('This component is in beta and subject to change.');
-      Drawer.hasWarnBeta = true;
-    }
-  }
+export interface DrawerContextProps {
+  isExpanded: boolean;
+}
 
-  render() {
-    const { className = '', children, isExpanded = false, isInline = false, ...props } = this.props;
+export const DrawerContext = React.createContext<Partial<DrawerContextProps>>({
+  isExpanded: false
+});
 
-    return (
-      <div
-        {...props}
-        className={css(
-          styles.drawer,
-          isExpanded && styles.modifiers.expanded,
-          isInline && styles.modifiers.inline,
-          className
-        )}
-      >
-        {children}
-      </div>
-    );
-  }
-}
+export const Drawer: React.SFC<DrawerProps> = ({
+  className = '',
+  children,
+  isExpanded = false,
+  isInline = false,
+  isStatic = false,
+  position = 'right',
+  ...props
+}: DrawerProps) => (
+  <DrawerContext.Provider value={{ isExpanded }}>
+    <div
+      className={css(
+        styles.drawer,
+        isExpanded && styles.modifiers.expanded,
+        isInline && styles.modifiers.inline,
+        isStatic && styles.modifiers.static,
+        position === 'left' && styles.modifiers.panelLeft,
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  </DrawerContext.Provider>
+);

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+export interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer actions button. */
+  className?: string;
+  /** Actions to be rendered in the panel head. */
+  children?: React.ReactNode;
+}
+
+export const DrawerActions: React.SFC<DrawerActionsProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '',
+  children,
+  ...props
+}: DrawerActionsProps) => (
+  <div className={css(styles.drawerActions, className)} {...props}>
+    {children}
+  </div>
+);

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+import { Button } from '../Button';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+
+export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer close button outer <div>. */
+  className?: string;
+  /** A callback for when the close button is clicked  */
+  onClose?: () => void;
+  /** Accessible label for the drawer close button */
+  'aria-label'?: string;
+}
+
+export const DrawerCloseButton: React.SFC<DrawerCloseButtonProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '',
+  onClose = () => undefined as any,
+  'aria-label': ariaLabel = 'Close drawer panel',
+  ...props
+}: DrawerCloseButtonProps) => (
+  <div className={css(styles.drawerClose, className)} {...props}>
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
+      <TimesIcon />
+    </Button>
+  </div>
+);

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

@@ -1,21 +1,28 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
+import { DrawerMain } from './DrawerMain';
 
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
-  /** Content to rendered in the drawer */
+  /** Content to be rendered in the drawer. */
   children?: React.ReactNode;
+  /** Content rendered in the drawer panel. */
+  panelContent: React.ReactNode;
 }
 
 export const DrawerContent: React.SFC<DrawerContentProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
+  panelContent,
   ...props
 }: DrawerContentProps) => (
-  <div className={css(styles.drawerContent)} {...props}>
-    {children}
-  </div>
+  <DrawerMain>
+    <div className={css(styles.drawerContent, className)} {...props}>
+      {children}
+    </div>
+    {panelContent}
+  </DrawerMain>
 );

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+export interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the Drawer. */
+  className?: string;
+  /** Content to be rendered in the drawer */
+  children?: React.ReactNode;
+  /** Indicates if there should be padding around the drawer content body */
+  hasPadding?: boolean;
+}
+
+export const DrawerContentBody: React.SFC<DrawerContentBodyProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '',
+  children,
+  hasPadding = false,
+  ...props
+}: DrawerContentBodyProps) => (
+  <div className={css(styles.drawerBody, hasPadding && styles.modifiers.padding, className)} {...props}>
+    {children}
+  </div>
+);

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+import { DrawerPanelBody } from './DrawerPanelBody';
+
+export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer head. */
+  className?: string;
+  /** Content to be rendered in the drawer head */
+  children?: React.ReactNode;
+  /** Indicates if there should be no padding around the drawer panel body of the head*/
+  noPadding?: boolean;
+}
+
+export const DrawerHead: React.SFC<DrawerHeadProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '',
+  children,
+  noPadding = false,
+  ...props
+}: DrawerHeadProps) => (
+  <DrawerPanelBody noPadding={noPadding}>
+    <div className={css(styles.drawerHead, className)} {...props}>
+      {children}
+    </div>
+  </DrawerPanelBody>
+);

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+export interface DrawerMainProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer main wrapper. */
+  className?: string;
+  /** Content to be rendered in the drawer main wrapper*/
+  children?: React.ReactNode;
+}
+
+export const DrawerMain: React.SFC<DrawerMainProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '',
+  children,
+  ...props
+}: DrawerMainProps) => (
+  <div className={css(styles.drawerMain, className)} {...props}>
+    {children}
+  </div>
+);

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+export interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the Drawer. */
+  className?: string;
+  /** Content to be rendered in the drawer */
+  children?: React.ReactNode;
+  /** Indicates if there should be no padding around the drawer panel body */
+  noPadding?: boolean;
+}
+
+export const DrawerPanelBody: React.SFC<DrawerPanelBodyProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '',
+  children,
+  noPadding = false,
+  ...props
+}: DrawerPanelBodyProps) => (
+  <div className={css(styles.drawerBody, noPadding && styles.modifiers.noPadding, className)} {...props}>
+    {children}
+  </div>
+);

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

@@ -1,23 +1,34 @@
 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';
 
 export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the Drawer. */
+  /** Additional classes added to the drawer. */
   className?: string;
-  /** Content to rendered in the drawer */
+  /** Content to be rendered in the drawer panel. */
   children?: React.ReactNode;
-  /** Indicates if there should be padding around the drawer */
-  noPadding?: boolean;
+  /* Flag indicating that the drawer panel should have a border. */
+  hasBorder?: boolean;
 }
 
 export const DrawerPanelContent: React.SFC<DrawerPanelContentProps> = ({
   className = '',
   children,
-  noPadding = false,
+  hasBorder = false,
   ...props
 }: DrawerPanelContentProps) => (
-  <aside className={css(styles.drawerPanel, className)} {...props}>
-    <div className={css(styles.drawerPanelBody, noPadding && styles.modifiers.noPadding)}>{children}</div>
-  </aside>
+  <DrawerContext.Consumer>
+    {({ isExpanded }) => (
+      <div
+        className={css(styles.drawerPanel, hasBorder && styles.modifiers.border, className)}
+        hidden={!isExpanded}
+        aria-hidden={!isExpanded}
+        aria-expanded={isExpanded}
+        {...props}
+      >
+        {children}
+      </div>
+    )}
+  </DrawerContext.Consumer>
 );

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
+import { css } from '@patternfly/react-styles';
+
+export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the drawer section. */
+  className?: string;
+  /** Content to be rendered in the drawer section. */
+  children?: React.ReactNode;
+}
+
+export const DrawerSection: React.SFC<DrawerSectionProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  className = '',
+  children,
+  ...props
+}: DrawerSectionProps) => (
+  <div className={css(styles.drawerSection, className)} {...props}>
+    {children}
+  </div>
+);