diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5d2ea9e5da..3f1398ba24 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -59,7 +59,7 @@ We work according to the Git flow: https://medium.com/android-news/gitflow-with- 9. Build all packages within the mono repository `pnpm -r build` 10. Navigate to the desired package in our monorepo 11. When you want to start the project navigate to `packages/components/` and run `pnpm dev` -12. To watch for changes navigate to `samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically +12. To watch for changes navigate to `packages/samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically ### Develop new component @@ -78,8 +78,8 @@ If it is also necessary to edit dependent packages such as `@public-ui/component ### Back porting to older Major-Versions -By default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.7.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1.7` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status. -The simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1.7`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request. +By default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status. +The simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request. ### Snapshot Testing for Visual Changes @@ -94,24 +94,24 @@ The following methods can be used to update the snapshots. 1. **GitHub website:** Update the snapshots directly on the GitHub website by following these steps. - - Navigate to the `Actions` tab in the `kolibri` repository. - - Execute the `03 - Update Snapshots` action. - - Select the desired branch in which you want to update the snapshots. - - The workflow checks out the branch, updates all snapshot files, and commits the changes to that branch. +- Navigate to the `Actions` tab in the `kolibri` repository. +- Execute the `03 - Update Snapshots` action. +- Select the desired branch in which you want to update the snapshots. +- The workflow checks out the branch, updates all snapshot files, and commits the changes to that branch. 2. **Terminal Command:** Use the [GitHub CLI (gh)](https://cli.github.com/) to run the `update-snapshots.yml` action from the local terminal. This method is recommended for updating snapshots on the current branch without navigating to the GitHub website. For terminal convenience, the [GitHub CLI (gh)](https://cli.github.com/) needs to be installed. - - Run the following command within the project directory to update the snapshots in your checked-out branch: - ```bash - gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` - ``` - - If your want to delete all snapshots before regenerating them add `-f purge_snapshots=true` to the command: - ```bash - gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true - ``` - - You can also run the action on a different branch by specifying the another target branch with the `-r ` flag. For example, to update snapshots on the `main` branch: - ```bash - gh workflow run update-snapshots.yml -r main - ``` +- Run the following command within the project directory to update the snapshots in your checked-out branch: + ```bash + gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` + ``` +- If your want to delete all snapshots before regenerating them add `-f purge_snapshots=true` to the command: + ```bash + gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true + ``` +- You can also run the action on a different branch by specifying the another target branch with the `-r ` flag. For example, to update snapshots on the `main` branch: + ```bash + gh workflow run update-snapshots.yml -r main + ``` These steps ensure that visual snapshots are updated systematically, maintaining the integrity of the testing process. diff --git a/package.json b/package.json index 65c98d186b..de140569f3 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,20 @@ { "devDependencies": { - "@commitlint/cli": "19.6.0", + "@commitlint/cli": "19.6.1", "@commitlint/config-conventional": "19.6.0", "cross-env": "7.0.3", "husky": "9.1.7", "js-yaml": "4.1.0", "lerna": "8.1.9", - "license-report": "6.7.0", - "lint-staged": "15.2.10", + "license-report": "6.7.1", + "lint-staged": "15.2.11", "npm-check-updates": "17.1.11", "npm-run-all": "4.1.5", - "prettier": "3.3.3", + "prettier": "3.4.2", "rimraf": "6.0.1", "ts-node": "10.9.2", "ts-prune": "0.10.3", - "typescript": "5.6.3" + "typescript": "5.7.2" }, "engines": { "pnpm": "^9" diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json index 9e202b1955..2bd413e311 100644 --- a/packages/adapters/angular/v15/package.json +++ b/packages/adapters/angular/v15/package.json @@ -74,7 +74,7 @@ "@types/minimatch": "5.1.2", "@types/minimist": "1.2.5", "@types/normalize-package-data": "2.4.4", - "prettier": "3.3.3", + "prettier": "3.4.2", "rimraf": "6.0.1", "rxjs": "7.8.1", "typescript": "4.9.5", diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json index 926f0315ae..21d47b6891 100644 --- a/packages/adapters/angular/v16/package.json +++ b/packages/adapters/angular/v16/package.json @@ -74,7 +74,7 @@ "@types/minimatch": "5.1.2", "@types/minimist": "1.2.5", "@types/normalize-package-data": "2.4.4", - "prettier": "3.3.3", + "prettier": "3.4.2", "rimraf": "6.0.1", "rxjs": "7.8.1", "typescript": "5.1.6", diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json index 91116d211f..a2b0d4c489 100644 --- a/packages/adapters/angular/v17/package.json +++ b/packages/adapters/angular/v17/package.json @@ -74,7 +74,7 @@ "@types/minimatch": "5.1.2", "@types/minimist": "1.2.5", "@types/normalize-package-data": "2.4.4", - "prettier": "3.3.3", + "prettier": "3.4.2", "rimraf": "6.0.1", "rxjs": "7.8.1", "typescript": "5.4.5", diff --git a/packages/adapters/angular/v18/package.json b/packages/adapters/angular/v18/package.json index 70a6309397..431b3ce392 100644 --- a/packages/adapters/angular/v18/package.json +++ b/packages/adapters/angular/v18/package.json @@ -66,22 +66,22 @@ "import": "./dist/index.js" }, "devDependencies": { - "@angular/common": "18.2.12", - "@angular/compiler": "18.2.12", - "@angular/compiler-cli": "18.2.12", - "@angular/core": "18.2.12", + "@angular/common": "18.2.13", + "@angular/compiler": "18.2.13", + "@angular/compiler-cli": "18.2.13", + "@angular/core": "18.2.13", "@public-ui/components": "workspace:*", "@types/minimatch": "5.1.2", "@types/minimist": "1.2.5", "@types/normalize-package-data": "2.4.4", - "prettier": "3.3.3", + "prettier": "3.4.2", "rimraf": "6.0.1", "rxjs": "7.8.1", "typescript": "5.5.4", "zone.js": "0.14.10" }, "peerDependencies": { - "@angular/core": "18.2.12", + "@angular/core": "18.2.13", "@public-ui/components": "workspace:*" }, "files": [ diff --git a/packages/adapters/preact/package.json b/packages/adapters/preact/package.json index 053b6955d2..cda8c04fdb 100644 --- a/packages/adapters/preact/package.json +++ b/packages/adapters/preact/package.json @@ -55,11 +55,11 @@ "@public-ui/components": "workspace:*", "react": "18.3.1", "react-dom": "18.3.1", - "typescript": "5.6.3", + "typescript": "5.7.2", "unbuild": "1.2.1" }, "peerDependencies": { - "preact": ">=10.24.3" + "preact": ">=10.25.2" }, "sideEffects": false, "type": "module", diff --git a/packages/adapters/react-standalone/package.json b/packages/adapters/react-standalone/package.json index d9197787eb..489fcfdfa5 100644 --- a/packages/adapters/react-standalone/package.json +++ b/packages/adapters/react-standalone/package.json @@ -52,7 +52,7 @@ "@public-ui/react": "workspace:*", "cpy-cli": "5.0.0", "rimraf": "6.0.1", - "webpack": "5.96.1", + "webpack": "5.97.1", "webpack-cli": "5.1.4" }, "peerDependencies": { diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json index f88508daa1..3e56ca9576 100644 --- a/packages/adapters/react/package.json +++ b/packages/adapters/react/package.json @@ -54,10 +54,10 @@ "@types/minimist": "1.2.5", "@types/normalize-package-data": "2.4.4", "@types/react": "18.3.4", - "@types/react-dom": "18.3.1", + "@types/react-dom": "18.3.5", "react": "18.2.0", "react-dom": "18.2.0", - "typescript": "5.6.3", + "typescript": "5.7.2", "unbuild": "1.2.1" }, "peerDependencies": { diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json index 0fd0a03900..e33b00de79 100644 --- a/packages/adapters/solid/package.json +++ b/packages/adapters/solid/package.json @@ -54,7 +54,7 @@ "@types/minimist": "1.2.5", "@types/normalize-package-data": "2.4.4", "solid-js": "1.9.3", - "typescript": "5.6.3", + "typescript": "5.7.2", "unbuild": "1.2.1" }, "peerDependencies": { diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json index 4196796704..d921d8c7df 100644 --- a/packages/adapters/vue/package.json +++ b/packages/adapters/vue/package.json @@ -49,12 +49,12 @@ "prepack": "unbuild" }, "devDependencies": { - "@babel/types": "7.26.0", + "@babel/types": "7.26.3", "@public-ui/components": "workspace:*", "@types/minimatch": "5.1.2", "@types/minimist": "1.2.5", "@types/normalize-package-data": "2.4.4", - "typescript": "5.6.3", + "typescript": "5.7.2", "unbuild": "1.2.1", "vue": "3.4.21" }, diff --git a/packages/components/package.json b/packages/components/package.json index 595cf815a6..eb16a19c7a 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -73,7 +73,7 @@ }, "dependencies": { "@floating-ui/dom": "1.6.12", - "adopted-style-sheets": "1.1.6", + "adopted-style-sheets": "1.1.7", "clsx": "2.1.1", "color-convert": "2.0.1", "color-rgba": "2.4.0", @@ -85,7 +85,7 @@ "wcag-contrast": "3.0.0" }, "devDependencies": { - "@playwright/test": "1.49.0", + "@playwright/test": "1.49.1", "@public-ui/stencil-angular-output-target": "0.9.0", "@public-ui/stencil-react-output-target": "0.6.0", "@public-ui/stencil-solid-output-target": "0.2.0", @@ -110,25 +110,25 @@ "cssnano": "7.0.6", "eslint": "8.57.1", "eslint-plugin-html": "8.1.2", - "eslint-plugin-jsdoc": "50.5.0", + "eslint-plugin-jsdoc": "50.6.1", "eslint-plugin-jsx-a11y": "6.10.2", "eslint-plugin-react": "7.37.2", "jest": "26.6.3", - "knip": "5.37.1", - "lighthouse": "12.2.2", + "knip": "5.40.0", + "lighthouse": "12.3.0", "mustache": "4.2.0", "postcss": "8.4.49", "postcss-sorting": "9.1.0", - "prettier": "3.3.3", + "prettier": "3.4.2", "pug": "3.0.3", "rimraf": "6.0.1", "stencil-awesome-test": "1.0.6", - "terser": "5.36.0", + "terser": "5.37.0", "twig": "1.17.1", - "typescript": "5.6.3" + "typescript": "5.7.2" }, "peerDependencies": { - "adopted-style-sheets": "1.1.6" + "adopted-style-sheets": "1.1.7" }, "files": [ "assets", diff --git a/packages/components/src/components/input-checkbox/checkbox.scss b/packages/components/src/components/input-checkbox/checkbox.scss index 73313c0688..ba8104f805 100644 --- a/packages/components/src/components/input-checkbox/checkbox.scss +++ b/packages/components/src/components/input-checkbox/checkbox.scss @@ -14,6 +14,7 @@ inset: auto; position: absolute; z-index: 1; + pointer-events: none; } &:not(.checked):not(.indeterminate) .icon::part(icon) { diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx index 8073402b0d..6ae4541cfc 100644 --- a/packages/components/src/components/input-checkbox/shadow.tsx +++ b/packages/components/src/components/input-checkbox/shadow.tsx @@ -1,3 +1,8 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import type { JSX } from '@stencil/core'; +import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core'; +import clsx from 'clsx'; + import type { CheckedPropType, HideErrorPropType, @@ -18,18 +23,16 @@ import type { SyncValueBySelectorPropType, TooltipAlignPropType, } from '../../schema'; -import { buildBadgeTextString, showExpertSlot } from '../../schema'; -import type { JSX } from '@stencil/core'; -import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core'; import { nonce } from '../../utils/dev.utils'; import { tryToDispatchKoliBriEvent } from '../../utils/events'; -import { getRenderStates } from '../input/controller'; -import { InternalUnderlinedBadgeText } from '../../functional-components'; import { InputCheckboxController } from './controller'; -import { KolIconTag, KolInputTag } from '../../core/component-names'; import type { FocusableElement } from '../../schema/interfaces/FocusableElement'; +import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper'; +import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper'; +import KolIconFc from '../../functional-components/Icon'; + /** * @slot expert - Die Beschriftung der Checkbox. */ @@ -66,89 +69,70 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement { this.inputRef?.focus(); } - public render(): JSX.Element { - const { ariaDescribedBy } = getRenderStates(this.state); - const hasExpertSlot = showExpertSlot(this.state._label); + private getFormFieldProps(): FormFieldStateWrapperProps { + return { + state: this.state, + class: clsx('kol-input-checkbox', 'checkbox', this.state._variant, { + 'hide-label': !!this.state._hideLabel, + checked: this.state._checked, + indeterminate: this.state._indeterminate, + }), + tooltipAlign: this._tooltipAlign, + 'data-label-align': this.state._labelAlign || 'right', + 'data-role': this.state._variant === 'button' ? 'button' : undefined, + alert: this.showAsAlert(), + reverseLabelInput: this.state._labelAlign === 'right', + }; + } + private getInputProps(): InputStateWrapperProps { + return { + class: clsx('checkbox-input-element', { + 'visually-hidden': this.state._variant === 'button', + }), + ref: this.catchRef, + type: 'checkbox', + slot: 'input', + state: this.state, + ...this.controller.onFacade, + onInput: this.onInput, + onChange: this.onChange, + onFocus: (event: Event) => { + this.controller.onFacade.onFocus(event); + this.inputHasFocus = true; + }, + onBlur: (event: Event) => { + this.controller.onFacade.onBlur(event); + this.inputHasFocus = false; + }, + onClick: undefined, // onClick is not needed since onChange already triggers the correct event + }; + } + + private getIcon(): string { + if (this.state._indeterminate) return this.state._icons.indeterminate; + if (this.state._checked) return this.state._icons.checked; + return this.state._icons.unchecked; + } + + private getIconProps() { + return { + class: 'icon', + icons: this.getIcon(), + label: '', + }; + } + + public render(): JSX.Element { return ( - - - - {hasExpertSlot ? ( - - ) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? ( - <> - {' '} - - - ) : ( - {this.state._label} - )} - -