From e07dee0be1cd56107ba62242293246bcee37640b Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:17:49 +0200 Subject: [PATCH 1/3] fix: check props on componentDidLoad (#3775) Delays the prop checks until the last lifecycle hook to give frameworks time to render their props before the check runs. --------- Co-authored-by: github-actions[bot] --- .changeset/tiny-socks-count.md | 7 +++++++ .../components/post-accordion-item/post-accordion-item.tsx | 7 +++++-- .../components/src/components/post-alert/post-alert.tsx | 2 +- packages/components/src/components/post-icon/post-icon.tsx | 2 +- packages/components/src/components/post-logo/post-logo.tsx | 2 +- 5 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 .changeset/tiny-socks-count.md diff --git a/.changeset/tiny-socks-count.md b/.changeset/tiny-socks-count.md new file mode 100644 index 0000000000..0c4ac46682 --- /dev/null +++ b/.changeset/tiny-socks-count.md @@ -0,0 +1,7 @@ +--- +'@swisspost/design-system-components': patch +'@swisspost/design-system-components-angular': patch +'@swisspost/design-system-components-react': patch +--- + +Fixed an issue with property validation where some checks were run before the framework had the chance to add computed properties (for example Angular bindings like `[for]="$id"`). The checks are now delayed to work around this issue. diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx index f37be6652c..5d256f8616 100644 --- a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx +++ b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx @@ -40,7 +40,7 @@ export class PostAccordionItem { ); } - connectedCallback() { + componentDidLoad() { this.validateHeadingLevel(); } @@ -51,7 +51,10 @@ export class PostAccordionItem { // capture to make sure the "collapsed" property is updated before the event is consumed @Listen('postToggle', { capture: true }) onCollapseToggle(event: CustomEvent): void { - if (event.target === this.host && (event.target as HTMLElement).localName === 'post-accordion-item') { + if ( + event.target === this.host && + (event.target as HTMLElement).localName === 'post-accordion-item' + ) { this.collapsed = !event.detail; } } diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx index f114fbcd29..9296372d1d 100644 --- a/packages/components/src/components/post-alert/post-alert.tsx +++ b/packages/components/src/components/post-alert/post-alert.tsx @@ -104,7 +104,7 @@ export class PostAlert { */ @Event() postDismissed: EventEmitter; - connectedCallback() { + componentDidLoad() { this.validateDismissible(); this.validateFixed(); this.validateIcon(); diff --git a/packages/components/src/components/post-icon/post-icon.tsx b/packages/components/src/components/post-icon/post-icon.tsx index ba2dd5fbc9..6a48db0aba 100644 --- a/packages/components/src/components/post-icon/post-icon.tsx +++ b/packages/components/src/components/post-icon/post-icon.tsx @@ -110,7 +110,7 @@ export class PostIcon { checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.'); } - componentWillLoad() { + componentDidLoad() { this.validateBase(); this.validateName(); this.validateFlipH(); diff --git a/packages/components/src/components/post-logo/post-logo.tsx b/packages/components/src/components/post-logo/post-logo.tsx index e81cb357f2..d5ba21c1da 100644 --- a/packages/components/src/components/post-logo/post-logo.tsx +++ b/packages/components/src/components/post-logo/post-logo.tsx @@ -23,7 +23,7 @@ export class PostLogo { checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid'); } - connectedCallback() { + componentDidLoad() { this.validateUrl(); this.checkDescription(); } From bd4cbb1d480a26abe3f85e890fa05b4c42448568 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 23 Oct 2024 06:42:47 +0200 Subject: [PATCH 2/3] clean up build files before a fresh build --- packages/styles/package.json | 2 +- packages/tokens/package.json | 4 +++- pnpm-lock.yaml | 3 +++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/styles/package.json b/packages/styles/package.json index a59dc05bce..ebb385d444 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -21,7 +21,7 @@ "start": "gulp watch", "build": "pnpm clean && gulp build", "unit": "gulp sass:tests", - "clean": "rimraf out-tsc dist", + "clean": "rimraf out-tsc dist src/tokens/temp", "format": "prettier src/**/*.scss --write", "lint": "stylelint src/**/*.scss", "lint:fix": "stylelint src/**/*.scss --fix" diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 0c1a081637..f9b9413fdf 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -15,7 +15,8 @@ }, "type": "module", "scripts": { - "build": "node ./build.js" + "build": "pnpm clean && node ./build.js", + "clean": "rimraf dist" }, "keywords": [ "tokens", @@ -32,6 +33,7 @@ }, "devDependencies": { "@tokens-studio/sd-transforms": "1.2.2", + "rimraf": "6.0.1", "style-dictionary": "4.0.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e6bcfb2493..ce3c1c57ef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1223,6 +1223,9 @@ importers: '@tokens-studio/sd-transforms': specifier: 1.2.2 version: 1.2.2(style-dictionary@4.0.1) + rimraf: + specifier: 6.0.1 + version: 6.0.1 style-dictionary: specifier: 4.0.1 version: 4.0.1 From e1d6ec2fd51be25f0d6365c11b94d190148d6f82 Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Wed, 23 Oct 2024 06:58:09 +0200 Subject: [PATCH 3/3] stops propagation --- .../components/src/components/post-accordion/post-accordion.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/components/post-accordion/post-accordion.tsx b/packages/components/src/components/post-accordion/post-accordion.tsx index 0138858388..c285dc5e8d 100644 --- a/packages/components/src/components/post-accordion/post-accordion.tsx +++ b/packages/components/src/components/post-accordion/post-accordion.tsx @@ -50,6 +50,8 @@ export class PostAccordion { @Listen('postToggle') collapseToggleHandler(event: CustomEvent) { + event.stopPropagation(); + const toggledItem = event.target as HTMLElement; const closestParentAccordion = toggledItem.closest('post-accordion');