feat(theming): add componentStyles utility #1986
Conversation
… ze-flo/styled-components-v6
… ze-flo/styled-components-v6
| * | ||
| * @returns component CSS styles | ||
| */ | ||
| export const componentStyles = (props: ThemeProps<DefaultTheme> & { componentId?: string }) => { |
There was a problem hiding this comment.
ThemeProps was dropped in styled-component v6. To reduce the refactoring scope within our internal styled components, I added back ThemeProps to the styled-components namespace. However, ThemeProps won't be available for users on styled-components v6.
Here's the built output for componentStyles.d.ts showing the missing type with v6.
It's probably best to explicitly define the theme prop.
| export const componentStyles = (props: ThemeProps<DefaultTheme> & { componentId?: string }) => { | |
| export const componentStyles = (props: { componentId?: string, theme: DefaultTheme }) => { |
| @@ -7,7 +7,7 @@ | |||
|
|
|||
| import { ThemeProps, DefaultTheme } from 'styled-components'; | |||
|
|
|||
| /** @component */ | |||
| /** @deprecated Use `componentStyles` instead. */ | |||
There was a problem hiding this comment.
Is /** @component */ needed for the documentation?
There was a problem hiding this comment.
nah, just leftover from ancient Styleguidist notation
| @@ -7,7 +7,7 @@ | |||
|
|
|||
| import { ThemeProps, DefaultTheme } from 'styled-components'; | |||
|
|
|||
| /** @component */ | |||
| /** @deprecated Use `componentStyles` instead. */ | |||
| export default function retrieveComponentStyles( | |||
| componentId: string, | |||
| props: Partial<ThemeProps<Partial<DefaultTheme>>> | |||
There was a problem hiding this comment.
This is an oversight from #1978. 😞
| props: Partial<ThemeProps<Partial<DefaultTheme>>> | |
| props: { theme?: <Partial<DefaultTheme> } |
| */ | ||
| export const componentStyles = (props: ThemeProps<DefaultTheme> & { componentId?: string }) => { | ||
| let retVal: string | undefined; | ||
| const components = props.theme?.components; |
There was a problem hiding this comment.
ThemeProps (or my suggestion ☝️) defines theme as required. If this is what we want going forward:
| const components = props.theme?.components; | |
| const components = props.theme.components; |
|
Once last thing I forgot to mention. 😞 Can we update the template for StyledComponents? |
I'll get that in the follow-on PR mentioned in the description 😉 |
Description
This is an improved version of
retrieveComponentStyles, with:data-attribute exceptions in styled components)data-garden-id)sizeStyles&colorStyles)Detail
All instances of the
@deprecated retrieveComponentStyleswill be replaced in a follow-on PR.Checklist
design updates will be Garden Designer approved (add the designer as a reviewer)npm start)renders as expected with reversed (RTL) directionrenders as expected in dark moderenders as expected with Bedrock CSS (?bedrock)tested for WCAG 2.1 AA accessibility compliancetested in Chrome, Firefox, Safari, and Edge