From ffd6848c7c6eb6c148755273a58828e1b15d434e Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Tue, 5 Dec 2023 11:51:36 +0100 Subject: [PATCH 01/44] WIP checkbox changes --- .../components/input-checkbox/checkbox.css | 46 ++++++++----------- .../src/components/input-checkbox/common.css | 4 -- .../components/input-checkbox/component.tsx | 13 ++---- 3 files changed, 22 insertions(+), 41 deletions(-) diff --git a/packages/components/src/components/input-checkbox/checkbox.css b/packages/components/src/components/input-checkbox/checkbox.css index c1b711310c..f3681aedf3 100644 --- a/packages/components/src/components/input-checkbox/checkbox.css +++ b/packages/components/src/components/input-checkbox/checkbox.css @@ -1,32 +1,24 @@ @layer kol-component { - .default input[type='checkbox'] { - height: 1.5em; - width: 1.5em; - } - - .default input[type='checkbox']:before { - display: block; - height: 1.5em; - position: relative; - width: 1.5em; - } + .default { + & label[slot='input'] { + align-items: center; + display: flex; + height: var(--a11y-min-size); + justify-content: center; + width: var(--a11y-min-size); + } - .default input[type='checkbox']:checked:before { - border-radius: 1px; - border-style: solid; - border-width: 0 3px 3px 0; - height: 0.75em; - left: calc(0.375em - 2px); - transform: rotate(40deg) translate(-50%, -50%); - top: calc(0.7125em - 2px); - width: 0.375em; - } + & .icon { + align-items: center; + border: 1px solid; + display: flex; + height: 22px; + justify-content: center; + width: 22px; + } - .default input[type='checkbox']:indeterminate:before { - background-color: #000; - height: 0.2em; - left: 0.24em; - top: 0.575em; - width: 0.8em; + &:has(input[type='checkbox']:not(:checked):not(:indeterminate)) .icon::part(icon) { + display: none; + } } } diff --git a/packages/components/src/components/input-checkbox/common.css b/packages/components/src/components/input-checkbox/common.css index 2b38838e9b..1948c82015 100644 --- a/packages/components/src/components/input-checkbox/common.css +++ b/packages/components/src/components/input-checkbox/common.css @@ -71,10 +71,6 @@ cursor: not-allowed; } - .default kol-icon { - display: none; - } - kol-input.required .tooltip-content .span-label::after { content: '*'; } diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx index 03fcda4d50..4e14e5f6eb 100644 --- a/packages/components/src/components/input-checkbox/component.tsx +++ b/packages/components/src/components/input-checkbox/component.tsx @@ -86,17 +86,16 @@ export class KolInputCheckbox implements API { {this.state._label} )} -
+
+ ); @@ -361,12 +360,6 @@ export class KolInputCheckbox implements API { this.controller.componentWillLoad(); } - private handleIconClick(event: Event): void { - if (!this.state._disabled) { - this.onChange(event); - } - } - private onChange = (event: Event): void => { this._checked = !this._checked; this._indeterminate = false; From 891f9f7763d1fa897806c7bc8a54ddf5c83e52ec Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Tue, 5 Dec 2023 14:25:25 +0100 Subject: [PATCH 02/44] fix: border-radius for checkbox type button with hide-label option --- packages/themes/bmf/src/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/themes/bmf/src/index.ts b/packages/themes/bmf/src/index.ts index 7771ec17d8..8b8ee1c8d0 100644 --- a/packages/themes/bmf/src/index.ts +++ b/packages/themes/bmf/src/index.ts @@ -2003,6 +2003,10 @@ export const BMF = KoliBri.createTheme('bmf', { min-width: 32px; place-content: center; } + :host kol-input.button.hide-label > .input { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } :host kol-input.button > .input > div { display: flex; } From 5a194449de89bccd360434ea92e84a769ec3c3db Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Tue, 5 Dec 2023 15:57:53 +0100 Subject: [PATCH 03/44] feat: Use icons for all checkbox states; theme bmf --- .../components/input-checkbox/checkbox.css | 21 +++-- .../components/input-checkbox/component.tsx | 4 +- packages/components/src/components/input.css | 2 +- packages/themes/bmf/src/index.ts | 83 ++++++++----------- 4 files changed, 49 insertions(+), 61 deletions(-) diff --git a/packages/components/src/components/input-checkbox/checkbox.css b/packages/components/src/components/input-checkbox/checkbox.css index f3681aedf3..6c65e27d10 100644 --- a/packages/components/src/components/input-checkbox/checkbox.css +++ b/packages/components/src/components/input-checkbox/checkbox.css @@ -1,24 +1,27 @@ @layer kol-component { .default { - & label[slot='input'] { + & .checkbox-container { align-items: center; display: flex; height: var(--a11y-min-size); justify-content: center; + position: relative; width: var(--a11y-min-size); } & .icon { - align-items: center; - border: 1px solid; - display: flex; - height: 22px; - justify-content: center; - width: 22px; + display: block; + inset: auto; + position: absolute; + z-index: 1; } - - &:has(input[type='checkbox']:not(:checked):not(:indeterminate)) .icon::part(icon) { + &:has(.checkbox-input-element:not(:checked):not(:indeterminate)) .icon::part(icon) { display: none; } + + & .checkbox-input-element { + width: 22px; + height: 22px; + } } } diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx index 4e14e5f6eb..806fe42a5e 100644 --- a/packages/components/src/components/input-checkbox/component.tsx +++ b/packages/components/src/components/input-checkbox/component.tsx @@ -86,7 +86,7 @@ export class KolInputCheckbox implements API { {this.state._label} )} -