You can pass a modified theme to the ThemeProvider to change the look and feel of the components.
Default button.
<ThemeProvider> <Button>Default</Button> </ThemeProvider>
You can define a new palette to change the colors of components.
<ThemeProvider theme={{ palette: { primary: { base: '#ff001d', dark: '#ffa52f' } } }} > <Button>Custom</Button> </ThemeProvider>
As well as the palette, you can also add additional styles to any component and it's variations.
<ThemeProvider theme={{ palette: { primary: { base: '#ff001d', dark: '#ffa52f' } }, componentStyles: { Button: { fill: { primary: { backgroundImage: 'linear-gradient(135deg, red 0%, orange 100%)', '&:hover': { backgroundImage: 'linear-gradient(135deg, darkRed 0%, darkOrange 100%)', } } } }, Text: { primary: { color: 'white', backgroundImage: 'linear-gradient(135deg, red 0%, orange 100%)' } }, Banner: { error: { backgroundImage: 'linear-gradient(135deg, red 0%, orange 100%)' } } } }} > <Box p={3}> <Text color="primary" mb={2}>Text with override</Text> <Button>Button with ovverride</Button> <Banner color="error" mt={1}>Banner with override</Banner> </Box> </ThemeProvider>
When passing a color as the only parameter it must follow the color.shade pattern.
For example:
background-color: ${getPaletteColor('error.base')};
When passing a shade as the only parameter, color must be a prop that is passed to the component being styled.
For example:
const StyledButton = styled(Button)`
background-color: ${getPaletteColor('dark')};
`
function Example () {
return (
...
<StyledButton color='error'>Example Button</StyledButton>
...
)
}
When passing two parameters: the first should be the color and the second should be the shade.
For example:
background-color: ${getPaletteColor('error', 'dark')};
Previously, most components had a default prop for theme. This was removed as the value of theme should always come from the ThemeProvider, and not directly from theme.js. Because of this change, some unit tests may now fail. The recommended remedy for this issue is to create a wrapper function for your test renderer that either wraps it's children in the ThemeProvider or sets a context value for theme from createTheme(). Some examples:
@testing-library/react
import { render } from '@testing-library/react'
import { ThemeProvider } from 'pcln-design-system'
global.renderWithTheme = (Tree) => {
return render(<ThemeProvider children={Tree} />)
}
enzyme
import { mount } from 'enzyme'
import { ThemeProvider } from 'pcln-design-system'
global.mountWithTheme = (node, options) => {
return mount(node, { wrappingComponent: ThemeProvider })
}
color prop.<Absolute color="secondary" p={1} mt={-3}> Secondary Absolute </Absolute> <Absolute color="error" p={1} ml={200} mt={-3}> Error Absolute </Absolute>
color prop.<Badge color="primary">primary badge</Badge> <Badge color="secondary">secondary badge</Badge> <Badge color="error">error badge</Badge> <Badge color="promoPrimary">promo primary badge</Badge>
color prop.<Banner color="primary" p={2} mb={1}>Primary banner</Banner> <Banner color="secondary" p={2} mb={1}>Secondary banner</Banner> <Banner color="error" icon={<Attention />} p={2} mb={1}>Error banner</Banner> <Banner color="caution" icon={<Warning />} p={2}>Caution banner</Banner>
color prop.<Box color="primary" p={2} mb={1}>Primary box</Box> <Box color="secondary" p={2} mb={1}>Secondary box</Box> <Box color="error" p={2} mb={1}>Error box</Box> <Box color="caution" p={2}>Caution box</Box>
color prop.fill (default) and outline.disabled prop, which changes the color to light and removes hover.<Button mr={1}>Button</Button> <Button color="secondary" mr={1}>Button</Button> <Button color="error" mr={1}>Button</Button> <Button color="caution" mr={1}>Button</Button> <Button color="error" disabled>Button</Button>
<Button variation="outline" mr={1}>Button</Button> <Button variation="outline" color="secondary" mr={1}>Button</Button> <Button variation="outline" color="error" mr={1}>Button</Button> <Button variation="outline" color="caution" mr={1}>Button</Button> <Button variation="outline" color="error" disabled>Button</Button>
color prop.<Checkbox color="secondary" /> <Checkbox color="secondary" checked /> <Checkbox color="secondary" disabled /> <Checkbox color="secondary" disabled checked />
color prop.<Flex> <Box mx="auto" /> <CloseButton color="error" /> </Flex>
color prop.borderColor to color with a palette color.<Divider color="primary" /> <Divider color="secondary" /> <Divider color="error" />
color prop.<Card py={3}> <Flag color="primary" mb={3}> Primary flag </Flag> <Flag color="error" mb={3}> Error flag </Flag> <Flag color="caution"> Caution flag </Flag> </Card>
color prop.<Flex color="alert"> <Box width={1/2} p={2} m={2} color="primary">Flex</Box> <Box width={1/2} p={2} m={2} color="secondary">Box</Box> </Flex>
Button with the secondary color<Button color="secondary">Button</Button>
color prop.<Heading color="primary">Primary Heading</Heading> <Heading color="error">Error Heading</Heading>
color prop.<Flex justifyContent="space-between"> <Hide xs p={2} color="primary"> Hide xs </Hide> <Hide sm p={2} color="secondary"> Hide sm </Hide> </Flex>
color prop.<Hug color="primary" text="Primary"> Hug </Hug>
color prop.<Input color="primary" defaultValue="Primary" mb={2} /> <Input color="error" defaultValue="Error" />
borderColor prop.<InputGroup borderColor="primary"> <FormField> <Label>Where from?</Label> <Input placeholder='Where from?' /> </FormField> <FormField> <Label>Where to?</Label> <Input placeholder='Where to?' /> </FormField> </InputGroup>
color and bg props.<Label color="primary" bg="background" p={2}>Primary label</Label>
color prop.<Link color="secondary">Secondary Link</Link> <br /> <Link color="error">Error Link</Link>
Button with the outline variation<Button variation="outline">Outline Button</Button>
color prop.<Label fontSize="14px"> <Radio color="error" checked /> <span>selected</span> </Label> <Label fontSize="14px"> <Radio color="error" /> <span>not selected</span> </Label> <Label fontSize="14px"> <Radio color="error" disabled /> <span>disabled</span> </Label>
Migrate any uses to use Button with the correct color prop
error or warning palette colors<Button color="error">Error Button</Button>
<Button color="warning">Warning Button</Button>
color prop.<Select color="secondary"> <option>Select A</option> <option>Select B</option> </Select>
color, bg and borderColor props.<Stamp color="primary" mr={2}> <Pin size={16} mr={1} /> primary stamp </Stamp> <Stamp color="error" mr={2}> <Warning size={16} mr={1} /> error stamp </Stamp> <Stamp color="caution" bg="background.dark" borderColor="caution"> <Information size={16} mr={1} /> just booked </Stamp>
color props.<Text color="primary">Primary</Text> <Text color="secondary">Secondary</Text> <Text color="error">Error</Text>
color and bg props.<ToggleBadge color="secondary" selected>Flight + Hotel</ToggleBadge> <ToggleBadge color="secondary">Flight + Hotel + Car</ToggleBadge> <ToggleBadge color="secondary">Flight + Car</ToggleBadge>
color and bg props.<Box mt={4}> <Tooltip color="primary" top left> primary tooltip </Tooltip> </Box>
color="text"), the bg prop is required for
theming. Palette namespace is also suggested to be provided for both color &
bg props.<Box mt={3} color="text.lightest" bg="background.dark"> Theme 1: color="text.lightest" value & bg="background.dark" </Box> <Box mt={3} color="text" bg="background.lighted"> Theme 2: color="text" & "bg"="background.lighted" </Box>