ThemeProvider doesn't pass down dictionary prop properly
bob606 opened this issue · 1 comments
bob606 commented
Expected Behavior
When wrapping components with a @kiwicom/orbit-components/lib/ThemeProvider
all children should use the language passed in the dictionary
prop. This would be the same behavior which is already working for the theme
prop.
Current Behavior
You have to directly wrap a component (e.g. a Wizard) in order for the dictionary to be applied.
<ThemeProvider
theme={{
orbit: customTokens,
rtl: false,
transitions: false,
lockScrolling: false,
}}
dictionary={de_DE}
>
<Wizard
id='wizard'
completedSteps={currentStep}
activeStep={currentStep}
onChangeStep={(step) => {
setCurrentStep(step);
}}
>
{
wizardComponents
.map((key, index) => {
return <WizardStep key={index} title={getWizardTitle(key)} />;
})
}
</Wizard>
</ThemeProvider>
Possible Solution
The ThemeProvider
works for the theme
prop, so the solution probably lies somewhere in how the implementation of the dictionary
prop differs from the theme prop
.
Steps to Reproduce
- try to pass the dictionary to a children component and see that it will default to English
<KiwiThemeProvider
theme={{
orbit: customTokens,
rtl: false,
transitions: false,
lockScrolling: false,
}}
dictionary={de_DE}
>
<Component {...pageProps} /> //<-- dictionary should be passed to all components in here but isn't
</KiwiThemeProvider>
- Change something in your
customTokens
and see how the effect is applied to all children, unlike the language.
Context (Environment)
"@kiwicom/orbit-components": "^2.17.2",
"next": "^12.1.6",
kouloughli-hemza commented
can you show me your implementation?
are you using useTranslate or Translate ?