feat: allow token override with theme provider #5005

romainseb · 2023-11-23T15:09:16Z

What is the problem this PR is trying to solve?
We can't override some specific token using the theme provider

What is the chosen solution to this problem?
Allow to pass some css variables, for instance :

tokensOverride: {
   "--coral-color-accent-background-strong": "red"
}

Please check if the PR fulfills these requirements

The PR have used yarn changeset to a request a release from the CI if wanted.
The PR commit message follows our guidelines
Tests for the changes have been added (for bug fixes / features) And non reg done before need review
Docs have been added / updated (for bug fixes / features)
Related design / discussions / pages (not in jira), if any, are all linked or available in the PR

[ ] This PR introduces a breaking change

aamalric-talend

LGTM

aamalric-talend · 2023-11-23T15:12:48Z

tools/scripts-config-storybook-lib/.storybook-templates/preview.js

@@ -110,6 +110,9 @@ const defaultPreview = {
 				React.createElement(ThemeProvider, {
 					key: 'theme-provider-decorator',
 					theme: context.globals.theme,
+					// tokensOverride: {


Should we keep this comment ?

Was to have an example available somewhere but i agree it's not the best way to comment it

github-actions · 2023-11-23T15:15:31Z

5005

Demo is available here

github-actions · 2023-11-23T15:20:52Z

Title	Statements	Branches	Functions
assets-api	28.4% (25/88)	30.76% (16/52)	21.42% (3/14)
cmf	89.19% (1271/1425)	80.36% (618/769)	88.91% (361/406)
cmf-cqrs	87.43% (160/183)	70.23% (59/84)	84.21% (48/57)
cmf-router	69.23% (135/195)	55.71% (78/140)	56.81% (25/44)
components	90.39% (5607/6203)	81.62% (3221/3946)	87.63% (1418/1618)
containers	83.53% (1385/1658)	74.67% (687/920)	75.17% (327/435)
dataviz	85.6% (321/375)	66.66% (160/240)	75.64% (118/156)
design-system	66.66% (902/1353)	48.82% (437/895)	53.18% (192/361)
faceted-search	85.03% (693/815)	76.63% (269/351)	81.75% (242/296)
flow-designer	70.07% (651/929)	66.72% (355/532)	70.92% (200/282)
forms	85.72% (1675/1954)	75.22% (902/1199)	84.43% (472/559)
http	100% (85/85)	98.07% (51/52)	100% (34/34)
sagas	92.3% (24/26)	66.66% (4/6)	50% (2/4)
stepper	81.52% (150/184)	59.34% (54/91)	80.85% (38/47)
utils	100% (62/62)	90.9% (10/11)	100% (16/16)

github-actions · 2023-11-23T15:23:46Z

Size Change: +235 B (0%)

Total Size: 13.4 MB

Filename	Size	Change
`./packages/design-system/dist/TalendDesignSystem.js`	1.19 MB	+178 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`./packages/assets-api/dist/TalendAssetsApi.js`	7.21 kB	0 B
`./packages/assets-api/dist/TalendAssetsApi.js.dependencies.json`	2 B	0 B
`./packages/assets-api/dist/TalendAssetsApi.min.js`	3.34 kB	0 B
`./packages/assets-api/dist/TalendAssetsApi.min.js.dependencies.json`	2 B	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js`	103 kB	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js.dependencies.json`	672 B	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js`	21.3 kB	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js.dependencies.json`	695 B	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.js`	164 kB	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.js.dependencies.json`	1.25 kB	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js`	13 kB	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js.dependencies.json`	1.29 kB	0 B
`./packages/cmf/dist/TalendReactCmf.js`	636 kB	0 B
`./packages/cmf/dist/TalendReactCmf.js.dependencies.json`	1.31 kB	0 B
`./packages/cmf/dist/TalendReactCmf.min.js`	121 kB	0 B
`./packages/cmf/dist/TalendReactCmf.min.js.dependencies.json`	1.35 kB	0 B
`./packages/components/dist/TalendReactComponents.css`	403 kB	0 B
`./packages/components/dist/TalendReactComponents.js`	2.98 MB	0 B
`./packages/components/dist/TalendReactComponents.js.dependencies.json`	3.21 kB	0 B
`./packages/components/dist/TalendReactComponents.min.css`	210 kB	0 B
`./packages/components/dist/TalendReactComponents.min.js`	662 kB	0 B
`./packages/components/dist/TalendReactComponents.min.js.dependencies.json`	3.29 kB	0 B
`./packages/containers/dist/TalendReactContainers.css`	3.01 kB	0 B
`./packages/containers/dist/TalendReactContainers.js`	539 kB	0 B
`./packages/containers/dist/TalendReactContainers.js.dependencies.json`	1.55 kB	0 B
`./packages/containers/dist/TalendReactContainers.min.css`	1.74 kB	0 B
`./packages/containers/dist/TalendReactContainers.min.js`	105 kB	0 B
`./packages/containers/dist/TalendReactContainers.min.js.dependencies.json`	1.6 kB	0 B
`./packages/dataviz/dist/TalendReactDataviz.css`	28.9 kB	0 B
`./packages/dataviz/dist/TalendReactDataviz.js`	372 kB	0 B
`./packages/dataviz/dist/TalendReactDataviz.js.dependencies.json`	1.15 kB	0 B
`./packages/dataviz/dist/TalendReactDataviz.min.css`	12 kB	0 B
`./packages/dataviz/dist/TalendReactDataviz.min.js`	63.6 kB	0 B
`./packages/dataviz/dist/TalendReactDataviz.min.js.dependencies.json`	1.18 kB	0 B
`./packages/design-system/dist/TalendDesignSystem.css`	281 kB	0 B
`./packages/design-system/dist/TalendDesignSystem.js.dependencies.json`	1.43 kB	0 B
`./packages/design-system/dist/TalendDesignSystem.min.css`	172 kB	0 B
`./packages/design-system/dist/TalendDesignSystem.min.js`	237 kB	+57 B (0%)
`./packages/design-system/dist/TalendDesignSystem.min.js.dependencies.json`	1.48 kB	0 B
`./packages/design-tokens/dist/TalendDesignTokens.css`	44.6 kB	0 B
`./packages/design-tokens/dist/TalendDesignTokens.js`	39.6 kB	0 B
`./packages/design-tokens/dist/TalendDesignTokens.js.dependencies.json`	2 B	0 B
`./packages/design-tokens/dist/TalendDesignTokens.min.css`	41.5 kB	0 B
`./packages/design-tokens/dist/TalendDesignTokens.min.js`	33.3 kB	0 B
`./packages/design-tokens/dist/TalendDesignTokens.min.js.dependencies.json`	2 B	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.css`	37.8 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.js`	452 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.js.dependencies.json`	1.5 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.css`	17.1 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js`	102 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js.dependencies.json`	1.55 kB	0 B
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js`	51.5 kB	0 B
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js.dependencies.json`	1.25 kB	0 B
`./packages/forms/dist/TalendReactForms.css`	39.4 kB	0 B
`./packages/forms/dist/TalendReactForms.js`	778 kB	0 B
`./packages/forms/dist/TalendReactForms.js.dependencies.json`	1.35 kB	0 B
`./packages/forms/dist/TalendReactForms.min.css`	13.4 kB	0 B
`./packages/forms/dist/TalendReactForms.min.js`	205 kB	0 B
`./packages/forms/dist/TalendReactForms.min.js.dependencies.json`	1.39 kB	0 B
`./packages/http/dist/TalendHttp.js`	24.9 kB	0 B
`./packages/http/dist/TalendHttp.js.dependencies.json`	2 B	0 B
`./packages/http/dist/TalendHttp.min.js`	5.33 kB	0 B
`./packages/http/dist/TalendHttp.min.js.dependencies.json`	2 B	0 B
`./packages/icons/dist/bundle.js`	1.26 kB	0 B
`./packages/icons/dist/info.js`	26.1 kB	0 B
`./packages/icons/dist/react.esm.js`	585 kB	0 B
`./packages/icons/dist/react.js`	623 kB	0 B
`./packages/icons/dist/talend-icons-webfont.css`	17.4 kB	0 B
`./packages/icons/dist/talendicons.css`	334 B	0 B
`./packages/icons/dist/TalendIcons.js`	752 kB	0 B
`./packages/icons/dist/TalendIcons.js.dependencies.json`	128 B	0 B
`./packages/icons/dist/TalendIcons.min.js`	606 kB	0 B
`./packages/icons/dist/TalendIcons.min.js.dependencies.json`	131 B	0 B
`./packages/icons/dist/typeUtils.js`	14.4 kB	0 B
`./packages/jsfc/dist/index.js`	86.8 kB	0 B
`./packages/jsfc/dist/index.js.dependencies.json`	2 B	0 B
`./packages/router-bridge/dist/TalendRouterBridge.js`	134 kB	0 B
`./packages/router-bridge/dist/TalendRouterBridge.js.dependencies.json`	1.05 kB	0 B
`./packages/router-bridge/dist/TalendRouterBridge.min.js`	21 kB	0 B
`./packages/router-bridge/dist/TalendRouterBridge.min.js.dependencies.json`	1.07 kB	0 B
`./packages/sagas/dist/TalendReactSagas.js`	10.9 kB	0 B
`./packages/sagas/dist/TalendReactSagas.js.dependencies.json`	348 B	0 B
`./packages/sagas/dist/TalendReactSagas.min.js`	1.41 kB	0 B
`./packages/sagas/dist/TalendReactSagas.min.js.dependencies.json`	360 B	0 B
`./packages/stepper/dist/TalendReactStepper.css`	2.4 kB	0 B
`./packages/stepper/dist/TalendReactStepper.js`	97.4 kB	0 B
`./packages/stepper/dist/TalendReactStepper.js.dependencies.json`	1.27 kB	0 B
`./packages/stepper/dist/TalendReactStepper.min.css`	1.19 kB	0 B
`./packages/stepper/dist/TalendReactStepper.min.js`	9.64 kB	0 B
`./packages/stepper/dist/TalendReactStepper.min.js.dependencies.json`	1.31 kB	0 B
`./packages/storybook-docs/dist/globalStyles.js`	0 B	0 B	🆕
`./packages/storybook-docs/dist/globalStyles.min.css`	398 B	0 B
`./packages/storybook-docs/dist/managerStyles.js`	0 B	0 B	🆕
`./packages/storybook-docs/dist/managerStyles.min.css`	1.53 kB	0 B
`./packages/theme/dist/bootstrap.css`	172 kB	0 B
`./packages/theme/dist/bootstrap.js`	2.51 kB	0 B
`./packages/theme/dist/bootstrap.js.dependencies.json`	3 B	0 B

_{compressed-size-action}

tools/scripts-config-storybook-lib/.storybook-templates/preview.js

…w.js

feat: allow token override with theme provider

e64199e

romainseb added the need review label Nov 23, 2023

romainseb self-assigned this Nov 23, 2023

romainseb temporarily deployed to pull_request_unsafe November 23, 2023 15:09 — with GitHub Actions Inactive

aamalric-talend approved these changes Nov 23, 2023

View reviewed changes

mhuchet approved these changes Nov 23, 2023

View reviewed changes

romainseb commented Nov 24, 2023

View reviewed changes

tools/scripts-config-storybook-lib/.storybook-templates/preview.js Outdated Show resolved Hide resolved

Update tools/scripts-config-storybook-lib/.storybook-templates/previe…

7a0b841

…w.js

romainseb temporarily deployed to pull_request_unsafe November 24, 2023 06:57 — with GitHub Actions Inactive

romainseb enabled auto-merge (squash) November 24, 2023 06:57

romainseb merged commit 4dc277f into master Nov 24, 2023
10 checks passed

romainseb deleted the sromain/feat/allow-token-override branch November 24, 2023 07:08

romainseb had a problem deploying to pull_request_unsafe November 24, 2023 07:08 — with GitHub Actions Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow token override with theme provider #5005

feat: allow token override with theme provider #5005

romainseb commented Nov 23, 2023

aamalric-talend left a comment

aamalric-talend Nov 23, 2023

romainseb Nov 23, 2023

github-actions bot commented Nov 23, 2023

github-actions bot commented Nov 23, 2023 •

edited

Loading

github-actions bot commented Nov 23, 2023 •

edited

Loading

feat: allow token override with theme provider #5005

feat: allow token override with theme provider #5005

Conversation

romainseb commented Nov 23, 2023

aamalric-talend left a comment

Choose a reason for hiding this comment

aamalric-talend Nov 23, 2023

Choose a reason for hiding this comment

romainseb Nov 23, 2023

Choose a reason for hiding this comment

github-actions bot commented Nov 23, 2023

github-actions bot commented Nov 23, 2023 • edited Loading

github-actions bot commented Nov 23, 2023 • edited Loading

github-actions bot commented Nov 23, 2023 •

edited

Loading

github-actions bot commented Nov 23, 2023 •

edited

Loading