fix(ChoiceGroup): add better guidance for image + text strings, and u…

…pdate the example (#19758)
microsoft · Sep 10, 2021 · 39625b3 · 39625b3
1 parent 7edc8fe
commit 39625b3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx
@@ -6,17 +6,18 @@ const options: IChoiceGroupOption[] = [
   {
     key: 'bar',
     imageSrc: TestImages.choiceGroupBarUnselected,
-    imageAlt: 'Bar chart icon',
+    imageAlt: 'Bar chart',
     selectedImageSrc: TestImages.choiceGroupBarSelected,
     imageSize: { width: 32, height: 32 },
-    text: 'Clustered bar chart', // This text is long to show text wrapping.
+    text: 'Bar',
   },
   {
     key: 'pie',
-    imageSrc: TestImages.choiceGroupBarUnselected,
-    selectedImageSrc: TestImages.choiceGroupBarSelected,
+    imageSrc: TestImages.choiceGroupPieUnselected,
+    imageAlt: 'Pie chart',
+    selectedImageSrc: TestImages.choiceGroupPieSelected,
     imageSize: { width: 32, height: 32 },
-    text: 'Pie chart',
+    text: 'Pie',
   },
 ];
 

diff --git a/packages/react-examples/src/react/ChoiceGroup/docs/ChoiceGroupBestPractices.md b/packages/react-examples/src/react/ChoiceGroup/docs/ChoiceGroupBestPractices.md
@@ -12,3 +12,4 @@
 - Select the safest (to prevent loss of data or system access), most secure, and most private option as the default. If safety and security aren't factors, select the most likely or convenient option.
 - Use a phrase for the label, rather than a full sentence.
 - Make sure to give people the option to not make a choice. For example, include a "None" option.
+- When using ChoiceGroup with images, keep text short (ideally one or two words), since overflowing text will be cut off. Translation to other languages and user-applied text styles can often cause label text to end up longer than the English label with author styles.
diff --git a/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Image.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Image.Example.tsx.shot
@@ -268,7 +268,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt="Bar chart icon"
+                    alt="Bar chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -319,7 +319,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt="Bar chart icon"
+                    alt="Bar chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -364,7 +364,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                 className="ms-ChoiceFieldLabel"
                 id="ChoiceGroupLabel1-bar"
               >
-                Clustered bar chart
+                Bar
               </span>
             </div>
           </label>
@@ -552,7 +552,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt=""
+                    alt="Pie chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -566,7 +566,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                         }
                     onError={[Function]}
                     onLoad={[Function]}
-                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png"
+                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png"
                   />
                 </div>
               </div>
@@ -611,7 +611,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt=""
+                    alt="Pie chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -625,7 +625,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                         }
                     onError={[Function]}
                     onLoad={[Function]}
-                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png"
+                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png"
                   />
                 </div>
               </div>
@@ -656,7 +656,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                 className="ms-ChoiceFieldLabel"
                 id="ChoiceGroupLabel1-pie"
               >
-                Pie chart
+                Pie
               </span>
             </div>
           </label>