Fix Badge component default settings (#3832)

* Apply filled as default appearance of badge * Fix some other defaults to align with SPEC * Change files * Update snapshots * Change files
microsoft · Jan 9, 2025 · f4469e4 · f4469e4
1 parent 4490805
commit f4469e4
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
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
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Changing size default and fixing appearance default for Badge",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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
@@ -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,
         }