fix(ChoiceGroup): add better guidance for image + text strings, and update the example #19758

smhigley · 2021-09-10T23:02:30Z

Pull request checklist

Addresses an existing issue: Fixes 12468
Include a change request file using $ yarn change

Description of changes

The ChoiceGroup image variant doesn't accommodate longer text strings, so I added guidance to keep text short, since translation or user styles can lengthen it. This was the solution proposed when consulting with design, since the current design doesn't have a way to handle longer text without significant alteration.

I also update the example to use the correct icon for pie chart, because why not :D

khmakoto · 2021-09-10T23:04:09Z

packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx

    selectedImageSrc: TestImages.choiceGroupBarSelected,
    imageSize: { width: 32, height: 32 },
-    text: 'Clustered bar chart', // This text is long to show text wrapping.
+    text: 'Bar', // This text is long to show text wrapping.


Should the comment after be removed now?

ah, yup, fixed! 😄

fabricteam · 2021-09-10T23:12:08Z

📊 Bundle size report

_{🤖 This report was generated against 7edc8fe8dccfa4e63b24d38a25ba5f8af06701dd}

codesandbox-ci · 2021-09-10T23:13:35Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8f43e40:

Sandbox	Source
Fluent UI React Starter	Configuration

size-auditor · 2021-09-10T23:15:16Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 7edc8fe8dccfa4e63b24d38a25ba5f8af06701dd (build)

fabricteam · 2021-09-10T23:57:18Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	977	952	5000
BaseButton	mount	941	959	5000
Breadcrumb	mount	2638	2588	1000
ButtonNext	mount	472	455	5000
Checkbox	mount	1617	1703	5000
CheckboxBase	mount	1382	1432	5000
ChoiceGroup	mount	5108	5067	5000
ComboBox	mount	1006	996	1000
CommandBar	mount	10576	10381	1000
ContextualMenu	mount	6566	6622	1000
DefaultButton	mount	1201	1177	5000
DetailsRow	mount	4055	3972	5000
DetailsRowFast	mount	3983	4060	5000
DetailsRowNoStyles	mount	3817	3884	5000
Dialog	mount	2559	2596	1000
DocumentCardTitle	mount	146	154	1000
Dropdown	mount	3400	3417	5000
FluentProviderNext	mount	7285	7204	5000
FluentProviderWithTheme	mount	353	345	10
FluentProviderWithTheme	virtual-rerender	89	94	10
FluentProviderWithTheme	virtual-rerender-with-unmount	485	461	10
FocusTrapZone	mount	1860	1875	5000
FocusZone	mount	1847	1955	5000
IconButton	mount	1942	1964	5000
Label	mount	355	335	5000
Layer	mount	3270	3163	5000
Link	mount	490	500	5000
MakeStyles	mount	1863	1896	50000
MenuButton	mount	1647	1568	5000
MessageBar	mount	2097	2010	5000
Nav	mount	3518	3630	1000
OverflowSet	mount	1168	1168	5000
Panel	mount	2461	2502	1000
Persona	mount	877	922	1000
Pivot	mount	1495	1494	1000
PrimaryButton	mount	1363	1369	5000
Rating	mount	8505	8489	5000
SearchBox	mount	1511	1505	5000
Shimmer	mount	2769	2777	5000
Slider	mount	2088	2186	5000
SpinButton	mount	5462	5422	5000
Spinner	mount	453	475	5000
SplitButton	mount	3506	3536	5000
Stack	mount	568	562	5000
StackWithIntrinsicChildren	mount	1764	1776	5000
StackWithTextChildren	mount	5172	5104	5000
SwatchColorPicker	mount	11349	11304	5000
Tabs	mount	1631	1635	1000
TagPicker	mount	2889	2890	5000
TeachingBubble	mount	14817	14370	5000
Text	mount	461	493	5000
TextField	mount	1506	1490	5000
ThemeProvider	mount	1229	1232	5000
ThemeProvider	virtual-rerender	635	629	5000
ThemeProvider	virtual-rerender-with-unmount	2103	2056	5000
Toggle	mount	903	908	5000
buttonNative	mount	127	119	5000