Include GlobalStyle within ComponentsProvider

While building out a sandbox prototype it occured to me that we could encapsulate GlobalStyles within our default provider and simplify the setup process by one more step :)

Author: Luke Bowerman

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - `ActionList` documentation
+- `ComponentsProvider` now automatically loads `GlobalStyle` (also provides `globalStyle={false}` prop to disable this behavior)
 
 ### Changed
 

packages/components/src/index.ts

@@ -35,7 +35,6 @@ export * from './Chip'
 export * from './DateTimeFormat'
 export * from './Divider'
 export * from './Form'
-export * from './GlobalStyle'
 export * from './Icon'
 export * from './Layout'
 export * from './Link'
@@ -62,6 +61,7 @@ export { ComponentsProvider } from '@looker/components-providers'
  **/
 
 export {
+  GlobalStyle,
   palette,
   radii,
   semanticColors,

…mponents/src/GlobalStyle/GlobalStyle.tsx …n-tokens/src/GlobalStyle/GlobalStyle.tsxpackages/components/src/GlobalStyle/GlobalStyle.tsx renamed to packages/design-tokens/src/GlobalStyle/GlobalStyle.tsx packages/components/src/GlobalStyle/GlobalStyle.tsx renamed to packages/design-tokens/src/GlobalStyle/GlobalStyle.tsx

@@ -27,6 +27,8 @@
 export * from './system'
 export * from './theme'
 
+export * from './GlobalStyle'
+
 export { palette, radii, semanticColors } from './tokens'
 
 // Useful external helpers

…ages/components/src/GlobalStyle/index.ts …s/design-tokens/src/GlobalStyle/index.tspackages/components/src/GlobalStyle/index.ts renamed to packages/design-tokens/src/GlobalStyle/index.ts packages/components/src/GlobalStyle/index.ts renamed to packages/design-tokens/src/GlobalStyle/index.ts

@@ -26,13 +26,12 @@
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { ComponentsProvider, GlobalStyle } from '@looker/components'
+import { ComponentsProvider } from '@looker/components'
 import { FieldsDemo } from './Form/FieldsDemo'
 
 const App: React.FC = () => {
   return (
     <ComponentsProvider>
-      <GlobalStyle />
       <FieldsDemo />
     </ComponentsProvider>
   )

packages/design-tokens/src/index.ts

@@ -23,6 +23,8 @@
  SOFTWARE.
 
  */
+
+import { GlobalStyle } from '@looker/design-tokens'
 import React, { FC } from 'react'
 import { ThemeProvider, ThemeProviderProps } from './ThemeProvider'
 
@@ -33,8 +35,21 @@ import { ThemeProvider, ThemeProviderProps } from './ThemeProvider'
  */
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ComponentsProviderProps extends ThemeProviderProps {}
-
-export const ComponentsProvider: FC<ComponentsProviderProps> = (props) => (
-  <ThemeProvider {...props} />
+export interface ComponentsProviderProps extends ThemeProviderProps {
+  /**
+   * Prevent automatic injection of a basic CSS-reset into the DOM
+   * @default true
+   */
+  globalStyle?: boolean
+}
+
+export const ComponentsProvider: FC<ComponentsProviderProps> = ({
+  children,
+  globalStyle = true,
+  ...props
+}) => (
+  <ThemeProvider {...props}>
+    {globalStyle && <GlobalStyle />}
+    {children}
+  </ThemeProvider>
 )

packages/playground/src/index.tsx

@@ -25,7 +25,6 @@
  */
 
 import {
-  GlobalStyle,
   ComponentsProvider,
   CustomizableTooltipAttributes,
 } from '@looker/components'
@@ -45,10 +44,7 @@ const Page: FC = ({ children }) => {
         href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap"
         rel="stylesheet"
       />
-      <MDXProvider components={all}>
-        <GlobalStyle />
-        {children}
-      </MDXProvider>
+      <MDXProvider components={all}>{children}</MDXProvider>
     </ComponentsProvider>
   )
 }

packages/providers/src/ComponentsProvider.tsx

@@ -37,6 +37,8 @@ echo '@types/react-native' > .yarnclean
 
 At the top-most level of the usage of `@looker/components` you need to load the `<GlobalStyle />` component. This will inject a simple CSS reset as well as basic font assignment. [GlobalStyle documentation &rarr;](/utilities/globalstyle)
 
+NOTE: The `ComponentsProvider` will automatically load the `GlobalStyle` component for you.
+
 ### Web Font Loading
 
 Users may not have the `@looker/components` default font, Open Sans, installed on their computers so we recommend importing the font to ensure that content is rendered with the proper font-face.

packages/www/src/Layout/Page.tsx

@@ -8,6 +8,8 @@ This component provides a basic set of styles to enable Looker Components. While
 
 `GlobalStyle` will apply style broadly and may have impacts on other content. In the future we will provide a way to scope the GlobalStyle to only apply to HTML output by `@looker/components` but for the time-being the assumption is that the CSS applied is narrow in it's behavior and should have limited side-effects.
 
+NOTE: The `ComponentsProvider` will automatically load the `GlobalStyle` component for you.
+
 It's composed of two primary pieces:
 
 ## Default Font