From e05023f7d24d0d36d662078a952c4fda7e65c69a Mon Sep 17 00:00:00 2001 From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Date: Wed, 23 Oct 2024 07:34:49 +0200 Subject: [PATCH] fix: check props on componentDidLoad #3775 (#3796) --- .changeset/tiny-socks-count.md | 7 +++++++ .../post-accordion-item/post-accordion-item.tsx | 7 +++++-- .../src/components/post-alert/post-alert.tsx | 2 +- .../src/components/post-icon/post-icon.tsx | 2 +- packages/styles/package.json | 2 +- packages/tokens/package.json | 4 +++- pnpm-lock.yaml | 17 ++++++++++------- 7 files changed, 28 insertions(+), 13 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 9a8d20558d..195d320927 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 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/styles/package.json b/packages/styles/package.json index f1e08ef586..3b8f45fa84 100644 --- a/packages/styles/package.json +++ b/packages/styles/package.json @@ -22,7 +22,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 d7e0544560..7e4ca2cac2 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", @@ -33,6 +34,7 @@ }, "devDependencies": { "@tokens-studio/sd-transforms": "0.16.1", + "rimraf": "6.0.1", "style-dictionary": "4.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78db28b749..df059ab891 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1223,6 +1223,9 @@ importers: '@tokens-studio/sd-transforms': specifier: 0.16.1 version: 0.16.1(style-dictionary@4.0.0) + rimraf: + specifier: 6.0.1 + version: 6.0.1 style-dictionary: specifier: 4.0.0 version: 4.0.0 @@ -11264,7 +11267,7 @@ snapshots: '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.7(@types/node@20.14.9)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.18(postcss@8.4.35) - babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3) + babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)) babel-plugin-istanbul: 6.1.1 browserslist: 4.23.0 copy-webpack-plugin: 11.0.0(webpack@5.90.3(esbuild@0.20.1)) @@ -11354,11 +11357,11 @@ snapshots: '@babel/preset-env': 7.24.0(@babel/core@7.24.0) '@babel/runtime': 7.24.0 '@discoveryjs/json-ext': 0.5.7 - '@ngtools/webpack': 17.3.8(@angular/compiler-cli@17.3.11(@angular/compiler@17.3.11(@angular/core@17.3.11(rxjs@7.8.1)(zone.js@0.14.7)))(typescript@5.3.3))(typescript@5.3.3)(webpack@5.90.3) + '@ngtools/webpack': 17.3.8(@angular/compiler-cli@17.3.11(@angular/compiler@17.3.11(@angular/core@17.3.11(rxjs@7.8.1)(zone.js@0.14.7)))(typescript@5.3.3))(typescript@5.3.3)(webpack@5.90.3(esbuild@0.20.1)) '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.7(@types/node@20.12.7)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.18(postcss@8.4.35) - babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3) + babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)) babel-plugin-istanbul: 6.1.1 browserslist: 4.23.0 copy-webpack-plugin: 11.0.0(webpack@5.90.3(esbuild@0.20.1)) @@ -11448,11 +11451,11 @@ snapshots: '@babel/preset-env': 7.24.0(@babel/core@7.24.0) '@babel/runtime': 7.24.0 '@discoveryjs/json-ext': 0.5.7 - '@ngtools/webpack': 17.3.8(@angular/compiler-cli@17.3.11(@angular/compiler@17.3.11(@angular/core@17.3.11(rxjs@7.8.1)(zone.js@0.14.7)))(typescript@5.3.3))(typescript@5.3.3)(webpack@5.90.3) + '@ngtools/webpack': 17.3.8(@angular/compiler-cli@17.3.11(@angular/compiler@17.3.11(@angular/core@17.3.11(rxjs@7.8.1)(zone.js@0.14.7)))(typescript@5.3.3))(typescript@5.3.3)(webpack@5.90.3(esbuild@0.20.1)) '@vitejs/plugin-basic-ssl': 1.1.0(vite@5.1.7(@types/node@20.14.9)(less@4.2.0)(sass@1.71.1)(terser@5.29.1)) ansi-colors: 4.1.3 autoprefixer: 10.4.18(postcss@8.4.35) - babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3) + babel-loader: 9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)) babel-plugin-istanbul: 6.1.1 browserslist: 4.23.0 copy-webpack-plugin: 11.0.0(webpack@5.90.3(esbuild@0.20.1)) @@ -14293,7 +14296,7 @@ snapshots: typescript: 5.3.3 webpack: 5.90.3(esbuild@0.20.1) - '@ngtools/webpack@17.3.8(@angular/compiler-cli@17.3.11(@angular/compiler@17.3.11(@angular/core@17.3.11(rxjs@7.8.1)(zone.js@0.14.7)))(typescript@5.3.3))(typescript@5.3.3)(webpack@5.90.3)': + '@ngtools/webpack@17.3.8(@angular/compiler-cli@17.3.11(@angular/compiler@17.3.11(@angular/core@17.3.11(rxjs@7.8.1)(zone.js@0.14.7)))(typescript@5.3.3))(typescript@5.3.3)(webpack@5.90.3(esbuild@0.20.1))': dependencies: '@angular/compiler-cli': 17.3.11(@angular/compiler@17.3.11(@angular/core@17.3.11(rxjs@7.8.1)(zone.js@0.14.7)))(typescript@5.3.3) typescript: 5.3.3 @@ -17139,7 +17142,7 @@ snapshots: transitivePeerDependencies: - supports-color - babel-loader@9.1.3(@babel/core@7.24.0)(webpack@5.90.3): + babel-loader@9.1.3(@babel/core@7.24.0)(webpack@5.90.3(esbuild@0.20.1)): dependencies: '@babel/core': 7.24.0 find-cache-dir: 4.0.0