[mdc-top-app-bar] nav/action buttons: example code does not contain inner ripple div-elements (Doc issue)

[knieriem]

When running the example code contained in TopAppBar's README -- like the Regular top app bar example -- with MDC Web ≥ v12.0.0, I noticed that the ripples of the TopAppBar's navigation button and action buttons do not work. I.e. when clicking/touching these buttons, no ink ripple is visible.

This appears to be caused by the pre v12.0.0 change 33c9a737a from May 2021: Icon Buttons now need an explicit inner ripple element, e.g. <div class="mdc-icon-button__ripple"></div>. Since TopAppBar action buttons are icon buttons, they need the additional inner ripple element too.

See the demo at codepen.io.

Perhaps the README could be adjusted so that the example code contains these extra ripple elements, like this:

diff --git a/packages/mdc-top-app-bar/README.md b/packages/mdc-top-app-bar/README.md
index 6eb80645..e66c6b32 100644
--- a/packages/mdc-top-app-bar/README.md
+++ b/packages/mdc-top-app-bar/README.md
@@ -60,11 +60,17 @@ The top app bar provides content and actions related to the current screen. It
 <header class="mdc-top-app-bar">
   <div class="mdc-top-app-bar__row">
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
+      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">
+            <div class="mdc-icon-button__ripple"></div>
+            menu
+      </button>
       <span class="mdc-top-app-bar__title">Page title</span>
     </section>
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
-      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Favorite">favorite</button>
+      <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Favorite">
+            <div class="mdc-icon-button__ripple"></div>
+            favorite
+      </button>
       <button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Search">

With these changes the ink ripples work again, but the ripples appear darker than in the MDC versions ≤ v11:

• Before 33c9a737a: See also the corresponding section in the MDC Web Catalog (which appears to be based on v11.0.0 or lower): the action button ripples appear relatively bright.

• Since 33c9a737a: (That's probably a CSS issue)

[TuringTux]

I believe the lightness issue can almost be fixed using the following CSS (I think the ripple is still a bit darker than in MDC versions ≤ v11, but not by much):

:root {
  --mdc-ripple-color: white;
}