From 64a2b4c10faef988de88f1cda0673770174fae78 Mon Sep 17 00:00:00 2001 From: Peter Laske <37439758+laske185@users.noreply.github.com> Date: Fri, 9 May 2025 12:06:47 +0200 Subject: [PATCH 1/2] refactor: remove variant css class on button-wc host - Refactored button styles across themes to utilize mixins for consistency - Updated link-button, split-button, and toolbar styles to use the kol-button mixin for uniformity. - Simplified button styles in ECL and ITZBund themes by removing redundant CSS rules and leveraging mixins. - Adjusted border-radius and padding properties to ensure consistent button appearance. - Enhanced focus and hover states for buttons to improve accessibility and user experience. Refs: #7514 --- .../src/components/button/shadow.tsx | 2 - .../test/__snapshots__/snapshot.spec.tsx.snap | 20 +-- .../src/components/link-button/shadow.tsx | 4 +- .../test/__snapshots__/snapshot.spec.tsx.snap | 14 +- .../src/components/link/component.tsx | 37 ++++- .../test/__snapshots__/snapshot.spec.tsx.snap | 14 +- .../src/components/popover-button/shadow.tsx | 5 +- .../test/__snapshots__/snapshot.spec.tsx.snap | 2 +- .../src/components/split-button/shadow.tsx | 2 - .../test/__snapshots__/snapshot.spec.tsx.snap | 20 +-- .../components/src/schema/components/link.ts | 14 ++ .../themes/bwst/src/components/button.scss | 13 -- .../bwst/src/components/link-button.scss | 142 +----------------- .../bwst/src/components/split-button.scss | 33 ++-- .../themes/bwst/src/components/toolbar.scss | 17 --- packages/themes/bwst/src/mixins/button.scss | 81 +++++----- packages/themes/bwst/src/mixins/rem.scss | 3 + .../default/src/components/link-button.scss | 141 +---------------- .../default/src/components/split-button.scss | 9 +- .../default/src/components/toolbar.scss | 4 - .../themes/default/src/mixins/button.scss | 66 ++++---- .../ecl/src/ecl-ec/components/button.scss | 13 -- .../src/ecl-ec/components/link-button.scss | 15 +- .../ecl/src/ecl-ec/components/toolbar.scss | 13 -- .../themes/ecl/src/ecl-ec/mixins/button.scss | 65 ++++---- .../src/ecl-eu/components/link-button.scss | 125 +-------------- .../src/ecl-eu/components/split-button.scss | 16 ++ .../themes/ecl/src/ecl-eu/mixins/button.scss | 56 +++---- .../themes/itzbund/src/components/button.scss | 20 --- .../itzbund/src/components/link-button.scss | 7 +- .../itzbund/src/components/split-button.scss | 61 +++----- .../themes/itzbund/src/mixins/button.scss | 56 ++++--- 32 files changed, 340 insertions(+), 750 deletions(-) create mode 100644 packages/themes/bwst/src/mixins/rem.scss diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx index 53587388bb7..dfb1c172c48 100644 --- a/packages/components/src/components/button/shadow.tsx +++ b/packages/components/src/components/button/shadow.tsx @@ -62,8 +62,6 @@ export class KolButton implements ButtonProps, FocusableElement { ref={this.catchRef} class={{ button: true, - [this._variant as string]: this._variant !== 'custom', - [this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0, }} _accessKey={this._accessKey} _ariaControls={this._ariaControls} diff --git a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap index 598e2bf0aff..d238a533aa6 100644 --- a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`kol-button should render with _label="Label" _ariaDescription="Aria Description" 1`] = `