feat(backgroundlayers): demo in alert dialog

Author: jenndiaz

components/alertdialog/metadata/alertdialog.yml

@@ -8,7 +8,7 @@ examples:
     markup: |
       <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>
       <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
-        <div class="spectrum-Modal is-open" data-testid="modal">
+        <div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
           <section class="spectrum-AlertDialog spectrum-AlertDialog--confirmation" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
             <div class="spectrum-AlertDialog-grid">
               <h1 class="spectrum-AlertDialog-heading" id="dialog_label">Enable Smart Filters?</h1>
@@ -34,7 +34,7 @@ examples:
       <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>
 
       <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
-        <div class="spectrum-Modal is-open" data-testid="modal">
+        <div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
           <section class="spectrum-AlertDialog spectrum-AlertDialog--information" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
             <div class="spectrum-AlertDialog-grid">
               <h1 class="spectrum-AlertDialog-heading" id="dialog_label">Connect to wifi</h1>
@@ -60,7 +60,7 @@ examples:
       <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>
 
       <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
-        <div class="spectrum-Modal is-open" data-testid="modal">
+        <div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
           <section class="spectrum-AlertDialog spectrum-AlertDialog--warning" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
             <div class="spectrum-AlertDialog-grid">
             <div class="spectrum-AlertDialog-header">
@@ -92,7 +92,7 @@ examples:
       <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>
 
       <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
-        <div class="spectrum-Modal spectrum-AlertDialog-modal is-open" data-testid="modal">
+        <div class="spectrum-Modal spectrum-AlertDialog-modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
           <section class="spectrum-AlertDialog spectrum-AlertDialog--error"  role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
             <div class="spectrum-AlertDialog-grid">
               <div class="spectrum-AlertDialog-header">
@@ -120,7 +120,7 @@ examples:
       <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>
 
       <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
-        <div class="spectrum-Modal is-open" data-testid="modal">
+        <div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
           <section class="spectrum-AlertDialog spectrum-AlertDialog--destructive" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
             <div class="spectrum-AlertDialog-grid">
               <div class="spectrum-AlertDialog-header">
@@ -149,7 +149,7 @@ examples:
       <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>
 
       <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
-        <div class="spectrum-Modal is-open" data-testid="modal">
+        <div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
           <section class="spectrum-AlertDialog spectrum-AlertDialog--information" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
             <div class="spectrum-AlertDialog-grid">
               <h1 class="spectrum-AlertDialog-heading" id="dialog_label">Rate this app</h1>
@@ -177,7 +177,7 @@ examples:
       <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>
 
       <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
-        <div class="spectrum-Modal is-open" data-testid="modal">
+        <div class="spectrum-Modal is-open spectrum-BackgroundLayers--elevated" data-testid="modal">
           <section class="spectrum-AlertDialog spectrum-AlertDialog--information" role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="dialog_label">
             <div class="spectrum-AlertDialog-grid">
               <h1 class="spectrum-AlertDialog-heading" id="dialog_label">Lorem Ipsum</h1>

components/alertdialog/package.json

@@ -18,6 +18,7 @@
     "build": "gulp"
   },
   "peerDependencies": {
+    "@spectrum-css/backgroundlayers": ">=1",
     "@spectrum-css/button": ">=10",
     "@spectrum-css/buttongroup": ">=6",
     "@spectrum-css/divider": ">=1 <=2",
@@ -27,6 +28,7 @@
     "@spectrum-css/underlay": ">=2"
   },
   "devDependencies": {
+    "@spectrum-css/backgroundlayers": "^1.0.0-alpha.0",
     "@spectrum-css/button": "^11.0.13",
     "@spectrum-css/buttongroup": "^6.1.11",
     "@spectrum-css/component-builder-simple": "^2.0.17",

components/modal/index.css

@@ -80,7 +80,7 @@ governing permissions and limitations under the License.
 	max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height));
 	max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));
 
-	background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
+	/* TESTING BackgroundLayers background: var(--mod-modal-background-color, var(--spectrum-modal-background-color)); */
 
 	/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
 	border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));

components/modal/metadata/modal.yml

@@ -5,6 +5,6 @@ examples:
     name: Modal
     demoClassName: spectrum-CSSExample-example--overlay
     markup: |
-      <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog">
+      <div class="spectrum-Modal-wrapper spectrum-CSSExample-dialog spectrum-BackgroundLayers--elevated">
         <div class="spectrum-Modal is-open">This is a modal. Don't use it like this; get yourself a Modal.</div>
       </div>