fix(banner): Update image to graphic and support material icons

PiperOrigin-RevId: 327660952
material-components · Aug 20, 2020 · 346069c · 346069c
1 parent da72839
commit 346069c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 6 deletions.
diff --git a/packages/mdc-banner/README.md b/packages/mdc-banner/README.md
@@ -71,7 +71,7 @@ const banner = new MDCBanner(document.querySelector('.mdc-banner'));
 
 ### Variants
 
-#### Banner with image
+#### Banner with graphic
 
 Images can help communicate a banner’s message.
 
@@ -80,7 +80,7 @@ Images can help communicate a banner’s message.
   <div class="mdc-banner__content"
        role="status"
        aria-live="assertive">
-    <div class="mdc-banner__image" role="img" alt=""></div>
+    <div class="mdc-banner__graphic" role="img" alt=""><i class="material-icons mdc-banner__icon">error_outline</i></div>
     <div class="mdc-banner__text">
       There was a problem processing a transaction on your credit card.
     </div>

diff --git a/packages/mdc-banner/_banner-theme.scss b/packages/mdc-banner/_banner-theme.scss
@@ -21,12 +21,16 @@
 //
 
 @use '@material/feature-targeting/feature-targeting';
+@use '@material/shape/mixins' as shape-mixins;
 @use '@material/theme/theme';
 @use '@material/theme/theme-color';
 
 $fill-color: surface;
 $text-color: on-surface;
 $divider-color: rgba(theme-color.prop-value(on-surface), 0.12);
+$graphic-background-color: primary;
+$graphic-color: surface;
+$graphic-shape-radius: 50%;
 $primary-action-text-color: primary;
 $secondary-action-text-color: primary;
 
@@ -41,7 +45,7 @@ $mobile-breakpoint: 480px;
   $feat-color: feature-targeting.create-target($query, color);
 
   @include feature-targeting.targets($feat-color) {
-    @include theme.prop(background-color, $color);
+    @include theme.property(background-color, $color);
   }
 }
 
@@ -55,7 +59,7 @@ $mobile-breakpoint: 480px;
 
   .mdc-banner__text {
     @include feature-targeting.targets($feat-color) {
-      @include theme.prop(color, $color);
+      @include theme.property(color, $color);
     }
   }
 }
@@ -69,7 +73,47 @@ $mobile-breakpoint: 480px;
   $feat-color: feature-targeting.create-target($query, color);
 
   @include feature-targeting.targets($feat-color) {
-    @include theme.prop(border-bottom-color, $color);
+    @include theme.property(border-bottom-color, $color);
+  }
+}
+
+///
+/// Customizes the graphic color.
+/// @param {Color | String} $color Either a valid color value or a key from
+///     `$theme-theme-color.property-values`.
+///
+@mixin graphic-color($color, $query: feature-targeting.all()) {
+  $feat-color: feature-targeting.create-target($query, color);
+
+  .mdc-banner__graphic {
+    @include feature-targeting.targets($feat-color) {
+      @include theme.property(color, $color);
+    }
+  }
+}
+
+///
+/// Customizes the graphic background color.
+/// @param {Color | String} $color Either a valid color value or a key from
+///     `$theme-theme-color.property-values`.
+///
+@mixin graphic-background-color($color, $query: feature-targeting.all()) {
+  $feat-color: feature-targeting.create-target($query, color);
+
+  .mdc-banner__graphic {
+    @include feature-targeting.targets($feat-color) {
+      @include theme.property(background-color, $color);
+    }
+  }
+}
+
+///
+/// Customizes the graphic shape radius.
+/// @param {Number} $shape-radius Shape radius in length or percentage.
+///
+@mixin graphic-shape-radius($shape-radius, $query: feature-targeting.all()) {
+  .mdc-banner__graphic {
+    @include shape-mixins.radius($shape-radius, $query: $query);
   }
 }
 

diff --git a/packages/mdc-banner/_banner.scss b/packages/mdc-banner/_banner.scss
@@ -43,6 +43,18 @@ $_exit-duration: 250ms;
   $feat-animation: feature-targeting.create-target($query, animation);
 
   @include banner-theme.text-color(banner-theme.$text-color, $query: $query);
+  @include banner-theme.graphic-color(
+    banner-theme.$graphic-color,
+    $query: $query
+  );
+  @include banner-theme.graphic-background-color(
+    banner-theme.$graphic-background-color,
+    $query: $query
+  );
+  @include banner-theme.graphic-shape-radius(
+    banner-theme.$graphic-shape-radius,
+    $query: $query
+  );
   @include banner-theme.min-width($_min-width, $query: $query);
   @include banner-theme.max-width($_max-width, $query: $query);
 
@@ -115,18 +127,27 @@ $_exit-duration: 250ms;
     }
   }
 
-  .mdc-banner__image {
+  .mdc-banner__graphic {
     @include feature-targeting.targets($feat-structure) {
       @include rtl-mixins.reflexive-property(margin, 16px, 0);
 
       flex-shrink: 0;
       height: 40px;
       margin-top: 16px;
       margin-bottom: 16px;
+      text-align: center;
       width: 40px;
     }
   }
 
+  .mdc-banner__icon {
+    @include feature-targeting.targets($feat-structure) {
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
   .mdc-banner__text {
     @include typography.typography($_text-type-scale, $query: $query);
 

diff --git a/packages/mdc-banner/package.json b/packages/mdc-banner/package.json
@@ -24,6 +24,7 @@
     "@material/feature-targeting": "^7.0.0",
     "@material/ripple": "^7.0.0",
     "@material/rtl": "^7.0.0",
+    "@material/shape": "^7.0.0",
     "@material/theme": "^7.0.0",
     "@material/typography":"^7.0.0",
     "tslib": "^1.9.3"