Update widget catalog to show Material 3 widgets

src/_data/catalog/index.json

@@ -6,8 +6,8 @@
     "id": "basics"
   },
   {
-    "name": "Material Components",
-    "description": "Visual, behavioral, and motion-rich widgets implementing the <a href=\"https://material.io/design/guidelines-overview\">Material Design guidelines</a>.",
+    "name": "Material 2 Components",
+    "description": "Widgets implementing the <a href=\"https://m2.material.io/design\">Material 2 Design guidelines</a>.",
     "subcategories": [
       {
         "name": "App structure and navigation"
@@ -29,6 +29,40 @@
       }
     ],
     "id": "material"
+  },  
+  {
+    "name": "Material 3 Components",
+    "description": "Visual, behavioral, and motion-rich widgets implementing the <a href=\"https://material.io/design/guidelines-overview\">Material 3 Design guidelines</a>.<br /><br />Material 3 will become the default in late 2023 - see <a href=\"https://m3.material.io/develop/flutter\">m3.material.io/develop/flutter</a> for more details.",
+    "pagecontent": "To opt into Material 3, set the <a href=\"https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html\"><code>useMaterial3</code></a> flag to <code>true</code> in your theme.<br /><br />To see these widgets in action, check out our live Material 3 <a href=\"https://flutter.github.io/samples/web/material_3_demo\" target=\"_blank\" rel=\"noopener noreferrer\">demo app</a>.",
+    "subcategories": [
+      {
+        "name": "Actions",
+        "color": "#D9E7CB"
+      },
+      {
+        "name": "Communication",
+        "color": "#F9DBDA"
+      },
+      {
+        "name": "Containment",
+        "color": "#F9DBDA"
+      },
+      {
+        "name": "Navigation",
+        "color": "#E5E4C2"
+
+      },
+      {
+        "name": "Selection",
+        "color": "#D9E7CB"
+
+      },
+      {
+        "name": "Text Inputs",
+        "color": "#E5E4C2"
+      }
+    ],
+    "id": "material3"
   },
   {
     "name": "Cupertino (iOS-style widgets)",

src/_includes/docs/catalogpage-material-3.html

@@ -0,0 +1,54 @@
+{% for section in site.data.catalog.index %}
+    {% if section.name == include.category %}
+        {% assign category = section %}
+        {% break %}
+    {% endif %}
+{% endfor %}
+
+<div class="catalog">
+    <div class="category-description">
+        <p>{{category.description}}</p>
+    </div>
+    {% if category.subcategories and category.subcategories.size != 0 -%}
+    <ul>
+        {% for sub in category.subcategories -%}
+            <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
+        {% endfor -%}
+    </ul>
+    {% endif -%}
+
+    <p>
+        {{ category.pagecontent }}
+    </p>
+
+    {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.categories contains include.category" -%}
+
+    {% if category.subcategories and category.subcategories.size != 0 -%}
+    {% for sub in category.subcategories -%}
+        {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.subcategories contains sub.name" -%}
+        {% if components.size != 0 -%}
+        <h2 id="{{sub.name}}">{{sub.name}}</h2>
+        <div class="card-deck card-deck--responsive">
+            {% for comp in components -%}
+                <div class="card">
+                    <a href="{{comp.link}}">
+                        <div class="card-image-holder-material-3" style="--bg-color: {{sub.color}}">
+                                {{ comp.image }}
+                            <div class="card-image-material-3-hover">
+                                {{ comp.hoverimage }}
+                            </div>
+                        </div>
+                    </a>
+                    <div class="card-body">
+                        <a href="{{comp.link}}"><header class="card-title card-title-material-3">{{comp.name}}</header></a>
+                        <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>
+                    </div>
+                </div>
+            {% endfor -%}
+        </div>
+        {% endif -%}
+    {% endfor -%}
+    {% endif -%}
+
+    <p>See more widgets in the <a href="{{site.url}}/development/ui/widgets">widget catalog</a>.</p>
+</div>

src/_sass/base/_base.scss

@@ -63,6 +63,48 @@ dd {
   }
 }
 
+.card-title-material-3 {
+  color: $site-color-body;
+}
+
+.card-image-holder-material-3 {
+  align-items: center;
+  z-index: -1;
+  background-size: 0%;
+  opacity: .999;
+  background-color: var(--bg-color, white);
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    z-index: 1;
+  }
+}
+
+.card-image-material-3-hover {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition: .25s ease;
+  z-index: -1;
+
+ img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+   z-index: -1;
+
+   }
+}
+
+.card-image-holder-material-3:hover .card-image-material-3-hover {
+  opacity: 1;
+}
+
 .happy-paths-image-holder {
   align-items: left;
   display: flex;

src/development/ui/widgets/material.md

@@ -1,8 +1,8 @@
 ---
-title: Material Components widgets
+title: Material 2 Components widgets
 short-title: Material
 description: > 
-  A catalog of Flutter's widgets implementing the Material design guidelines.
+  A catalog of Flutter's widgets implementing the Material 2 design guidelines.
 ---
 
-{% include docs/catalogpage.html category="Material Components" %}
+{% include docs/catalogpage.html category="Material 2 Components" %}

src/development/ui/widgets/material3.md

@@ -0,0 +1,8 @@
+---
+title: Material 3 Components widgets
+short-title: Material 3
+description: > 
+  A catalog of Flutter's widgets implementing Material 3 design guidelines.
+---
+
+{% include docs/catalogpage-material-3.html category="Material 3 Components" %}