Drawer: updates to support master/detail layout

[mcoker]

https://github.com/patternfly/patternfly-next/pull/2520/files

• adds an element .pf-c-drawer__content-body inside of .pf-c-drawer__content to hold the content passed to the __content element
• adds aria-hidden="true" to the __panel element if the drawer is not expanded
• <DrawerContent> should support a prop to add padding to the content, which applies .pf-m-padding to .pf-c-drawer__content-body
• <Drawer> should support...
  • prop to position the panel to slide out from the left by applying .pf-m-panel-left to .pf-c-drawer
  • prop to use a line as the divider between the panel and content (instead of a box shadow) by applying .pf-m-divider to .pf-c-drawer

cc @mattnolting

[mattnolting]

• adds aria-hidden="true" to the __panel element if the drawer is not expanded

use hidden instead of aria-hidd="true"

• prop to use a line as the divider between the panel and content (instead of a box shadow) by applying .pf-m-divider to .pf-c-drawer

updated this to .pf-m-border

<Drawer> additions

• .pf-c-drawer__action.pf-c-drawer__close (the container for drawer close button) that can be used anywhere within a __body
• add 100 to .pf-m-width-{25, 33, 50, 66, 75}{-on-[breakpoint]}
• <Drawer> should support
  • .pf-m-no-border
  • .pf-m-static

<Drawer> structural updates

• addition of .pf-c-drawer__header .pf-c-drawer__section (generic section) and .pf-c-drawer__main as primary section of drawer

<div class="pf-c-drawer">
-  <div class="pf-c-drawer__header" />(Optional for developer)
+  <div class="pf-c-drawer__section" />(Optional for developer)
  <div class="pf-c-drawer__main">
    <div class="pf-c-drawer__content">
-      <div class="pf-c-drawer__content-body" />
+      <div class="pf-c-drawer__body" />
    </div>
    <div class="pf-c-drawer__panel">
-      <div class="pf-c-drawer__panel-body" />
+      <div class="pf-c-drawer__body" />
+        <div class="pf-c-drawer__head">
+          <div class="pf-c-drawer__actions">
+            <div class="pf-c-drawer__close" />
+          </div>
+       </div>
    </div>
  </div>
</div>

[mattnolting]

open PR: patternfly/patternfly#2645

[mattnolting]

Update to updates
<Drawer> additions

• .pf-c-drawer__action (the container for drawer close button) that can be used anywhere within a __body

.pf-c-drawer__action is now .pf-c-drawer__close

.pf-c-drawer__header is now .pf-c-drawer__section

<div class="pf-c-drawer">
  <div class="pf-c-drawer__section" />
  <div class="pf-c-drawer__main">
    <div class="pf-c-drawer__content">
-      <div class="pf-c-drawer__head" />
+      <div class="pf-c-drawer__body" />
+         <div class="pf-c-drawer__head" />
    </div>
    <div class="pf-c-drawer__panel">
-      <div class="pf-c-drawer__head" />
-      <div class="pf-c-drawer__header" />
      <div class="pf-c-drawer__body" />
    </div>
  </div>
</div>

Head , header and __body are is shared and can go inside .pf-c-drawer__content or .pf-c-drawer__panel

- <div class="pf-c-drawer__head" />
- <div class="pf-c-drawer__header" />
<div class="pf-c-drawer__body" />
+ <div class="pf-c-drawer__head"> <!-- used to position title text and close button - optional -->
</div>

.pf-m-padding and .pf-m-no-padding applyies to pf-c-drawer__head, pf-c-drawer__header and pf-c-drawer__body.