Tokenize button Android/iOS

apps/fluent-tester/src/FluentTesterApp.tsx

@@ -37,7 +37,7 @@ const useSizeClassIOS_DO_NOT_USE: () => SizeClassIOS = () => {
 
 export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
   const sizeClass = useSizeClassIOS_DO_NOT_USE();
-  const isMobile = Platform.OS == 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
+  const isMobile = Platform.OS === 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
 
   // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.
   const shouldShowSinglePane = isMobile || (!isMobile && sizeClass === 'compact');

apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.android.tsx

@@ -0,0 +1,30 @@
+import { ButtonV1 as Button } from '@fluentui/react-native';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+import { svgProps } from '../Common/iconExamples';
+
+export const ButtonIconTest: React.FunctionComponent = () => {
+  const fontBuiltInProps = {
+    fontFamily: 'Arial',
+    codepoint: 0x2663,
+    fontSize: 24,
+  };
+
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  const testImage = require('../../../../assets/icon_24x24.png');
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
+        Font icon
+      </Button>
+      <Button appearance="accent" icon={{ svgSource: svgProps, color: 'black' }} style={commonTestStyles.vmargin}>
+        SVG
+      </Button>
+      <Button icon={testImage} style={commonTestStyles.vmargin}>
+        PNG
+      </Button>
+    </View>
+  );
+};

apps/fluent-tester/src/TestComponents/Button/ButtonSizeTestSection.tsx

@@ -1,4 +1,4 @@
-import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native';
+import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui/react-native';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
@@ -42,6 +42,12 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
           <Button size="large" icon={iconProps} style={commonTestStyles.vmargin}>
             Large Button with icon
           </Button>
+          <FAB size="small" icon={iconProps} style={commonTestStyles.vmargin}>
+            Small FAB
+          </FAB>
+          <FAB size="large" icon={iconProps} style={commonTestStyles.vmargin}>
+            Large FAB
+          </FAB>
         </>
       )}
       <Button size="small" style={commonTestStyles.vmargin}>
@@ -53,35 +59,39 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
       <Button size="large" style={commonTestStyles.vmargin}>
         Large
       </Button>
-      <Button loading size="small" style={commonTestStyles.vmargin}>
-        Loading Button Small
-      </Button>
-      <Button loading size="medium" style={commonTestStyles.vmargin}>
-        Loading Button Medium
-      </Button>
-      <Button loading size="large" style={commonTestStyles.vmargin}>
-        Loading Button Large
-      </Button>
-      <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
-        Compound Button
-      </CompoundButton>
-      {svgIconsEnabled && (
+      {Platform.OS !== 'android' && (
         <>
-          <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
-            Content
+          <Button loading size="small" style={commonTestStyles.vmargin}>
+            Loading Button Small
+          </Button>
+          <Button loading size="medium" style={commonTestStyles.vmargin}>
+            Loading Button Medium
+          </Button>
+          <Button loading size="large" style={commonTestStyles.vmargin}>
+            Loading Button Large
+          </Button>
+          <CompoundButton secondaryContent="Small compound button" size="small" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
-          <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
-            Content
+          <CompoundButton secondaryContent="Medium compound button" size="medium" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
-          <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
-            Content
+          <CompoundButton secondaryContent="Large compound button" size="large" style={commonTestStyles.vmargin}>
+            Compound Button
           </CompoundButton>
+          {svgIconsEnabled && (
+            <>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="small" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="medium" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+              <CompoundButton icon={iconProps} secondaryContent="SecondaryContent" size="large" style={commonTestStyles.vmargin}>
+                Content
+              </CompoundButton>
+            </>
+          )}
         </>
       )}
     </View>

apps/fluent-tester/src/TestComponents/Button/ButtonTest.tsx

@@ -19,20 +19,22 @@ const buttonSections: TestSection[] = [
     testID: BUTTON_TESTPAGE,
     component: ButtonVariantTest,
   },
-  {
-    name: 'Button Shape',
-    component: ButtonShapeTest,
-  },
   {
     name: 'Icon Button',
     component: ButtonIconTest,
   },
-  Platform.select({
-    android: null, //Toggle Button is not implemented for Android
-    default: {
-      name: 'Toggle Button',
-      component: ToggleButtonTest,
-    },
+  ...Platform.select({
+    android: [null], //Following sections are not supported from Fluent Android
+    default: [
+      {
+        name: 'Toggle Button',
+        component: ToggleButtonTest,
+      },
+      {
+        name: 'Button Shape',
+        component: ButtonShapeTest,
+      },
+    ],
   }),
   {
     name: 'Sizes',
@@ -66,7 +68,7 @@ export const ButtonTest: React.FunctionComponent = () => {
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Beta',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description =

apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.android.tsx

@@ -0,0 +1,45 @@
+import { Button, FAB } from '@fluentui-react-native/experimental-button';
+import * as React from 'react';
+import { View } from 'react-native';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
+import { iconProps } from '../Common/iconExamples';
+
+export const ButtonVariantTest: React.FunctionComponent = () => {
+  const [showFABText, setShowFABText] = React.useState(true);
+  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
+
+  return (
+    <View style={testContentRootViewStyle}>
+      <Button style={commonTestStyles.vmargin}>Default</Button>
+      <Button disabled style={commonTestStyles.vmargin}>
+        Default Disabled
+      </Button>
+      <Button appearance="accent" style={commonTestStyles.vmargin}>
+        Accent
+      </Button>
+      <Button disabled appearance="accent" style={commonTestStyles.vmargin}>
+        Accent Disabled
+      </Button>
+      <Button appearance="outline" style={commonTestStyles.vmargin}>
+        Outline
+      </Button>
+      <Button appearance="outline" disabled style={commonTestStyles.vmargin}>
+        Outline Disabled
+      </Button>
+      <Button appearance="subtle" style={commonTestStyles.vmargin}>
+        Subtle
+      </Button>
+      <Button appearance="subtle" disabled style={commonTestStyles.vmargin}>
+        Subtle Disabled
+      </Button>
+      <FAB icon={iconProps} iconOnly disabled style={commonTestStyles.vmargin} />
+      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+      <FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} />
+      <FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
+        Click Me!
+      </FAB>
+    </View>
+  );
+};

apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx

@@ -1,16 +1,10 @@
-import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button';
+import { Button, CompoundButton } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
 import { View } from 'react-native';
 import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
-import { svgProps } from '../Common/iconExamples';
 
 // Test also pulls button from deprecated package to ensure it's still working
 export const ButtonVariantTest: React.FunctionComponent = () => {
-  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
-
-  const [showFABText, setShowFABText] = React.useState(true);
-  const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
-
   return (
     <View style={testContentRootViewStyle}>
       <Button style={commonTestStyles.vmargin}>Default</Button>
@@ -45,10 +39,6 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
       <CompoundButton appearance="subtle" secondaryContent="Compound" style={commonTestStyles.vmargin}>
         Subtle
       </CompoundButton>
-      <FAB icon={iconProps} style={commonTestStyles.vmargin} />
-      <FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
-        FAB
-      </FAB>
     </View>
   );
 };

apps/fluent-tester/src/TestComponents/Shadow/ShadowButtonTestSection.tsx

@@ -4,6 +4,7 @@ import { FAB, Text } from '@fluentui/react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 import { shadowTestPageStyles } from './ShadowTestPageStyles';
 import { useFluentTheme } from '@fluentui-react-native/framework';
+import { iconProps } from '../Common/iconExamples';
 
 const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
 const CustomFABShadow64 = FAB.customize({
@@ -16,9 +17,15 @@ export const ShadowButtonTestSection: React.FunctionComponent = () => {
   if (Platform.OS === 'ios') {
     return (
       <View style={shadowTestPageStyles(t).backgroundColor}>
-        <FAB style={commonTestStyles.vmargin}>FAB with default shadow</FAB>
-        <CustomFABShadow64 style={commonTestStyles.vmargin}>Custom FAB with shadow64</CustomFABShadow64>
-        <CustomFABNoShadow style={commonTestStyles.vmargin}>Custom FAB with no shadow</CustomFABNoShadow>
+        <FAB icon={iconProps} style={commonTestStyles.vmargin}>
+          FAB with default shadow
+        </FAB>
+        <CustomFABShadow64 icon={iconProps} style={commonTestStyles.vmargin}>
+          Custom FAB with shadow64
+        </CustomFABShadow64>
+        <CustomFABNoShadow icon={iconProps} style={commonTestStyles.vmargin}>
+          Custom FAB with no shadow
+        </CustomFABNoShadow>
       </View>
     );
   } else {

change/@fluentui-react-native-button-10ae7399-8b50-4819-9785-4dc9f2415ed3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Button/FAB Tokenization Complete",
+  "packageName": "@fluentui-react-native/button",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-experimental-menu-button-d4f0727b-84d8-407b-b63b-c77f4397779b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Button/FAB Tokenization Complete",
+  "packageName": "@fluentui-react-native/experimental-menu-button",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-menu-8ef2c740-67ab-4533-b57e-7bcd9d13cc9f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Button/FAB Tokenization Complete",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-menu-button-b02de3bf-aecb-4b2a-9cf4-b2faa906dac2.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Button/FAB Tokenization Complete",
+  "packageName": "@fluentui-react-native/menu-button",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-tester-8c6fbb58-2489-4431-bbc4-5ff0ab26cbf6.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Updated tester app text for mobile",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tokens-427dc551-93f2-484d-8b21-006a3b0a4217.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added padding start and end to LayoutTokens",
+  "packageName": "@fluentui-react-native/tokens",
+  "email": "ayushsinghs@yahoo.in",
+  "dependentChangeType": "patch"
+}