feat(documentation): Add pseudo-class to snapshots with postcss plugin #2092
Conversation
# Conflicts: # packages/documentation/src/stories/components/choice-card/choice-card.ts
|
|
|
||
| module.exports = () => { | ||
| return { | ||
| plugins: [postcssPseudoClasses], |
There was a problem hiding this comment.
I wasn't able to change the Vite config to use this plugin like vitejs/vite#8693
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Preview environment ready: https://preview-2092--swisspost-design-system-next.netlify.app |
| /** | ||
| * PostCSS plugin to automatically add in companion classes where pseudo-selectors are used. | ||
| * This allows you to add the class name to force the styling of a pseudo-selector, which can be really helpful for testing or being able to concretely reach all style states. | ||
| * @param {array} [options.blacklist] - Define elements to be ignored | ||
| * @param {array} [options.restrictTo] - Create classes for a restricted list of selectors. e.g. [':nth-child', 'hover'] | ||
| * @param {boolean} [options.allCombinations=false] - When enabled output with all combinations of pseudo styles/pseudo classes. | ||
| * @param {boolean} [options.preserveBeforeAfter=true] - When enabled output does not generate pseudo classes for `:before` and `:after`. | ||
| * @param {string} [options.prefix='\\:'] - Define the pseudo-class class prefix. Default: ':' so the class name will be ':hover' for example. | ||
| * @author giuseppeg <https://github.com/giuseppeg> | ||
| * @author philippone <https://github.com/philippone> | ||
| * @author michaeldfoley <https://github.com/michaeldfoley> | ||
| * @see {@link https://github.com/giuseppeg/postcss-pseudo-classes} | ||
| * @returns {{postcssPlugin: string, Once(*): void}} | ||
| */ |
There was a problem hiding this comment.
Ideally, we should publish it as new package perhaps?
| <h3>Sizes</h3> | ||
| ${getCombinations('size', context.argTypes.size.options, combinations) | ||
| .filter( | ||
| (args: Args) => | ||
| !args.value || | ||
| (args.value && | ||
| (context.args.type === 'text' || context.args.type === 'password')), | ||
| ) | ||
| .map( | ||
| (args: Args) => | ||
| html` | ||
| <div> | ||
| ${args.title !== undefined && args.title | ||
| ? html` | ||
| <h4> | ||
| ${Object.entries(context.argTypes.size.control.labels) | ||
| .filter(([key, value]) => key === args.size) | ||
| .map(s => s[1])} | ||
| </h4> | ||
| ` | ||
| : ''} | ||
| <div>${meta.render?.({ ...context.args, ...args }, context)}</div> | ||
| </div> | ||
| `, | ||
| )} |
There was a problem hiding this comment.
I refactored this part to use bombArgs instead of a custom function. So #2001 will be easier.
imagoiq
requested review from
b1aserlu,
davidritter-dotcom and
a team
as code owners
|
After #2133, we should add pseudo-class |
imagoiq
added
the
on hold
# Conflicts: # packages/documentation/src/stories/components/checkbox/checkbox.stories.ts # packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts # packages/documentation/src/stories/components/radio/radio.stories.ts # packages/documentation/src/stories/components/table/table.snapshot.stories.ts
# Conflicts: # packages/documentation/src/stories/components/badge/badge.stories.ts # packages/documentation/src/stories/components/card/card.snapshot.stories.ts # packages/documentation/src/stories/components/card/card.stories.ts # packages/documentation/src/stories/components/select/select.stories.ts # packages/documentation/src/stories/components/switch/switch.stories.ts # packages/documentation/src/stories/components/toast/toast.stories.ts
# Conflicts: # packages/documentation/src/stories/components/select/select.stories.ts
|
Kudos, SonarCloud Quality Gate passed!
|
imagoiq
removed
the
on hold
|
Button-group snapshots have been added. @alizedebray you can review |
What
Use
postcss-pseudo-classesplugin to simulate pseudo-class likehover,focus, etc. This plugin rewrite the associated stylesheet and tries to replace the defined pseudo-class with a class using the following naming template:${pseudoClassName}.Limitations
Misc
Snapshots that haven't been changed because they don't have a snapshot file currently: