fix: add border and adjust padding to badge component

[khamudom]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Set a transparent border to badge so when the component is in forced colors the system will set a border to the component

before

after

Focus areas to test

(optional)

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against b84103743a020909225498ffc628915be0855eb8}

[codesandbox-ci]

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 f030674:

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: b84103743a020909225498ffc628915be0855eb8 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1025	990	5000
BaseButton	mount	989	1019	5000
Breadcrumb	mount	2725	2745	1000
ButtonNext	mount	460	466	5000
Checkbox	mount	1695	1696	5000
CheckboxBase	mount	1496	1498	5000
ChoiceGroup	mount	5384	5304	5000
ComboBox	mount	1123	1087	1000
CommandBar	mount	10855	10942	1000
ContextualMenu	mount	6690	6583	1000
DefaultButton	mount	1239	1259	5000
DetailsRow	mount	4136	4078	5000
DetailsRowFast	mount	4173	4038	5000
DetailsRowNoStyles	mount	3884	3970	5000
Dialog	mount	2288	2314	1000
DocumentCardTitle	mount	163	158	1000
Dropdown	mount	3596	3554	5000
FluentProviderNext	mount	7432	7528	5000
FocusTrapZone	mount	1982	1919	5000
FocusZone	mount	1916	1935	5000
IconButton	mount	1976	1974	5000
Label	mount	361	348	5000
Layer	mount	1956	1988	5000
Link	mount	534	509	5000
MakeStyles	mount	2004	2000	50000
MenuButton	mount	1646	1598	5000
MessageBar	mount	2175	2244	5000
Nav	mount	3688	3662	1000
OverflowSet	mount	1118	1106	5000
Panel	mount	2170	2152	1000
Persona	mount	894	912	1000
Pivot	mount	1509	1532	1000
PrimaryButton	mount	1405	1437	5000
Rating	mount	8666	8590	5000
SearchBox	mount	1476	1467	5000
Shimmer	mount	2816	2841	5000
Slider	mount	2162	2130	5000
SpinButton	mount	5424	5520	5000
Spinner	mount	454	451	5000
SplitButton	mount	3477	3507	5000
Stack	mount	578	569	5000
StackWithIntrinsicChildren	mount	1740	1785	5000
StackWithTextChildren	mount	5282	5145	5000
SwatchColorPicker	mount	11149	12169	5000
Tabs	mount	1513	1493	1000
TagPicker	mount	2840	2857	5000
TeachingBubble	mount	12685	12659	5000
Text	mount	455	491	5000
TextField	mount	1566	1509	5000
ThemeProvider	mount	1286	1281	5000
ThemeProvider	virtual-rerender	658	645	5000
Toggle	mount	907	907	5000
buttonNative	mount	124	131	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	197	182	1.08:1
TextMinimalPerf.default	418	391	1.07:1
LayoutMinimalPerf.default	416	394	1.06:1
HeaderSlotsPerf.default	865	822	1.05:1
VideoMinimalPerf.default	718	687	1.05:1
CardMinimalPerf.default	631	609	1.04:1
DialogMinimalPerf.default	850	815	1.04:1
ItemLayoutMinimalPerf.default	1355	1304	1.04:1
PortalMinimalPerf.default	187	180	1.04:1
SegmentMinimalPerf.default	393	378	1.04:1
TooltipMinimalPerf.default	1121	1077	1.04:1
AnimationMinimalPerf.default	451	436	1.03:1
AvatarMinimalPerf.default	219	213	1.03:1
EmbedMinimalPerf.default	4535	4423	1.03:1
ListMinimalPerf.default	558	540	1.03:1
LoaderMinimalPerf.default	756	734	1.03:1
ReactionMinimalPerf.default	437	426	1.03:1
StatusMinimalPerf.default	784	762	1.03:1
IconMinimalPerf.default	716	698	1.03:1
TextAreaMinimalPerf.default	596	581	1.03:1
CustomToolbarPrototype.default	4366	4223	1.03:1
ButtonOverridesMissPerf.default	1915	1871	1.02:1
ButtonSlotsPerf.default	601	592	1.02:1
ChatDuplicateMessagesPerf.default	328	322	1.02:1
ChatMinimalPerf.default	722	710	1.02:1
CheckboxMinimalPerf.default	2960	2904	1.02:1
DropdownManyItemsPerf.default	782	769	1.02:1
PopupMinimalPerf.default	648	637	1.02:1
ToolbarMinimalPerf.default	1044	1028	1.02:1
AttachmentSlotsPerf.default	1183	1171	1.01:1
BoxMinimalPerf.default	392	388	1.01:1
ImageMinimalPerf.default	412	407	1.01:1
InputMinimalPerf.default	1399	1383	1.01:1
MenuMinimalPerf.default	962	953	1.01:1
ProviderMergeThemesPerf.default	1740	1728	1.01:1
SkeletonMinimalPerf.default	399	396	1.01:1
TableManyItemsPerf.default	2240	2212	1.01:1
CarouselMinimalPerf.default	513	511	1:1
DatepickerMinimalPerf.default	5831	5855	1:1
DropdownMinimalPerf.default	3404	3401	1:1
FormMinimalPerf.default	467	466	1:1
ListNestedPerf.default	629	626	1:1
MenuButtonMinimalPerf.default	1840	1843	1:1
RefMinimalPerf.default	253	252	1:1
SliderMinimalPerf.default	1712	1714	1:1
SplitButtonMinimalPerf.default	4232	4249	1:1
AttachmentMinimalPerf.default	177	178	0.99:1
ButtonMinimalPerf.default	196	197	0.99:1
TreeMinimalPerf.default	866	876	0.99:1
ChatWithPopoverPerf.default	384	393	0.98:1
LabelMinimalPerf.default	417	424	0.98:1
ListCommonPerf.default	676	691	0.98:1
ListWith60ListItems.default	698	712	0.98:1
RosterPerf.default	1310	1334	0.98:1
ProviderMinimalPerf.default	1103	1120	0.98:1
TableMinimalPerf.default	450	459	0.98:1
HeaderMinimalPerf.default	395	408	0.97:1
RadioGroupMinimalPerf.default	497	512	0.97:1
DividerMinimalPerf.default	400	417	0.96:1
FlexMinimalPerf.default	312	324	0.96:1
GridMinimalPerf.default	356	372	0.96:1
AlertMinimalPerf.default	294	312	0.94:1
AccordionMinimalPerf.default	158	171	0.92:1

[chrisdholt]

Thanks @khamudom - should lightweight have the outline even though the non-HC instance doesn’t include it?

[khamudom]

Thanks @khamudom - should lightweight have the outline even though the non-HC instance doesn’t include it?

Good question. Is a lightweight badge used differently from the other types of badges? Since badges usually sit on top or next to other elements, it would be good to give it a border to show separation between a badge text and another text element. Especially if the backgrounds are the same color.

[msft-fluent-ui-bot]

🎉@fluentui/web-components@v1.3.3 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release