diff --git a/packages/patternfly-4/react-core/src/components/Form/ActionGroup.js b/packages/patternfly-4/react-core/src/components/Form/ActionGroup.js
index ca9df67147b..003a30f12e8 100644
--- a/packages/patternfly-4/react-core/src/components/Form/ActionGroup.js
+++ b/packages/patternfly-4/react-core/src/components/Form/ActionGroup.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Form/form.css';
+import styles from '@patternfly/patternfly/components/Form/form.css';
import { css, getModifier } from '@patternfly/react-styles';
import { FormContext } from '../Form/FormContext';
diff --git a/packages/patternfly-4/react-core/src/components/Form/Form.js b/packages/patternfly-4/react-core/src/components/Form/Form.js
index 49f6ec72d65..f4b7306c545 100644
--- a/packages/patternfly-4/react-core/src/components/Form/Form.js
+++ b/packages/patternfly-4/react-core/src/components/Form/Form.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Form/form.css';
+import styles from '@patternfly/patternfly/components/Form/form.css';
import PropTypes from 'prop-types';
import { css } from '@patternfly/react-styles';
import { FormContext } from './FormContext';
diff --git a/packages/patternfly-4/react-core/src/components/Form/FormGroup.js b/packages/patternfly-4/react-core/src/components/Form/FormGroup.js
index 40d0e5742a5..8f2728bfa32 100644
--- a/packages/patternfly-4/react-core/src/components/Form/FormGroup.js
+++ b/packages/patternfly-4/react-core/src/components/Form/FormGroup.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Form/form.css';
+import styles from '@patternfly/patternfly/components/Form/form.css';
import { ASTERISK } from '../../internal/htmlConstants';
import { FormContext } from '../Form/FormContext';
import { css, getModifier } from '@patternfly/react-styles';
diff --git a/packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.js b/packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.js
index f7df9850284..e306f9fe5a9 100644
--- a/packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.js
+++ b/packages/patternfly-4/react-core/src/components/FormSelect/FormSelect.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/FormControl/form-control.css';
+import styles from '@patternfly/patternfly/components/FormControl/form-control.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/FormSelect/__snapshots__/FormSelect.test.js.snap b/packages/patternfly-4/react-core/src/components/FormSelect/__snapshots__/FormSelect.test.js.snap
index 89eb33ee1cd..96f5ffd128e 100644
--- a/packages/patternfly-4/react-core/src/components/FormSelect/__snapshots__/FormSelect.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/FormSelect/__snapshots__/FormSelect.test.js.snap
@@ -3,11 +3,11 @@
exports[`Disabled FormSelect input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -37,11 +37,11 @@ exports[`Disabled FormSelect input 1`] = `
exports[`FormSelect input with aria-label does not generate console error 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -71,11 +71,11 @@ exports[`FormSelect input with aria-label does not generate console error 1`] =
exports[`FormSelect input with id does not generate console error 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -106,11 +106,11 @@ exports[`FormSelect input with id does not generate console error 1`] = `
exports[`FormSelect input with no aria-label or id generates console error 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -140,11 +140,11 @@ exports[`FormSelect input with no aria-label or id generates console error 1`] =
exports[`Grouped FormSelect input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -230,11 +230,11 @@ exports[`Grouped FormSelect input 1`] = `
exports[`Simple FormSelect input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -306,11 +306,11 @@ exports[`Simple FormSelect input 1`] = `
exports[`invalid FormSelect input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -340,11 +340,11 @@ exports[`invalid FormSelect input 1`] = `
exports[`required FormSelect input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
diff --git a/packages/patternfly-4/react-core/src/components/Label/Label.js b/packages/patternfly-4/react-core/src/components/Label/Label.js
index 42214080672..55ef0927ccd 100644
--- a/packages/patternfly-4/react-core/src/components/Label/Label.js
+++ b/packages/patternfly-4/react-core/src/components/Label/Label.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Label/label.css';
+import styles from '@patternfly/patternfly/components/Label/label.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/List/List.js b/packages/patternfly-4/react-core/src/components/List/List.js
index 277ff7562f0..d73d1ecbdfa 100644
--- a/packages/patternfly-4/react-core/src/components/List/List.js
+++ b/packages/patternfly-4/react-core/src/components/List/List.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/List/list.css';
+import styles from '@patternfly/patternfly/components/List/list.css';
import { css, getModifier } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/Login.js b/packages/patternfly-4/react-core/src/components/LoginPage/Login.js
index 2839d1a32a5..20443d324cb 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/Login.js
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/Login.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Login/login.css';
+import styles from '@patternfly/patternfly/components/Login/login.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginFooter.js b/packages/patternfly-4/react-core/src/components/LoginPage/LoginFooter.js
index 56caaf21341..387333f818e 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/LoginFooter.js
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/LoginFooter.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Login/login.css';
+import styles from '@patternfly/patternfly/components/Login/login.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginHeader.js b/packages/patternfly-4/react-core/src/components/LoginPage/LoginHeader.js
index 98c1698985d..3858003f603 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/LoginHeader.js
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/LoginHeader.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Login/login.css';
+import styles from '@patternfly/patternfly/components/Login/login.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainBody.js b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainBody.js
index 6978a75bd36..b0311d8152e 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainBody.js
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainBody.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly-next/components/Login/login.css';
+import styles from '@patternfly/patternfly/components/Login/login.css';
const propTypes = {
/** Content rendered inside the Login Main Body */
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooter.js b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooter.js
index 2e9ec2c8bdc..c3e7f1efd22 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooter.js
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooter.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly-next/components/Login/login.css';
+import styles from '@patternfly/patternfly/components/Login/login.css';
const propTypes = {
/** Content rendered inside the Login Main Footer */
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainHeader.js b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainHeader.js
index 6779995eca0..97f54cd221f 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainHeader.js
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainHeader.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Title } from '../Title';
import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly-next/components/Login/login.css';
+import styles from '@patternfly/patternfly/components/Login/login.css';
const propTypes = {
/** Content rendered inside the Login Main Header */
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/Login.test.js.snap b/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/Login.test.js.snap
index 9a8f84a1707..5af6538daf6 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/Login.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/Login.test.js.snap
@@ -3,6 +3,7 @@
exports[`Check login layout example against snapshot 1`] = `
.pf-c-login__main {
display: block;
+ color: #ffffff;
grid-area: main;
background-color: #ffffff;
}
@@ -16,6 +17,7 @@ exports[`Check login layout example against snapshot 1`] = `
min-height: 100vh;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
+ color: #ffffff;
}
;
diff --git a/packages/patternfly-4/react-core/src/components/Popover/PopoverBody.js b/packages/patternfly-4/react-core/src/components/Popover/PopoverBody.js
index d46d761938e..e7022f178cd 100644
--- a/packages/patternfly-4/react-core/src/components/Popover/PopoverBody.js
+++ b/packages/patternfly-4/react-core/src/components/Popover/PopoverBody.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Popover/popover.css';
+import styles from '@patternfly/patternfly/components/Popover/popover.css';
import { css } from '@patternfly/react-styles';
const PopoverBody = ({ children, id, ...rest }) => (
diff --git a/packages/patternfly-4/react-core/src/components/Popover/PopoverContent.js b/packages/patternfly-4/react-core/src/components/Popover/PopoverContent.js
index 4fd9fa60362..aa2f39fd0c6 100644
--- a/packages/patternfly-4/react-core/src/components/Popover/PopoverContent.js
+++ b/packages/patternfly-4/react-core/src/components/Popover/PopoverContent.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Popover/popover.css';
+import styles from '@patternfly/patternfly/components/Popover/popover.css';
import { css } from '@patternfly/react-styles';
const PopoverContent = ({ className, children, ...rest }) => (
diff --git a/packages/patternfly-4/react-core/src/components/Popover/PopoverDialog.js b/packages/patternfly-4/react-core/src/components/Popover/PopoverDialog.js
index 121e9486662..079c4aaff97 100644
--- a/packages/patternfly-4/react-core/src/components/Popover/PopoverDialog.js
+++ b/packages/patternfly-4/react-core/src/components/Popover/PopoverDialog.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Popover/popover.css';
+import styles from '@patternfly/patternfly/components/Popover/popover.css';
import { css, getModifier } from '@patternfly/react-styles';
export const PopoverPosition = {
diff --git a/packages/patternfly-4/react-core/src/components/Popover/PopoverFooter.js b/packages/patternfly-4/react-core/src/components/Popover/PopoverFooter.js
index 6ecb29b2b90..b0a59b74265 100644
--- a/packages/patternfly-4/react-core/src/components/Popover/PopoverFooter.js
+++ b/packages/patternfly-4/react-core/src/components/Popover/PopoverFooter.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Popover/popover.css';
+import styles from '@patternfly/patternfly/components/Popover/popover.css';
import { css } from '@patternfly/react-styles';
const PopoverFooter = ({ children, className, ...rest }) => (
diff --git a/packages/patternfly-4/react-core/src/components/Progress/Progress.js b/packages/patternfly-4/react-core/src/components/Progress/Progress.js
index 564e368eb18..1ada6f28361 100644
--- a/packages/patternfly-4/react-core/src/components/Progress/Progress.js
+++ b/packages/patternfly-4/react-core/src/components/Progress/Progress.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import styles from '@patternfly/patternfly-next/components/Progress/progress.css';
+import styles from '@patternfly/patternfly/components/Progress/progress.css';
import { css, getModifier } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import ProgressContainer, { ProgressMeasureLocation, ProgressVariant } from './ProgressContainer';
diff --git a/packages/patternfly-4/react-core/src/components/Progress/ProgressBar.js b/packages/patternfly-4/react-core/src/components/Progress/ProgressBar.js
index afe87ccd74f..6a7f35e9c69 100644
--- a/packages/patternfly-4/react-core/src/components/Progress/ProgressBar.js
+++ b/packages/patternfly-4/react-core/src/components/Progress/ProgressBar.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Progress/progress.css';
+import styles from '@patternfly/patternfly/components/Progress/progress.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js b/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js
index 9555e274f8d..c7fd32c17cd 100644
--- a/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js
+++ b/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js
@@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
-import progressStyle from '@patternfly/patternfly-next/components/Progress/progress.css';
+import progressStyle from '@patternfly/patternfly/components/Progress/progress.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import { CheckCircleIcon, TimesCircleIcon } from '@patternfly/react-icons';
diff --git a/packages/patternfly-4/react-core/src/components/Radio/Radio.js b/packages/patternfly-4/react-core/src/components/Radio/Radio.js
index 02231607da4..7b97dadc0c8 100644
--- a/packages/patternfly-4/react-core/src/components/Radio/Radio.js
+++ b/packages/patternfly-4/react-core/src/components/Radio/Radio.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Check/check.css';
+import styles from '@patternfly/patternfly/components/Check/check.css';
import PropTypes from 'prop-types';
import { css, getModifier } from '@patternfly/react-styles';
diff --git a/packages/patternfly-4/react-core/src/components/Switch/Switch.js b/packages/patternfly-4/react-core/src/components/Switch/Switch.js
index 93c6f67ee60..86d223ec491 100644
--- a/packages/patternfly-4/react-core/src/components/Switch/Switch.js
+++ b/packages/patternfly-4/react-core/src/components/Switch/Switch.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Switch/switch.css';
+import styles from '@patternfly/patternfly/components/Switch/switch.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import { getUniqueId } from '../../internal/util';
diff --git a/packages/patternfly-4/react-core/src/components/Tabs/Tabs.js b/packages/patternfly-4/react-core/src/components/Tabs/Tabs.js
index 7e935687dc3..99760d604b3 100644
--- a/packages/patternfly-4/react-core/src/components/Tabs/Tabs.js
+++ b/packages/patternfly-4/react-core/src/components/Tabs/Tabs.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Tabs/tabs.css';
+import styles from '@patternfly/patternfly/components/Tabs/tabs.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import { AngleLeftIcon, AngleRightIcon } from '@patternfly/react-icons';
diff --git a/packages/patternfly-4/react-core/src/components/Text/TextContent.js b/packages/patternfly-4/react-core/src/components/Text/TextContent.js
index 4d9f290e836..7e912a45d34 100644
--- a/packages/patternfly-4/react-core/src/components/Text/TextContent.js
+++ b/packages/patternfly-4/react-core/src/components/Text/TextContent.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Content/content.css';
+import styles from '@patternfly/patternfly/components/Content/content.css';
import { StyleSheet, css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js
index 4a33339e4da..18503be8d9d 100644
--- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js
+++ b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/FormControl/form-control.css';
+import styles from '@patternfly/patternfly/components/FormControl/form-control.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap b/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap
index 5b032516623..f5da0b540cd 100644
--- a/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap
@@ -3,11 +3,11 @@
exports[`invalid text input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -27,11 +27,11 @@ exports[`invalid text input 1`] = `
exports[`simple text input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js
index 2f67095347b..a885fda75e3 100644
--- a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js
+++ b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from '@patternfly/patternfly-next/components/FormControl/form-control.css';
+import styles from '@patternfly/patternfly/components/FormControl/form-control.css';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/__snapshots__/TextInput.test.js.snap b/packages/patternfly-4/react-core/src/components/TextInput/__snapshots__/TextInput.test.js.snap
index 5def5e5e6b1..b10bb69becd 100644
--- a/packages/patternfly-4/react-core/src/components/TextInput/__snapshots__/TextInput.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/TextInput/__snapshots__/TextInput.test.js.snap
@@ -3,11 +3,11 @@
exports[`disabled text input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -30,11 +30,11 @@ exports[`disabled text input 1`] = `
exports[`invalid text input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -57,11 +57,11 @@ exports[`invalid text input 1`] = `
exports[`readonly text input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
@@ -84,11 +84,11 @@ exports[`readonly text input 1`] = `
exports[`simple text input 1`] = `
.pf-c-form-control {
display: block;
+ color: #282d33;
position: relative;
width: 100%;
font-size: 1rem;
line-height: 1.5;
- color: #282d33;
background-color: #ffffff;
border: 1px solid;
border-color: #ededed #ededed #72767b #ededed;
diff --git a/packages/patternfly-4/react-core/src/components/Title/Title.js b/packages/patternfly-4/react-core/src/components/Title/Title.js
index 8fa85e67ab5..3b151275c6e 100644
--- a/packages/patternfly-4/react-core/src/components/Title/Title.js
+++ b/packages/patternfly-4/react-core/src/components/Title/Title.js
@@ -1,7 +1,7 @@
import React from 'react';
import { css, getModifier } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Title/title.css';
+import styles from '@patternfly/patternfly/components/Title/title.css';
import { BaseSizes } from '../../styles/sizes';
export const TitleSize = {
diff --git a/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.js b/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.js
index d9d1efba190..ef803bc4fb1 100644
--- a/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.js
+++ b/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import Tippy from '@tippy.js/react';
-import styles from '@patternfly/patternfly-next/components/Tooltip/tooltip.css';
+import styles from '@patternfly/patternfly/components/Tooltip/tooltip.css';
import { css, getModifier } from '@patternfly/react-styles';
import TooltipArrow from './TooltipArrow';
import TooltipContent from './TooltipContent';
diff --git a/packages/patternfly-4/react-core/src/components/Tooltip/TooltipArrow.js b/packages/patternfly-4/react-core/src/components/Tooltip/TooltipArrow.js
index 203ed792ed3..60a96e86570 100644
--- a/packages/patternfly-4/react-core/src/components/Tooltip/TooltipArrow.js
+++ b/packages/patternfly-4/react-core/src/components/Tooltip/TooltipArrow.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Tooltip/tooltip.css';
+import styles from '@patternfly/patternfly/components/Tooltip/tooltip.css';
import { css } from '@patternfly/react-styles';
const TooltipArrow = ({ className, ...rest }) =>
;
diff --git a/packages/patternfly-4/react-core/src/components/Tooltip/TooltipContent.js b/packages/patternfly-4/react-core/src/components/Tooltip/TooltipContent.js
index d9eb3ef5ee9..b3fbad72bbb 100644
--- a/packages/patternfly-4/react-core/src/components/Tooltip/TooltipContent.js
+++ b/packages/patternfly-4/react-core/src/components/Tooltip/TooltipContent.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/components/Tooltip/tooltip.css';
+import styles from '@patternfly/patternfly/components/Tooltip/tooltip.css';
import { css } from '@patternfly/react-styles';
const TooltipContent = ({ className, children, id, ...rest }) => (
diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js
index 0e5aaac4a86..79bb52c66df 100644
--- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js
+++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutDefaultNav.js
@@ -29,9 +29,9 @@ import {
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly-next
-import accessibleStyles from '@patternfly/patternfly-next/utilities/Accessibility/accessibility.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+// make sure you've installed @patternfly/patternfly
+import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { css } from '@patternfly/react-styles';
import { BellIcon, CogIcon } from '@patternfly/react-icons';
import brandImg from './l_pf-reverse-164x11.png';
diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js
index 84d0550def7..da3b97a25b6 100644
--- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js
+++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutExpandableNav.js
@@ -30,9 +30,9 @@ import {
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly-next
-import accessibleStyles from '@patternfly/patternfly-next/utilities/Accessibility/accessibility.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+// make sure you've installed @patternfly/patternfly
+import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { css } from '@patternfly/react-styles';
import { BellIcon, CogIcon } from '@patternfly/react-icons';
import brandImg from './l_pf-reverse-164x11.png';
diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js
index 779289fea87..d16e1e7ea09 100644
--- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js
+++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutGroupsNav.js
@@ -25,9 +25,9 @@ import {
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly-next
-import accessibleStyles from '@patternfly/patternfly-next/utilities/Accessibility/accessibility.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+// make sure you've installed @patternfly/patternfly
+import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { css } from '@patternfly/react-styles';
import { BellIcon, CogIcon } from '@patternfly/react-icons';
import brandImg from './l_pf-reverse-164x11.png';
diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js
index bc3a250217f..494880800ac 100644
--- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js
+++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutHorizontalNav.js
@@ -29,9 +29,9 @@ import {
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly-next
-import accessibleStyles from '@patternfly/patternfly-next/utilities/Accessibility/accessibility.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+// make sure you've installed @patternfly/patternfly
+import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { css } from '@patternfly/react-styles';
import { BellIcon, CogIcon } from '@patternfly/react-icons';
import brandImg from './l_pf-reverse-164x11.png';
diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js
index 14e300d8b6f..6d53b71135d 100644
--- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js
+++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutManualNav.js
@@ -29,9 +29,9 @@ import {
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly-next
-import accessibleStyles from '@patternfly/patternfly-next/utilities/Accessibility/accessibility.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+// make sure you've installed @patternfly/patternfly
+import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { css } from '@patternfly/react-styles';
import { BellIcon, CogIcon } from '@patternfly/react-icons';
import brandImg from './l_pf-reverse-164x11.png';
diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js
index 5e46b713e56..324f0cba38a 100644
--- a/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js
+++ b/packages/patternfly-4/react-core/src/demos/PageLayout/examples/PageLayoutSimpleNav.js
@@ -30,9 +30,9 @@ import {
ToolbarGroup,
ToolbarItem
} from '@patternfly/react-core';
-// make sure you've installed @patternfly/patternfly-next
-import accessibleStyles from '@patternfly/patternfly-next/utilities/Accessibility/accessibility.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+// make sure you've installed @patternfly/patternfly
+import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { css } from '@patternfly/react-styles';
import { BellIcon, CogIcon } from '@patternfly/react-icons';
import brandImg from './l_pf-reverse-164x11.png';
diff --git a/packages/patternfly-4/react-core/src/demos/Toolbar/ToolbarDemo.docs.js b/packages/patternfly-4/react-core/src/demos/Toolbar/ToolbarDemo.docs.js
index 331a30e569e..08334487c35 100644
--- a/packages/patternfly-4/react-core/src/demos/Toolbar/ToolbarDemo.docs.js
+++ b/packages/patternfly-4/react-core/src/demos/Toolbar/ToolbarDemo.docs.js
@@ -1,7 +1,7 @@
import SimpleToolbarDemo from './examples/SimpleToolbarDemo';
import ComplexToolbarDemo from './examples/ComplexToolbarDemo';
-import flexStyles from '@patternfly/patternfly-next/utilities/Flex/flex.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+import flexStyles from '@patternfly/patternfly/utilities/Flex/flex.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
export default {
title: 'Toolbar Demo',
diff --git a/packages/patternfly-4/react-core/src/demos/Toolbar/examples/ComplexToolbarDemo.js b/packages/patternfly-4/react-core/src/demos/Toolbar/examples/ComplexToolbarDemo.js
index a26f4077851..f40ac5ab42f 100644
--- a/packages/patternfly-4/react-core/src/demos/Toolbar/examples/ComplexToolbarDemo.js
+++ b/packages/patternfly-4/react-core/src/demos/Toolbar/examples/ComplexToolbarDemo.js
@@ -13,8 +13,8 @@ import {
ToolbarSection
} from '@patternfly/react-core';
import { css } from '@patternfly/react-styles';
-import flexStyles from '@patternfly/patternfly-next/utilities/Flex/flex.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+import flexStyles from '@patternfly/patternfly/utilities/Flex/flex.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { ListUlIcon, SortAlphaDownIcon, TableIcon } from '@patternfly/react-icons';
class ComplexToolbarDemo extends React.Component {
diff --git a/packages/patternfly-4/react-core/src/demos/Toolbar/examples/SimpleToolbarDemo.js b/packages/patternfly-4/react-core/src/demos/Toolbar/examples/SimpleToolbarDemo.js
index b2d1647f471..7baffd823fa 100644
--- a/packages/patternfly-4/react-core/src/demos/Toolbar/examples/SimpleToolbarDemo.js
+++ b/packages/patternfly-4/react-core/src/demos/Toolbar/examples/SimpleToolbarDemo.js
@@ -12,8 +12,8 @@ import {
ToolbarItem
} from '@patternfly/react-core';
import { css } from '@patternfly/react-styles';
-import flexStyles from '@patternfly/patternfly-next/utilities/Flex/flex.css';
-import spacingStyles from '@patternfly/patternfly-next/utilities/Spacing/spacing.css';
+import flexStyles from '@patternfly/patternfly/utilities/Flex/flex.css';
+import spacingStyles from '@patternfly/patternfly/utilities/Spacing/spacing.css';
import { ListUlIcon, SortAlphaDownIcon, TableIcon } from '@patternfly/react-icons';
class SimpleToolbarDemo extends React.Component {
diff --git a/packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.js b/packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.js
index cbeba1d0929..18a397fb2a6 100644
--- a/packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.js
+++ b/packages/patternfly-4/react-core/src/layouts/Bullseye/Bullseye.js
@@ -1,6 +1,6 @@
import React from 'react';
import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly-next/layouts/Bullseye/bullseye.css';
+import styles from '@patternfly/patternfly/layouts/Bullseye/bullseye.css';
import PropTypes from 'prop-types';
import { componentShape } from '../../internal/componentShape';
diff --git a/packages/patternfly-4/react-core/src/layouts/Gallery/Gallery.js b/packages/patternfly-4/react-core/src/layouts/Gallery/Gallery.js
index 47ff23cba2e..7b1a6619aaa 100644
--- a/packages/patternfly-4/react-core/src/layouts/Gallery/Gallery.js
+++ b/packages/patternfly-4/react-core/src/layouts/Gallery/Gallery.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly-next/layouts/Gallery/gallery.css';
+import styles from '@patternfly/patternfly/layouts/Gallery/gallery.css';
import { GutterSize, getGutterModifier } from '../../styles/gutters';
const propTypes = {
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/Grid.js b/packages/patternfly-4/react-core/src/layouts/Grid/Grid.js
index 5e89576a97e..ef4f770b2ca 100644
--- a/packages/patternfly-4/react-core/src/layouts/Grid/Grid.js
+++ b/packages/patternfly-4/react-core/src/layouts/Grid/Grid.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/layouts/Grid/grid.css';
+import styles from '@patternfly/patternfly/layouts/Grid/grid.css';
import { css } from '@patternfly/react-styles';
import { GutterSize, getGutterModifier } from '../../styles/gutters';
import { getGridSpanModifier, gridSpans } from './gridUtils';
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/GridItem.js b/packages/patternfly-4/react-core/src/layouts/Grid/GridItem.js
index 6cdb5299905..1d176804bd0 100644
--- a/packages/patternfly-4/react-core/src/layouts/Grid/GridItem.js
+++ b/packages/patternfly-4/react-core/src/layouts/Grid/GridItem.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/layouts/Grid/grid.css';
+import styles from '@patternfly/patternfly/layouts/Grid/grid.css';
import { css } from '@patternfly/react-styles';
import { DeviceSizes } from '../../styles/sizes';
import {
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/gridUtils.js b/packages/patternfly-4/react-core/src/layouts/Grid/gridUtils.js
index cd6aad108f7..9d9838a7e2a 100644
--- a/packages/patternfly-4/react-core/src/layouts/Grid/gridUtils.js
+++ b/packages/patternfly-4/react-core/src/layouts/Grid/gridUtils.js
@@ -1,4 +1,4 @@
-import styles from '@patternfly/patternfly-next/layouts/Grid/grid.css';
+import styles from '@patternfly/patternfly/layouts/Grid/grid.css';
import { getModifier } from '@patternfly/react-styles';
export const gridSpans = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
diff --git a/packages/patternfly-4/react-core/src/layouts/Level/Level.js b/packages/patternfly-4/react-core/src/layouts/Level/Level.js
index be8633969cf..ffa75ff107e 100644
--- a/packages/patternfly-4/react-core/src/layouts/Level/Level.js
+++ b/packages/patternfly-4/react-core/src/layouts/Level/Level.js
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/patternfly-next/layouts/Level/level.css';
+import styles from '@patternfly/patternfly/layouts/Level/level.css';
import { GutterSize, getGutterModifier } from '../../styles/gutters';
const propTypes = {
diff --git a/packages/patternfly-4/react-core/src/layouts/Split/Split.js b/packages/patternfly-4/react-core/src/layouts/Split/Split.js
index 0db7ef5fb17..906181a7f5b 100644
--- a/packages/patternfly-4/react-core/src/layouts/Split/Split.js
+++ b/packages/patternfly-4/react-core/src/layouts/Split/Split.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/layouts/Split/split.css';
+import styles from '@patternfly/patternfly/layouts/Split/split.css';
import { componentShape } from '../../internal/componentShape';
import { GutterSize, getGutterModifier } from '../../styles/gutters';
import { css } from '@patternfly/react-styles';
diff --git a/packages/patternfly-4/react-core/src/layouts/Split/SplitItem.js b/packages/patternfly-4/react-core/src/layouts/Split/SplitItem.js
index d1dc563fdb1..567ebe65624 100644
--- a/packages/patternfly-4/react-core/src/layouts/Split/SplitItem.js
+++ b/packages/patternfly-4/react-core/src/layouts/Split/SplitItem.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/layouts/Split/split.css';
+import styles from '@patternfly/patternfly/layouts/Split/split.css';
import { css } from '@patternfly/react-styles';
const propTypes = {
diff --git a/packages/patternfly-4/react-core/src/layouts/Stack/Stack.js b/packages/patternfly-4/react-core/src/layouts/Stack/Stack.js
index 8290581046a..ab97bee6714 100644
--- a/packages/patternfly-4/react-core/src/layouts/Stack/Stack.js
+++ b/packages/patternfly-4/react-core/src/layouts/Stack/Stack.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/layouts/Stack/stack.css';
+import styles from '@patternfly/patternfly/layouts/Stack/stack.css';
import { componentShape } from '../../internal/componentShape';
import { GutterSize, getGutterModifier } from '../../styles/gutters';
import { css } from '@patternfly/react-styles';
diff --git a/packages/patternfly-4/react-core/src/layouts/Stack/StackItem.js b/packages/patternfly-4/react-core/src/layouts/Stack/StackItem.js
index 67020cdcc80..5ebbb261d74 100644
--- a/packages/patternfly-4/react-core/src/layouts/Stack/StackItem.js
+++ b/packages/patternfly-4/react-core/src/layouts/Stack/StackItem.js
@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import styles from '@patternfly/patternfly-next/layouts/Stack/stack.css';
+import styles from '@patternfly/patternfly/layouts/Stack/stack.css';
import { css } from '@patternfly/react-styles';
const propTypes = {
diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js
index c6981d2e03f..34c32e7aa2c 100644
--- a/packages/patternfly-4/react-docs/gatsby-node.js
+++ b/packages/patternfly-4/react-docs/gatsby-node.js
@@ -7,7 +7,7 @@ const escapeFilePath = filePath => filePath.replace(/[\\']/g, '\\$&');
exports.onCreateWebpackConfig = ({ stage, loaders, actions, plugins, getConfig }) => {
// Enable hot reloading on source code changes
- const pfStylesTest = /patternfly-next.*(components|layouts|utilities).*\.css$/;
+ const pfStylesTest = /patternfly.*(components|layouts|utilities).*\.css$/;
actions.setWebpackConfig({
module: {
rules: [
diff --git a/packages/patternfly-4/react-styled-system/README.md b/packages/patternfly-4/react-styled-system/README.md
index d572df65f71..d9af1e88567 100644
--- a/packages/patternfly-4/react-styled-system/README.md
+++ b/packages/patternfly-4/react-styled-system/README.md
@@ -48,7 +48,7 @@ import React from 'react';
import { PatternFlyThemeProvider, StyledConstants, StyledBox, StyledText } from '@patternfly/react-styled-system';
class StyledStyles extends React.Component {
- render() {
+ render() {
const { fonts, space, fontWeights, fontSizes, borders, colors } = StyledConstants;
return (
@@ -77,7 +77,7 @@ class StyledStyles extends React.Component {
);
}
}
- export default StyledStyles;
+export default StyledStyles;
```
All css related to each component is provided alongside it. There is no component level CSS to import.
diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json
index 1007c468f7c..259e89f2270 100644
--- a/packages/patternfly-4/react-styled-system/package.json
+++ b/packages/patternfly-4/react-styled-system/package.json
@@ -43,7 +43,7 @@
"react": "^16.4.0"
},
"devDependencies": {
- "@patternfly/patternfly-next": "1.0.175",
+ "@patternfly/patternfly": "1.0.178",
"css": "^2.2.3",
"fs-extra": "^6.0.1",
"glob": "^7.1.2",
diff --git a/packages/patternfly-4/react-styles/README.md b/packages/patternfly-4/react-styles/README.md
index b08c427f4ea..cc10e7d2482 100644
--- a/packages/patternfly-4/react-styles/README.md
+++ b/packages/patternfly-4/react-styles/README.md
@@ -1,11 +1,14 @@
# @patternfly/react-styles
+
Library that provides CSS-in-JS capabilites along with build plugins to convert raw css imports to a consumable form for JS. This approach is very similar to how [css-modules][css-modules] works.
## Getting Started
+
This library has 3 main parts.
+
1. A [babel][babel] plugin to transform css imports into a JS import
1. A `StyleSheet` helper that parses raw css and returns a JS object to reference classnames.
-1. A `css` helper function to combine string CSS classes and any returned from the `StyleSheet`. It also takes care of doing the CSS injection.
+1. A `css` helper function to combine string CSS classes and any returned from the `StyleSheet`. It also takes care of doing the CSS injection.
## Detailed design
@@ -14,21 +17,28 @@ This library has 3 main parts.
The babel plugin will take care of transforming and `.css` imports to javascript files that use the StyleSheet API listed below.
### Example
+
.babelrc
+
```json5
{
- "plugins": [
- ["@patternfly/react-styles/babel", {
- "srcDir": "./src",
- "outDir": "./dist/esm",
- "useModules": true
- }]
+ plugins: [
+ [
+ '@patternfly/react-styles/babel',
+ {
+ srcDir: './src',
+ outDir: './dist/esm',
+ useModules: true
+ }
+ ]
]
}
```
+
### In
-##### `@patternfly/patternfly-next/components/Button/styles.css`
+##### `@patternfly/patternfly/components/Button/styles.css`
+
```css
.button {
background-color: #000;
@@ -39,42 +49,38 @@ The babel plugin will take care of transforming and `.css` imports to javascript
```jsx
import React from 'react';
-import { css } from '@patternfly/react-styles'
-import styles from '@patternfly/patternfly-next/components/Button/styles.css';
-import overrides from './Button.overrides.css'
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly/components/Button/styles.css';
+import overrides from './Button.overrides.css';
-const Button = ({ children, variant }) => (
-
-);
+const Button = ({ children, variant }) => ;
```
### Out
+
##### `dist/styles/components/Button.overrides.js`
+
```js
-import { StyleSheet } from '@patternfly/react-styles'
+import { StyleSheet } from '@patternfly/react-styles';
export default StyleSheet.parse('.bg{background-color:#000}');
```
-##### `dist/styles/node/@patternfly/patternfly-next/components/Button/index.js`
+##### `dist/styles/node/@patternfly/patternfly/components/Button/index.js`
+
```js
-import { StyleSheet } from '@patternfly/react-styles'
+import { StyleSheet } from '@patternfly/react-styles';
const styles = StyleSheet.parse('.button{color: black;}');
```
##### `dist/components/Button.js`
+
```jsx
import React from 'react';
-import { css } from '@patternfly/react-styles'
+import { css } from '@patternfly/react-styles';
import overrides from '../../styles/components/Button/Button.overrides.js';
-import styles from '../../styles/node/@patternfly/patternfly-next/components/Button/index.js';
+import styles from '../../styles/node/@patternfly/patternfly/components/Button/index.js';
-const Button = ({ children }) => (
-
-);
+const Button = ({ children }) => ;
```
### `StyleSheet.parse(cssString): { [key: string]: PFStyleObject }`
@@ -91,6 +97,7 @@ pf-m-active --> modifiers.active
pf-m-block --> modifiers.block
#### Example
+
```js
import { StyleSheet, css } from '@patternfly/react-styles';
@@ -99,14 +106,13 @@ const styles = StyleSheet.parse(`
.pf-m-active { background: red }
`);
-
const btn = document.createElement('button');
btn.classList.add(css(styles.button, styles.modifiers.active));
//
// If you just need to inject all of the styles manually you can do this by calling the inject method on the styles object.
// Note: using css() does this in a more efficient manner and this should be only be used as an escape hatch.
-styles.inject()
+styles.inject();
```
### `StyleSheet.create({ [key: string]: object | string | Array