Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(docs): component styles in RTL mode #579

Merged
kuzhelov merged 6 commits into from
Dec 8, 2018
Merged

fix(docs): component styles in RTL mode #579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8834e16
ensure that new Provider component is mounted each time code is changed
kuzhelov-ms Dec 7, 2018
f8f1805
introduce cleaner logic for generating Provider's key
kuzhelov-ms Dec 7, 2018
24a47b9
remove unnecessary hash calculations
kuzhelov-ms Dec 7, 2018
9977c8b
final cleanup
kuzhelov-ms Dec 7, 2018
2f088fb
update changelog
kuzhelov-ms Dec 8, 2018
c547332
Merge branch 'master' into fix/docs-rtl-styles
kuzhelov Dec 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Do not focus `Popup`'s trigger on outside click @sophieH29 ([#578](https://github.com/stardust-ui/react/pull/578))
- Add `https` protocol to all urls used in the scripts and stylesheets in index.ejs @mnajdova ([#571](https://github.com/stardust-ui/react/pull/571))
- Fix support for fallback values in styles (`color: ['#ccc', 'rgba(0, 0, 0, 0.5)']`) @miroslavstastny ([#573](https://github.com/stardust-ui/react/pull/573))
- Fix styles for RTL mode of doc site component examples @kuzhelov ([#579](https://github.com/stardust-ui/react/pull/579))

### Features
- `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))
Expand Down
8 changes: 7 additions & 1 deletion docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,9 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
}

renderElement = (element: React.ReactElement<any>) => {
const { examplePath } = this.props
const { showRtl, componentVariables, themeName } = this.state

const theme = themes[themeName]

const newTheme: ThemeInput = {
Expand All @@ -260,7 +262,11 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
rtl: showRtl,
}

return <Provider theme={newTheme}>{element}</Provider>
return (
<Provider key={`${examplePath}${showRtl ? '-rtl' : ''}`} theme={newTheme}>
Copy link
Member

@levithomason levithomason Dec 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps this should be done in the Provider itself? It seems adding it here would means RTL will work in our doc examples, but not necessarily anywhere else the Provider is used.

Copy link
Contributor Author

@kuzhelov kuzhelov Dec 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure, as there is no straightforward way to generate the key (as we won't like to generate a new one on each rerendering). Should we request client to provide it?

Copy link
Contributor Author

@kuzhelov kuzhelov Dec 7, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or you would suggest to do it here?

// Provider.ts
...
   <ProviderConsumer
      render={(incomingTheme: ThemePrepared) => {
      const outgoingTheme: ThemePrepared = mergeThemes(incomingTheme, theme)

      return (
          <RendererProvider renderer={outgoingTheme.renderer} {...{ rehydrate: false }}>
             <ThemeProvider key={outgoingTheme.isRtl ? 'rtl' : 'ltr'} theme={outgoingTheme}>{children}</ThemeProvider>
          </RendererProvider>
       )
    }}
   />

{element}
</Provider>
)
}

renderMissingExample = (): JSX.Element => {
Expand Down