feat(dialog): Adds and defines styling for the "header bar" on a full-screen dialog.

Note that full-screen dialogs are not ready for use.

PiperOrigin-RevId: 350834168

Author: sayris

packages/mdc-dialog/_mixins.scss

@@ -21,7 +21,8 @@
 //
 
 // Selector '.mdc-*' should only be used in this project.
-// stylelint-disable selector-class-pattern
+// stylelint-disable selector-class-pattern --
+// Internal styling for Dialog MDC component.
 
 @use 'sass:math';
 @use '@material/animation/functions' as animation-functions;
@@ -36,6 +37,7 @@
 @use '@material/touch-target/variables' as touch-target-variables;
 @use '@material/typography/typography';
 @use './dialog-custom-properties';
+@use '@material/icon-button/mixins' as iconbutton-mixins;
 @use './variables';
 
 @mixin core-styles($query: feature-targeting.all()) {
@@ -169,6 +171,30 @@
     }
   }
 
+  .mdc-dialog--fullscreen {
+    .mdc-dialog__header {
+      @include feature-targeting.targets($feat-structure) {
+        display: inline-flex;
+        padding: 0 variables.$header-side-padding
+          variables.$title-bottom-padding;
+        border-bottom: 1px solid transparent;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+    }
+
+    .mdc-dialog__title {
+      @include feature-targeting.targets($feat-structure) {
+        padding: 0;
+        border-bottom: 0;
+      }
+    }
+
+    .mdc-dialog__close {
+      @include iconbutton-mixins.size($size: 24px, $query: $query);
+    }
+  }
+
   .mdc-dialog__content {
     @include typography.typography(body1, $query: $query);
 

packages/mdc-dialog/_variables.scss

@@ -36,5 +36,6 @@ $margin: 16px !default;
 $shape-radius: medium !default;
 $title-bottom-padding: 9px !default;
 $actions-padding: 8px !default;
+$header-side-padding: 16px !default;
 
 $z-index: 7 !default;

packages/mdc-dialog/package.json

@@ -25,6 +25,7 @@
     "@material/dom": "^9.0.0",
     "@material/elevation": "^9.0.0",
     "@material/feature-targeting": "^9.0.0",
+    "@material/icon-button": "^9.0.0",
     "@material/ripple": "^9.0.0",
     "@material/rtl": "^9.0.0",
     "@material/shape": "^9.0.0",