Introduce ExtendComponentsProvider (#1636)

* Introduce ExtendComponentsProvider

Author: Luke Bowerman

packages/components-providers/src/ComponentsProvider.tsx

@@ -30,41 +30,47 @@ import {
   GoogleFontsLoader,
   IEGlobalStyle,
   theme as defaultTheme,
-  ThemeCustomizations,
 } from '@looker/design-tokens'
 import React, { FC, useMemo } from 'react'
 import { ScrollLockProvider } from './ScrollLock'
 import { ThemeProvider, ThemeProviderProps } from './ThemeProvider'
+import { ExtendComponentsTheme } from './ExtendComponentsProvider'
 
-/**
- * Currently this is a simple pass-through to our ThemeProvider but it provides
- * the foundation of for hanging other context or setup code that might be needed
- * to stand-up @looker/components (a likely near-future candidate is i18next)
- */
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ComponentsProviderProps extends ThemeProviderProps {
+export interface ComponentsProviderProps
+  extends ThemeProviderProps,
+    ExtendComponentsTheme {
   /**
    * Prevent automatic injection of a basic CSS-reset into the DOM
    * @default true
    */
   globalStyle?: boolean
-
   /**
    * Load fonts from the Google Fonts CDN if not already available
    * @default false
    */
   loadGoogleFonts?: boolean
-
   /**
    * Enable style support for IE11
    * @default false
    */
   ie11Support?: boolean
-
-  themeCustomizations?: ThemeCustomizations
 }
 
+/**
+ * ComponentsProvider registers fundamental infrastructure for @looker/components to
+ * initialize its components. Most components assume that they will be wrapped in a
+ * <ComponentsProvider> to be able to successfully initialize.
+ *
+ * It provides a variety of features including
+ *   - ThemeProvider
+ *   - ScrollLockProvider
+ *
+ * Optionally, in also includes
+ *   - Internet Explorer 11 compatible styles
+ *   - Global style registration
+ *   - GoogleFont loading
+ *
+ */
 export const ComponentsProvider: FC<ComponentsProviderProps> = ({
   children,
   globalStyle = true,

packages/components-providers/src/ExtendComponentsProvider.tsx

@@ -0,0 +1,54 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import { generateTheme, ThemeCustomizations } from '@looker/design-tokens'
+import { ThemeContext, ThemeProvider } from 'styled-components'
+import React, { FC, useMemo, useContext } from 'react'
+
+export interface ExtendComponentsTheme {
+  themeCustomizations?: ThemeCustomizations
+}
+
+/**
+ * This component is designed for making adjustments to the Theme without
+ * initializing an entire ComponentsProvider. ExtendComponentsThemeProvider
+ * will merge the themeCustomizations with the theme already established.
+ *
+ * This component is intended for use cases where a portion of page carries
+ * a different theme than the rest.
+ */
+export const ExtendComponentsThemeProvider: FC<ExtendComponentsTheme> = ({
+  children,
+  themeCustomizations,
+}) => {
+  const parentTheme = useContext(ThemeContext)
+
+  const theme = useMemo(() => {
+    return generateTheme(parentTheme, themeCustomizations)
+  }, [parentTheme, themeCustomizations])
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
+}

packages/components-providers/src/index.ts

@@ -24,4 +24,5 @@
 
  */
 export * from './ComponentsProvider'
+export * from './ExtendComponentsProvider'
 export * from './ScrollLock'

packages/components/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [UNRELEASED]
+
+### Added
+
+- `ExtendComponentsProvider`
+
 ## [0.9.23]
 
 ### Added

packages/components/src/index.ts

@@ -59,9 +59,9 @@ export * from './VisuallyHidden'
 
 export * from './utils'
 
-export { ComponentsProvider } from '@looker/components-providers'
+export {
+  ComponentsProvider,
+  ExtendComponentsThemeProvider,
+} from '@looker/components-providers'
 
-/** Provided here for backwards compatibility.
- * @TODO - Remove before 1.0
- **/
 export { theme, Theme } from '@looker/design-tokens'