Skip to content

Commit 175be2e

Browse files
jenndiazjenndiaz
committed
feat(backgroundlayers): demo in alert dialog
1 parent 31d76de commit 175be2e

File tree

4 files changed

+11
-9
lines changed

4 files changed

+11
-9
lines changed

‎components/alertdialog/metadata/alertdialog.yml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ examples:
88
markup: |
99
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)"><span class="spectrum-Button-label">Open Alert Dialog</span></button>
1010
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
11-
<div class="spectrum-Modal is-open" data-testid="modal">
11+
<div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
1212
<section class="spectrum-AlertDialog spectrum-AlertDialog--confirmation" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
1313
<div class="spectrum-AlertDialog-grid">
1414
<h1 class="spectrum-AlertDialog-heading" id="dialog_label">Enable Smart Filters?</h1>
@@ -34,7 +34,7 @@ examples:
3434
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)"><span class="spectrum-Button-label">Open Alert Dialog</span></button>
3535
3636
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
37-
<div class="spectrum-Modal is-open" data-testid="modal">
37+
<div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
3838
<section class="spectrum-AlertDialog spectrum-AlertDialog--information" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
3939
<div class="spectrum-AlertDialog-grid">
4040
<h1 class="spectrum-AlertDialog-heading" id="dialog_label">Connect to wifi</h1>
@@ -60,7 +60,7 @@ examples:
6060
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)"><span class="spectrum-Button-label">Open Alert Dialog</span></button>
6161
6262
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
63-
<div class="spectrum-Modal is-open" data-testid="modal">
63+
<div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
6464
<section class="spectrum-AlertDialog spectrum-AlertDialog--warning" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
6565
<div class="spectrum-AlertDialog-grid">
6666
<div class="spectrum-AlertDialog-header">
@@ -92,7 +92,7 @@ examples:
9292
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)"><span class="spectrum-Button-label">Open Alert Dialog</span></button>
9393
9494
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
95-
<div class="spectrum-Modal spectrum-AlertDialog-modal is-open" data-testid="modal">
95+
<div class="spectrum-Modal spectrum-AlertDialog-modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
9696
<section class="spectrum-AlertDialog spectrum-AlertDialog--error" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
9797
<div class="spectrum-AlertDialog-grid">
9898
<div class="spectrum-AlertDialog-header">
@@ -120,7 +120,7 @@ examples:
120120
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)"><span class="spectrum-Button-label">Open Alert Dialog</span></button>
121121
122122
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
123-
<div class="spectrum-Modal is-open" data-testid="modal">
123+
<div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
124124
<section class="spectrum-AlertDialog spectrum-AlertDialog--destructive" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
125125
<div class="spectrum-AlertDialog-grid">
126126
<div class="spectrum-AlertDialog-header">
@@ -149,7 +149,7 @@ examples:
149149
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)"><span class="spectrum-Button-label">Open Alert Dialog</span></button>
150150
151151
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
152-
<div class="spectrum-Modal is-open" data-testid="modal">
152+
<div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
153153
<section class="spectrum-AlertDialog spectrum-AlertDialog--information" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
154154
<div class="spectrum-AlertDialog-grid">
155155
<h1 class="spectrum-AlertDialog-heading" id="dialog_label">Rate this app</h1>
@@ -177,7 +177,7 @@ examples:
177177
<button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)"><span class="spectrum-Button-label">Open Alert Dialog</span></button>
178178
179179
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
180-
<div class="spectrum-Modal is-open" data-testid="modal">
180+
<div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
181181
<section class="spectrum-AlertDialog spectrum-AlertDialog--information" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
182182
<div class="spectrum-AlertDialog-grid">
183183
<h1 class="spectrum-AlertDialog-heading" id="dialog_label">Lorem Ipsum</h1>

‎components/alertdialog/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"build": "gulp"
1919
},
2020
"peerDependencies": {
21+
"@spectrum-css/backgroundlayers": ">=1",
2122
"@spectrum-css/button": ">=10",
2223
"@spectrum-css/buttongroup": ">=6",
2324
"@spectrum-css/divider": ">=1 <=2",
@@ -27,6 +28,7 @@
2728
"@spectrum-css/underlay": ">=2"
2829
},
2930
"devDependencies": {
31+
"@spectrum-css/backgroundlayers": "^1.0.0-alpha.0",
3032
"@spectrum-css/button": "^11.0.13",
3133
"@spectrum-css/buttongroup": "^6.1.11",
3234
"@spectrum-css/component-builder-simple": "^2.0.17",

‎components/modal/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ governing permissions and limitations under the License.
8080
max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
8181
max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));
8282

83-
background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
83+
/* TESTING BackgroundLayers background: var(--mod-modal-background-color, var(--spectrum-modal-background-color)); */
8484

8585
/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
8686
border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));

‎components/modal/metadata/modal.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ examples:
55
name: Modal
66
demoClassName: spectrum-CSSExample-example--overlay
77
markup: |
8-
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
8+
<div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog spectrum-BackgroundLayers--elevated">
99
<div class="spectrum-Modal is-open">This is a modal. Don't use it like this; get yourself a Modal.</div>
1010
</div>

0 commit comments

Comments
 (0)