From a857ac9761acc140c6d04b1645950896f61af8af Mon Sep 17 00:00:00 2001
From: Michael Loughry <miclo@microsoft.com>
Date: Wed, 9 Sep 2020 15:59:04 -0700
Subject: [PATCH] Fix snapshot tests (#14962)

---
 ...020-09-09-22-16-15-fix-snapshot-tests.json |   8 +
 .../Rating.Basic.Example.tsx.shot             | 862 +-----------------
 .../Rating.ButtonControlled.Example.tsx.shot  |  27 +-
 3 files changed, 20 insertions(+), 877 deletions(-)
 create mode 100644 change/@fluentui-react-next-2020-09-09-22-16-15-fix-snapshot-tests.json

diff --git a/change/@fluentui-react-next-2020-09-09-22-16-15-fix-snapshot-tests.json b/change/@fluentui-react-next-2020-09-09-22-16-15-fix-snapshot-tests.json
new file mode 100644
index 0000000000000..725489a6fa6cc
--- /dev/null
+++ b/change/@fluentui-react-next-2020-09-09-22-16-15-fix-snapshot-tests.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Fix snapshot tests",
+  "packageName": "@fluentui/react-next",
+  "email": "miclo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-09-09T22:16:15.003Z"
+}
diff --git a/packages/react-next/src/components/__snapshots__/Rating.Basic.Example.tsx.shot b/packages/react-next/src/components/__snapshots__/Rating.Basic.Example.tsx.shot
index 74068409ecedc..447637663cc8b 100644
--- a/packages/react-next/src/components/__snapshots__/Rating.Basic.Example.tsx.shot
+++ b/packages/react-next/src/components/__snapshots__/Rating.Basic.Example.tsx.shot
@@ -2,9 +2,9 @@
 
 exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
 <div>
-  Large Stars:
+  Large stars:
   <div
-    aria-label="Rating value is 1 of 5"
+    aria-label="Large stars rating value is 1 of 5"
     className=
         ms-Rating-star
         ms-RatingStar-root
@@ -26,7 +26,6 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
           height: 36px;
         }
     id="Rating0"
-    onChange={[Function]}
   >
     <div
       className=
@@ -841,9 +840,9 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
       </button>
     </div>
   </div>
-  Small Stars
+  Small stars, with 0 stars allowed:
   <div
-    aria-label="Rating value is 3 of 5"
+    aria-label="Small stars with 0 stars allowed rating value is 3 of 5"
     className=
         ms-Rating-star
         ms-RatingStar-root
@@ -864,8 +863,7 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
         {
           height: 32px;
         }
-    id="small"
-    onChange={[Function]}
+    id="Rating3"
   >
     <div
       className=
@@ -1680,9 +1678,9 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
       </button>
     </div>
   </div>
-  10 Small Stars
+  10 small stars:
   <div
-    aria-label="Rating value is 1 of 10"
+    aria-label="10 small stars rating value is 1 of 10"
     className=
         ms-Rating-star
         ms-RatingStar-root
@@ -1704,7 +1702,6 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
           height: 32px;
         }
     id="Rating6"
-    onChange={[Function]}
   >
     <div
       className=
@@ -3296,6 +3293,7 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
   </div>
   Disabled:
   <div
+    aria-label="Disabled rating value is 1 of 5"
     className=
         ms-Rating-star
         ms-RatingStar-root
@@ -3905,7 +3903,7 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
     id="Rating12"
   >
     <div
-      aria-label="Rating value is 2.5 of 5"
+      aria-label="Half star in readOnly mode rating value is 2.5 of 5"
       aria-readonly={true}
       className=
           ms-FocusZone
@@ -4633,7 +4631,7 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
   </div>
   Custom icons:
   <div
-    aria-label="Rating value is 2.5 of 5"
+    aria-label="Custom icons rating value is 2.5 of 5"
     className=
         ms-Rating-star
         ms-RatingStar-root
@@ -4655,7 +4653,6 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
           height: 32px;
         }
     id="Rating15"
-    onChange={[Function]}
   >
     <div
       className=
@@ -5470,844 +5467,5 @@ exports[`Component Examples renders Rating.Basic.Example.tsx correctly 1`] = `
       </button>
     </div>
   </div>
-  Themed star
-  <div
-    aria-label="Rating value is 1 of 5"
-    className=
-        ms-Rating-star
-        ms-RatingStar-root
-        ms-RatingStar-root--small
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-        &:hover .ms-RatingStar-back {
-          color: #323130;
-        }
-        @media screen and (-ms-high-contrast: active){&:hover .ms-RatingStar-back {
-          color: Highlight;
-        }
-        {
-          height: 32px;
-        }
-    id="Rating18"
-    onChange={[Function]}
-  >
-    <div
-      className=
-          ms-FocusZone
-          ms-Rating-focuszone
-          ms-RatingStar-root--small
-          &:focus {
-            outline: none;
-          }
-          {
-            display: inline-block;
-            outline: transparent;
-            position: relative;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid #ffffff;
-            bottom: 1px;
-            content: "";
-            left: 1px;
-            outline: 1px solid #605e5c;
-            position: absolute;
-            right: 1px;
-            top: 1px;
-            z-index: 1;
-          }
-          {
-            height: 32px;
-          }
-      data-focuszone-id="FocusZone20"
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onMouseDownCapture={[Function]}
-    >
-      <button
-        className=
-            ms-Rating-button
-            ms-Rating--small
-            {
-              background-color: transparent;
-              border: none;
-              box-sizing: content-box;
-              cursor: pointer;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: transparent;
-              padding-bottom: 8px;
-              padding-left: 2px;
-              padding-right: 2px;
-              padding-top: 8px;
-              position: relative;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 1px;
-              content: "";
-              left: 1px;
-              outline: 1px solid #605e5c;
-              position: absolute;
-              right: 1px;
-              top: 1px;
-              z-index: 1;
-            }
-            &:disabled {
-              cursor: default;
-            }
-            &[disabled] {
-              cursor: default;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: WindowText;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: WindowText;
-            }
-            &:hover .ms-RatingStar-back {
-              color: #0078d4;
-            }
-            &:hover .ms-RatingStar-front {
-              color: #005a9e;
-            }
-            {
-              font-size: 16px;
-              height: 16px;
-              line-height: 16px;
-            }
-        data-is-current={true}
-        disabled={false}
-        id="Rating18-star-0"
-        onClick={[Function]}
-        onFocus={[Function]}
-        role="presentation"
-        type="button"
-      >
-        <span
-          className=
-              ms-Rating-labelText
-              {
-                border: 0px;
-                height: 1px;
-                margin-bottom: -1px;
-                margin-left: -1px;
-                margin-right: -1px;
-                margin-top: -1px;
-                overflow: hidden;
-                padding-bottom: 0px;
-                padding-left: 0px;
-                padding-right: 0px;
-                padding-top: 0px;
-                position: absolute;
-                width: 1px;
-              }
-          id="RatingLabel19-1"
-        >
-          Select 1 of 5 stars
-        </span>
-        <div
-          className=
-              ms-RatingStar-container
-              {
-                display: inline-block;
-                height: inherit;
-                position: relative;
-              }
-        >
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-back
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #605e5c;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  speak: none;
-                  width: 100%;
-                }
-            data-icon-name="FavoriteStarFill"
-          >
-            
-          </i>
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-front
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #323130;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  height: 100 %;
-                  left: 0;
-                  overflow: hidden;
-                  position: absolute;
-                  speak: none;
-                  text-align: center;
-                  top: 0;
-                  vertical-align: middle;
-                }
-                @media screen and (-ms-high-contrast: active){& {
-                  color: Highlight;
-                }
-            data-icon-name="FavoriteStarFill"
-            style={
-              Object {
-                "width": "100%",
-              }
-            }
-          >
-            
-          </i>
-        </div>
-      </button>
-      <button
-        className=
-            ms-Rating-button
-            ms-Rating--small
-            {
-              background-color: transparent;
-              border: none;
-              box-sizing: content-box;
-              cursor: pointer;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: transparent;
-              padding-bottom: 8px;
-              padding-left: 2px;
-              padding-right: 2px;
-              padding-top: 8px;
-              position: relative;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 1px;
-              content: "";
-              left: 1px;
-              outline: 1px solid #605e5c;
-              position: absolute;
-              right: 1px;
-              top: 1px;
-              z-index: 1;
-            }
-            &:disabled {
-              cursor: default;
-            }
-            &[disabled] {
-              cursor: default;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: WindowText;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: WindowText;
-            }
-            &:hover .ms-RatingStar-back {
-              color: #0078d4;
-            }
-            &:hover .ms-RatingStar-front {
-              color: #005a9e;
-            }
-            {
-              font-size: 16px;
-              height: 16px;
-              line-height: 16px;
-            }
-        disabled={false}
-        id="Rating18-star-1"
-        onClick={[Function]}
-        onFocus={[Function]}
-        role="presentation"
-        type="button"
-      >
-        <span
-          className=
-              ms-Rating-labelText
-              {
-                border: 0px;
-                height: 1px;
-                margin-bottom: -1px;
-                margin-left: -1px;
-                margin-right: -1px;
-                margin-top: -1px;
-                overflow: hidden;
-                padding-bottom: 0px;
-                padding-left: 0px;
-                padding-right: 0px;
-                padding-top: 0px;
-                position: absolute;
-                width: 1px;
-              }
-          id="RatingLabel19-2"
-        >
-          Select 2 of 5 stars
-        </span>
-        <div
-          className=
-              ms-RatingStar-container
-              {
-                display: inline-block;
-                height: inherit;
-                position: relative;
-              }
-        >
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-back
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #605e5c;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  speak: none;
-                  width: 100%;
-                }
-            data-icon-name="FavoriteStar"
-          >
-            
-          </i>
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-front
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #323130;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  height: 100 %;
-                  left: 0;
-                  overflow: hidden;
-                  position: absolute;
-                  speak: none;
-                  text-align: center;
-                  top: 0;
-                  vertical-align: middle;
-                }
-                @media screen and (-ms-high-contrast: active){& {
-                  color: Highlight;
-                }
-            data-icon-name="FavoriteStar"
-            style={
-              Object {
-                "width": "0%",
-              }
-            }
-          >
-            
-          </i>
-        </div>
-      </button>
-      <button
-        className=
-            ms-Rating-button
-            ms-Rating--small
-            {
-              background-color: transparent;
-              border: none;
-              box-sizing: content-box;
-              cursor: pointer;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: transparent;
-              padding-bottom: 8px;
-              padding-left: 2px;
-              padding-right: 2px;
-              padding-top: 8px;
-              position: relative;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 1px;
-              content: "";
-              left: 1px;
-              outline: 1px solid #605e5c;
-              position: absolute;
-              right: 1px;
-              top: 1px;
-              z-index: 1;
-            }
-            &:disabled {
-              cursor: default;
-            }
-            &[disabled] {
-              cursor: default;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: WindowText;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: WindowText;
-            }
-            &:hover .ms-RatingStar-back {
-              color: #0078d4;
-            }
-            &:hover .ms-RatingStar-front {
-              color: #005a9e;
-            }
-            {
-              font-size: 16px;
-              height: 16px;
-              line-height: 16px;
-            }
-        disabled={false}
-        id="Rating18-star-2"
-        onClick={[Function]}
-        onFocus={[Function]}
-        role="presentation"
-        type="button"
-      >
-        <span
-          className=
-              ms-Rating-labelText
-              {
-                border: 0px;
-                height: 1px;
-                margin-bottom: -1px;
-                margin-left: -1px;
-                margin-right: -1px;
-                margin-top: -1px;
-                overflow: hidden;
-                padding-bottom: 0px;
-                padding-left: 0px;
-                padding-right: 0px;
-                padding-top: 0px;
-                position: absolute;
-                width: 1px;
-              }
-          id="RatingLabel19-3"
-        >
-          Select 3 of 5 stars
-        </span>
-        <div
-          className=
-              ms-RatingStar-container
-              {
-                display: inline-block;
-                height: inherit;
-                position: relative;
-              }
-        >
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-back
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #605e5c;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  speak: none;
-                  width: 100%;
-                }
-            data-icon-name="FavoriteStar"
-          >
-            
-          </i>
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-front
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #323130;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  height: 100 %;
-                  left: 0;
-                  overflow: hidden;
-                  position: absolute;
-                  speak: none;
-                  text-align: center;
-                  top: 0;
-                  vertical-align: middle;
-                }
-                @media screen and (-ms-high-contrast: active){& {
-                  color: Highlight;
-                }
-            data-icon-name="FavoriteStar"
-            style={
-              Object {
-                "width": "0%",
-              }
-            }
-          >
-            
-          </i>
-        </div>
-      </button>
-      <button
-        className=
-            ms-Rating-button
-            ms-Rating--small
-            {
-              background-color: transparent;
-              border: none;
-              box-sizing: content-box;
-              cursor: pointer;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: transparent;
-              padding-bottom: 8px;
-              padding-left: 2px;
-              padding-right: 2px;
-              padding-top: 8px;
-              position: relative;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 1px;
-              content: "";
-              left: 1px;
-              outline: 1px solid #605e5c;
-              position: absolute;
-              right: 1px;
-              top: 1px;
-              z-index: 1;
-            }
-            &:disabled {
-              cursor: default;
-            }
-            &[disabled] {
-              cursor: default;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: WindowText;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: WindowText;
-            }
-            &:hover .ms-RatingStar-back {
-              color: #0078d4;
-            }
-            &:hover .ms-RatingStar-front {
-              color: #005a9e;
-            }
-            {
-              font-size: 16px;
-              height: 16px;
-              line-height: 16px;
-            }
-        disabled={false}
-        id="Rating18-star-3"
-        onClick={[Function]}
-        onFocus={[Function]}
-        role="presentation"
-        type="button"
-      >
-        <span
-          className=
-              ms-Rating-labelText
-              {
-                border: 0px;
-                height: 1px;
-                margin-bottom: -1px;
-                margin-left: -1px;
-                margin-right: -1px;
-                margin-top: -1px;
-                overflow: hidden;
-                padding-bottom: 0px;
-                padding-left: 0px;
-                padding-right: 0px;
-                padding-top: 0px;
-                position: absolute;
-                width: 1px;
-              }
-          id="RatingLabel19-4"
-        >
-          Select 4 of 5 stars
-        </span>
-        <div
-          className=
-              ms-RatingStar-container
-              {
-                display: inline-block;
-                height: inherit;
-                position: relative;
-              }
-        >
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-back
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #605e5c;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  speak: none;
-                  width: 100%;
-                }
-            data-icon-name="FavoriteStar"
-          >
-            
-          </i>
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-front
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #323130;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  height: 100 %;
-                  left: 0;
-                  overflow: hidden;
-                  position: absolute;
-                  speak: none;
-                  text-align: center;
-                  top: 0;
-                  vertical-align: middle;
-                }
-                @media screen and (-ms-high-contrast: active){& {
-                  color: Highlight;
-                }
-            data-icon-name="FavoriteStar"
-            style={
-              Object {
-                "width": "0%",
-              }
-            }
-          >
-            
-          </i>
-        </div>
-      </button>
-      <button
-        className=
-            ms-Rating-button
-            ms-Rating--small
-            {
-              background-color: transparent;
-              border: none;
-              box-sizing: content-box;
-              cursor: pointer;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: transparent;
-              padding-bottom: 8px;
-              padding-left: 2px;
-              padding-right: 2px;
-              padding-top: 8px;
-              position: relative;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 1px;
-              content: "";
-              left: 1px;
-              outline: 1px solid #605e5c;
-              position: absolute;
-              right: 1px;
-              top: 1px;
-              z-index: 1;
-            }
-            &:disabled {
-              cursor: default;
-            }
-            &[disabled] {
-              cursor: default;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-back {
-              color: WindowText;
-            }
-            &:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: #605e5c;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover ~ .ms-Rating-button .ms-RatingStar-front {
-              color: WindowText;
-            }
-            &:hover .ms-RatingStar-back {
-              color: #0078d4;
-            }
-            &:hover .ms-RatingStar-front {
-              color: #005a9e;
-            }
-            {
-              font-size: 16px;
-              height: 16px;
-              line-height: 16px;
-            }
-        disabled={false}
-        id="Rating18-star-4"
-        onClick={[Function]}
-        onFocus={[Function]}
-        role="presentation"
-        type="button"
-      >
-        <span
-          className=
-              ms-Rating-labelText
-              {
-                border: 0px;
-                height: 1px;
-                margin-bottom: -1px;
-                margin-left: -1px;
-                margin-right: -1px;
-                margin-top: -1px;
-                overflow: hidden;
-                padding-bottom: 0px;
-                padding-left: 0px;
-                padding-right: 0px;
-                padding-top: 0px;
-                position: absolute;
-                width: 1px;
-              }
-          id="RatingLabel19-5"
-        >
-          Select 5 of 5 stars
-        </span>
-        <div
-          className=
-              ms-RatingStar-container
-              {
-                display: inline-block;
-                height: inherit;
-                position: relative;
-              }
-        >
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-back
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #605e5c;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  speak: none;
-                  width: 100%;
-                }
-            data-icon-name="FavoriteStar"
-          >
-            
-          </i>
-          <i
-            aria-hidden={true}
-            className=
-                ms-RatingStar-front
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  color: #323130;
-                  display: inline-block;
-                  font-family: "FabricMDL2Icons";
-                  font-style: normal;
-                  font-weight: normal;
-                  height: 100 %;
-                  left: 0;
-                  overflow: hidden;
-                  position: absolute;
-                  speak: none;
-                  text-align: center;
-                  top: 0;
-                  vertical-align: middle;
-                }
-                @media screen and (-ms-high-contrast: active){& {
-                  color: Highlight;
-                }
-            data-icon-name="FavoriteStar"
-            style={
-              Object {
-                "width": "0%",
-              }
-            }
-          >
-            
-          </i>
-        </div>
-      </button>
-    </div>
-  </div>
 </div>
 `;
diff --git a/packages/react-next/src/components/__snapshots__/Rating.ButtonControlled.Example.tsx.shot b/packages/react-next/src/components/__snapshots__/Rating.ButtonControlled.Example.tsx.shot
index 6f3a9d8dbf2ef..dc81434106353 100644
--- a/packages/react-next/src/components/__snapshots__/Rating.ButtonControlled.Example.tsx.shot
+++ b/packages/react-next/src/components/__snapshots__/Rating.ButtonControlled.Example.tsx.shot
@@ -851,31 +851,8 @@ exports[`Component Examples renders Rating.ButtonControlled.Example.tsx correctl
           }
       data-automationid="splitbuttonprimary"
     >
-      <span
-        className=
-            ms-Button-textContainer
-            {
-              display: block;
-              flex-grow: 1;
-            }
-      >
-        <span
-          className=
-              ms-Button-label
-              {
-                display: block;
-                font-weight: 600;
-                line-height: 100%;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-              }
-          id="id__3"
-        >
-          Click to change rating to 0
-        </span>
-      </span>
+      Click to change rating to 
+      0
     </span>
   </button>
 </div>