Bringing windows platform more in line with more complete win32 impl

.vscode/settings.json

@@ -11,8 +11,8 @@
   "explorer.fileNesting.enabled": true,
   "explorer.fileNesting.patterns": {
     "*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map",
-    "*.ts": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts",
-    "*.tsx": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts"
+    "*.ts": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.officewin.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts, ${capture}.officewin.ts",
+    "*.tsx": "${capture}.android.tsx, ${capture}.ios.tsx, ${capture}.macos.tsx, ${capture}.windows.tsx, ${capture}.win32.tsx, ${capture}.officewin.tsx, ${capture}.android.ts, ${capture}.ios.ts, ${capture}.macos.ts, ${capture}.windows.ts, ${capture}.win32.ts, ${capture}.officewin.ts"
   },
 
   "files.trimTrailingWhitespace": true,

apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ViewStyle, ColorValue } from 'react-native';
 import { View, StyleSheet } from 'react-native';
 
-import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-native';
+import { ButtonV1 as Button, Text } from '@fluentui/react-native';
 import type { Theme } from '@fluentui-react-native/theme-types';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
@@ -52,11 +52,19 @@ const Panel: React.FunctionComponent = () => {
   const onClick = React.useCallback(() => setDisabled(!disabled), [disabled, setDisabled]);
   return (
     <View style={styles.panel}>
-      <PrimaryButton onClick={onClick} content="Primary Button" disabled={disabled} />
-      <Button onClick={onClick} content="Default Button" disabled={disabled} />
-      <StealthButton onClick={onClick} content="Stealth Button" disabled={disabled} />
+      <Button appearance="primary" onClick={onClick} disabled={disabled}>
+        Primary Button
+      </Button>
+      <Button onClick={onClick} disabled={disabled}>
+        Default Button
+      </Button>
+      <Button appearance="subtle" onClick={onClick} disabled={disabled}>
+        Steath Button
+      </Button>
       <Text>This is a text element</Text>
-      <Button onClick={onClick} content="This button has longer text" disabled={disabled} />
+      <Button onClick={onClick} disabled={disabled}>
+        This button has longer text
+      </Button>
     </View>
   );
 };

packages/components/Button/src/Button.styling.ts

@@ -1,5 +1,4 @@
 import type { ColorValue } from 'react-native';
-import { Platform } from 'react-native';
 
 import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework';
 import { buildProps } from '@fluentui-react-native/framework';
@@ -8,9 +7,10 @@ import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/t
 import type { FontTokens } from '@fluentui-react-native/tokens';
 
 import { buttonName } from './Button.types';
-import type { ButtonTokens, ButtonSlotProps, ButtonProps, ButtonSize, ButtonAppearance } from './Button.types';
+import type { ButtonTokens, ButtonSlotProps, ButtonProps } from './Button.types';
 import { defaultButtonColorTokens } from './ButtonColorTokens';
 import { defaultButtonFontTokens } from './ButtonFontTokens';
+import { buttonPlatformSlotProps } from './ButtonPlatform';
 import { defaultButtonTokens } from './ButtonTokens';
 
 export const buttonStates: (keyof ButtonTokens)[] = [
@@ -37,23 +37,7 @@ export const stylingSettings: UseStylingOptions<ButtonProps, ButtonSlotProps, Bu
   tokens: [defaultButtonTokens, defaultButtonFontTokens, defaultButtonColorTokens, buttonName],
   states: buttonStates,
   slotProps: {
-    ...(Platform.OS === 'android' && {
-      rippleContainer: buildProps(
-        (tokens: ButtonTokens) => {
-          return {
-            style: {
-              flexDirection: 'row',
-              alignSelf: 'baseline',
-              borderColor: tokens.borderInnerColor,
-              borderWidth: tokens.borderInnerWidth,
-              borderRadius: tokens.borderRadius,
-              overflow: 'hidden',
-            },
-          };
-        },
-        ['borderRadius'],
-      ),
-    }),
+    ...buttonPlatformSlotProps,
     root: buildProps(
       (tokens: ButtonTokens, theme: Theme) => ({
         style: {
@@ -106,38 +90,6 @@ export const stylingSettings: UseStylingOptions<ButtonProps, ButtonSlotProps, Bu
   },
 };
 
-export const getDefaultSize = (): ButtonSize => {
-  if (Platform.OS === 'windows') {
-    return 'medium';
-  } else if ((Platform.OS as any) === 'win32') {
-    return 'small';
-  }
-
-  return 'medium';
-};
-
-export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => {
-  // Mobile platforms do not have seperate styling when no appearance is passed.
-  const hasDifferentDefaultAppearance = !(Platform.OS === 'android' || Platform.OS === 'ios');
-
-  switch (appearance) {
-    case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
-      return 'primary';
-
-    case 'primary':
-    case 'subtle':
-    case 'outline': // 'Outline' exists only for Mobile platforms, default picked on other platforms.
-      return appearance;
-
-    default:
-      if (hasDifferentDefaultAppearance) {
-        return null;
-      } else {
-        return 'primary';
-      }
-  }
-};
-
 export const contentStyling = (tokens: ButtonTokens, theme: Theme, contentColor: ColorValue, fontStylesTokens: FontTokens) => {
   const textAdjustment = getTextMarginAdjustment();
   const spacingIconContentBefore = tokens.spacingIconContentBefore

packages/components/Button/src/Button.tsx

@@ -10,9 +10,10 @@ import { Icon, createIconProps } from '@fluentui-react-native/icon';
 import type { IPressableState } from '@fluentui-react-native/interactive-hooks';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 
-import { stylingSettings, getDefaultSize, getPlatformSpecificAppearance } from './Button.styling';
+import { stylingSettings } from './Button.styling';
 import { buttonName } from './Button.types';
 import type { ButtonType, ButtonProps } from './Button.types';
+import { getDefaultSize, getPlatformSpecificAppearance } from './ButtonPlatform';
 import { extractOuterStylePropsAndroid } from './ExtractStyle.android';
 import { useButton } from './useButton';
 
@@ -46,7 +47,7 @@ export const Button = compose<ButtonType>({
   slots: {
     root: Pressable,
     rippleContainer: Platform.OS === 'android' && View,
-    focusInnerBorder: Platform.OS === ('win32' as any) && View,
+    focusInnerBorder: (Platform.OS === ('win32' as any) || Platform.OS === 'windows') && View,
     icon: Icon,
     content: Text,
   },

packages/components/Button/src/ButtonFontTokens.win.ts

@@ -0,0 +1,30 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
+
+import type { ButtonTokens } from './Button.types';
+
+export const defaultButtonFontTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
+  ({
+    medium: {
+      hasContent: {
+        fontFamily: t.typography.families.secondary,
+        fontSize: globalTokens.font.size300,
+        fontWeight: globalTokens.font.weight.semibold,
+      },
+    },
+    small: {
+      hasContent: {
+        fontFamily: t.typography.families.primary,
+        fontSize: globalTokens.font.size200,
+        fontWeight: globalTokens.font.weight.regular,
+      },
+    },
+    large: {
+      hasContent: {
+        fontFamily: t.typography.families.secondary,
+        fontSize: globalTokens.font.size400,
+        fontWeight: globalTokens.font.weight.semibold,
+      },
+    },
+  } as ButtonTokens);

packages/components/Button/src/ButtonFontTokens.win32.ts

@@ -1,30 +1 @@
-import type { Theme } from '@fluentui-react-native/framework';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import type { TokenSettings } from '@fluentui-react-native/use-styling';
-
-import type { ButtonTokens } from './Button.types';
-
-export const defaultButtonFontTokens: TokenSettings<ButtonTokens, Theme> = (t: Theme) =>
-  ({
-    medium: {
-      hasContent: {
-        fontFamily: t.typography.families.secondary,
-        fontSize: globalTokens.font.size300,
-        fontWeight: globalTokens.font.weight.semibold,
-      },
-    },
-    small: {
-      hasContent: {
-        fontFamily: t.typography.families.primary,
-        fontSize: globalTokens.font.size200,
-        fontWeight: globalTokens.font.weight.regular,
-      },
-    },
-    large: {
-      hasContent: {
-        fontFamily: t.typography.families.secondary,
-        fontSize: globalTokens.font.size400,
-        fontWeight: globalTokens.font.weight.semibold,
-      },
-    },
-  } as ButtonTokens);
+export { defaultButtonFontTokens } from './ButtonFontTokens.win';

packages/components/Button/src/ButtonFontTokens.windows.ts

@@ -0,0 +1 @@
+export { defaultButtonFontTokens } from './ButtonFontTokens.win';

packages/components/Button/src/ButtonPlatform.android.ts

@@ -0,0 +1,42 @@
+import { buildProps } from '@fluentui-react-native/framework';
+
+import type { ButtonAppearance, ButtonSize, ButtonTokens } from './Button.types';
+
+export function buttonPlatformSlotProps() {
+  return {
+    rippleContainer: buildProps(
+      (tokens: ButtonTokens) => {
+        return {
+          style: {
+            flexDirection: 'row',
+            alignSelf: 'baseline',
+            borderColor: tokens.borderInnerColor,
+            borderWidth: tokens.borderInnerWidth,
+            borderRadius: tokens.borderRadius,
+            overflow: 'hidden',
+          },
+        };
+      },
+      ['borderRadius'],
+    ),
+  };
+}
+
+export const getDefaultSize = (): ButtonSize => {
+  return 'medium';
+};
+
+export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => {
+  switch (appearance) {
+    case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
+      return 'primary';
+
+    case 'primary':
+    case 'subtle':
+    case 'outline': // 'Outline' exists only for Mobile platforms, default picked on other platforms.
+      return appearance;
+
+    default:
+      return 'primary';
+  }
+};

packages/components/Button/src/ButtonPlatform.ios.ts

@@ -0,0 +1,24 @@
+import type { ButtonAppearance, ButtonSize } from './Button.types';
+
+export function buttonPlatformSlotProps() {
+  return {};
+}
+
+export const getDefaultSize = (): ButtonSize => {
+  return 'medium';
+};
+
+export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => {
+  switch (appearance) {
+    case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
+      return 'primary';
+
+    case 'primary':
+    case 'subtle':
+    case 'outline': // 'Outline' exists only for Mobile platforms, default picked on other platforms.
+      return appearance;
+
+    default:
+      return 'primary';
+  }
+};

packages/components/Button/src/ButtonPlatform.officewin.ts

@@ -0,0 +1,24 @@
+import type { ButtonAppearance, ButtonSize } from './Button.types';
+
+export function buttonPlatformSlotProps() {
+  return {};
+}
+
+export const getDefaultSize = (): ButtonSize => {
+  return 'small';
+};
+
+export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => {
+  switch (appearance) {
+    case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
+      return 'primary';
+
+    case 'primary':
+    case 'subtle':
+    case 'outline': // 'Outline' exists only for Mobile platforms, default picked on other platforms.
+      return appearance;
+
+    default:
+      return null;
+  }
+};

packages/components/Button/src/ButtonPlatform.ts

@@ -0,0 +1,24 @@
+import type { ButtonAppearance, ButtonSize } from './Button.types';
+
+export function buttonPlatformSlotProps() {
+  return {};
+}
+
+export const getDefaultSize = (): ButtonSize => {
+  return 'medium';
+};
+
+export const getPlatformSpecificAppearance = (appearance: ButtonAppearance): ButtonAppearance => {
+  switch (appearance) {
+    case 'accent': // Included to cover Mobile platform naming guidelines, maps to 'primary'.
+      return 'primary';
+
+    case 'primary':
+    case 'subtle':
+    case 'outline': // 'Outline' exists only for Mobile platforms, default picked on other platforms.
+      return appearance;
+
+    default:
+      return null;
+  }
+};

packages/components/Button/src/ButtonPlatform.win32.ts

@@ -0,0 +1 @@
+export { buttonPlatformSlotProps, getDefaultSize, getPlatformSpecificAppearance } from './ButtonPlatform.officewin';