docs(menu): fix the popover demo and warning blockquote

PiperOrigin-RevId: 590796459
material-components · Dec 14, 2023 · bad478d · bad478d
1 parent f92eb0e
commit bad478d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/catalog/eleventy-helpers/filters/md-markdown.cjs b/catalog/eleventy-helpers/filters/md-markdown.cjs
@@ -62,7 +62,7 @@ function blockquote($) {
     const $blockquote = $(blockquote);
     const $first = $blockquote.children().first();
     const text = $first.text().trim();
-    const iconRegex = /^(tip|important|note):\s*/i;
+    const iconRegex = /^(tip|important|note|warning):\s*/i;
     const match = text.match(iconRegex);
     const hasIcon = match;
 
@@ -85,6 +85,10 @@ function blockquote($) {
         $blockquote.addClass('important');
         icon = 'priority_high';
         break;
+      case 'warning':
+        $blockquote.addClass('warning');
+        icon = 'warning';
+        break;
       case 'note':
         $blockquote.addClass('note');
         icon = 'bookmark';

diff --git a/catalog/site/css/md-layout.css b/catalog/site/css/md-layout.css
@@ -237,6 +237,15 @@ blockquote.important {
 }
 
 blockquote.important,
-  blockquote.important a {
+blockquote.important a {
   color: var(--md-sys-color-on-primary-container);
 }
+
+blockquote.warning {
+  background-color: var(--md-sys-color-error-container);
+}
+
+blockquote.warning,
+blockquote.warning a {
+  color: var(--md-sys-color-on-error-container);
+}
diff --git a/docs/components/menu.md b/docs/components/menu.md
@@ -243,7 +243,7 @@ to the bottom of the button with three items, Apple, Banana, and
 Cucumber."](images/menu/usage-popover.webp)
 
 <!-- no-catalog-end -->
-<!-- catalog-include "figures/menu/usage-fixed.html" -->
+<!-- catalog-include "figures/menu/usage-popover.html" -->
 
 ```html
 <!-- Note the lack of position: relative parent. -->