feat(design-system): add qlik-light theme #5062

romainseb · 2023-12-15T14:27:58Z

What is the problem this PR is trying to solve?

Create a new qlik-light theme
Migrate all Story of in storybook to Canvas of to fix deprecation warning
Bump @storybook to the latest version
Add the possibility to switch to qlik-light theme using storybook parameters

FYI global parameters change are not working on documentation stories but only on quick stories

What is the chosen solution to this problem?

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

github-actions · 2023-12-15T14:39:15Z

5062

Demo is available here

github-actions · 2023-12-15T14:45:26Z

Size Change: +98.4 kB (+1%)

Total Size: 16.6 MB

Filename	Size	Change
`./packages/components/dist/TalendReactComponents.css`	407 kB	+3.87 kB (+1%)
`./packages/components/dist/TalendReactComponents.js`	4.7 MB	+371 B (0%)
`./packages/components/dist/TalendReactComponents.min.css`	214 kB	+3.76 kB (+2%)
`./packages/design-system/dist/TalendDesignSystem.css`	315 kB	+22.9 kB (+8%)	🔍
`./packages/design-system/dist/TalendDesignSystem.min.css`	200 kB	+22.9 kB (+13%)	⚠️
`./packages/design-tokens/dist/TalendDesignTokens.css`	67.5 kB	+22.9 kB (+51%)	🆘
`./packages/design-tokens/dist/TalendDesignTokens.min.css`	63.3 kB	+21.8 kB (+53%)	🆘

ℹ️ View Unchanged

Filename	Size	Change
`./packages/assets-api/dist/TalendAssetsApi.js`	7.15 kB	0 B
`./packages/assets-api/dist/TalendAssetsApi.js.dependencies.json`	2 B	0 B
`./packages/assets-api/dist/TalendAssetsApi.min.js`	3.33 kB	0 B
`./packages/assets-api/dist/TalendAssetsApi.min.js.dependencies.json`	2 B	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js`	209 kB	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.js.dependencies.json`	672 B	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js`	39 kB	0 B
`./packages/cmf-cqrs/dist/TalendReactCmfCqrs.min.js.dependencies.json`	695 B	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.js`	163 kB	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.js.dependencies.json`	1.25 kB	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js`	12.8 kB	0 B
`./packages/cmf-router/dist/TalendReactCmfRouter.min.js.dependencies.json`	1.29 kB	0 B
`./packages/cmf/dist/TalendReactCmf.js`	739 kB	0 B
`./packages/cmf/dist/TalendReactCmf.js.dependencies.json`	1.31 kB	0 B
`./packages/cmf/dist/TalendReactCmf.min.js`	136 kB	0 B
`./packages/cmf/dist/TalendReactCmf.min.js.dependencies.json`	1.35 kB	0 B
`./packages/components/dist/TalendReactComponents.js.dependencies.json`	3.21 kB	0 B
`./packages/components/dist/TalendReactComponents.min.js`	1.28 MB	-5 B (0%)
`./packages/components/dist/TalendReactComponents.min.js.dependencies.json`	3.29 kB	0 B
`./packages/containers/dist/TalendReactContainers.css`	3.67 kB	0 B
`./packages/containers/dist/TalendReactContainers.js`	640 kB	0 B
`./packages/containers/dist/TalendReactContainers.js.dependencies.json`	1.4 kB	0 B
`./packages/containers/dist/TalendReactContainers.min.css`	2.34 kB	0 B
`./packages/containers/dist/TalendReactContainers.min.js`	121 kB	0 B
`./packages/containers/dist/TalendReactContainers.min.js.dependencies.json`	1.45 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.4 kB	0 B
`./packages/dataviz/dist/TalendReactDataviz.min.js.dependencies.json`	1.19 kB	0 B
`./packages/design-system/dist/TalendDesignSystem.js`	1.33 MB	-31 B (0%)
`./packages/design-system/dist/TalendDesignSystem.js.dependencies.json`	1.57 kB	0 B
`./packages/design-system/dist/TalendDesignSystem.min.js`	261 kB	-25 B (0%)
`./packages/design-system/dist/TalendDesignSystem.min.js.dependencies.json`	1.61 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.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.5 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.js`	555 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.js.dependencies.json`	1.36 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.css`	16.8 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js`	119 kB	0 B
`./packages/faceted-search/dist/TalendReactFacetedSearch.min.js.dependencies.json`	1.4 kB	0 B
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js`	50.8 kB	0 B
`./packages/flow-designer/dist/TalendReactFlowDesigner.min.js.dependencies.json`	1.25 kB	0 B
`./packages/forms/dist/TalendReactForms.css`	37.3 kB	0 B
`./packages/forms/dist/TalendReactForms.js`	876 kB	0 B
`./packages/forms/dist/TalendReactForms.js.dependencies.json`	1.35 kB	0 B
`./packages/forms/dist/TalendReactForms.min.css`	12.5 kB	0 B
`./packages/forms/dist/TalendReactForms.min.js`	220 kB	0 B
`./packages/forms/dist/TalendReactForms.min.js.dependencies.json`	1.39 kB	0 B
`./packages/http/dist/TalendHttp.js`	24.8 kB	0 B
`./packages/http/dist/TalendHttp.js.dependencies.json`	2 B	0 B
`./packages/http/dist/TalendHttp.min.js`	5.31 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.3 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 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.38 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}

github-actions · 2023-12-15T15:32:15Z

Title	Statements	Branches	Functions
assets-api	28.4% (25/88)	30.76% (16/52)	21.42% (3/14)
cmf	89.2% (1272/1426)	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.7% (5591/6164)	81.67% (3231/3956)	88.29% (1410/1597)
containers	83.71% (1388/1658)	74.81% (692/925)	75.17% (327/435)
dataviz	85.6% (321/375)	66.66% (160/240)	75.64% (118/156)
design-system	66.54% (899/1351)	48.56% (440/906)	53.18% (192/361)
faceted-search	84.8% (703/829)	77.8% (284/365)	81.33% (244/300)
flow-designer	70.07% (651/929)	66.72% (355/532)	70.92% (200/282)
forms	85.64% (1676/1957)	75.2% (913/1214)	84.4% (471/558)
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% (70/70)	90.9% (10/11)	100% (22/22)

aamalric-talend

Made some comments, otherwise LGTM

packages/components/src/SidePanel/SidePanel.stories.js

romainseb added 6 commits December 14, 2023 16:26

Add Qlik Light design tokens

0bf4e1a

update values

eab3a4b

update

4e737d1

update

40d52cf

Refactor ActionList and SidePanel components

fe337cf

Fix import order and update styles in HeaderBar components

8e780ed

romainseb added the need review label Dec 15, 2023

romainseb self-assigned this Dec 15, 2023

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 14:28 — with GitHub Actions Inactive

romainseb had a problem deploying to pull_request_unsafe December 15, 2023 14:28 — with GitHub Actions Error

Add @qlik-light theme

aeae055

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 14:29 — with GitHub Actions Inactive

Remove data-theme attribute from SidePanel component

217159c

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 14:59 — with GitHub Actions Inactive

romainseb had a problem deploying to pull_request_unsafe December 15, 2023 14:59 — with GitHub Actions Error

Update coral branding logo URL

974c0e8

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 15:05 — with GitHub Actions Inactive

romainseb had a problem deploying to pull_request_unsafe December 15, 2023 15:05 — with GitHub Actions Error

Update icons in HeaderBar component

5b72298

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 15:21 — with GitHub Actions Inactive

romainseb had a problem deploying to pull_request_unsafe December 15, 2023 15:21 — with GitHub Actions Error

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 15:21 — with GitHub Actions Inactive

Update SidePanel.stories.js and Status.mdx

c694737

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 15:36 — with GitHub Actions Inactive

romainseb had a problem deploying to pull_request_unsafe December 15, 2023 15:36 — with GitHub Actions Error

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 15:36 — with GitHub Actions Inactive

aamalric-talend approved these changes Dec 15, 2023

View reviewed changes

packages/components/src/SidePanel/SidePanel.stories.js Outdated Show resolved Hide resolved

packages/components/src/SidePanel/SidePanel.stories.js Outdated Show resolved Hide resolved

Refactor decorators in preview.js

c34f42c

romainseb temporarily deployed to pull_request_unsafe December 15, 2023 15:50 — with GitHub Actions Inactive

romainseb enabled auto-merge (squash) December 15, 2023 16:02

mhuchet approved these changes Dec 15, 2023

View reviewed changes

romainseb merged commit b2d93a4 into master Dec 15, 2023
11 checks passed

romainseb deleted the sromain/chore/qlik-theme branch December 15, 2023 16:07

romainseb had a problem deploying to pull_request_unsafe December 15, 2023 16:07 — with GitHub Actions Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(design-system): add qlik-light theme #5062

feat(design-system): add qlik-light theme #5062

romainseb commented Dec 15, 2023 •

edited

Loading

github-actions bot commented Dec 15, 2023

github-actions bot commented Dec 15, 2023 •

edited

Loading

github-actions bot commented Dec 15, 2023 •

edited

Loading

aamalric-talend left a comment

feat(design-system): add qlik-light theme #5062

feat(design-system): add qlik-light theme #5062

Conversation

romainseb commented Dec 15, 2023 • edited Loading

github-actions bot commented Dec 15, 2023

github-actions bot commented Dec 15, 2023 • edited Loading

github-actions bot commented Dec 15, 2023 • edited Loading

aamalric-talend left a comment

Choose a reason for hiding this comment

romainseb commented Dec 15, 2023 •

edited

Loading

github-actions bot commented Dec 15, 2023 •

edited

Loading

github-actions bot commented Dec 15, 2023 •

edited

Loading