diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c48e02023..fc4f09cbf7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Add `Loader` component @layershifter ([#685](https://github.com/stardust-ui/react/pull/685)) +### Fixes +- Fix focus outline visible only during keyboard navigation @kolaps33 ([#689] https://github.com/stardust-ui/react/pull/689) +- Fix handling changes of `renderer` prop in `Provider` @layershifter ([#702](https://github.com/stardust-ui/react/pull/702)) + ## [v0.16.1](https://github.com/stardust-ui/react/tree/v0.16.1) (2019-01-10) [Compare changes](https://github.com/stardust-ui/react/compare/v0.16.0...v0.16.1) @@ -37,7 +41,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix shorthand prop type @kuzhelov ([#697](https://github.com/stardust-ui/react/pull/697)) - Export `ShorthandRenderer` type @miroslavstastny ([#698](https://github.com/stardust-ui/react/pull/698)) - Temporary revert `pxToRem` changes introduced by [#371](https://github.com/stardust-ui/react/pull/371) @kuzhelov ([#700](https://github.com/stardust-ui/react/pull/700)) -- Fix focus outline visible only during keyboard navigation @kolaps33 ([#689] https://github.com/stardust-ui/react/pull/689) ### Documentation - Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index 0429ee7fd8..7434b06bec 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -232,11 +232,9 @@ class ComponentExample extends React.Component _.includes(knobsContext.keys(), this.getKnobsFilename()) renderElement = (element: React.ReactElement) => { - const { examplePath } = this.props const { showRtl, componentVariables, themeName } = this.state const theme = themes[themeName] - const newTheme: ThemeInput = { siteVariables: theme.siteVariables, componentVariables: mergeThemeVariables(theme.componentVariables, { @@ -245,11 +243,7 @@ class ComponentExample extends React.Component - {element} - - ) + return {element} } handleKnobChange = knobs => { diff --git a/src/components/Provider/Provider.tsx b/src/components/Provider/Provider.tsx index 8d92333e3b..38e50b3312 100644 --- a/src/components/Provider/Provider.tsx +++ b/src/components/Provider/Provider.tsx @@ -1,9 +1,10 @@ +import { render } from 'fela-dom' import * as _ from 'lodash' import * as PropTypes from 'prop-types' import * as React from 'react' import { Provider as RendererProvider, ThemeProvider } from 'react-fela' -import { felaRenderer as felaLtrRenderer, mergeThemes } from '../../lib' +import { felaRenderer as felaLtrRenderer, isBrowser, mergeThemes } from '../../lib' import { ThemePrepared, ThemeInput, @@ -124,7 +125,13 @@ class Provider extends React.Component { { const outgoingTheme: ThemePrepared = mergeThemes(incomingTheme, theme) + + // Heads up! + // We should call render() to ensure that a subscription for DOM updates was created + // https://github.com/stardust-ui/react/issues/581 + if (isBrowser()) render(outgoingTheme.renderer) this.renderStaticStylesOnce(outgoingTheme) + return ( {children}