From 53610bd3c4b6283657b43cd610599584c2ab8290 Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 17 Feb 2025 22:05:07 +0200 Subject: [PATCH 1/5] fix(combo): material theme hover state issue --- .../lib/core/styles/components/combo/_combo-theme.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index b5a80314a9c..83540f5a8a2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -274,6 +274,14 @@ } } + @if $variant == 'material' { + %form-group-bundle:not(%form-group-bundle--disabled):hover { + %igx-combo__toggle-button { + background: var-get($theme, 'toggle-button-background'); + } + } + } + .igx-input-group--filled { %igx-combo__toggle-button { color: var-get($theme, 'toggle-button-foreground-filled'); From 82dbfa62f0e955eb4c0051b475686bbee64db6ae Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 19 Feb 2025 16:21:21 +0200 Subject: [PATCH 2/5] fix(inputs): toggle button colors --- .../styles/components/combo/_combo-theme.scss | 5 ++--- .../input/_input-group-component.scss | 4 ++++ .../components/input/_input-group-theme.scss | 19 +++++++++++++++++++ .../components/select/_select-theme.scss | 9 ++++++++- 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 83540f5a8a2..0a1b47c1143 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -261,7 +261,6 @@ } } - %form-group-bundle:not(%form-group-bundle--disabled):hover, %form-group-bundle:not(%form-group-bundle--disabled):focus-within { %igx-combo__toggle-button { color: var-get($theme, 'toggle-button-foreground-focus'); @@ -274,10 +273,10 @@ } } - @if $variant == 'material' { + @if $variant == 'indigo' { %form-group-bundle:not(%form-group-bundle--disabled):hover { %igx-combo__toggle-button { - background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground-focus'); } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index 954ada68b74..4524cc83f93 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -407,6 +407,10 @@ @include e(bundle) { @extend %form-group-bundle--border !optional; + + &:hover { + @extend %form-group-bundle--border--hover !optional; + } } @include e(bundle-main) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 28b0696f88a..7207633d1a2 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -805,6 +805,25 @@ } } + %form-group-bundle--border--hover { + %form-group-bundle-start { + border-color: var-get($theme, 'hover-border-color'); + } + + %igx-input-group__filler { + border-color: var-get($theme, 'hover-border-color'); + } + + %igx-input-group__notch { + border-block-start-color: var-get($theme, 'hover-border-color'); + border-block-end-color: var-get($theme, 'hover-border-color'); + } + + %form-group-bundle-end { + border-color: var-get($theme, 'hover-border-color'); + } + } + %form-group-bundle-border--disabled { background: var-get($theme, 'border-disabled-background'); } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss index 4cd0fbaa821..9ceb50bf4db 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss @@ -101,13 +101,20 @@ } } - %form-group-bundle:hover, %form-group-bundle:focus-within { %igx-select__toggle-button { color: var-get($theme, 'toggle-button-foreground-focus'); } } + @if $variant == 'indigo' { + %form-group-bundle:hover { + %igx-select__toggle-button { + color: var-get($theme, 'toggle-button-foreground-focus'); + } + } + } + .igx-input-group--filled { %igx-select__toggle-button { color: var-get($theme, 'toggle-button-foreground-filled'); From eedbd7de934a2b721429b6fe826a5f0f58435dbc Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 19 Feb 2025 16:56:57 +0200 Subject: [PATCH 3/5] fix(combo/select): focus toggle button --- .../src/lib/core/styles/components/combo/_combo-theme.scss | 6 ++++-- .../lib/core/styles/components/select/_select-theme.scss | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 0a1b47c1143..d66bb13560e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -300,8 +300,10 @@ } .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) { - %igx-combo__toggle-button { - background: var-get($theme, 'toggle-button-background-focus--border'); + @if $variant != 'fluent' { + %igx-combo__toggle-button { + background: var-get($theme, 'toggle-button-background-focus--border'); + } } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss index 9ceb50bf4db..0829bce9fad 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss @@ -127,8 +127,10 @@ } .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) { - %igx-select__toggle-button { - background: var-get($theme, 'toggle-button-background-focus--border'); + @if $variant != 'fluent' { + %igx-select__toggle-button { + background: var-get($theme, 'toggle-button-background-focus--border'); + } } } From 2b9751e7afbfe71edab9e65b34c9e4204f4bd020 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 25 Feb 2025 10:48:10 +0200 Subject: [PATCH 4/5] fix(input): hover styles and warning state --- .../input/_input-group-component.scss | 22 ++++- .../components/input/_input-group-theme.scss | 94 +++++++++++++++---- 2 files changed, 94 insertions(+), 22 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index 4524cc83f93..6f74b401fbc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -244,6 +244,24 @@ } } + @include m(warning) { + @include e(label) { + @extend %form-group-label--warning !optional; + } + + @include e(line) { + @extend %form-group-line--warning !optional; + } + + @include e(hint) { + @extend %form-group-helper--warning !optional; + } + + @include e(bundle) { + @extend %form-group-bundle--warning !optional; + } + } + @include m(invalid) { @include e(label) { @extend %form-group-label--error !optional; @@ -407,10 +425,6 @@ @include e(bundle) { @extend %form-group-bundle--border !optional; - - &:hover { - @extend %form-group-bundle--border--hover !optional; - } } @include e(bundle-main) { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 7207633d1a2..1e7ae03f498 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -512,6 +512,7 @@ } %form-group-display--disabled { + pointer-events: none; user-select: none; color: var-get($theme, 'disabled-text-color') !important; @@ -613,6 +614,13 @@ caret-color: initial; } + %form-group-bundle--warning { + &::after { + border-block-end-color: var-get($theme, 'warning-secondary-color'); + } + caret-color: initial; + } + %form-group-bundle--error { &::after { border-block-end-color: var-get($theme, 'error-secondary-color'); @@ -803,24 +811,24 @@ &::after { display: none; } - } - - %form-group-bundle--border--hover { - %form-group-bundle-start { - border-color: var-get($theme, 'hover-border-color'); - } - %igx-input-group__filler { - border-color: var-get($theme, 'hover-border-color'); - } - - %igx-input-group__notch { - border-block-start-color: var-get($theme, 'hover-border-color'); - border-block-end-color: var-get($theme, 'hover-border-color'); - } - - %form-group-bundle-end { - border-color: var-get($theme, 'hover-border-color'); + &:hover { + %form-group-bundle-start { + border-color: var-get($theme, 'hover-border-color'); + } + + %igx-input-group__filler { + border-color: var-get($theme, 'hover-border-color'); + } + + %igx-input-group__notch { + border-block-start-color: var-get($theme, 'hover-border-color'); + border-block-end-color: var-get($theme, 'hover-border-color'); + } + + %form-group-bundle-end { + border-color: var-get($theme, 'hover-border-color'); + } } } @@ -1000,6 +1008,21 @@ } } + %form-group-label--focused-border:not(:is( + %form-group-border--error, + %form-group-border--warning, + %form-group-border--success)) + { + &:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'focused-border-color'); + } + } + } + %form-group-label--float-border { --label-position: #{sizable(18px, 22px, 26px)}; @@ -1083,6 +1106,10 @@ color: var-get($theme, 'focused-secondary-color'); } + %form-group-label--warning { + color: var-get($theme, 'warning-secondary-color'); + } + %form-group-label--success { color: var-get($theme, 'success-secondary-color'); } @@ -1324,10 +1351,19 @@ %igx-input-group__filler { border-block-color: var-get($theme, 'success-secondary-color'); } + + %form-group-bundle--border:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'success-secondary-color'); + } + } } %form-group-line--warning { - background: var-get($theme, 'error-secondary-color'); + background: var-get($theme, 'warning-secondary-color'); } %form-group-border--warning { @@ -1347,6 +1383,15 @@ %igx-input-group__filler { border-block-color: var-get($theme, 'warning-secondary-color'); } + + %form-group-bundle--border:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'warning-secondary-color'); + } + } } %form-group-line--error { @@ -1370,6 +1415,15 @@ %igx-input-group__filler { border-block-color: var-get($theme, 'error-secondary-color'); } + + %form-group-bundle--border:hover { + %form-group-bundle-start, + %form-group-bundle-end, + %igx-input-group__filler, + %igx-input-group__notch { + border-color: var-get($theme, 'error-secondary-color'); + } + } } %form-group-border--disabled { @@ -1432,6 +1486,10 @@ color: var-get($theme, 'success-secondary-color'); } + %form-group-helper--warning { + color: var-get($theme, 'warning-secondary-color'); + } + %form-group-helper--error { color: var-get($theme, 'error-secondary-color'); } From 8905c9117f945579de900cb2b69bd26a5751a688 Mon Sep 17 00:00:00 2001 From: sivanova Date: Thu, 27 Feb 2025 15:35:25 +0200 Subject: [PATCH 5/5] deps(theming): bump to latest beta --- package-lock.json | 9 ++++----- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4b3ad44fd3e..7e6f990a118 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.1", "fflate": "^0.8.1", - "igniteui-theming": "^15.0.0", + "igniteui-theming": "^15.1.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", @@ -12518,10 +12518,9 @@ } }, "node_modules/igniteui-theming": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-15.0.0.tgz", - "integrity": "sha512-4ANFe6t3t9fEDexmB8/H7hEO1eBBWohu1tbEUFdfQPBMgUT/qqXbSlxW3FGCmZV7Oxr5rn9ZdXyScPxzwRx1lg==", - "license": "MIT", + "version": "15.1.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-15.1.1.tgz", + "integrity": "sha512-PvU7znjYOUAT3fSX94gRrAmgFvvM8z04x6JJNAnO/7/jYSJmSWFtW3G4NfAMm8Uross5IGZuYq4cjlQo1a/Hkw==", "peerDependencies": { "sass": "^1.69.5" } diff --git a/package.json b/package.json index 2b77eeb5aad..3034c3cf77f 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@types/source-map": "0.5.2", "express": "^4.21.1", "fflate": "^0.8.1", - "igniteui-theming": "^15.0.0", + "igniteui-theming": "^15.1.1", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "rxjs": "^7.8.0", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index fc8fd3df4f0..783505dac40 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", - "igniteui-theming": "^15.0.0", + "igniteui-theming": "^15.1.1", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": {