Repository: reactioncommerce/reaction-next-starterkit
Pull request #506 (2019-02-26 19:37:53)

chore: update typography variants based on MUI warning
Impact: **minor**
Type: **chore**

## Issue
The following warning is appearing inside starterkit. MUI is updating their typography styles, and we were using older styles.
```
Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.
Please read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2
```

## Solution
This PR updates all variants to use their new naming conventions, based on the link provided: https://material-ui.com/style/typography#migration-to-typography-v2

The only changes that were noticible at first glance were the Product Title on the PDP. I've added some customization there to keep it looking the same. Everywhere else, simply replacing the variant name kept it the same style.

## Breaking changes
Any customized plugins / code will need to be updated to accommodate new typography variants

## Testing
1. Start up the app, and see that it looks the same as it did on any other branch/
1. See typography warning is gone from console.
1. I compared the pages side by side using https://storefront.staging.reactioncommerce.com/


Patch:
diff --git a/src/components/Entry/Entry.js b/src/components/Entry/Entry.js
index ce3ab98f..76b79982 100644
--- a/src/components/Entry/Entry.js
+++ b/src/components/Entry/Entry.js
@@ -67,7 +67,7 @@ export default class Entry extends Component {
       <Grid container>
         <Grid item xs={12} md={7}>
           <div className={classes.loginWrapper}>
-            <Typography variant="title" gutterBottom>
+            <Typography variant="h6" gutterBottom>
               Returning Customer
             </Typography>
             <Button onClick={onLoginButtonClick} actionType="important" isFullWidth className={classes.loginButton}>
@@ -80,7 +80,7 @@ export default class Entry extends Component {
         </Grid>
         <Grid item xs={12} md={5}>
           <div className={classes.guestWrapper}>
-            <Typography variant="title" gutterBottom>
+            <Typography variant="h6" gutterBottom>
               Guest Checkout
             </Typography>
             <GuestForm onSubmit={setEmailOnAnonymousCart} />
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 53cd9076..7dea9dc0 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -69,7 +69,7 @@ class Header extends Component {
           </Hidden>
 
           <div className={controls}>
-            <Typography className={title} color="inherit" variant="title">
+            <Typography className={title} color="inherit" variant="h6">
               <Link route="/">
                 <ShopLogo shopName={shop.name} />
               </Link>
diff --git a/src/components/NavigationMobile/NavigationMobile.js b/src/components/NavigationMobile/NavigationMobile.js
index faad93c3..c9d5993b 100644
--- a/src/components/NavigationMobile/NavigationMobile.js
+++ b/src/components/NavigationMobile/NavigationMobile.js
@@ -108,7 +108,7 @@ class NavigationMobile extends Component {
           <div className={classes.header}>
             <Toolbar disableGutters>
               <div className={classes.toolbarTitle}>
-                <Typography className={classes.title} color="inherit" variant="title">
+                <Typography className={classes.title} color="inherit" variant="h6">
                   <Link route="/" onClick={this.handleClose}>
                     <ShopLogo shopName={shop && shop.name} />
                   </Link>
diff --git a/src/components/NavigationMobile/NavigationSubMenuMobile.js b/src/components/NavigationMobile/NavigationSubMenuMobile.js
index 93aa400e..01d0a245 100644
--- a/src/components/NavigationMobile/NavigationSubMenuMobile.js
+++ b/src/components/NavigationMobile/NavigationSubMenuMobile.js
@@ -63,7 +63,7 @@ class NavigationSubMenuMobile extends Component {
       <div className={classes.root}>
         <div className={classes.header}>
           <Toolbar disableGutters>
-            <Typography className={classes.toolbarTitle} variant="subheading">{navItem.navigationItem.data.contentForLanguage}</Typography>
+            <Typography className={classes.toolbarTitle} variant="subtitle1">{navItem.navigationItem.data.contentForLanguage}</Typography>
             <IconButton onClick={this.props.onBackButtonClick}>
               <ChevronLeftIcon />
             </IconButton>
diff --git a/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js b/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js
index 61738cda..0e9aa2e2 100644
--- a/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js
+++ b/src/components/OrderFulfillmentGroup/OrderFulfillmentGroup.js
@@ -116,7 +116,7 @@ class OrderFulfillmentGroup extends Component {
         <div className={classes.fulfillmentDetails}>
           <Grid container spacing={24}>
             <Grid item xs={3}>
-              <Typography className={classes.subtitle2} variant="subheading">{"Shipping Address"}</Typography>
+              <Typography className={classes.subtitle2} variant="subtitle1">{"Shipping Address"}</Typography>
             </Grid>
             <Grid item xs={9}>
               {address}
@@ -139,7 +139,7 @@ class OrderFulfillmentGroup extends Component {
           <header className={classes.header}>
             <Grid container spacing={24}>
               <Grid item xs={6}>
-                <Typography className={classes.subtitle2} variant="subheading">{fulfillmentMethod.displayName}</Typography>
+                <Typography className={classes.subtitle2} variant="subtitle1">{fulfillmentMethod.displayName}</Typography>
               </Grid>
               <Grid item xs={6} className={classes.headerRightColumn}>
                 <Typography variant="body2">{fulfillmentMethod.group}</Typography>
diff --git a/src/components/OrderSummary/OrderSummary.js b/src/components/OrderSummary/OrderSummary.js
index 70a9cf6d..9bbe919a 100644
--- a/src/components/OrderSummary/OrderSummary.js
+++ b/src/components/OrderSummary/OrderSummary.js
@@ -92,7 +92,7 @@ class OrderSummary extends Component {
         <div className={classes.header}>
           <Grid container spacing={24}>
             <Grid item xs={3}>
-              <Typography className={classes.subtitle2} variant="subheading">{"Payment Method"}</Typography>
+              <Typography className={classes.subtitle2} variant="subtitle1">{"Payment Method"}</Typography>
             </Grid>
             <Grid item>
               {(payments || []).map((payment) => (
diff --git a/src/components/ProductDetailPrice/ProductDetailPrice.js b/src/components/ProductDetailPrice/ProductDetailPrice.js
index 14a69df1..b62e6ebf 100644
--- a/src/components/ProductDetailPrice/ProductDetailPrice.js
+++ b/src/components/ProductDetailPrice/ProductDetailPrice.js
@@ -80,7 +80,7 @@ class ProductDetailPrice extends Component {
     return (
       <Grid className={classnames(classes.root, className)} item sm={12}>
         <Typography className={classes.strike} variant="caption">{compareAtPrice}</Typography>
-        <Typography component="div" variant="title">{price}</Typography>
+        <Typography component="div" variant="h6">{price}</Typography>
       </Grid>
     );
   }
diff --git a/src/components/ProductDetailTitle/ProductDetailTitle.js b/src/components/ProductDetailTitle/ProductDetailTitle.js
index 70217e07..7e41fbd5 100644
--- a/src/components/ProductDetailTitle/ProductDetailTitle.js
+++ b/src/components/ProductDetailTitle/ProductDetailTitle.js
@@ -25,15 +25,15 @@ class ProductDetailTitle extends Component {
     variant: PropTypes.string
   }
   render() {
-    const { pageTitle, title, variant = "display2" } = this.props;
+    const { pageTitle, title, variant = "h3" } = this.props;
 
     // Render nothing if neither the title nor pageTitle exists
     if (!title && !pageTitle) return null;
 
     return (
       <Grid item sm={12}>
-        {title && <Typography gutterBottom={true} variant={variant}>{title}</Typography>}
-        {pageTitle && <Typography color="primary" component="h2" variant="title">{pageTitle}</Typography>}
+        {title && <Typography color="textSecondary" gutterBottom={true} variant={variant}>{title}</Typography>}
+        {pageTitle && <Typography color="primary" component="h2" variant="h6">{pageTitle}</Typography>}
       </Grid>
     );
   }
diff --git a/src/components/ProductGridTitle/ProductGridTitle.js b/src/components/ProductGridTitle/ProductGridTitle.js
index b26de68f..dedee3f6 100644
--- a/src/components/ProductGridTitle/ProductGridTitle.js
+++ b/src/components/ProductGridTitle/ProductGridTitle.js
@@ -30,7 +30,7 @@ export default class ProductGridTitle extends Component {
     if (!displayTitle) return null;
 
     return (
-      <Typography className={classes.gridTitle} component="h1" variant="title">{displayTitle}</Typography>
+      <Typography className={classes.gridTitle} component="h1" variant="h6">{displayTitle}</Typography>
     );
   }
 }
diff --git a/src/components/Profile/Profile.js b/src/components/Profile/Profile.js
index 1bb60dab..ea4db53b 100644
--- a/src/components/Profile/Profile.js
+++ b/src/components/Profile/Profile.js
@@ -15,7 +15,7 @@ export default class Profile extends Component {
     const { viewer } = this.props;
 
     if (viewer) {
-      return <Typography variant="subheading">Hello {viewer.name}</Typography>;
+      return <Typography variant="subtitle1">Hello {viewer.name}</Typography>;
     }
 
     return null;
diff --git a/src/custom/reactionTheme.js b/src/custom/reactionTheme.js
index f304912f..31a95326 100644
--- a/src/custom/reactionTheme.js
+++ b/src/custom/reactionTheme.js
@@ -143,6 +143,7 @@ const theme = createMuiTheme({
     unithalf: 4
   },
   typography: {
+    useNextVariants: true, // TODO: remove this once new variant styles are official in V4.0.0: https://material-ui.com/style/typography/#migration-to-typography-v2
     fontFamily: "Source Sans Pro, Helvetica Neue, Helvetica, sans-serif",
     fontSize: 16,
     fontWeightLight: 400,
@@ -158,7 +159,7 @@ const theme = createMuiTheme({
       fontWeight: 400,
       color: "#595959"
     },
-    subheading: {
+    subtitle1: {
       fontSize: 16,
       fontWeight: 600,
       color: "#3c3c3c"
diff --git a/src/pages/_error.js b/src/pages/_error.js
index f3defa7d..7926f76c 100644
--- a/src/pages/_error.js
+++ b/src/pages/_error.js
@@ -51,7 +51,7 @@ export default class Error extends Component {
       <div className={classes.root}>
         <Helmet title={`${subtitle} | ${shop && shop.name}`} />
         {statusCode ? (
-          <Typography variant="headline">{statusCode}</Typography>
+          <Typography variant="h5">{statusCode}</Typography>
         ) : (
           <Fragment>
             <Typography className={classes.errorMessage} paragraph>
diff --git a/src/pages/cart.js b/src/pages/cart.js
index 43fc2872..40918f09 100644
--- a/src/pages/cart.js
+++ b/src/pages/cart.js
@@ -175,7 +175,7 @@ class CartPage extends Component {
           meta={[{ name: "description", content: shop && shop.description }]}
         />
         <section>
-          <Typography className={classes.title} variant="title" align="center">
+          <Typography className={classes.title} variant="h6" align="center">
             Shopping Cart
           </Typography>
           <Grid container spacing={24}>
diff --git a/src/pages/checkoutComplete.js b/src/pages/checkoutComplete.js
index 3a3bd182..e8771d00 100644
--- a/src/pages/checkoutComplete.js
+++ b/src/pages/checkoutComplete.js
@@ -76,7 +76,7 @@ class CheckoutComplete extends Component {
         <div className={classes.checkoutContentContainer}>
           <div className={classes.orderDetails}>
             <section className={classes.section}>
-              <Typography className={classes.title} variant="title">Order not found</Typography>
+              <Typography className={classes.title} variant="h6">Order not found</Typography>
             </section>
           </div>
         </div>
@@ -93,7 +93,7 @@ class CheckoutComplete extends Component {
           <div className={classes.orderDetails}>
             <section className={classes.section}>
               <header className={classes.sectionHeader}>
-                <Typography className={classes.title} variant="title">Thank you for your order</Typography>
+                <Typography className={classes.title} variant="h6">Thank you for your order</Typography>
                 <Typography variant="body1">
                   {"Your order ID is:"} <strong>{order.referenceId}</strong>
                 </Typography>


Test patch:
diff --git a/src/components/CartPopover/__snapshots__/CartPopover.test.js.snap b/src/components/CartPopover/__snapshots__/CartPopover.test.js.snap
index fbec0815..64f9ea0a 100644
--- a/src/components/CartPopover/__snapshots__/CartPopover.test.js.snap
+++ b/src/components/CartPopover/__snapshots__/CartPopover.test.js.snap
@@ -86,7 +86,7 @@ exports[`do not show cartpopover 1`] = `
           src="//placehold.it/100"
         />
         <span
-          className="MuiTypography-root-121 MuiTypography-body1-130 SkCartPopover-addedToCartText-8"
+          className="MuiTypography-root-121 MuiTypography-body2-129 SkCartPopover-addedToCartText-8"
         >
           10
            "
@@ -214,7 +214,7 @@ exports[`show cartpopover 1`] = `
           src="//placehold.it/100"
         />
         <span
-          className="MuiTypography-root-121 MuiTypography-body1-130 SkCartPopover-addedToCartText-8"
+          className="MuiTypography-root-121 MuiTypography-body2-129 SkCartPopover-addedToCartText-8"
         >
           10
            "
diff --git a/src/components/Entry/__snapshots__/Entry.test.js.snap b/src/components/Entry/__snapshots__/Entry.test.js.snap
index 9fe4ad94..f4f32f27 100644
--- a/src/components/Entry/__snapshots__/Entry.test.js.snap
+++ b/src/components/Entry/__snapshots__/Entry.test.js.snap
@@ -332,11 +332,11 @@ exports[`basic snapshot 1`] = `
     <div
       className="SkEntry-loginWrapper-1"
     >
-      <h2
-        className="MuiTypography-root-101 MuiTypography-title-107 MuiTypography-gutterBottom-128"
+      <h6
+        className="MuiTypography-root-101 MuiTypography-h6-118 MuiTypography-gutterBottom-128"
       >
         Returning Customer
-      </h2>
+      </h6>
       <div
         className="SkEntry-loginButton-2 c0"
         onClick={[Function]}
@@ -447,11 +447,11 @@ exports[`basic snapshot 1`] = `
     <div
       className="SkEntry-guestWrapper-3"
     >
-      <h2
-        className="MuiTypography-root-101 MuiTypography-title-107 MuiTypography-gutterBottom-128"
+      <h6
+        className="MuiTypography-root-101 MuiTypography-h6-118 MuiTypography-gutterBottom-128"
       >
         Guest Checkout
-      </h2>
+      </h6>
       <div
         className={null}
         style={Object {}}
diff --git a/src/components/NavigationMobile/__snapshots__/NavigationSubMenuMobile.test.js.snap b/src/components/NavigationMobile/__snapshots__/NavigationSubMenuMobile.test.js.snap
index aa0c5162..fef94207 100644
--- a/src/components/NavigationMobile/__snapshots__/NavigationSubMenuMobile.test.js.snap
+++ b/src/components/NavigationMobile/__snapshots__/NavigationSubMenuMobile.test.js.snap
@@ -10,8 +10,8 @@ exports[`basic snapshot 1`] = `
     <div
       className="MuiToolbar-root-5 MuiToolbar-regular-7"
     >
-      <h3
-        className="MuiTypography-root-9 MuiTypography-subheading-16 SkNavigationItemMobile-toolbarTitle-3"
+      <h6
+        className="MuiTypography-root-9 MuiTypography-subtitle1-27 SkNavigationItemMobile-toolbarTitle-3"
       />
       <button
         className="MuiButtonBase-root-51 MuiIconButton-root-45"
diff --git a/src/components/OrderFulfillmentGroup/__snapshots__/OrderFulfillmentGroup.test.js.snap b/src/components/OrderFulfillmentGroup/__snapshots__/OrderFulfillmentGroup.test.js.snap
index 1aff1152..c1f71a88 100644
--- a/src/components/OrderFulfillmentGroup/__snapshots__/OrderFulfillmentGroup.test.js.snap
+++ b/src/components/OrderFulfillmentGroup/__snapshots__/OrderFulfillmentGroup.test.js.snap
@@ -300,11 +300,11 @@ Array [
         <div
           className="MuiGrid-item-8 MuiGrid-grid-xs-6-41"
         >
-          <h3
-            className="MuiTypography-root-104 MuiTypography-subheading-111 SkOrderFulfillmentGroup-subtitle2-6"
+          <h6
+            className="MuiTypography-root-104 MuiTypography-subtitle1-122 SkOrderFulfillmentGroup-subtitle2-6"
           >
             Free Shipping
-          </h3>
+          </h6>
         </div>
         <div
           className="MuiGrid-item-8 MuiGrid-grid-xs-6-41 SkOrderFulfillmentGroup-headerRightColumn-4"
@@ -626,11 +626,11 @@ Array [
           <div
             className="MuiGrid-item-8 MuiGrid-grid-xs-3-38"
           >
-            <h3
-              className="MuiTypography-root-104 MuiTypography-subheading-111 SkOrderSummary-subtitle2-146"
+            <h6
+              className="MuiTypography-root-104 MuiTypography-subtitle1-122 SkOrderSummary-subtitle2-146"
             >
               Payment Method
-            </h3>
+            </h6>
           </div>
           <div
             className="MuiGrid-item-8"
diff --git a/src/components/OrderSummary/__snapshots__/OrderSummary.test.js.snap b/src/components/OrderSummary/__snapshots__/OrderSummary.test.js.snap
index 47e3723b..33a96d26 100644
--- a/src/components/OrderSummary/__snapshots__/OrderSummary.test.js.snap
+++ b/src/components/OrderSummary/__snapshots__/OrderSummary.test.js.snap
@@ -106,11 +106,11 @@ exports[`basic snapshot 1`] = `
       <div
         className="MuiGrid-item-7 MuiGrid-grid-xs-3-37"
       >
-        <h3
-          className="MuiTypography-root-103 MuiTypography-subheading-110 SkOrderSummary-subtitle2-5"
+        <h6
+          className="MuiTypography-root-103 MuiTypography-subtitle1-121 SkOrderSummary-subtitle2-5"
         >
           Payment Method
-        </h3>
+        </h6>
       </div>
       <div
         className="MuiGrid-item-7"
diff --git a/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap b/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap
index bfb3df6d..1f16812d 100644
--- a/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap
+++ b/src/components/ProductDetail/__snapshots__/ProductDetail.test.js.snap
@@ -505,17 +505,17 @@ exports[`basic snapshot 1`] = `
     <div
       className="MuiGrid-item-5 MuiGrid-grid-sm-12-58"
     >
-      <h1
-        className="MuiTypography-root-121 MuiTypography-display2-124 MuiTypography-gutterBottom-148"
+      <h3
+        className="MuiTypography-root-121 MuiTypography-h3-135 MuiTypography-colorTextSecondary-154 MuiTypography-gutterBottom-148"
       >
         Reaction Sample Product
-      </h1>
+      </h3>
     </div>
     <div
       className="SkProductDetail-info-3"
     >
       <div
-        className="MuiTypography-root-121 MuiTypography-body1-130"
+        className="MuiTypography-root-121 MuiTypography-body2-129"
       >
         Example Manufacturer
       </div>
@@ -530,7 +530,7 @@ exports[`basic snapshot 1`] = `
           className="MuiTypography-root-121 MuiTypography-caption-131 SKProductDetailPrice-strike-161"
         />
         <div
-          className="MuiTypography-root-121 MuiTypography-title-127"
+          className="MuiTypography-root-121 MuiTypography-h6-138"
         >
           $12.99 - $19.99
         </div>
@@ -540,7 +540,7 @@ exports[`basic snapshot 1`] = `
       className="SkProductDetail-info-3"
     >
       <div
-        className="MuiTypography-root-121 MuiTypography-body1-130"
+        className="MuiTypography-root-121 MuiTypography-body2-129"
       >
         Sign in as administrator to edit.
 You can clone this product from the product grid.
@@ -633,7 +633,7 @@ Details can be added below the image for more specific product information.
           className="SkDivider-item-171"
         />
         <span
-          className="MuiTypography-root-121 MuiTypography-body1-130 SkDivider-label-170"
+          className="MuiTypography-root-121 MuiTypography-body2-129 SkDivider-label-170"
         >
           Available Options
         </span>
@@ -733,7 +733,7 @@ Details can be added below the image for more specific product information.
           />
         </div>
         <span
-          className="MuiTypography-root-121 MuiTypography-body1-130 SkProductDetailAddToCart-quantityTypography-187"
+          className="MuiTypography-root-121 MuiTypography-body2-129 SkProductDetailAddToCart-quantityTypography-187"
         >
           Quantity
         </span>
@@ -887,7 +887,7 @@ Details can be added below the image for more specific product information.
               src="//placehold.it/100"
             />
             <span
-              className="MuiTypography-root-121 MuiTypography-body1-130 SkCartPopover-addedToCartText-234"
+              className="MuiTypography-root-121 MuiTypography-body2-129 SkCartPopover-addedToCartText-234"
             >
               10
                "
diff --git a/src/components/ProductDetailAddToCart/__snapshots__/ProductDetailAddToCart.test.js.snap b/src/components/ProductDetailAddToCart/__snapshots__/ProductDetailAddToCart.test.js.snap
index f77792c3..d20105e5 100644
--- a/src/components/ProductDetailAddToCart/__snapshots__/ProductDetailAddToCart.test.js.snap
+++ b/src/components/ProductDetailAddToCart/__snapshots__/ProductDetailAddToCart.test.js.snap
@@ -19,7 +19,7 @@ Array [
         />
       </div>
       <span
-        className="MuiTypography-root-110 MuiTypography-body1-119 SkProductDetailAddToCart-quantityTypography-9"
+        className="MuiTypography-root-110 MuiTypography-body2-118 SkProductDetailAddToCart-quantityTypography-9"
       >
         Quantity
       </span>
@@ -240,7 +240,7 @@ Array [
             src="//placehold.it/100"
           />
           <span
-            className="MuiTypography-root-110 MuiTypography-body1-119 SkCartPopover-addedToCartText-204"
+            className="MuiTypography-root-110 MuiTypography-body2-118 SkCartPopover-addedToCartText-204"
           >
             10
              "
diff --git a/src/components/ProductDetailPrice/__snapshots__/ProductDetailPrice.test.js.snap b/src/components/ProductDetailPrice/__snapshots__/ProductDetailPrice.test.js.snap
index dfa902dd..10500b5e 100644
--- a/src/components/ProductDetailPrice/__snapshots__/ProductDetailPrice.test.js.snap
+++ b/src/components/ProductDetailPrice/__snapshots__/ProductDetailPrice.test.js.snap
@@ -12,7 +12,7 @@ exports[`price 1`] = `
     className="MuiTypography-root-103 MuiTypography-caption-113 SKProductDetailPrice-strike-5"
   />
   <div
-    className="MuiTypography-root-103 MuiTypography-title-109"
+    className="MuiTypography-root-103 MuiTypography-h6-120"
   >
     $19.99
   </div>
@@ -29,7 +29,7 @@ exports[`price and compareAtPrice 1`] = `
     $29.99
   </span>
   <div
-    className="MuiTypography-root-103 MuiTypography-title-109"
+    className="MuiTypography-root-103 MuiTypography-h6-120"
   >
     $19.99
   </div>
diff --git a/src/components/ProductDetailTitle/__snapshots__/ProductDetailTitle.test.js.snap b/src/components/ProductDetailTitle/__snapshots__/ProductDetailTitle.test.js.snap
index 18dd675c..fea25c76 100644
--- a/src/components/ProductDetailTitle/__snapshots__/ProductDetailTitle.test.js.snap
+++ b/src/components/ProductDetailTitle/__snapshots__/ProductDetailTitle.test.js.snap
@@ -4,13 +4,13 @@ exports[`basic snapshot 1`] = `
 <div
   className="MuiGrid-item-2 MuiGrid-grid-sm-12-55"
 >
-  <h1
-    className="MuiTypography-root-98 MuiTypography-display2-101 MuiTypography-gutterBottom-125"
+  <h3
+    className="MuiTypography-root-98 MuiTypography-h3-112 MuiTypography-colorTextSecondary-131 MuiTypography-gutterBottom-125"
   >
     Title
-  </h1>
+  </h3>
   <h2
-    className="MuiTypography-root-98 MuiTypography-title-104 MuiTypography-colorPrimary-128"
+    className="MuiTypography-root-98 MuiTypography-h6-115 MuiTypography-colorPrimary-128"
   >
     Subtitle
   </h2>
@@ -24,7 +24,7 @@ exports[`snapshot with only pageTitle 1`] = `
   className="MuiGrid-item-2 MuiGrid-grid-sm-12-55"
 >
   <h2
-    className="MuiTypography-root-98 MuiTypography-title-104 MuiTypography-colorPrimary-128"
+    className="MuiTypography-root-98 MuiTypography-h6-115 MuiTypography-colorPrimary-128"
   >
     Subtitle
   </h2>
@@ -35,10 +35,10 @@ exports[`snapshot with only title 1`] = `
 <div
   className="MuiGrid-item-2 MuiGrid-grid-sm-12-55"
 >
-  <h1
-    className="MuiTypography-root-98 MuiTypography-display2-101 MuiTypography-gutterBottom-125"
+  <h3
+    className="MuiTypography-root-98 MuiTypography-h3-112 MuiTypography-colorTextSecondary-131 MuiTypography-gutterBottom-125"
   >
     Title
-  </h1>
+  </h3>
 </div>
 `;
diff --git a/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap b/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap
index 99db7b4f..35d517c0 100644
--- a/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap
+++ b/src/components/ProductGrid/__snapshots__/ProductGrid.test.js.snap
@@ -98,12 +98,12 @@ Array [
     className="inject-ProductGridEmptyMessage-with-routingStore-root-155"
   >
     <p
-      className="MuiTypography-root-158 MuiTypography-body1-167 MuiTypography-paragraph-186 inject-ProductGridEmptyMessage-with-routingStore-notFoundMessage-157"
+      className="MuiTypography-root-158 MuiTypography-body2-166 MuiTypography-paragraph-186 inject-ProductGridEmptyMessage-with-routingStore-notFoundMessage-157"
     >
       Sorry! We couldn't find what you're looking for.
     </p>
     <p
-      className="MuiTypography-root-158 MuiTypography-body1-167 inject-ProductGridEmptyMessage-with-routingStore-actionMessage-156"
+      className="MuiTypography-root-158 MuiTypography-body2-166 inject-ProductGridEmptyMessage-with-routingStore-actionMessage-156"
     >
       <a
         className="SkLink-anchor-194"
diff --git a/src/components/ProductGridTitle/__snapshots__/ProductGridTitle.test.js.snap b/src/components/ProductGridTitle/__snapshots__/ProductGridTitle.test.js.snap
index 1c6ecaaa..ae5637a4 100644
--- a/src/components/ProductGridTitle/__snapshots__/ProductGridTitle.test.js.snap
+++ b/src/components/ProductGridTitle/__snapshots__/ProductGridTitle.test.js.snap
@@ -4,7 +4,7 @@ exports[`snapshop of tag without a displayTitle 1`] = `null`;
 
 exports[`snapshot of a tag with a displayTitle 1`] = `
 <h1
-  className="MuiTypography-root-2 MuiTypography-title-8 SkProductGridTitle-gridTitle-1"
+  className="MuiTypography-root-2 MuiTypography-h6-19 SkProductGridTitle-gridTitle-1"
 >
   Test Title
 </h1>
diff --git a/src/components/VariantList/__snapshots__/VariantList.test.js.snap b/src/components/VariantList/__snapshots__/VariantList.test.js.snap
index a6e5ba8d..94b0ab7c 100644
--- a/src/components/VariantList/__snapshots__/VariantList.test.js.snap
+++ b/src/components/VariantList/__snapshots__/VariantList.test.js.snap
@@ -106,7 +106,7 @@ exports[`basic snapshot 1`] = `
       className="SkDivider-item-49"
     />
     <span
-      className="MuiTypography-root-11 MuiTypography-body1-20 SkDivider-label-48"
+      className="MuiTypography-root-11 MuiTypography-body2-19 SkDivider-label-48"
     >
       Available Options
     </span>