Skip to content

Commit 7495c9f

Browse files
amysortoamysorto
committed
fix: update component categories screenshots to M3
1 parent bd47db2 commit 7495c9f

File tree

73 files changed

+177
-237
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+177
-237
lines changed

‎scenes/src/app/scenes/autocomplete/autocomplete-scene.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
matInput
77
[formControl]="myControl"
88
[matAutocomplete]="auto">
9-
<mat-autocomplete #auto="matAutocomplete">
10-
<mat-option *ngFor="let option of options" [value]="option">
11-
{{option}}
12-
</mat-option>
9+
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
10+
@for (option of options; track option) {
11+
<mat-option [value]="option">{{option}}</mat-option>
12+
}
1313
</mat-autocomplete>
1414
</mat-form-field>
1515
</form>

‎scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<mat-list>
22
<mat-list-item>
3-
<mat-icon>favorite</mat-icon>
4-
Favorite
3+
<mat-icon matListItemIcon>favorite</mat-icon>
4+
<div matListItemTitle>Favorite</div>
55
</mat-list-item>
66
<mat-list-item>
7-
<mat-icon>share</mat-icon>
8-
Share
7+
<mat-icon matListItemIcon>share</mat-icon>
8+
<div matListItemTitle>Share</div>
99
</mat-list-item>
1010
</mat-list>

‎scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.scss

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
.mat-bottom-sheet-container {
22
min-width: 0 !important;
33
width: 250px;
4-
}
5-
6-
.mat-icon {
7-
margin-right: 24px;
8-
}
9-
10-
.cdk-overlay-backdrop {
11-
opacity: 0 !important;
4+
border-top-left-radius: var(--mat-bottom-sheet-container-shape);
5+
border-top-right-radius: var(--mat-bottom-sheet-container-shape);
126
}

‎scenes/src/app/scenes/button-toggle/button-toggle-scene.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<mat-button-toggle-group class="scene-button-toggle" name="fontStyle" aria-label="Font Style">
2-
<mat-button-toggle value="bold" class="scene-button-toggle-bold">
1+
<mat-button-toggle-group class="scene-button-toggle" aria-label="Font Style">
2+
<mat-button-toggle value="bold">
33
<mat-icon>format_align_left</mat-icon>
44
</mat-button-toggle>
5-
<mat-button-toggle value="italic" class="scene-button-toggle-italic">
5+
<mat-button-toggle value="italic">
66
<mat-icon>format_align_justify</mat-icon>
77
</mat-button-toggle>
8-
<mat-button-toggle value="underline" class="scene-button-toggle-underline" [checked]="true">
8+
<mat-button-toggle value="underline" [checked]="true">
99
<mat-icon>format_align_right</mat-icon>
1010
</mat-button-toggle>
1111
</mat-button-toggle-group>

‎scenes/src/app/scenes/button-toggle/button-toggle-scene.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.scene-button-toggle {
2+
--mat-standard-button-toggle-selected-state-text-color: var(--mat-icon-color);
3+
}

‎scenes/src/app/scenes/button-toggle/button-toggle-scene.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {MatIconModule} from '@angular/material/icon';
66
encapsulation: ViewEncapsulation.None,
77
selector: 'app-button-toggle-scene',
88
templateUrl: './button-toggle-scene.html',
9+
styleUrls: ['./button-toggle-scene.scss'],
910
standalone: true,
1011
imports: [MatButtonToggleModule, MatIconModule],
1112
})

‎scenes/src/app/scenes/card/card-scene.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<div class="scene-card">
22
<mat-card appearance="outlined">
3-
<mat-card-title class="docs-scene-card-title">
4-
</mat-card-title>
3+
<mat-card-header>
4+
<div class="docs-scene-card-title"></div>
5+
</mat-card-header>
56

6-
<mat-card-content class="scene-content">
7+
<mat-card-content>
8+
<div class="scene-content"></div>
79
</mat-card-content>
810
</mat-card>
911
</div>

‎scenes/src/app/scenes/card/card-scene.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@
44

55
.scene-content {
66
background: rgba(red, 0.3);
7-
border-radius: 4px;
7+
border-radius: 12px;
88
height: 70px;
99
width: 100%;
10+
margin-top: 8px;
1011
}
1112

1213
.docs-scene-card-title {
1314
background: rgba(red, 0.5);
14-
border-radius: 4px;
15+
border-radius: 12px;
1516
height: 30px;
1617
width: 70%;
1718
}

‎scenes/src/app/scenes/checkbox/checkbox-scene.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<div class="scene-checkboxes">
2-
<mat-checkbox class="scene-checkbox-all" [indeterminate]="true">All</mat-checkbox>
2+
<div>
3+
<mat-checkbox class="scene-checkbox-all" [indeterminate]="true">All</mat-checkbox>
4+
</div>
35
<mat-checkbox [checked]="true">Draft</mat-checkbox>
46
<mat-checkbox [checked]="true">In Progress</mat-checkbox>
57
<mat-checkbox>Submitted</mat-checkbox>

‎scenes/src/app/scenes/checkbox/checkbox-scene.scss

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
11
.scene-checkboxes {
2-
width: 80px;
2+
width: 120px;
33
}
44

55
.scene-checkbox-all {
66
margin-left: -20px;
77
}
8-
9-
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
10-
.mat-checkbox-layout {
11-
padding: 5px 0;
12-
}
13-
14-
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
15-
.mat-checkbox-label {
16-
font-size: 20px;
17-
}

‎scenes/src/app/scenes/chips/chips-scene.html

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ <h2>Amenities</h2>
44
<mat-chip-option selected="true">Washer/Dryer</mat-chip-option>
55
<mat-chip-option>Dogs ok</mat-chip-option>
66
<mat-chip-option selected="true">Cats ok</mat-chip-option>
7-
<mat-chip-option>Kitchen</mat-chip-option>
87
<mat-chip-option>Fireplace</mat-chip-option>
98
<mat-chip-option>Wheelchair accessible</mat-chip-option>
109
<mat-chip-option>Elevator</mat-chip-option>

‎scenes/src/app/scenes/chips/chips-scene.scss

-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,3 @@
33
margin-top: -30px;
44
width: 380px;
55
}
6-
7-
div.scene-chips-wrapper .mat-mdc-chip.mat-mdc-standard-chip {
8-
background-color: pink;
9-
}

‎scenes/src/app/scenes/datepicker/datepicker-scene.html

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
1-
<mat-calendar class="scene-datepicker-left"></mat-calendar>
2-
<mat-calendar class="scene-datepicker-right"></mat-calendar>
1+
<div class="calendar-wrapper">
2+
<mat-calendar
3+
class="calendar"
4+
[minDate]="minDate"
5+
[maxDate]="maxDate"
6+
[selected]="selectedDate"
7+
>
8+
</mat-calendar>
9+
</div>

‎scenes/src/app/scenes/datepicker/datepicker-scene.scss

+9-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
.scene-datepicker-left {
2-
top: -220px;
3-
left: -240px;
4-
}
5-
6-
.scene-datepicker-right {
7-
top: -80px;
1+
.calendar {
2+
margin-top: 140px;
83
background: rgba(white, 0.8);
94
}
105

11-
mat-calendar {
12-
position: absolute;
13-
border: 1px solid;
14-
border-radius: 4px;
6+
.calendar-wrapper {
7+
display: flex;
8+
9+
mat-calendar {
10+
width: 300px;
11+
border-radius: 16px;
12+
}
1513
}

‎scenes/src/app/scenes/datepicker/datepicker-scene.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,8 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
1010
standalone: true,
1111
imports: [MatDatepickerModule]
1212
})
13-
export class DatepickerScene {}
13+
export class DatepickerScene {
14+
minDate = new Date(2024, 3, 2);
15+
selectedDate = new Date(2024, 3, 3);
16+
maxDate = new Date(2024, 3, 5);
17+
}

‎scenes/src/app/scenes/dialog/dialog-scene.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ export class DialogScene {
1414
}
1515

1616
openDialog() {
17-
this.dialog.open(DialogSceneExampleDialog, {
18-
hasBackdrop: false
19-
});
17+
this.dialog.open(DialogSceneExampleDialog);
2018
}
2119
}
2220

‎scenes/src/app/scenes/divider/divider-scene.html

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
<mat-list>
2-
<mat-list-item><mat-icon>account_circle</mat-icon>Contact 1</mat-list-item>
2+
<mat-list-item>
3+
<mat-icon matListItemIcon>account_circle</mat-icon>
4+
<div matListItemTitle>Contact 1</div>
5+
</mat-list-item>
36
<mat-divider></mat-divider>
4-
<mat-list-item><mat-icon>account_circle</mat-icon>Contact 2</mat-list-item>
7+
<mat-list-item>
8+
<mat-icon matListItemIcon>account_circle</mat-icon>
9+
<div matListItemTitle>Contact 2</div>
10+
</mat-list-item>
511
<mat-divider></mat-divider>
6-
<mat-list-item><mat-icon>account_circle</mat-icon>Contact 3</mat-list-item>
12+
<mat-list-item>
13+
<mat-icon matListItemIcon>account_circle</mat-icon>
14+
<div matListItemTitle>Contact 3</div>
15+
</mat-list-item>
716
</mat-list>

‎scenes/src/app/scenes/divider/divider-scene.scss

-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
mat-divider {
22
width: 180px;
33
}
4-
5-
app-divider-scene .mat-icon {
6-
margin-right: 8px;
7-
}

‎scenes/src/app/scenes/expansion/expansion-scene.scss

+4
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@ mat-panel-description,
88
.docs-expansion-scene-content mat-icon {
99
margin-right: 5px;
1010
}
11+
12+
mat-accordion mat-expansion-panel {
13+
width: 300px;
14+
}

‎scenes/src/app/scenes/list/list-scene.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<mat-list>
22
<div mat-subheader>Folders</div>
33
<mat-list-item>
4-
<mat-icon mat-list-icon>folder</mat-icon>
5-
<div mat-line>Photos</div>
6-
<div mat-line>Jun 8, 2020</div>
4+
<mat-icon matListItemIcon>folder</mat-icon>
5+
<div matListItemTitle>Photos</div>
6+
<div matListItemLine>February 14, 2024</div>
77
</mat-list-item>
88
<mat-list-item>
9-
<mat-icon mat-list-icon>folder</mat-icon>
10-
<div mat-line>Recipes</div>
11-
<div mat-line>Jul 2, 2020</div>
9+
<mat-icon matListItemIcon>folder</mat-icon>
10+
<div matListItemTitle>Recipes</div>
11+
<div matListItemLine>May 22, 2024</div>
1212
</mat-list-item>
1313
</mat-list>

‎scenes/src/app/scenes/paginator/paginator-scene.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.scene-paginator.mat-mdc-paginator {
2-
margin-right: 80px;
2+
margin-right: 70px;
33
background: transparent;
44
}

‎scenes/src/app/scenes/radio/radio-scene.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
.scene-radio-group {
22
display: flex;
33
flex-direction: column;
4-
}
5-
6-
.scene-radio-button {
7-
margin: 8px;
4+
padding-right: 8px;
85
}

‎scenes/src/app/scenes/sidenav/sidenav-scene.html

+20-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1-
<mat-drawer-container class="docs-sidenav-container">
2-
<mat-drawer class="docs-sidenav-drawer mat-elevation-z6" mode="side" opened>
1+
<mat-sidenav-container class="docs-sidenav-container">
2+
<mat-sidenav class="docs-sidenav" mode="side" opened>
33
<mat-list role="list">
4-
<mat-list-item role="listitem"><mat-icon>inbox</mat-icon>Inbox</mat-list-item>
5-
<mat-list-item role="listitem"><mat-icon>star</mat-icon>Starred</mat-list-item>
6-
<mat-list-item role="listitem"><mat-icon>watch_later</mat-icon>Snoozed</mat-list-item>
7-
<mat-list-item role="listitem"><mat-icon>send</mat-icon>Sent</mat-list-item>
4+
<mat-list-item role="listitem">
5+
<mat-icon matListItemIcon>inbox</mat-icon>
6+
<div matListItemTitle>Inbox</div>
7+
</mat-list-item>
8+
<mat-list-item role="listitem">
9+
<mat-icon matListItemIcon>star</mat-icon>
10+
<div matListItemTitle>Starred</div>
11+
</mat-list-item>
12+
<mat-list-item role="listitem">
13+
<mat-icon matListItemIcon>watch_later</mat-icon>
14+
<div matListItemTitle>Snoozed</div>
15+
</mat-list-item>
16+
<mat-list-item role="listitem">
17+
<mat-icon matListItemIcon>send</mat-icon>
18+
<div matListItemTitle>Sent</div>
19+
</mat-list-item>
820
</mat-list>
9-
</mat-drawer>
10-
</mat-drawer-container>
21+
</mat-sidenav>
22+
</mat-sidenav-container>

‎scenes/src/app/scenes/sidenav/sidenav-scene.scss

+3-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
.docs-sidenav-container {
2+
height: 210px;
23
width: 360px;
3-
height: 200px;
4-
}
5-
6-
.docs-sidenav-drawer {
7-
padding-right: 50px;
8-
border-right: none;
9-
10-
mat-icon {
11-
margin-right: 10px;
12-
}
4+
--mat-sidenav-container-width: 200px;
5+
--mat-sidenav-container-background-color: #f9f0f9;
136
}

‎scenes/src/app/scenes/slide-toggle/slide-toggle-scene.html

+6-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
<div class="scene-slide-toggle scene-slide-toggle-notifications">
2-
<mat-icon>notifications_off</mat-icon>
3-
NOTIFICATIONS <mat-slide-toggle></mat-slide-toggle>
1+
<div class="scene-slide-toggle">
2+
<mat-slide-toggle>Notifications</mat-slide-toggle>
43
</div>
5-
6-
<div class="scene-slide-toggle scene-slide-toggle-dark">
7-
<mat-icon>nights_stay</mat-icon>
8-
DARK MODE <mat-slide-toggle checked="true"></mat-slide-toggle>
4+
<div class="scene-slide-toggle">
5+
<mat-slide-toggle checked="true">Dark Mode</mat-slide-toggle>
96
</div>
10-
11-
<div class="scene-slide-toggle scene-slide-toggle-dark">
12-
<mat-icon>wifi_off</mat-icon>
13-
WiFi <mat-slide-toggle></mat-slide-toggle>
7+
<div class="scene-slide-toggle">
8+
<mat-slide-toggle>WiFi</mat-slide-toggle>
149
</div>

‎scenes/src/app/scenes/slide-toggle/slide-toggle-scene.scss

-11
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,4 @@
11
.scene-slide-toggle {
22
margin: 15px;
3-
width: 250px;
43
display: flex;
54
}
6-
7-
/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
8-
mat-slide-toggle {
9-
margin-left: auto;
10-
}
11-
12-
mat-icon {
13-
vertical-align: middle;
14-
padding-right: 5px;
15-
}

‎scenes/src/app/scenes/slider/slider-scene.html

+8-16
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
1-
<div class="scene-sliders">
2-
<div>
1+
<div class="slider-row">
32
<mat-icon>volume_up</mat-icon>
4-
<mat-slider
5-
thumbLabel="true"
6-
value="65"
7-
min="1"
8-
max="100"
9-
#volume></mat-slider>
3+
<mat-slider min="0" max="100" discrete>
4+
<input value="65" matSliderThumb>
5+
</mat-slider>
106
</div>
11-
12-
<div>
7+
<div class="slider-row">
138
<mat-icon>brightness_low</mat-icon>
14-
<mat-slider
15-
thumbLabel
16-
value="40"
17-
min="1"
18-
max="100"></mat-slider>
19-
</div>
9+
<mat-slider min="0" max="100" discrete>
10+
<input value="40" matSliderThumb>
11+
</mat-slider>
2012
</div>

0 commit comments

Comments
 (0)