fix(generate tokens): prefix tokens with a t_#11002
Conversation
|
Preview: https://patternfly-react-pr-11002.surge.sh A11y report: https://patternfly-react-pr-11002-a11y.surge.sh |
mcoker
left a comment
mcoker
left a comment
There was a problem hiding this comment.
LGTM! I did have to do a search and replace for @patternfly/react-tokens/dist/esm/global_ with @patternfly/react-tokens/dist/esm/t_global_ in react-core/src and react-charts/src to get the build to work but the t_* tokens look to have all generated correctly 👍
| // Helpers | ||
| const formatCustomPropertyName = (key) => | ||
| key.replace(`--pf-${version}-`, '').replace('--pf-t--', '').replace(/-+/g, '_'); | ||
| key.replace(`--pf-${version}-`, '').replace('--pf-t--', 't_').replace(/-+/g, '_'); |
There was a problem hiding this comment.
I'm curious why the version has been removed?
There was a problem hiding this comment.
I built this branch locally and react-tokens still generates duplicates. The only difference now is one file is prefixed with "t_".
For example:
packages/react-tokens/dist/esm/chart_global_label_Margin.js
packages/react-tokens/dist/esm/t_chart_global_label_margin.js
There was a problem hiding this comment.
Hey @dlabrecq. The original bug is because the PF CSS has variables named very similarly like these two - --pf-v6-chart-global--label--Margin and --pf-t--chart--global--label--margin. The react-tokens package parses the PF CSS, finds all of our variables, and creates a react-token for each one with a name based based off of what the CSS variable name is. Most of the PF CSS vars fit into 4 categories:
- Components -
--pf-v6-c-[component]creates a react token likec_[component] - Layouts -
--pf-v6-l-[layout], createsl_[layout] - Charts -
--pf-v6-chart-[color/global/axis/bar/etc], createschart_[color/global/axis/bar/etc] - Tokens, aka global vars -
--pf-t--[color/global/chart/etc], creates[color/global/chart/etc]_
So for the vars reference above, --pf-v6-chart-global--label--Margin and --pf-t--chart--global--label--margin, the resulting tokens are chart_global_label_Margin and chart_global_label_margin. There are a bunch of ways we could address that, but since the CSS token vars (--pf-t--[...]) are always prefixed with -t--, prefixing the react token filename with t_[...] solves this problem and follows the format of other prefixed vars/tokens in PF (--pf-v6-c and --pf-v6-l).
There was a problem hiding this comment.
Thanks for the explanation. I didn't realize we wanted to expose both tokens and variables in this package
|
@tlabaj Can you link the org PR and then we can merge this. |
tlabaj
force-pushed
the
generate_tokens
branch
2 times, most recently
from
c60444b to
328d54f
Compare
tlabaj
force-pushed
the
generate_tokens
branch
from
328d54f to
dcfcb7a
Compare
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
6 participants
What: Closes #10985
A issue was noticed that react-token created chart token exports that differed by one uppercase character. example
export { chart_global_label_Margin } from './chart_global_label_Margin'; export { chart_global_label_margin } from './chart_global_label_margin';To test pull down this branch, build and look at the
react-tokensdistdirectory.eg. of token before change
after change
@thatblindgeye could we write code mod for this?