Skip to content

Commit

Permalink
Updates the Angular Material to v16
Browse files Browse the repository at this point in the history
upgrade angular-material to 16

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): Updates the Angular Material to v15 & Angular CDK to v15

upgrade angular-material to 16

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): Generate mdc-migration

upgrade angular-material to 16
TO FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): Updates the Angular Material to v16 & Angular CDK to v16

upgrade angular-material to 16

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): mat-form-field error fix

upgrade angular-material to 16
TO FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) MatChipsModule fix

upgrade angular-material to 16
TO FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): keeping only major change of Angular Material

upgrade angular-material to 16
TO FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): FIX use mat-menu-item directive instead of mat-button in kd-nav components.

upgrade angular-material to 16
TO FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fix [WIP]

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fix form-field-density change [WIP]

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fixes [WIP]

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fixes [WIP] add unique kd-form-field match new mat.form-field-density

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fixes mat card theme & mat-mdc-slider

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fixes ns settings global actions dialogs

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fix mat-tab-group

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fix mat-table

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): (mdc-migration) fix kd-dynamic-cell related actions

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): review TODO(mdc-migration)

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): construct form field appearance standard as deprecated in Material v16, used mat-label instead of placeholder TODO(mdc-migration)

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): use kd-standard-form-field with subscriptSizing fixed in settings local TODO(mdc-migration)

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): fix icon-button-density and use kd-standard-form-field: WIP(mdc-migration)

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): fix secret detail -- code-block-typography, WIP(mdc-migration)

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): fix kd-shell related mdc-migration

upgrade angular-material to 16
FIX: TODO(mdc-migration)

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): fix linting:ts

upgrade angular-material to 16

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): fix linting:html

upgrade angular-material to 16

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): fix linting:scss

upgrade angular-material to 16

BREAKING CHANGE: ⛵upgrade angular-material to 16

feat(angular-material): review kd-theme

upgrade angular-material to 16

BREAKING CHANGE: ⛵upgrade angular-material to 16
  • Loading branch information
romdhanisam committed Sep 29, 2024
1 parent af10e78 commit d8c98e2
Show file tree
Hide file tree
Showing 37 changed files with 465 additions and 346 deletions.
124 changes: 69 additions & 55 deletions modules/web/src/_theming.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;
@use '@angular/material/theming';
@use 'variables' as *;

Expand All @@ -38,6 +39,10 @@

// Global style overrides.

// Angular Material 15/16 Density
@include mat.form-field-density(-4);
@include mat.icon-button-density(-3);

a {
color: map.get($colors, primary);

Expand Down Expand Up @@ -174,24 +179,24 @@
background-color: $border;
}

.kd-chips-show-button {
color: map.get($colors, primary);

&:hover {
color: map.get($colors, primary-hover);
}
}

.kd-minimized-card-header:hover {
background: $border;
}

.kd-search {
background-color: color.adjust($background, $lightness: -2.5%);
mat-form-field {
.mdc-text-field__input {
font-size: $subhead-font-size-base;
}

input {
color: theming.mat-color($foreground-palette, base);
}
.mdc-text-field {
background-color: color.adjust($background, $lightness: -2.5%);
}

.mdc-notched-outline__trailing {
display: none;
}
}
}

.kd-nav-item-button {
Expand All @@ -215,31 +220,29 @@
}
}

.mat-chip.mat-standard-chip {
background: $card-background-dark;
}
/* MAT chips Theming */

.mat-active,
.mat-selected {
color: map.get($colors, primary) !important;
.mat-mdc-chip.mat-mdc-standard-chip {
background: $card-background-dark;
}

kd-namespace-selector {
border: 1px solid $border;
.kd-chips-show-button {
color: map.get($colors, primary);

.kd-namespace-select {
color: theming.mat-color($foreground-palette, secondary-text);
&:hover {
color: map.get($colors, primary-hover);
}
}

.kd-namespace-select-input-container {
.mat-form-field-underline {
display: none;
}
/* MAT chips Theming End */

.mat-select-arrow {
color: $muted-light !important;
}
}
button.mat-mdc-icon-button {
color: theming.mat-color($foreground-palette, text);
}

.mat-active,
.mat-mdc-selected {
color: map.get($colors, primary) !important;
}

.kd-namespace-select-input {
Expand All @@ -252,9 +255,9 @@
color: theming.mat-color($foreground-palette, secondary-text);
}

.kd-namespace-select-input-border,
.kd-shell-toolbar-select,
.kd-dialog-propagation-select {
.kd-dialog-propagation-select,
.kd-namespace-select-input-border {
border-bottom: 1px solid $border !important;
}

Expand All @@ -266,14 +269,6 @@
stroke: $background;
}

.mat-button-toggle-group {
border: 1px solid $border;
}

.mat-button-toggle-checked {
background-color: $card-background-dark;
}

.kd-user-help {
color: $muted;

Expand All @@ -286,7 +281,7 @@
border-right: 0;
}

.mat-icon-button:hover:not([disabled]) {
.mat-mdc-icon-button:hover:not([disabled]) {
background-color: $border !important;
}

Expand All @@ -297,22 +292,13 @@
}

.kd-secret-detail-text {
.mat-form-field-infix {
border-top: 0;
}

.mat-form-field-underline {
background: none;
mat-form-field {
width: 100%;

.mat-form-field-ripple {
background: none;
.mdc-text-field {
background-color: $border;
}
}

textarea {
background-color: $border;
border: 0;
}
}

.kd-edit-active {
Expand All @@ -323,7 +309,7 @@
border: 1px solid $border;
}

.mat-list {
.mat-mdc-list {
border: 1px solid $border;
}

Expand Down Expand Up @@ -353,4 +339,32 @@
}
}
}

.kd-namespace-select-form-field {
mat-form-field {
width: 100%;
}

.mdc-notched-outline {
.mdc-notched-outline__leading {
display: none;
}

.mdc-notched-outline__trailing {
border: 1px solid $border !important;
border-radius: 2px;
}
}
}

.mat-mdc-card-title,
.mat-mdc-card-content,
.mat-mdc-card-footer {
color: map.get($foreground-palette, text);
}

.kd-create-from-file-info,
.kd-create-from-input-info {
color: map.get($foreground-palette, text);
}
}
10 changes: 10 additions & 0 deletions modules/web/src/chrome/search/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,21 @@ import {ActivatedRoute, Router} from '@angular/router';
import {SEARCH_QUERY_STATE_PARAM} from '@common/params/params';
import {ParamsService} from '@common/services/global/params';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';

@Component({
selector: 'kd-search',
templateUrl: './template.html',
styleUrls: ['./style.scss'],
providers: [
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'outline',
subscriptSizing: 'dynamic',
},
},
],
})
export class SearchComponent implements OnInit {
query: string;
Expand Down
3 changes: 1 addition & 2 deletions modules/web/src/chrome/search/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,10 @@
border: 0;
font-size: $subhead-font-size-base;
outline: none;
padding: $baseline-grid * 1.25;
padding: 0 $baseline-grid * 1.25;
}

.kd-search-icon {
margin-left: $baseline-grid * 2;
padding-right: $baseline-grid * 2;
}
}
1 change: 0 additions & 1 deletion modules/web/src/chrome/search/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,3 @@
/>
</form>
</div>
<div fxFlex></div>
10 changes: 5 additions & 5 deletions modules/web/src/common/components/card/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
}
}

.mat-card {
.mat-mdc-card {
min-width: $min-content-width;
padding: 0;

Expand All @@ -46,7 +46,7 @@
height: auto;
width: 100%;

.mat-card-content {
.mat-mdc-card-content {
flex-grow: 1;
overflow: auto;
padding: 0;
Expand All @@ -57,7 +57,7 @@
box-shadow: none;
margin: 0;

.mat-card-content {
.mat-mdc-card-content {
padding: 0;
}
}
Expand All @@ -67,11 +67,11 @@
}
}

.mat-card-title {
.mat-mdc-card-title {
margin: 0;
}

.mat-card-footer {
.mat-mdc-card-footer {
display: inline;
margin: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions modules/web/src/common/components/card/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
limitations under the License.
-->

<mat-card
[ngClass]="{
<mat-card appearance="outlined"
[ngClass]="{
'kd-minimized-card': !expanded && !graphMode,
'kd-graph': graphMode,
'kd-inner-table': role === 'inner',
Expand Down
1 change: 0 additions & 1 deletion modules/web/src/common/components/chips/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ const MAX_CHIP_VALUE_LENGTH = 63;

@Component({
selector: 'kd-chips',
styleUrls: ['./style.scss'],
templateUrl: './template.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
Expand Down
21 changes: 0 additions & 21 deletions modules/web/src/common/components/chips/style.scss

This file was deleted.

4 changes: 2 additions & 2 deletions modules/web/src/common/components/chips/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
limitations under the License.
-->

<mat-chip-list>
<mat-chip-listbox>
<ng-container *ngFor="let key of keys; let i = index">
<mat-chip
*ngIf="isVisible(i)"
Expand Down Expand Up @@ -75,4 +75,4 @@
>
</div>
<ng-container *ngIf="keys.length === 0">-</ng-container>
</mat-chip-list>
</mat-chip-listbox>
Loading

0 comments on commit d8c98e2

Please sign in to comment.