From c9499b4238377e57b034c6fc23e6fa16d0c7e339 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Wed, 31 Mar 2021 17:34:12 +0200 Subject: [PATCH 1/6] Fixed focus input olors --- .../lib/dxc-text-input/dxc-input-text.component.ts | 12 +++++++++--- .../dxc-ngx-cdk/src/lib/theme/componentTokens.ts | 5 ++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts index 958d30b58..4701b9691 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts @@ -335,6 +335,12 @@ export class DxcTextInputComponent fill: var(--inputText-disabledFontColor); } } + .mat-form-field.mat-focused .mat-form-field-label{ + color: var(--inputText-focusColor) !important; + } + .mat-form-field.mat-focused .mat-form-field-ripple{ + background-color: var(--inputText-focusColor) !important; + } .mat-form-field { line-height: unset; width: 100%; @@ -355,7 +361,7 @@ export class DxcTextInputComponent color: var(--inputText-disabledFontColor); } .mat-form-field-underline { - background-color: var(--inputText-disabledFontColor); + background-color: var(--inputText-disabledFontColor) !important; } .mat-form-field-empty mat-label { color: var(--inputText-disabledFontColor); @@ -389,7 +395,7 @@ export class DxcTextInputComponent color: var(--inputText-fontColor); } .mat-form-field-underline { - background-color: var(--inputText-fontColor); + background-color: var(--inputText-fontColor) !important; } `} .mat-form-field { @@ -438,7 +444,7 @@ export class DxcTextInputComponent background-color: var(--inputText-error) !important; } .mat-form-field-underline { - background-color: var(--inputText-error); + background-color: var(--inputText-error) !important; &:focus { outline: -webkit-focus-ring-color auto 1px; outline-color: var(--inputText-error); diff --git a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts index f819347a5..d6d78bb23 100644 --- a/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts +++ b/projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts @@ -111,7 +111,6 @@ export const componentTokens = { "--chip-backgroundColor": globalTokens.darkWhite, "--chip-outlinedColor": "", "--chip-fontColor": globalTokens.black, - "--chip-focusColor": globalTokens.blue, //no esta en react "--chip-disabledBackgroundColor": globalTokens.mediumWhite, "--chip-disabledFontColor": globalTokens.lighterBlack, @@ -165,7 +164,7 @@ export const componentTokens = { "--inputText-selectedOptionBackgroundColor": globalTokens.lightGrey, "--inputText-placeholderColor": globalTokens.lightGrey, "--inputText-error": globalTokens.darkRed, - "--inputText-focusColor": globalTokens.blue, + "--inputText-focusColor": globalTokens.black, "--inputText-fontColor": globalTokens.black, "--inputText-scrollBarThumbColor": globalTokens.darkGrey, "--inputText-scrollBarTrackColor": globalTokens.lightGrey, @@ -201,7 +200,7 @@ export const componentTokens = { "--select-selectedOptionBackgroundColor": globalTokens.lightGrey, "--select-color": globalTokens.black, "--select-error": globalTokens.darkRed, - "--select-focusColor": globalTokens.blue, + "--select-focusColor": globalTokens.black, "--select-disabledColor": globalTokens.lighterBlack, "--select-scrollBarThumbColor": globalTokens.darkGrey, "--select-scrollBarTrackColor": globalTokens.lightGrey, From a656f9c131eecd502b668fdd31de8afef71b5718 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Wed, 31 Mar 2021 17:34:24 +0200 Subject: [PATCH 2/6] Removed focus from chip --- .../dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts index 0757bb56d..332f6c093 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts @@ -157,9 +157,7 @@ export class DxcChipComponent implements OnChanges { : "default"}; } &:focus { - ${!inputs.disabled - ? "outline: -webkit-focus-ring-color auto 1px; outline-color: var(--chip-focusColor);" - : "outline: none;"}; + outline: none; } } .suffixIcon { @@ -175,9 +173,7 @@ export class DxcChipComponent implements OnChanges { : "default"}; } &:focus { - ${!inputs.disabled - ? "outline: -webkit-focus-ring-color auto 1px; outline-color: var(--chip-focusColor);" - : "outline: none;"}; + outline: none; } } `; From 31b5befa9f0895585d5d2397e2f24566ff4a17f8 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Wed, 31 Mar 2021 17:34:47 +0200 Subject: [PATCH 3/6] Added focus to calendar icon from date --- projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts index 00d20a271..12ad390fa 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-date/dxc-date.component.ts @@ -328,6 +328,10 @@ export class DxcDateComponent implements OnChanges, OnInit { &:not(.disabled) { dxc-input-suffix-icon { cursor: pointer !important; + &:focus { + outline: -webkit-focus-ring-color auto 1px; + outline-color: var(--date-focusColor); + } } } `; From 3f6e2539a984f4e674b513df119f13255fa4a1d8 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Wed, 31 Mar 2021 17:35:03 +0200 Subject: [PATCH 4/6] Fixed bug tokens progressBar --- .../lib/dxc-progressbar/dxc-progressbar.component.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.scss b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.scss index a5b2a05bb..98ea29e69 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.scss +++ b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/dxc-progressbar.component.scss @@ -29,7 +29,7 @@ position: fixed; opacity: 0.8; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - background-color: var(--progressbar-overlayColor); + background-color: var(--progressBar-overlayColor); } .overlayed { height: 100%; @@ -51,7 +51,7 @@ z-index: 1; width: auto; .mat-progress-bar-fill::after { - background-color: var(--progressbar-trackLine); + background-color: var(--progressBar-trackLine); } .mat-progress-bar-background { fill: transparent; @@ -83,12 +83,12 @@ } } .notOverlayed { - color: var(--progressbar-fontColor); + color: var(--progressBar-fontColor); } mat-progress-bar { ::ng-deep { .mat-progress-bar-buffer { - background-color: var(--progressbar-totalLine); + background-color: var(--progressBar-totalLine); } } } From ce063d654428425e09c42bff593b31fadd0d4843 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Wed, 31 Mar 2021 17:39:38 +0200 Subject: [PATCH 5/6] Fixed bug tokens invalid and required textarea --- .../dxc-textarea/dxc-textarea.component.html | 2 +- .../dxc-textarea/dxc-textarea.component.ts | 34 +++++++++++++++++-- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html index a2f3bd92e..aa0c1470d 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.html @@ -1,7 +1,7 @@ {{ label }} diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts index aa613c622..e64ca23f0 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-textarea/dxc-textarea.component.ts @@ -30,6 +30,7 @@ export class DxcTextareaComponent @HostBinding("class") className; @HostBinding("class.disabled") isDisabled: boolean = false; @HostBinding("class.invalid") isInvalid: boolean = false; + @HostBinding("class.required") isRequired: boolean = false; @Input() public value: string; @Input() public label: String; @@ -123,6 +124,7 @@ export class DxcTextareaComponent public ngOnChanges(changes: SimpleChanges): void { this.isDisabled = this.disabled; this.isInvalid = this.invalid; + this.isRequired = this.required; this.renderedValue = this.value || ""; this.label = this.label || ""; @@ -241,12 +243,34 @@ export class DxcTextareaComponent input::placeholder { color: var(--textarea-placeholderColor); } + &.required { + .mat-hint { + color: var(--textarea-fontColor); + } + .mat-form-field-underline { + background-color: var(--textarea-fontColor); + } + label.mat-form-field-label { + color: var(--textarea-fontColor); + } + input::placeholder { + color: var(--textarea-placeholderColor); + } + .mat-form-field-ripple{ + background-color: var(--textarea-fontColor); + } + .mat-input-element{ + caret-color: var(--textarea-fontColor); + } + .mat-form-field-required-marker{ + color: var(--textarea-error) !important; + } + } &.invalid { .mat-hint { color: var(--textarea-error); } .mat-form-field-underline { - background-color: var(--textarea-error); .mat-form-field-ripple { background-color: var(--textarea-error); } @@ -260,6 +284,9 @@ export class DxcTextareaComponent .mat-form-field-label:not(.mat-form-field-empty) mat-label { color: var(--textarea-error); } + .mat-label{ + color: var(--textarea-error) !important; + } .mat-form-field { &.mat-form-field-should-float { mat-label { @@ -267,6 +294,9 @@ export class DxcTextareaComponent } } } + label.mat-form-field-label { + color: var(--textarea-error); + } } .mat-form-field { &.mat-form-field-should-float { @@ -284,7 +314,7 @@ export class DxcTextareaComponent justify-content: flex-end; display: flex; span { - color: var(--textarea-error); + color: var(--textarea-fontColor); } } } From edce9cc3c5a6abaa12726692d962d02c0e9182fc Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Wed, 31 Mar 2021 18:11:03 +0200 Subject: [PATCH 6/6] Fixed colors invalid input --- .../lib/dxc-text-input/dxc-input-text.component.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts index 4701b9691..58457b835 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-text-input/dxc-input-text.component.ts @@ -335,11 +335,13 @@ export class DxcTextInputComponent fill: var(--inputText-disabledFontColor); } } - .mat-form-field.mat-focused .mat-form-field-label{ + .mat-form-field.mat-focused .mat-form-field-label { color: var(--inputText-focusColor) !important; } - .mat-form-field.mat-focused .mat-form-field-ripple{ - background-color: var(--inputText-focusColor) !important; + .mat-form-field.mat-focused .mat-form-field-ripple { + background-color: ${this.invalid + ? "var(--inputText-error) !important" + : "var(--inputText-focusColor) !important"}; } .mat-form-field { line-height: unset; @@ -444,14 +446,14 @@ export class DxcTextInputComponent background-color: var(--inputText-error) !important; } .mat-form-field-underline { - background-color: var(--inputText-error) !important; + background-color: var(--inputText-fontColor) !important; &:focus { outline: -webkit-focus-ring-color auto 1px; outline-color: var(--inputText-error); } } - .mat-form-field-empty mat-label { - color: var(--inputText-fontColor); + .mat-form-field.mat-form-field-should-float mat-label { + color: var(--inputText-error) !important; } &.mat-focused .mat-form-field-empty mat-label { color: var(--inputText-error);