diff --git a/change/@fluentui-react-native-badge-85a3ce83-de5c-404b-bf1c-c7bd7fdf3299.json b/change/@fluentui-react-native-badge-85a3ce83-de5c-404b-bf1c-c7bd7fdf3299.json new file mode 100644 index 0000000000..0d850bad1d --- /dev/null +++ b/change/@fluentui-react-native-badge-85a3ce83-de5c-404b-bf1c-c7bd7fdf3299.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Changing size default and fixing appearance default for Badge", + "packageName": "@fluentui-react-native/badge", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/components/Badge/src/Badge.tsx b/packages/components/Badge/src/Badge.tsx index f143984773..2dd81b3f02 100644 --- a/packages/components/Badge/src/Badge.tsx +++ b/packages/components/Badge/src/Badge.tsx @@ -19,11 +19,13 @@ export const badgeLookup = (layer: string, userProps: BadgeProps): boolean => { return ( userProps[layer] || layer === userProps['appearance'] || + (!userProps['appearance'] && layer === 'filled') || layer === userProps['size'] || - (!userProps['size'] && layer === 'large') || + (!userProps['size'] && layer === 'medium') || layer === userProps['shape'] || (!userProps['shape'] && layer === 'circular') || layer === userProps['badgeColor'] || + (!userProps['badgeColor'] && layer === 'brand') || (I18nManager.isRTL && layer === 'rtl') ); }; diff --git a/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap b/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap index 5f36614d10..8b9e975da7 100644 --- a/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Badge component tests Badge all props 1`] = ` "alignItems": "center", "alignSelf": "flex-start", "backgroundColor": "#00000000", - "borderColor": "#00000000", + "borderColor": "#185abd", "borderRadius": 4, "borderWidth": 1, "bottom": 0, @@ -45,7 +45,7 @@ exports[`Badge component tests Badge all props 1`] = ` onAccessibilityTap={[Function]} style={ { - "color": "#ffffff", + "color": "#185abd", "fontFamily": "Segoe UI", "fontSize": 12, "fontWeight": "400", @@ -65,15 +65,15 @@ exports[`Badge component tests Badge tokens 1`] = ` { "alignItems": "center", "alignSelf": "flex-start", - "backgroundColor": "yellow", - "borderColor": "#f09", + "backgroundColor": "#185abd", + "borderColor": "#00000000", "borderRadius": 9999, "borderWidth": 4, "bottom": 0, "flexDirection": "row", "justifyContent": "center", - "minHeight": 24, - "minWidth": 24, + "minHeight": 20, + "minWidth": 20, "paddingHorizontal": 4, "position": "relative", "right": 0, @@ -90,7 +90,7 @@ exports[`Badge component tests Badge tokens 1`] = ` { "color": "#ffffff", "fontFamily": "Segoe UI", - "fontSize": 12, + "fontSize": 10, "fontWeight": "400", "margin": 0, } @@ -114,8 +114,8 @@ exports[`Badge component tests Empty Badge 1`] = ` "bottom": 0, "flexDirection": "row", "justifyContent": "center", - "minHeight": 24, - "minWidth": 24, + "minHeight": 20, + "minWidth": 20, "paddingHorizontal": 4, "position": "relative", "right": 0, @@ -135,8 +135,8 @@ exports[`Badge component tests Filled badge with shadow 1`] = ` "borderRadius": 9999, "bottom": 0, "justifyContent": "center", - "minHeight": 24, - "minWidth": 24, + "minHeight": 20, + "minWidth": 20, "position": "relative", "right": 0, "shadowColor": "#000000", @@ -161,8 +161,8 @@ exports[`Badge component tests Filled badge with shadow 1`] = ` "borderWidth": 1, "flexDirection": "row", "justifyContent": "center", - "minHeight": 24, - "minWidth": 24, + "minHeight": 20, + "minWidth": 20, "paddingHorizontal": 4, "position": "relative", "shadowColor": "#000000", @@ -184,7 +184,7 @@ exports[`Badge component tests Filled badge with shadow 1`] = ` { "color": "#ffffff", "fontFamily": "Segoe UI", - "fontSize": 12, + "fontSize": 10, "fontWeight": "400", "margin": 0, }