Skip to content

[Patch] Fix #372 #366 select invalid & date border #373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mawelCaballero merged 1 commit into from
Jun 10, 2021
Merged

[Patch] Fix #372 #366 select invalid & date border #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 62 additions & 64 deletions projects/dxc-ngx-cdk/src/lib/dxc-select/select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,8 @@ export abstract class _MatSelectBase<C>
HasTabIndex,
MatFormFieldControl<any>,
CanUpdateErrorState,
CanDisableRipple {
CanDisableRipple
{
/** All of the defined select options. */
abstract options: QueryList<_MatOptionBase>;

Expand Down Expand Up @@ -1088,9 +1089,10 @@ export abstract class _MatSelectBase<C>
option._element.nativeElement.childNodes[1]["firstElementChild"]
.tagName === "DXC-OPTION-ICON"
) {
const trigger = this._elementRef.nativeElement.getElementsByClassName(
"mat-select-trigger"
)[0];
const trigger =
this._elementRef.nativeElement.getElementsByClassName(
"mat-select-trigger"
)[0];
if (trigger.firstChild.tagName === "DXC-OPTION-ICON") {
trigger.firstChild.remove();
}
Expand Down Expand Up @@ -1303,64 +1305,10 @@ export abstract class _MatSelectBase<C>
height: 66.5px;
position: relative;

&.mat-select-disabled {
cursor: not-allowed;
.mat-select-trigger {
cursor: not-allowed;
border-bottom: 1px solid var(--select-disabledColor) !important;
outline: none !important;
}
.assistiveText {
color: var(--select-disabledColor) !important;
}
.selectLabel {
color: var(--select-disabledColor) !important;
}
.mat-select-arrow {
color: var(--select-disabledColor) !important;
}
}
&.mat-select-invalid {
.assistiveText {
color: var(--select-error) !important;
}
.mat-select-trigger {
border-bottom: 1px solid var(--select-error) !important;
}
.selectLabel {
color: var(--select-error) !important;
}
}
.mat-select-value {
height: 32px;
color: var(--select-color);
}
.mat-select-arrow {
color: var(--select-color);
}
div.underline.opened {
border-bottom: 2px solid var(--select-color);
}

.mat-select-trigger {
border-top-width: 0.84375em;
border-top-style: solid;
border-top-color: transparent;
border-bottom: 1px solid var(--select-color);
:focus{
outline: -webkit-focus-ring-color auto 1px;
outline-color: var(--select-focusColor);
}
}
&.mat-select-disabled .mat-select-value {
color: var(--select-disabledColor);
}
.assistiveText {
font-size: 12px;
font-family: var(--fontFamily);
}
.assistiveText:not(.mat-select-disabled) {
color: var(--select-color);
color: ${this.invalid ? "var(--select-error)" : "var(--select-color)"};
}

.selectLabel {
Expand All @@ -1373,14 +1321,16 @@ export abstract class _MatSelectBase<C>
top: ${this.panelOpen || this.floatingLabel ? "10px" : "19px"};
font-size: ${this.panelOpen || this.floatingLabel ? "12px" : "16px"};
transform: ${this.floatingStyles()};
color: var(--select-color);
color: ${this.invalid && (this.panelOpen || this.floatingLabel)
? "var(--select-error)"
: "var(--select-color)"};
transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
color 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
left 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
top 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
width 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
font-size 400ms cubic-bezier(0.25, 0.8, 0.25, 1);

.select-required {
color: var(--select-required);
}
Expand All @@ -1398,6 +1348,51 @@ export abstract class _MatSelectBase<C>
width: 24px;
}
}

.mat-select-value {
height: 32px;
}

.mat-select-trigger {
border-top-width: 0.84375em;
border-top-style: solid;
border-top-color: transparent;
border-bottom: 1px solid var(--select-color);
:focus {
outline: -webkit-focus-ring-color auto 1px;
outline-color: var(--select-focusColor);
}
}

${this.disabled
? `cursor: not-allowed;
.mat-select-trigger {
cursor: not-allowed;
border-bottom: 1px solid var(--select-disabledColor) !important;
outline: none !important;
}
.assistiveText {
color: var(--select-disabledColor) !important;
}
.selectLabel {
color: var(--select-disabledColor) !important;
}
.mat-select-arrow {
color: var(--select-disabledColor) !important;
}
.mat-select-value {
color: var(--select-disabledColor);
}`
: `.mat-select-value {
color: var(--select-color);
}
.mat-select-arrow {
color: var(--select-color);
}
div.underline.opened {
border-bottom: 2px solid var(--select-color);
}
`}
`;
}

Expand Down Expand Up @@ -1457,7 +1452,8 @@ export abstract class _MatSelectBase<C>
})
export class DxcSelectComponent
extends _MatSelectBase<MatSelectChange>
implements OnInit {
implements OnInit
{
/** The scroll position of the overlay panel, calculated to center the selected option. */
private _scrollTop = 0;

Expand Down Expand Up @@ -1529,7 +1525,8 @@ export class DxcSelectComponent
.pipe(takeUntil(this._destroy))
.subscribe(() => {
if (this.panelOpen) {
this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();
this._triggerRect =
this.trigger.nativeElement.getBoundingClientRect();
this._changeDetectorRef.markForCheck();
}
});
Expand Down Expand Up @@ -1599,7 +1596,8 @@ export class DxcSelectComponent
* content width in order to constrain the panel within the viewport.
*/
private _calculateOverlayOffsetX(): void {
const overlayRect = this.overlayDir.overlayRef.overlayElement.getBoundingClientRect();
const overlayRect =
this.overlayDir.overlayRef.overlayElement.getBoundingClientRect();
const viewportSize = this._viewportRuler.getViewportSize();
const isRtl = this._isRtl();
const paddingWidth = this.multiple
Expand Down
2 changes: 1 addition & 1 deletion projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export const componentTokens = {
"--inputText-selectedOptionBackgroundColor": globalTokens.lightGrey,
"--inputText-placeholderColor": globalTokens.lightGrey,
"--inputText-error": globalTokens.darkRed,
"--inputText-focusColor": globalTokens.black,
"--inputText-focusColor": globalTokens.blue,
"--inputText-fontColor": globalTokens.black,
"--inputText-scrollBarThumbColor": globalTokens.darkGrey,
"--inputText-scrollBarTrackColor": globalTokens.lightGrey,
Expand Down