fix(docs): RTL and Theme it buttons (#2020)

* fix(docs): RTL and Theme it buttons * changelog
microsoft · Oct 10, 2019 · 0ccdfa0 · 0ccdfa0
1 parent 2f6c821
commit 0ccdfa0
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Correctly handle RTL in `Alert` component @miroslavstastny ([#2018](https://github.com/stardust-ui/react/pull/2018))
 
+### Documentation
+- Fix 'RTL' and 'Theme it' in examples @miroslavstastny ([#2020](https://github.com/stardust-ui/react/pull/2020))
+
 <!--------------------------------[ v0.40.0 ]------------------------------- -->
 ## [v0.40.0](https://github.com/stardust-ui/react/tree/v0.40.0) (2019-10-09)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.39.0...v0.40.0)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -560,7 +560,11 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
                   className={`rendered-example ${this.getKebabExamplePath()}`}
                   styles={exampleStyles}
                 >
-                  {React.createElement(component)}
+                  <Provider theme={newTheme} rtl={showRtl}>
+                    <VariableResolver onResolve={this.handleVariableResolve}>
+                      {React.createElement(component)}
+                    </VariableResolver>
+                  </Provider>
                 </Segment>
                 <LogInspector silent />
               </>

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx
@@ -1,5 +1,4 @@
 import {
-  Checkbox,
   Grid,
   Header,
   Segment,
@@ -37,7 +36,7 @@ const ComponentExampleVariables: React.FunctionComponent<
   const { onChange, overriddenVariables, usedVariables } = props
 
   const { theme } = React.useContext<ProviderContextPrepared>(ThemeContext)
-  const [hideUnused, setHideUnused] = React.useState(true)
+  const [hideUnused] = React.useState(true)
 
   const componentVariables: ThemeComponentVariablesPrepared = _.pickBy(
     mergeThemeVariables(theme.componentVariables, overriddenVariables),
@@ -68,12 +67,13 @@ const ComponentExampleVariables: React.FunctionComponent<
 
   return (
     <div>
-      <Checkbox
-        checked={!hideUnused}
-        label="Hide unused variables"
-        onChange={(e, data) => setHideUnused(!data.checked)}
-        styles={{ float: 'right', top: '1.25rem', right: '1.25rem' }}
-      />
+      {/* Temporarily disabled as the functionality in useEnhancedRenderer is broken */}
+      {/* <Checkbox */}
+      {/*  checked={!hideUnused} */}
+      {/*  label="Hide unused variables" */}
+      {/*  onChange={(e, data) => setHideUnused(!data.checked)} */}
+      {/*  styles={{ float: 'right', top: '1.25rem', right: '1.25rem' }} */}
+      {/* /> */}
 
       {_.map(filteredVariables, (componentVariables, componentName) => {
         const groupedVariables: Record<string, string[]> = _.groupBy(

diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx
@@ -223,6 +223,7 @@ const renderComponent = <P extends {}>(
   const direction = rtl ? 'rtl' : 'ltr'
   const felaParam = {
     theme: { direction },
+    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
   }
 
   const resolvedStyles: ComponentSlotStylesPrepared = {}