fullscreen examples should have 100% height

packages/patternfly-4/react-core/src/demos/PageLayout/PageLayout.md

@@ -11,12 +11,14 @@ import RawPageLayoutGroupsNav from '!!raw-loader!./examples/PageLayoutGroupsNav'
 import RawPageLayoutHorizontalNav from '!!raw-loader!./examples/PageLayoutHorizontalNav';
 import RawPageLayoutManualNav from '!!raw-loader!./examples/PageLayoutManualNav';
 
-All but the last example set the isManagedSidebar prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the isManagedSidebar prop and instead:
+- All but the last example set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
-- Add an onNavToggle callback to PageHeader
-- Pass in a boolean into the isNavOpen prop to PageSidebar
+  1. Add an onNavToggle callback to PageHeader
+  1. Pass in a boolean into the isNavOpen prop to PageSidebar
 
-The last example demonstrates this.
+  The last example demonstrates this.
+
+- To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to `100%`
 
 ## Using simple navigation
 

packages/patternfly-4/react-docs/gatsby-browser.js

@@ -1,5 +1,7 @@
 // Import global CSS files here. Have no remorse.
 // https://www.gatsbyjs.org/docs/creating-global-styles
+import './src/styles/text.css';
+import './src/styles/workspace.css';
 import './static/base.css'; // eslint-disable-line import/no-unresolved
 import '@patternfly-safe/patternfly/patternfly.css';
 // Add experimental styles here and in eslintrc.js for the moment.  Once they have been moved out of experimental remove the CSS here and in .eslintrc.js

packages/patternfly-4/react-docs/src/components/LinkPreview.js

@@ -10,9 +10,11 @@ const LinkPreview = ({ name, path, text }) => {
   return (
     <>
       {text && <p>{text}</p>}
-      <a href={split[split.length - 1].toLowerCase()} target="_blank" rel="noopener noreferrer">
-        {name}
-      </a>
+      <h4 data-pf-content className="pf-u-my-md">
+        <a href={split[split.length - 1].toLowerCase()} target="_blank" rel="noopener noreferrer">
+          {name}
+        </a>
+      </h4>
     </>
   );
 };

packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js

@@ -97,7 +97,7 @@ export class LiveEdit extends React.Component {
           <LiveProvider code={this.code} scope={this.scope} transformCode={transformCode}>
             <LivePreview className="ws-preview" />
             {Toolbar}
-            {this.state.codeOpen && <LiveEditor className="code" />}
+            {this.state.codeOpen && <LiveEditor className="code" style={{ backgroundColor: 'black' }} />}
             <LiveError />
           </LiveProvider>
         </div>
@@ -106,7 +106,7 @@ export class LiveEdit extends React.Component {
       return (
         <LiveProvider code={this.code} disabled>
           {Toolbar}
-          {this.state.codeOpen && <LiveEditor contentEditable={false} />}
+          {this.state.codeOpen && <LiveEditor contentEditable={false} style={{ backgroundColor: 'black' }} />}
         </LiveProvider>
       );
     }

packages/patternfly-4/react-docs/src/components/mdx-renderer.js

@@ -27,7 +27,6 @@ export function MDXRenderer({ scope, components, children, ...props }) {
 
   const End = fn({}, ...values);
   const element = React.createElement(End, { components: mdxComponents, ...props });
-
   // Inject our scope into our custom <code> component.
   const propComponents = element.props.components;
   if (propComponents && propComponents.code) {

packages/patternfly-4/react-docs/src/styles/text.css

@@ -0,0 +1,256 @@
+.theme-pf-c-content {
+  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
+  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--Color: var(--pf-global--Color--100);
+  --pf-c-content--heading--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-content--h1--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h1--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h1--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-content--h1--FontSize: var(--pf-global--FontSize--2xl);
+  --pf-c-content--h1--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h2--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h2--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-content--h2--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-content--h2--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h3--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h3--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h3--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h3--FontSize: var(--pf-global--FontSize--lg);
+  --pf-c-content--h3--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h4--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h4--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h4--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h4--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--h5--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h5--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h5--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h5--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--h6--MarginTop: var(--pf-global--spacer--lg);
+  --pf-c-content--h6--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-content--h6--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--h6--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--small--MarginBottom: var(--pf-global--spacer--md);
+  --pf-c-content--small--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--small--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-content--small--Color: var(--pf-global--Color--200);
+  --pf-c-content--small--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--a--Color: var(--pf-global--link--Color);
+  --pf-c-content--a--TextDecoration: var(--pf-global--link--TextDecoration);
+  --pf-c-content--a--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-content--a--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
+  --pf-c-content--blockquote--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-content--blockquote--FontWeight: var(--pf-global--FontWeight--light);
+  --pf-c-content--blockquote--Color: var(--pf-global--Color--200);
+  --pf-c-content--blockquote--BorderLeftColor: var(--pf-global--BorderColor--100);
+  --pf-c-content--blockquote--BorderLeftWidth: var(--pf-global--BorderWidth--lg);
+  --pf-c-content--ol--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ol--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-content--ol--MarginLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ol--nested--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-content--ol--nested--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-content--ul--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ul--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-content--ul--MarginLeft: var(--pf-global--spacer--lg);
+  --pf-c-content--ul--nested--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-content--ul--nested--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-content--ul--ListStyle: var(--pf-global--ListStyle);
+  --pf-c-content--li--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-content--dl--ColumnGap: var(--pf-global--spacer--2xl);
+  --pf-c-content--dl--RowGap: var(--pf-global--spacer--md);
+  --pf-c-content--dt--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-content--dt--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-content--dt--sm--MarginTop: 0;
+  --pf-c-content--hr--Height: var(--pf-global--BorderWidth--sm);
+  --pf-c-content--hr--BackgroundColor: var(--pf-global--BorderColor--100);
+}
+[data-pf-content] {
+  font-size: var(--pf-c-content--FontSize);
+  line-height: var(--pf-c-content--LineHeight);
+  color: var(--pf-c-content--Color);
+}
+.theme-pf-c-content a[data-pf-content] {
+  color: var(--pf-c-content--a--Color);
+  text-decoration: var(--pf-c-content--a--TextDecoration);
+}
+.theme-pf-c-content a[data-pf-content]:hover {
+  --pf-c-content--a--Color: var(--pf-c-content--a--hover--Color);
+  --pf-c-content--a--TextDecoration: var(--pf-c-content--a--hover--TextDecoration);
+}
+.theme-pf-c-content li[data-pf-content] + li {
+  margin-top: var(--pf-c-content--li--MarginTop);
+}
+.theme-pf-c-content p[data-pf-content]:not(:last-child),
+.theme-pf-c-content dl[data-pf-content]:not(:last-child),
+.theme-pf-c-content ol[data-pf-content]:not(:last-child),
+.theme-pf-c-content ul[data-pf-content]:not(:last-child),
+.theme-pf-c-content blockquote[data-pf-content]:not(:last-child),
+.theme-pf-c-content small[data-pf-content]:not(:last-child),
+.theme-pf-c-content pre[data-pf-content]:not(:last-child),
+.theme-pf-c-content table[data-pf-content]:not(:last-child),
+.theme-pf-c-content hr[data-pf-content]:not(:last-child) {
+  margin-bottom: var(--pf-c-content--MarginBottom);
+}
+.theme-pf-c-content h1[data-pf-content],
+.theme-pf-c-content h2[data-pf-content],
+.theme-pf-c-content h3[data-pf-content],
+.theme-pf-c-content h4[data-pf-content],
+.theme-pf-c-content h5[data-pf-content],
+.theme-pf-c-content h6[data-pf-content] {
+  margin: 0;
+  font-family: var(--pf-c-content--heading--FontFamily);
+}
+.theme-pf-c-content ol[data-pf-content],
+.theme-pf-c-content ul[data-pf-content] {
+  margin: 0;
+}
+.theme-pf-c-content h1[data-pf-content] {
+  margin-bottom: var(--pf-c-content--h1--MarginBottom);
+  font-size: var(--pf-c-content--h1--FontSize);
+  font-weight: var(--pf-c-content--h1--FontWeight);
+  line-height: var(--pf-c-content--h1--LineHeight);
+}
+.theme-pf-c-content h1[data-pf-content]:not(:first-child) {
+  margin-top: var(--pf-c-content--h1--MarginTop);
+}
+.theme-pf-c-content h2[data-pf-content] {
+  margin-bottom: var(--pf-c-content--h2--MarginBottom);
+  font-size: var(--pf-c-content--h2--FontSize);
+  font-weight: var(--pf-c-content--h2--FontWeight);
+  line-height: var(--pf-c-content--h2--LineHeight);
+}
+.theme-pf-c-content h2[data-pf-content]:not(:first-child) {
+  margin-top: var(--pf-c-content--h2--MarginTop);
+}
+.theme-pf-c-content h3[data-pf-content] {
+  margin-bottom: var(--pf-c-content--h3--MarginBottom);
+  font-size: var(--pf-c-content--h3--FontSize);
+  font-weight: var(--pf-c-content--h3--FontWeight);
+  line-height: var(--pf-c-content--h3--LineHeight);
+}
+.theme-pf-c-content h3[data-pf-content]:not(:first-child) {
+  margin-top: var(--pf-c-content--h3--MarginTop);
+}
+.theme-pf-c-content h4[data-pf-content] {
+  margin-bottom: var(--pf-c-content--h4--MarginBottom);
+  font-size: var(--pf-c-content--h4--FontSize);
+  font-weight: var(--pf-c-content--h4--FontWeight);
+  line-height: var(--pf-c-content--h4--LineHeight);
+}
+.theme-pf-c-content h4[data-pf-content]:not(:first-child) {
+  margin-top: var(--pf-c-content--h4--MarginTop);
+}
+.theme-pf-c-content h5[data-pf-content] {
+  margin-bottom: var(--pf-c-content--h5--MarginBottom);
+  font-size: var(--pf-c-content--h5--FontSize);
+  font-weight: var(--pf-c-content--h5--FontWeight);
+  line-height: var(--pf-c-content--h5--LineHeight);
+}
+.theme-pf-c-content h5[data-pf-content]:not(:first-child) {
+  margin-top: var(--pf-c-content--h5--MarginTop);
+}
+.theme-pf-c-content h6[data-pf-content] {
+  margin-bottom: var(--pf-c-content--h6--MarginBottom);
+  font-size: var(--pf-c-content--h6--FontSize);
+  font-weight: var(--pf-c-content--h6--FontWeight);
+  line-height: var(--pf-c-content--h6--LineHeight);
+}
+.theme-pf-c-content h6[data-pf-content]:not(:first-child) {
+  margin-top: var(--pf-c-content--h6--MarginTop);
+}
+.theme-pf-c-content small[data-pf-content] {
+  display: block;
+  font-size: var(--pf-c-content--small--FontSize);
+  line-height: var(--pf-c-content--small--LineHeight);
+  color: var(--pf-c-content--small--Color);
+}
+.theme-pf-c-content small[data-pf-content]:not(:last-child) {
+  margin-bottom: var(--pf-c-content--small--MarginBottom);
+}
+.theme-pf-c-content blockquote[data-pf-content] {
+  padding: var(--pf-c-content--blockquote--PaddingTop) var(--pf-c-content--blockquote--PaddingRight)
+    var(--pf-c-content--blockquote--PaddingBottom) var(--pf-c-content--blockquote--PaddingLeft);
+  font-weight: var(--pf-c-content--blockquote--FontWeight);
+  color: var(--pf-c-content--blockquote--Color);
+  border-left: var(--pf-c-content--blockquote--BorderLeftWidth) solid var(--pf-c-content--blockquote--BorderLeftColor);
+}
+.theme-pf-c-content hr[data-pf-content] {
+  height: var(--pf-c-content--hr--Height);
+  background-color: var(--pf-c-content--hr--BackgroundColor);
+  border: none;
+}
+.theme-pf-c-content ol[data-pf-content] {
+  padding-left: var(--pf-c-content--ol--PaddingLeft);
+  margin-top: var(--pf-c-content--ol--MarginTop);
+  margin-left: var(--pf-c-content--ol--MarginLeft);
+}
+.theme-pf-c-content ol[data-pf-content] ul {
+  --pf-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
+  --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
+}
+.theme-pf-c-content ol[data-pf-content] ol {
+  --pf-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
+  --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
+}
+.theme-pf-c-content ul[data-pf-content] {
+  padding-left: var(--pf-c-content--ul--PaddingLeft);
+  margin-top: var(--pf-c-content--ul--MarginTop);
+  margin-left: var(--pf-c-content--ul--MarginLeft);
+  list-style: var(--pf-c-content--ul--ListStyle);
+}
+.theme-pf-c-content ul[data-pf-content] ul {
+  --pf-c-content--ul--MarginTop: var(--pf-c-content--ul--nested--MarginTop);
+  --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
+}
+.theme-pf-c-content ul[data-pf-content] ol {
+  --pf-c-content--ol--MarginTop: var(--pf-c-content--ol--nested--MarginTop);
+  --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
+}
+.theme-pf-c-content dl[data-pf-content] {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+@media screen and (min-width: 576px) {
+  .theme-pf-c-content dl[data-pf-content] {
+    grid-template: auto / auto 1fr;
+    grid-column-gap: var(--pf-c-content--dl--ColumnGap);
+    grid-row-gap: var(--pf-c-content--dl--RowGap);
+  }
+}
+.theme-pf-c-content dt[data-pf-content] {
+  font-weight: var(--pf-c-content--dt--FontWeight);
+}
+.theme-pf-c-content dt[data-pf-content]:not(:first-child) {
+  margin-top: var(--pf-c-content--dt--MarginTop);
+}
+@media screen and (min-width: 576px) {
+  .theme-pf-c-content dt[data-pf-content]:not(:first-child) {
+    --pf-c-content--dt--MarginTop: var(--pf-c-content--dt--sm--MarginTop);
+  }
+}
+@media screen and (min-width: 576px) {
+  .theme-pf-c-content dt[data-pf-content] {
+    grid-column: 1;
+  }
+}
+@media screen and (min-width: 576px) {
+  .theme-pf-c-content dd[data-pf-content] {
+    grid-column: 2;
+  }
+}
+
+.pf-m-redhat-font .theme-pf-c-content {
+  --pf-c-content--h2--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-content--blockquote--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h4--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h5--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-content--h6--FontWeight: var(--pf-global--FontWeight--normal);
+}

packages/patternfly-4/react-docs/src/styles/workspace.css

@@ -0,0 +1,7 @@
+#___gatsby {
+  height: 100%;
+}
+
+#___gatsby > div {
+  height: 100%;
+}

packages/patternfly-4/react-docs/src/templates/mdxTemplate.js

@@ -3,15 +3,27 @@ import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 import SidebarLayout from './sidebarLayout';
 import { CSSVars, PropsTable, LiveEdit } from '../components/componentDocs';
-import { Title, PageSection } from '@patternfly-safe/react-core';
+import { Title, PageSection, Text, TextList, TextListItem } from '@patternfly-safe/react-core';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from '../components/mdx-renderer';
 
 const components = {
+  wrapper: componentProps => <div className="theme-pf-c-content" {...componentProps} />,
   code: LiveEdit,
-  pre: React.Fragment
+  pre: React.Fragment,
+  p: componentProps => <Text component="p" {...componentProps} />,
+  blockquote: componentProps => <Text component="blockquote" {...componentProps} />,
+  a: componentProps => <Text component="a" {...componentProps} />,
+  ul: componentProps => <TextList {...componentProps} />,
+  ol: componentProps => <TextList component="ol" {...componentProps} />,
+  li: componentProps => <TextListItem {...componentProps} />,
+  inlineCode: componentProps => <strong {...componentProps} />
 };
 
+for (let i = 1; i <= 6; i++) {
+  components[`h${i}`] = componentProps => <Text component={`h${i}`} {...componentProps} />;
+}
+
 const MdxTemplate = ({ data }) => {
   const { cssPrefix } = data.mdx.frontmatter;
   const section = data.mdx.frontmatter.section || 'component';
@@ -20,7 +32,7 @@ const MdxTemplate = ({ data }) => {
   return (
     <SidebarLayout>
       <PageSection>
-        <Title size="4xl">
+        <Title size="4xl" className="pf-u-mb-lg">
           {data.mdx.frontmatter.title} {section.indexOf('-') === -1 ? section : ''}
         </Title>
         <MDXProvider components={components}>