Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(material/datepicker): make compatible with MDC & legacy componen…
…ts (#25648) BREAKING CHANGE: Buttons inside the datepicker popup and datepicker toggle now use the MDC-based button implementation. They have different CSS classes and styles, so custom style overrides may need to be updated
- Loading branch information
Showing
33 changed files
with
926 additions
and
103 deletions.
There are no files selected for viewing
Validating CODEOWNERS rules …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
load("//tools:defaults.bzl", "ng_module", "sass_binary") | ||
|
||
package(default_visibility = ["//visibility:public"]) | ||
|
||
ng_module( | ||
name = "legacy-datepicker", | ||
srcs = glob(["**/*.ts"]), | ||
assets = [ | ||
"datepicker-demo.html", | ||
"custom-header.html", | ||
":datepicker_demo_scss", | ||
":custom_header_scss", | ||
], | ||
deps = [ | ||
"//src/material/core", | ||
"//src/material/datepicker", | ||
"//src/material/icon", | ||
"//src/material/legacy-button", | ||
"//src/material/legacy-checkbox", | ||
"//src/material/legacy-form-field", | ||
"//src/material/legacy-input", | ||
"//src/material/legacy-select", | ||
], | ||
) | ||
|
||
sass_binary( | ||
name = "datepicker_demo_scss", | ||
src = "datepicker-demo.scss", | ||
deps = [ | ||
"//:mdc_sass_lib", | ||
"//src/material:sass_lib", | ||
], | ||
) | ||
|
||
sass_binary( | ||
name = "custom_header_scss", | ||
src = "custom-header.scss", | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<div class="demo-calendar-header"> | ||
<button mat-icon-button class="demo-double-arrow" (click)="previousClicked('year')"> | ||
<mat-icon>keyboard_arrow_left</mat-icon> | ||
<mat-icon>keyboard_arrow_left</mat-icon> | ||
</button> | ||
<button mat-icon-button (click)="previousClicked('month')"> | ||
<mat-icon>keyboard_arrow_left</mat-icon> | ||
</button> | ||
<span class="demo-calendar-header-label">{{periodLabel}}</span> | ||
<button mat-icon-button (click)="nextClicked('month')"> | ||
<mat-icon>keyboard_arrow_right</mat-icon> | ||
</button> | ||
<button mat-icon-button class="demo-double-arrow" (click)="nextClicked('year')"> | ||
<mat-icon>keyboard_arrow_right</mat-icon> | ||
<mat-icon>keyboard_arrow_right</mat-icon> | ||
</button> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
.demo-calendar-header { | ||
display: flex; | ||
align-items: center; | ||
padding: 0.5em; | ||
} | ||
|
||
.demo-calendar-header-label { | ||
flex: 1; | ||
height: 1em; | ||
font-weight: bold; | ||
text-align: center; | ||
} | ||
|
||
.demo-double-arrow .mat-icon { | ||
margin: -22%; | ||
} |
Oops, something went wrong.