Skip to content

ThemeProvider doesn't pass down dictionary prop properly #3366

@bob606

Description

@bob606

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

  1. 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>
  1. 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",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions