diff --git a/src/dev-app/select/BUILD.bazel b/src/dev-app/select/BUILD.bazel index 1e83f5f21ce4..75e958dae66c 100644 --- a/src/dev-app/select/BUILD.bazel +++ b/src/dev-app/select/BUILD.bazel @@ -16,6 +16,7 @@ ng_project( "//src/material/button", "//src/material/card", "//src/material/checkbox", + "//src/material/divider", "//src/material/form-field", "//src/material/icon", "//src/material/input", diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html index 8742db08db36..eb567a951772 100644 --- a/src/dev-app/select/select-demo.html +++ b/src/dev-app/select/select-demo.html @@ -174,13 +174,14 @@ - Appearance comparison + Appearance comparison (with dividers)

Fill None + @for (creature of digimon; track creature) { {{ creature.viewValue }} } @@ -193,6 +194,7 @@ Outline None + @for (creature of digimon; track creature) { {{ creature.viewValue }} } diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts index 419b0a7a56f0..f6eab5525b73 100644 --- a/src/dev-app/select/select-demo.ts +++ b/src/dev-app/select/select-demo.ts @@ -12,6 +12,7 @@ import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angula import {MatButtonModule} from '@angular/material/button'; import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDividerModule} from '@angular/material/divider'; import {ErrorStateMatcher, ThemePalette} from '@angular/material/core'; import {FloatLabelType} from '@angular/material/form-field'; import {MatIconModule} from '@angular/material/icon'; @@ -40,6 +41,7 @@ type DisableDrinkOption = 'none' | 'first-middle-last' | 'all'; MatButtonModule, MatCardModule, MatCheckboxModule, + MatDividerModule, MatIconModule, MatInputModule, MatSelectModule, diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss index c485ee3bd603..17bc4e550e18 100644 --- a/src/material/select/_m2-select.scss +++ b/src/material/select/_m2-select.scss @@ -11,6 +11,8 @@ @return ( base: ( select-container-elevation-shadow: elevation.get-box-shadow(8), + select-divider-bottom-spacing: 0, + select-divider-top-spacing: 0 ), color: private-get-color-palette-color-tokens($theme, primary), typography: ( diff --git a/src/material/select/_m3-select.scss b/src/material/select/_m3-select.scss index de5199f7b1a8..1c38374e9cb9 100644 --- a/src/material/select/_m3-select.scss +++ b/src/material/select/_m3-select.scss @@ -19,6 +19,8 @@ $prefix: (mat, select); @return ( base: ( select-container-elevation-shadow: elevation.get-box-shadow(2), + select-divider-bottom-spacing: 8px, + select-divider-top-spacing: 8px ), color: ( select-panel-background-color: map.get($system, surface-container), diff --git a/src/material/select/select.scss b/src/material/select/select.scss index 960356863fc3..9230bcbc3b75 100644 --- a/src/material/select/select.scss +++ b/src/material/select/select.scss @@ -52,6 +52,11 @@ $fallbacks: m3-select.get-tokens(); } div.mat-mdc-select-panel { box-shadow: token-utils.slot(select-container-elevation-shadow, $fallbacks); + + .mat-divider { + margin-top: token-utils.slot(select-divider-top-spacing, $fallbacks); + margin-bottom: token-utils.slot(select-divider-bottom-spacing, $fallbacks); + } } .mat-mdc-select-disabled {