patternfly · redallen · Jun 13, 2019 · Jun 4, 2019 · Jun 5, 2019 · Jun 5, 2019
diff --git a/.travis.yml b/.travis.yml
@@ -13,6 +13,6 @@ before_install:
 - sudo apt-get install -y python3-pip
 - pip3 install --user awscli
 script:
-- yarn build
+- travis_wait 30 yarn build
 - bash ./scripts/prepare-deploy.sh
 - if [[ -d out && "$TRAVIS_BRANCH" == "master" && "$TRAVIS_PULL_REQUEST" == "false" ]]; then bash ./scripts/deploy.sh; fi;
diff --git a/packages/patternfly-4/_repos/react-example-styles.css b/packages/patternfly-4/_repos/react-example-styles.css
@@ -0,0 +1,134 @@
+.ws-preview > * .area-chart-overflow svg {
+  overflow: visible; }
+
+.ws-preview > * .bar-chart-container {
+  width: 450px; }
+
+.ws-preview > * .donut-chart-container {
+  height: 230px;
+  width: 230px; }
+
+.ws-preview > * .donut-chart-inline {
+  display: inline-flex; }
+
+.ws-preview > * .donut-threshold-chart-horz {
+  height: 230px;
+  width: 492px; }
+
+.ws-preview > * .donut-threshold-chart-horz-sm {
+  height: 230px;
+  width: 475px; }
+
+.ws-preview > * .donut-threshold-chart-vert {
+  height: 325px;
+  width: 275px; }
+
+.ws-preview > * .donut-utilization-chart {
+  height: 230px;
+  width: 230px; }
+
+.ws-preview > * .donut-utilization-chart-horz {
+  height: 230px;
+  width: 435px; }
+
+.ws-preview > * .donut-utilization-chart-horz-sm {
+  height: 230px;
+  width: 425px; }
+
+.ws-preview > * .donut-utilization-chart-vert {
+  height: 275px;
+  width: 300px; }
+
+.ws-preview > * .line-chart-container {
+  width: 450px; }
+
+.ws-preview > * .line-chart-inline {
+  display: inline-flex; }
+
+.ws-preview > * .line-chart-overflow svg {
+  overflow: visible; }
+
+.ws-preview > * .pie-chart-container {
+  height: 230px;
+  width: 230px; }
+
+.ws-preview > * .pie-chart-inline {
+  display: inline-flex; }
+
+.ws-preview > * .stack-chart-container {
+  width: 450px; }
+
+.ws-preview > .pf-c-alert {
+  margin-bottom: 0.5rem; }
+
+.ws-preview .pf-l-bullseye {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-bullseye > div {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-gallery {
+  padding: 1rem; }
+
+.ws-preview .pf-l-gallery > div {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-grid {
+  min-height: 75px;
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-grid > .pf-l-grid__item {
+  min-height: 75px;
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview {
+  padding: 9px; }
+  .ws-preview .pf-l-level {
+    min-height: 160px;
+    padding: 9px;
+    border-width: 2px;
+    border-style: dashed; }
+  .ws-preview .pf-l-level > div {
+    padding: 9px;
+    border-width: 2px;
+    border-style: dashed; }
+
+.ws-preview .pf-l-split {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-split > .pf-l-split__item {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-stack {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-stack > .pf-l-stack__item {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-toolbar {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
+
+.ws-preview .pf-l-toolbar > div {
+  padding: 1rem;
+  border-width: 2px;
+  border-style: dashed; }
diff --git a/packages/patternfly-4/package.json b/packages/patternfly-4/package.json
@@ -5,17 +5,18 @@
   "author": "Red Hat",
   "scripts": {
     "build:babel": "cross-env babel _repos/react-core/src --out-dir dist/esm --extensions \".js,jsx,.ts,.tsx\"",
-    "build": "gatsby build --prefix-paths",
-    "build:root": "gatsby build",
+    "build": "node --max_old_space_size=4096 ./node_modules/.bin/gatsby build --prefix-paths",
+    "build:root": "node --max_old_space_size=4096 ./node_modules/.bin/gatsby build",
     "develop": "gatsby develop",
     "start": "gatsby develop",
     "format": "prettier --write \"src/**/*.js\"",
     "clean": "gatsby clean",
-    "repos": "node scripts/clean && yarn patternfly-next && yarn patternfly-react && yarn patternfly-styles",
+    "repos": "node scripts/clean && yarn patternfly-next && yarn patternfly-react && yarn patternfly-styles && yarn compile-examples-css",
     "patternfly-next": "node ./scripts/patternfly-next.js",
     "patternfly-react": "node ./scripts/patternfly-react.js",
     "patternfly-styles": "node ./scripts/copyStyles.js",
-    "preview-screenshots": "node ./scripts/previewScreenshots.js"
+    "preview-screenshots": "node ./scripts/previewScreenshots.js",
+    "compile-examples-css": "node-sass --importer ../../node_modules/node-sass-glob-importer/dist/cli.js -o _repos src/react-example-styles.scss"
   },
   "dependencies": {
     "@emotion/core": "^10.0.10",
@@ -41,7 +42,7 @@
     "exenv": "^1.2.2",
     "file-saver": "^2.0.1",
     "find-in-files": "^0.5.0",
-    "gatsby": "~2.6.3",
+    "gatsby": "~2.9.2",
     "gatsby-image": "^2.1.0",
     "gatsby-mdx": "0.6.3",
     "gatsby-plugin-catch-links": "^2.0.14",
@@ -79,8 +80,10 @@
     "react-icons": "^3.6.1",
     "react-live": "2.0.1",
     "react-pose": "^4.0.8",
+    "react-shadow": "^16.3.2",
     "sass-loader": "7.1.0",
-    "style-loader": "0.23.1"
+    "style-loader": "0.23.1",
+    "to-string-loader": "^1.1.5"
   },
   "keywords": [
     "gatsby"

diff --git a/packages/patternfly-4/src/components/ShadowDomPreview.js b/packages/patternfly-4/src/components/ShadowDomPreview.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import ShadowDOM from 'react-shadow';
+import PropTypes from 'prop-types';
+import core from '!raw!@patternfly/patternfly/patternfly.min.css';
+import coreAddons from '!raw!@patternfly/patternfly/patternfly-addons.css';
+import coreIcons from '!raw!@patternfly/patternfly/patternfly-icons.css';
+import coreExampleStyles from '!!to-string-loader!css-loader!sass-loader!./_core/Preview/styles.scss';
+import reactBase from '!raw!@patternfly/react-core/dist/styles/base.css';
+import reactExampleStyles from '!raw!../../_repos/react-example-styles.css';
+import { Location } from '@reach/router';
+
+const styles = `
+  .ws-example { 
+    padding: calc(1rem - 9px);
+    background-color: #fff;
+  }
+`;
+
+// react Toolbar, ToolbarGroup, ToolbarItem, ToolbarSection all inject this css using emotion for some reason
+const reactToolbarStyles = `
+.pf-l-toolbar {
+--pf-l-toolbar__section--MarginTop: var(--pf-global--spacer--md);
+--pf-l-toolbar__group--MarginRight: var(--pf-global--spacer--xl);
+--pf-l-toolbar__group--MarginLeft: var(--pf-global--spacer--xl);
+--pf-l-toolbar__item--MarginRight: var(--pf-global--spacer--md);
+--pf-l-toolbar__item--MarginLeft: var(--pf-global--spacer--md); }
+
+.pf-l-toolbar,
+.pf-l-toolbar__section,
+.pf-l-toolbar__group {
+display: flex;
+flex-wrap: wrap;
+align-items: center; }
+
+.pf-l-toolbar__section {
+flex-basis: 100%; }
+.pf-l-toolbar__section:not(:first-child) {
+margin-top: var(--pf-l-toolbar__section--MarginTop); }
+
+.pf-l-toolbar__group:not(:last-child) {
+margin-right: var(--pf-l-toolbar__group--MarginRight); }
+
+.pf-l-toolbar__item .pf-l-toolbar:not(:last-child) {
+margin-right: var(--pf-l-toolbar__item--MarginRight); }
+`;
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  isReact: PropTypes.bool,
+  isFull: PropTypes.bool
+};
+
+const defaultProps = {
+  className: '',
+  isReact: false,
+  isFull: false
+};
+
+const ShadowDomPreview = ({ children, className, isReact, isFull, ...props }) => {
+  return (
+    <Location>
+        {({ location }) => {
+          const currentPath = location.pathname;
+          // TODO: Update dependency of tippy in react-core as newer version supports shadow dom
+          // Don't shadow dom paths that use tooltip until that is done
+          if (
+            currentPath.indexOf('/documentation/react/components/popover') > -1 || 
+            currentPath.indexOf('/documentation/react/components/tooltip') > -1 ||
+            currentPath.indexOf('/documentation/react/components/applicationlauncher') > -1 ||
+            currentPath.indexOf('/documentation/react/components/chipgroup') > -1 ||
+            currentPath.indexOf('/documentation/react/components/clipboardcopy') > -1
+          ) {
+            return children;
+          }
+          return (
+            <ShadowDOM {...props}>
+              <div>
+                {isReact && (
+                  <>
+                    <style type="text/css" dangerouslySetInnerHTML={{__html: reactBase}} />
+                    <style type="text/css" dangerouslySetInnerHTML={{__html: reactToolbarStyles}} />
+                    <style type="text/css" dangerouslySetInnerHTML={{__html: reactExampleStyles}} />
+                  </>
+                )}
+                {!isReact && <style type="text/css" dangerouslySetInnerHTML={{__html: coreExampleStyles}} />}
+                <>
+                  {/* Update assets path */}
+                  <style type="text/css" dangerouslySetInnerHTML={{__html: core.replace(/url\(assets\//g, 'url(/assets/')}} />
+                  <style type="text/css" dangerouslySetInnerHTML={{__html: coreAddons}} />
+                  {/* patternfly-icons assumes classes are nested under html tag, doesn't work in shadow dom so we strip them out below */}
+                  <style type="text/css" dangerouslySetInnerHTML={{__html: coreIcons.replace(/html\s/g, '')}} />
+                </>
+                {!isFull && <style type="text/css">{styles}</style>}
+                <div className={children ? `ws-example ${className}` : className}>
+                  {children}
+                </div>
+              </div>
+            </ShadowDOM>
+          )
+        }}
+    </Location>
+)};
+
+ShadowDomPreview.propTypes = propTypes;
+ShadowDomPreview.defaultProps = defaultProps;
+
+export default ShadowDomPreview;
diff --git a/packages/patternfly-4/src/components/_core/Documentation/index.js b/packages/patternfly-4/src/components/_core/Documentation/index.js
@@ -10,6 +10,8 @@ import SEO from '../../seo';
 import './styles.scss';
 import Tokens from '../../css-variables';
 
+export const CoreContext = React.createContext({});
+
 export default class Documentation extends React.Component {
   constructor(props) {
     super(props);
@@ -32,45 +34,49 @@ export default class Documentation extends React.Component {
     }
     const HTML_DOCS = { __html: changeHeadingLevel(docs, 'h4') };
     return !this.state.isFull ? (
-      <Layout sideNav={<SideNav />}>
-        <SEO title="HTML" />
-        <PageSection variant={PageSectionVariants.light} className="pf-site-background-medium">
-          <AutoLinkHeader size="md" is="h1" className="pf4-site-framework-title">HTML</AutoLinkHeader>
-          <AutoLinkHeader size="4xl" is="h2" className="pf-u-mt-sm pf-u-mb-md">{heading}</AutoLinkHeader>
-          {data && data.pageContext && data.pageContext.description &&
-            <Section className={className}>
-              <MDXRenderer>
-                {data.pageContext.description.code.body}
-              </MDXRenderer>
+      <CoreContext.Provider value={{ coreClass: className || '' }}>
+        <Layout sideNav={<SideNav />}>
+          <SEO title="HTML" />
+          <PageSection variant={PageSectionVariants.light} className="pf-site-background-medium">
+            <AutoLinkHeader size="md" is="h1" className="pf4-site-framework-title">HTML</AutoLinkHeader>
+            <AutoLinkHeader size="4xl" is="h2" className="pf-u-mt-sm pf-u-mb-md">{heading}</AutoLinkHeader>
+            {data && data.pageContext && data.pageContext.description &&
+              <Section className={className}>
+                <MDXRenderer>
+                  {data.pageContext.description.code.body}
+                </MDXRenderer>
+              </Section>
+            }
+            <Section>
+              <AutoLinkHeader anchorOnly className="pf-site-toc">Examples</AutoLinkHeader>
+              <AutoLinkHeader anchorOnly className="pf-site-toc">Documentation</AutoLinkHeader>
+              {variablesRoot && <AutoLinkHeader anchorOnly className="pf-site-toc">CSS Variables</AutoLinkHeader>}
             </Section>
-          }
-          <Section>
-            <AutoLinkHeader anchorOnly className="pf-site-toc">Examples</AutoLinkHeader>
-            <AutoLinkHeader anchorOnly className="pf-site-toc">Documentation</AutoLinkHeader>
-            {variablesRoot && <AutoLinkHeader anchorOnly className="pf-site-toc">CSS Variables</AutoLinkHeader>}
-          </Section>
-          <Section title="Examples" headingLevel="h3" className={className}>
-            {children}
-          </Section>
-        </PageSection>
-        <PageSection variant={PageSectionVariants.light} className="pf-site-background-medium">
-          <Section title="Documentation" headingLevel="h3">
-            <div className="Documentation Documentation__docsection" dangerouslySetInnerHTML={HTML_DOCS} />
-          </Section>
-        </PageSection>
-        {variablesRoot && <PageSection variant={PageSectionVariants.light} className="pf-site-background-medium">
-          <Section title="CSS Variables" headingLevel="h3">
-            <Tokens variables={variablesRoot} />
-          </Section>
-        </PageSection>}
-      </Layout>
+            <Section title="Examples" headingLevel="h3">
+              {children}
+            </Section>
+          </PageSection>
+          <PageSection variant={PageSectionVariants.light} className="pf-site-background-medium">
+            <Section title="Documentation" headingLevel="h3">
+              <div className="Documentation Documentation__docsection" dangerouslySetInnerHTML={HTML_DOCS} />
+            </Section>
+          </PageSection>
+          {variablesRoot && <PageSection variant={PageSectionVariants.light} className="pf-site-background-medium">
+            <Section title="CSS Variables" headingLevel="h3">
+              <Tokens variables={variablesRoot} />
+            </Section>
+          </PageSection>}
+        </Layout>
+      </CoreContext.Provider>
     ) : (
-      <FullPageExampleLayout>
-        <div className={className}>
-          <h1 className="pf-screen-reader">{this.props.heading} full example</h1>
-          {children}
-        </div>
-      </FullPageExampleLayout>
+      <CoreContext.Provider value={{ coreClass: className || '' }}>
+        <FullPageExampleLayout>
+          <div className={className}>
+            <h1 className="pf-screen-reader">{this.props.heading} full example</h1>
+            {children}
+          </div>
+        </FullPageExampleLayout>
+      </CoreContext.Provider>
     );
   }
 }