diff --git a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
index 7b9b50327dc..3961cc98e36 100644
--- a/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
+++ b/packages/react-core/src/components/Drawer/DrawerPanelContent.tsx
@@ -8,8 +8,8 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   className?: string;
   /** Content to be rendered in the drawer panel. */
   children?: React.ReactNode;
-  /* Flag indicating that the drawer panel should have a border. */
-  hasBorder?: boolean;
+  /* 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 */
@@ -23,7 +23,7 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
 export const DrawerPanelContent: React.SFC<DrawerPanelContentProps> = ({
   className = '',
   children,
-  hasBorder = false,
+  hasNoBorder = false,
   width,
   widthOnLg,
   widthOnXl,
@@ -35,7 +35,7 @@ export const DrawerPanelContent: React.SFC<DrawerPanelContentProps> = ({
       <div
         className={css(
           styles.drawerPanel,
-          !hasBorder && styles.modifiers.noBorder,
+          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],
diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 78766e19413..294c3d13df7 100644
--- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
             <div
               aria-expanded={false}
               aria-hidden={true}
-              className="pf-c-drawer__panel pf-m-no-border"
+              className="pf-c-drawer__panel"
               hidden={true}
             >
               <DrawerHead>
@@ -191,7 +191,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
             <div
               aria-expanded={false}
               aria-hidden={true}
-              className="pf-c-drawer__panel pf-m-no-border"
+              className="pf-c-drawer__panel"
               hidden={true}
             >
               <DrawerHead>
@@ -339,7 +339,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
             <div
               aria-expanded={true}
               aria-hidden={false}
-              className="pf-c-drawer__panel pf-m-no-border"
+              className="pf-c-drawer__panel"
               hidden={false}
             >
               <DrawerHead>
@@ -487,7 +487,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
             <div
               aria-expanded={true}
               aria-hidden={false}
-              className="pf-c-drawer__panel pf-m-no-border"
+              className="pf-c-drawer__panel"
               hidden={false}
             >
               <DrawerHead>
@@ -635,7 +635,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
             <div
               aria-expanded={true}
               aria-hidden={false}
-              className="pf-c-drawer__panel pf-m-no-border"
+              className="pf-c-drawer__panel"
               hidden={false}
             >
               <DrawerHead>
diff --git a/packages/react-core/src/components/Drawer/examples/Drawer.md b/packages/react-core/src/components/Drawer/examples/Drawer.md
index 778af888492..04ff1ad5ccf 100644
--- a/packages/react-core/src/components/Drawer/examples/Drawer.md
+++ b/packages/react-core/src/components/Drawer/examples/Drawer.md
@@ -2,20 +2,42 @@
 title: 'Drawer'
 cssPrefix: 'pf-c-drawer'
 typescript: true
-propComponents: ['Drawer', 'DrawerContent', 'DrawerPanelContent', DrawerContentBody, DrawerPanelBody, DrawerSection, DrawerHead, DrawerActions, DrawerCloseButton]
+propComponents:
+  [
+    'Drawer',
+    'DrawerContent',
+    'DrawerPanelContent',
+    DrawerContentBody,
+    DrawerPanelBody,
+    DrawerSection,
+    DrawerHead,
+    DrawerActions,
+    DrawerCloseButton,
+  ]
 section: 'components'
 beta: true
 ---
+
 import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerSection, DrawerHead, DrawerActions, DrawerCloseButton } from '@patternfly/react-core';
 
 ## Examples
+
 ```js title=Basic
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
 
 class SimpleDrawer extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -33,41 +55,54 @@ class SimpleDrawer extends React.Component {
         isExpanded: false
       });
     };
-   }
+  }
 
   render() {
     const { isExpanded } = this.state;
     const panelContent = (
-      <DrawerPanelContent> 
+      <DrawerPanelContent>
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>
-              <DrawerCloseButton onClick={this.onCloseClick}/>
+            <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded}>
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+      </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 onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded}>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=Panel-on-left
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
 
 class SimpleDrawerPanelLeft extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -85,41 +120,54 @@ class SimpleDrawerPanelLeft extends React.Component {
         isExpanded: false
       });
     };
-   }
+  }
 
   render() {
     const { isExpanded } = this.state;
     const panelContent = (
-      <DrawerPanelContent> 
+      <DrawerPanelContent>
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick}/>
+            <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded} position="left">
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+      </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 onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded} position="left">
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=Basic-inline
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
 
 class SimpleDrawerInlineContent extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -137,41 +185,54 @@ class SimpleDrawerInlineContent extends React.Component {
         isExpanded: false
       });
     };
-   }
+  }
 
   render() {
     const { isExpanded } = this.state;
     const panelContent = (
-      <DrawerPanelContent> 
+      <DrawerPanelContent>
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick}/>
+            <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded} isInline>
-              <DrawerContent panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+      </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 onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded} isInline>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=-Inline-panel-on-left
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
 
 class DrawerInlineContentPanelLeft extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -189,41 +250,54 @@ class DrawerInlineContentPanelLeft extends React.Component {
         isExpanded: false
       });
     };
-   }
+  }
 
   render() {
     const { isExpanded } = this.state;
     const panelContent = (
-      <DrawerPanelContent> 
+      <DrawerPanelContent>
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick}/>
+            <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded} isInline position='left'>
-              <DrawerContent panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+      </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 onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded} isInline position="left">
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=Stacked-content-body-elements
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
 
 class DrawerStackedContentBodyElements extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -241,7 +315,7 @@ class DrawerStackedContentBodyElements extends React.Component {
         isExpanded: false
       });
     };
-   }
+  }
 
   render() {
     const { isExpanded } = this.state;
@@ -249,35 +323,47 @@ class DrawerStackedContentBodyElements extends React.Component {
       <DrawerPanelContent>
         <DrawerHead>
           <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick}/>
+            <DrawerCloseButton onClick={this.onCloseClick} />
           </DrawerActions>
           drawer-panel
-        </DrawerHead> 
-        <DrawerPanelBody noPadding>drawer-panel with no padding</DrawerPanelBody> 
-        <DrawerPanelBody>drawer-panel</DrawerPanelBody> 
-      </DrawerPanelContent>);
-
-    return (<React.Fragment>
-            <Button onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded}>
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody>content-body</DrawerContentBody>
-                <DrawerContentBody hasPadding>content-body with padding</DrawerContentBody>
-                <DrawerContentBody>content-body</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+        </DrawerHead>
+        <DrawerPanelBody noPadding>drawer-panel with no padding</DrawerPanelBody>
+        <DrawerPanelBody>drawer-panel</DrawerPanelBody>
+      </DrawerPanelContent>
+    );
+
+    return (
+      <React.Fragment>
+        <Button onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded}>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>content-body</DrawerContentBody>
+            <DrawerContentBody hasPadding>content-body with padding</DrawerContentBody>
+            <DrawerContentBody>content-body</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=Modified-content-padding
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
 
 class DrawerModifiedContentPadding extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -290,46 +376,61 @@ class DrawerModifiedContentPadding extends React.Component {
       });
     };
 
-     this.onCloseClick = () => {
+    this.onCloseClick = () => {
       this.setState({
         isExpanded: false
       });
     };
-   }
+  }
 
   render() {
     const { isExpanded } = this.state;
     const panelContent = (
-      <DrawerPanelContent> 
+      <DrawerPanelContent>
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick}/>
+            <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded}>
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody hasPadding><b>Drawer content padding.</b> {drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+      </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 onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded}>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody hasPadding>
+              <b>Drawer content padding.</b> {drawerContent}
+            </DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=Modified-panel-padding
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
 
 class DrawerModifiedPanelPadding extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -347,93 +448,55 @@ class DrawerModifiedPanelPadding extends React.Component {
         isExpanded: false
       });
     };
-   }
-
-  render() {
-    const { isExpanded } = this.state;
-    const panelContent = (
-      <DrawerPanelContent> 
-        <DrawerHead noPadding>
-          <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded}>
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
   }
-}
-```
-
-```js title=Modified-panel-border
-import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, Button } from '@patternfly/react-core';
-
-class DrawerPanelBorder 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 hasBorder> 
-        <DrawerHead>
+      <DrawerPanelContent>
+        <DrawerHead noPadding>
           <span>drawer-panel</span>
           <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick}/>
+            <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded}>
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+      </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 onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded}>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=Additional-section-above-drawer-content
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerSection, Button } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerSection,
+  Button
+} from '@patternfly/react-core';
 
 class DrawerWithSection extends React.Component {
-
-   constructor(props) {
+  constructor(props) {
     super(props);
     this.state = {
       isExpanded: false
@@ -451,58 +514,73 @@ class DrawerWithSection extends React.Component {
         isExpanded: false
       });
     };
-   }
+  }
 
   render() {
     const { isExpanded } = this.state;
     const panelContent = (
-      <DrawerPanelContent> 
+      <DrawerPanelContent>
         <DrawerHead>
           <span>drawer-panel</span>
           <DrawerActions>
-            <DrawerCloseButton onClick={this.onCloseClick}/>
+            <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 onClick={this.onClick}>Toggle Drawer</Button>
-            <Drawer isExpanded={isExpanded}>
-              <DrawerSection>drawer-section</DrawerSection>
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>
-        </React.Fragment>);
+      </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 onClick={this.onClick}>Toggle Drawer</Button>
+        <Drawer isExpanded={isExpanded}>
+          <DrawerSection>drawer-section</DrawerSection>
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </React.Fragment>
+    );
   }
 }
 ```
 
 ```js title=Static-drawer
 import React, { ReactFragment } from 'react';
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerContentBody, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerPanelBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton
+} from '@patternfly/react-core';
 
 StaticDrawer = () => {
   const panelContent = (
-    <DrawerPanelContent> 
+    <DrawerPanelContent>
       <DrawerHead>
         <span>drawer-panel</span>
         <DrawerActions>
-          <DrawerCloseButton onClick={this.onClick}/>
+          <DrawerCloseButton onClick={this.onClick} />
         </DrawerActions>
       </DrawerHead>
-    </DrawerPanelContent>);
+    </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.";
+  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 (
     <Drawer isStatic>
-      <DrawerContent  panelContent={panelContent}>
+      <DrawerContent panelContent={panelContent}>
         <DrawerContentBody>{drawerContent}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );
-}
-```
\ No newline at end of file
+};
+```