[Badge] Add warning in tester if shadow is applied to ghost/outline badge variants (#2664)

* Only show the optional shadow on filled/tinted badge variants

* Change files

* Jest tests adding shadow to filled and outline badges

* Revert badge shadow changes

* Remove badge test without shadow

* Remove some more unneeded changes

* Add warning on badge tester badge when shadow shouldn't be applied

* Change files

* Update badge change file comment

* Update badge snapshot

apps/fluent-tester/src/TestComponents/Badge/BasicBadgeTest.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState, useCallback, useMemo } from 'react';
-import { View, Platform, Text, Image } from 'react-native';
+import { View, Platform, Image } from 'react-native';
 
 import { ToggleButton } from '@fluentui/react-native';
 import type {
@@ -14,6 +14,7 @@ import type {
 } from '@fluentui-react-native/badge';
 import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes } from '@fluentui-react-native/badge';
 import { useFluentTheme } from '@fluentui-react-native/framework';
+import { Text } from '@fluentui-react-native/text';
 
 import { satyaPhotoUrl } from './../PersonaCoin/styles';
 import { svgProps, iconProps } from '../Common/iconExamples';
@@ -57,6 +58,7 @@ export const BasicBadge: React.FunctionComponent = () => {
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
   const shadow = showShadow ? theme.shadows.shadow4 : undefined;
+  const showShadowWarning = showShadow && (badgeAppearance == 'ghost' || badgeAppearance == 'outline');
   const CustomBadge = useCustomizedBadge({ shadowToken: shadow });
 
   const badgeConfig = {
@@ -107,6 +109,7 @@ export const BasicBadge: React.FunctionComponent = () => {
         ) : (
           <CustomBadge {...badgeConfig}>Basic badge</CustomBadge>
         )}
+        {showShadowWarning && <Text variant="captionStandard">Adding a shadow to ghost and outline variants is not supported</Text>}
       </View>
       <Text>Size</Text>
       <Badge size="tiny" />

change/@fluentui-react-native-badge-84dfa3e4-b12a-4a42-9075-c9a9b5cc8367.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove check for appearance variant on shadow token layer",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-3f2ccc3f-c7a3-4593-8d52-bb25a51c4b8c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add warning on badge tester badge when shadow shouldn't be applied",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/components/Badge/src/Badge.tsx

@@ -23,8 +23,7 @@ export const badgeLookup = (layer: string, userProps: BadgeProps): boolean => {
     layer === userProps['shape'] ||
     (!userProps['shape'] && layer === 'circular') ||
     layer === userProps['badgeColor'] ||
-    (I18nManager.isRTL && layer === 'rtl') ||
-    (layer === 'shadowToken' && (!userProps.appearance || userProps.appearance === 'filled' || userProps.appearance === 'tint'))
+    (I18nManager.isRTL && layer === 'rtl')
   );
 };
 

packages/components/Badge/src/__tests__/Badge.test.tsx

@@ -37,6 +37,14 @@ describe('Badge component tests', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('Filled badge with shadow', () => {
+    const BadgeWithShadow = Badge.customize({
+      shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
+    });
+    const tree = renderer.create(<BadgeWithShadow appearance="filled">Badge with shadow</BadgeWithShadow>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('Check checkRenderConsistency for Badge', () => {
     checkRenderConsistency(() => <Badge />, 2);
   });

packages/components/Badge/src/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -125,6 +125,77 @@ exports[`Badge component tests Empty Badge 1`] = `
 />
 `;
 
+exports[`Badge component tests Filled badge with shadow 1`] = `
+<View
+  style={
+    Object {
+      "alignSelf": "flex-start",
+      "backgroundColor": "#0078d4",
+      "borderColor": "transparent",
+      "borderRadius": 9999,
+      "bottom": 0,
+      "justifyContent": "center",
+      "minHeight": 24,
+      "minWidth": 24,
+      "position": "relative",
+      "right": 0,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.2,
+      "shadowRadius": 8,
+    }
+  }
+>
+  <View
+    appearance="filled"
+    style={
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#0078d4",
+        "borderColor": "transparent",
+        "borderRadius": 9999,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 24,
+        "paddingHorizontal": 4,
+        "position": "relative",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 32,
+          "width": 0,
+        },
+        "shadowOpacity": 0.24,
+        "shadowRadius": 64,
+      }
+    }
+  >
+    <Text
+      accessible={false}
+      ellipsizeMode="tail"
+      numberOfLines={0}
+      onAccessibilityTap={[Function]}
+      style={
+        Object {
+          "color": "#ffffff",
+          "fontFamily": "Segoe UI",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "margin": 0,
+        }
+      }
+    >
+      Badge with shadow
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`CounterBadge component tests CounterBadge all props 1`] = `
 <View
   appearance="ghost"