Halstack Provider
Halstack Provider is the context provider used for a whole application or an isolated group of components, which defines the custom theme and/or translation labels.
| Name | Type | Description | Default |
|---|---|---|---|
| theme | OpinionatedTheme | Object with a given structure, specified below, for defining the opinionated theme. | - |
| advancedTheme | AdvancedTheme | Object with a given structure, specified below, for defining the advanced theme. | - |
| labels | TranslatedLabels | Object with a given structure, specified below, for defining translations. | - |
As explained on the Themes page, you can apply the opinionated theming strategy to customize the components.
Below is an example of customizing the colours of a DxcAccordion and a DxcTextInput:
() => { const customTheme = { accordion: { accentColor: "#1b75bb", fontColor: "#666666", }, textInput: { fontColor: "#f80808", }, }; return ( <HalstackProvider theme={customTheme}> <DxcInset space="2rem"> <DxcAccordion isExpanded label="Accordion"> <DxcInset space="2rem"> <DxcTextInput label="Enter your surname" defaultValue="Harris" /> </DxcInset> </DxcAccordion> </DxcInset> </HalstackProvider> ); }
We create a customTheme object with as many components as we want and their respective values. Then we pass this object to the Halstack Provider, which wraps our components, through its theme property.
Advanced theming is the option to choose when further customization is required. To find out which use cases are valid for this strategy, you can refer to the Themes page.
() => { const advancedTheme = { accordion: { backgroundColor: "#4a90e2", hoverBackgroundColor: "#b8e986", arrowColor: "#ffffff", disabledArrowColor: "#999999", assistiveTextFontSize: "1.5rem", assistiveTextFontWeight: "400", assistiveTextLetterSpacing: "-0.0125em", assistiveTextFontColor: "#f6fa06", }, }; return ( <HalstackProvider advancedTheme={advancedTheme}> <DxcInset space="2rem"> <DxcAccordion isExpanded label="Accordion" assistiveText="Assistive text"> <DxcInset space="2rem"> <DxcTextInput label="Enter your surname" defaultValue="Harris" /> </DxcInset> </DxcAccordion> </DxcInset> </HalstackProvider> ); }
In the example above we have customized some of the DxcAccordion tokens. As you can see, it is not necessary to pass all the tokens of the component, only those that you want to change their value with respect to the default theme.
Halstack Provider can be used to translate all the labels that cannot be changed by the component properties.
Let's imagine that we want to translate the '(Optional)' label of a DxcTextInput, as well as the error messages of our DxcFileInput component. To do so, we need to create an object with the translations. In this object, you will have as many objects as components you want to translate with the respective translation for their labels.
() => { const [items, changeItems] = useState(10); const [files, setFiles] = useState([]); const itemsPerPageClick = (value) => { changeItems(value); }; const callbackFile = (files) => { const updatedFiles = files.map((file) => { return { ...file }; }); setFiles(updatedFiles); }; const labels = { formFields: { optionalLabel: "(Optionnel)", }, fileInput: { fileSizeLessThanErrorMessage: "La taille du fichier doit être inférieure à la taille maximale.", }, }; return ( <HalstackProvider labels={labels}> <DxcInset space="2rem"> <DxcFlex gap="2rem"> <DxcTextInput label="Input text" defaultValue="Example text" clearable optional /> <DxcFileInput label="Select your files" value={files} callbackFile={callbackFile} minSize={0} maxSize={0} /> </DxcFlex> </DxcInset> </HalstackProvider> ); }
DxcFileInput).