fix(inline-styles): remove inject and Stylesheet.parse inline referen…

…ces (#2653)
patternfly · Aug 13, 2019 · ee2ca95 · ee2ca95
1 parent 7a581d8
commit ee2ca95
Show file tree

Hide file tree

Showing 32 changed files with 709 additions and 813 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Popover/Popover.tsx b/packages/patternfly-4/react-core/src/components/Popover/Popover.tsx
@@ -3,6 +3,8 @@ import PopoverBase from '../../helpers/PopoverBase/PopoverBase';
 import { Instance as TippyInstance } from 'tippy.js';
 import { KEY_CODES } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
+import '@patternfly/react-styles/css/components/Tooltip/tippy.css';
+import '@patternfly/react-styles/css/components/Tooltip/tippy-overrides.css';
 import { css, getModifier } from '@patternfly/react-styles';
 import { PopoverArrow } from './PopoverArrow';
 import { PopoverContent } from './PopoverContent';
@@ -12,13 +14,11 @@ import { PopoverFooter } from './PopoverFooter';
 import { PopoverCloseButton } from './PopoverCloseButton';
 import GenerateId from '../../helpers/GenerateId/GenerateId';
 import { c_popover_MaxWidth as popoverMaxWidth } from '@patternfly/react-tokens';
-import { popoverBaseStyles } from '../Tooltip/styles';
 import { ReactElement } from 'react';
 // Can't use ES6 imports :(
 // The types for it are also wrong, we should probably ditch this dependency.
 // tslint:disable-next-line
 const FocusTrap: any = require('focus-trap-react');
-popoverBaseStyles();
 
 export enum PopoverPosition {
   top = 'top',

diff --git a/packages/patternfly-4/react-core/src/components/Text/TextContent.tsx b/packages/patternfly-4/react-core/src/components/Text/TextContent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Content/content';
-import { StyleSheet, css } from '@patternfly/react-styles';
+import { css } from '@patternfly/react-styles';
 
 export interface TextContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered within the TextContent */
@@ -9,11 +9,6 @@ export interface TextContentProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
 }
 
-// Get the stylesheet and make it more specific by appending [data-pf-content] attribute to selectors
-// This way even if other components are nested within the TextContent, their text styling will not be affected
-// const moreSpecificStyles = styles.raw.replace(/(.pf-c-content\s[a-zA-Z0-9]+)/g, '$1[data-pf-content]');
-// const updatedStyles = StyleSheet.parse(moreSpecificStyles);
-
 export const TextContent: React.FunctionComponent<TextContentProps> = ({
   children = null,
   className = '',

diff --git a/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.tsx b/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.tsx
@@ -2,16 +2,15 @@ import * as React from 'react';
 import PopoverBase from '../../helpers/PopoverBase/PopoverBase';
 import { Instance as TippyInstance } from 'tippy.js';
 import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
+import '@patternfly/react-styles/css/components/Tooltip/tippy.css';
+import '@patternfly/react-styles/css/components/Tooltip/tippy-overrides.css';
 import { css, getModifier } from '@patternfly/react-styles';
 import { TooltipArrow } from './TooltipArrow';
 import { TooltipContent } from './TooltipContent';
 import { KEY_CODES } from '../../helpers/constants';
 import { c_tooltip_MaxWidth as tooltipMaxWidth } from '@patternfly/react-tokens';
-import { popoverBaseStyles } from './styles';
 import { ReactElement } from 'react';
 
-popoverBaseStyles();
-
 export enum TooltipPosition {
   top = 'top',
   bottom = 'bottom',

diff --git a/packages/patternfly-4/react-core/src/components/Tooltip/styles.tsx b/packages/patternfly-4/react-core/src/components/Tooltip/styles.tsx
diff --git a/packages/patternfly-4/react-core/src/layouts/Toolbar/Toolbar.tsx b/packages/patternfly-4/react-core/src/layouts/Toolbar/Toolbar.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { StyleSheet, css } from '@patternfly/react-styles';
+import { css } from '@patternfly/react-styles';
+import '@patternfly/react-styles/css/layouts/Toolbar/toolbar.css';
 
 export interface ToolbarProps extends React.HTMLProps<HTMLDivElement> {
   /** Anything that can be rendered as toolbar content */
@@ -8,36 +9,6 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement> {
   className?: string; 
 }
 
-// toolbar css
-const toolbarCss = StyleSheet.parse(`
-  .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); }
-`);
-
-toolbarCss.inject();
-
 export const Toolbar: React.FunctionComponent<ToolbarProps> = ({ 
   children = null,
   className = null,

diff --git a/packages/patternfly-4/react-core/src/layouts/Toolbar/ToolbarGroup.tsx b/packages/patternfly-4/react-core/src/layouts/Toolbar/ToolbarGroup.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { StyleSheet, css } from '@patternfly/react-styles';
+import { css } from '@patternfly/react-styles';
+import '@patternfly/react-styles/css/layouts/Toolbar/toolbar.css';
 
 export interface ToolbarGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Anything that can be rendered as one toolbar group */
@@ -8,36 +9,6 @@ export interface ToolbarGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string; 
 }
 
-// toolbar css
-const toolbarCss = StyleSheet.parse(`
-  .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); }
-`);
-
-toolbarCss.inject();
-
 export const ToolbarGroup: React.FunctionComponent<ToolbarGroupProps> = ({
   children = null,
   className = null,