Add prettier check to pipeline (#1334)

* Rerun prettier

* Change files

* Add prettier check to pipeline

.ado/azure-pipelines.yml

@@ -24,6 +24,10 @@ jobs:
           yarn buildci
         displayName: 'yarn buildci'
 
+      - script: |
+          yarn prettier
+        displayName: 'check prettier'
+
       - script: |
           yarn checkchange
         displayName: 'check change'

apps/fluent-tester/src/FluentTester/TestComponents/Common/iconExamples.tsx

@@ -23,4 +23,4 @@ export const fontProps: FontIconProps = Platform.select({
   },
 });
 
-export const testImage = require('../Button/icon_24x24.png');
+export const testImage = require('../Button/icon_24x24.png');

apps/fluent-tester/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -115,7 +115,6 @@ const contextualMenu: React.FunctionComponent = () => {
 };
 
 const nestedContextualMenu: React.FunctionComponent = () => {
-
   const stdBtnRef = React.useRef(null);
 
   const [showContextualMenu, setShowContextualMenu] = React.useState(false);
@@ -163,7 +162,6 @@ const nestedContextualMenu: React.FunctionComponent = () => {
     console.log('submenu item clicked');
   }, []);
 
-
   return (
     <View>
       <View style={{ flexDirection: 'row', paddingVertical: 5 }}>
@@ -235,7 +233,6 @@ const nestedContextualMenu: React.FunctionComponent = () => {
 };
 
 const IconContextualMenu: React.FunctionComponent = () => {
-
   const stdBtnRef = React.useRef(null);
 
   const [showContextualMenu, setShowContextualMenu] = React.useState(false);
@@ -442,7 +439,13 @@ const ScrollViewContextualMenu: React.FunctionComponent = () => {
             componentRef={stdMenuItemRef}
           />
           {showSubmenu && (
-            <Submenu maxHeight={200} target={stdMenuItemRef} onDismiss={onDismissSubmenu} onShow={onShowSubmenu} setShowMenu={toggleShowSubmenu}>
+            <Submenu
+              maxHeight={200}
+              target={stdMenuItemRef}
+              onDismiss={onDismissSubmenu}
+              onShow={onShowSubmenu}
+              setShowMenu={toggleShowSubmenu}
+            >
               <ContextualMenuItem text="MenuItem 4" itemKey="4" />
               <ContextualMenuItem text="MenuItem 5" itemKey="5" />
               <ContextualMenuItem text="MenuItem 6" itemKey="6" />
@@ -486,7 +489,7 @@ const contextualMenuSections: TestSection[] = [
   {
     name: 'ContextualMenu E2E Test',
     component: E2EContextualMenuTest,
-  },  
+  },
 ];
 
 export const ContextualMenuTest: React.FunctionComponent = () => {

apps/fluent-tester/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx

@@ -32,8 +32,7 @@ export const DrawerTest: React.FunctionComponent = () => {
     androidStatus: 'Experimental',
   };
 
-  const description =
-    'A Drawer component using the Fluent Design System.  Currently only implemented on Android.';
+  const description = 'A Drawer component using the Fluent Design System.  Currently only implemented on Android.';
 
   return <Test name="Drawer Test" description={description} sections={drawerSections} status={status} />;
 };

change/@fluentui-react-native-button-ee6eff02-8e77-4009-ab40-25ecb3d7f452.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Rerun prettier",
+  "packageName": "@fluentui-react-native/button",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-experimental-checkbox-52aeb8dd-229d-4194-9c31-71c86107aeba.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Rerun prettier",
+  "packageName": "@fluentui-react-native/experimental-checkbox",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-experimental-drawer-8bf46c6a-0b75-4b53-a0f5-3c12595953ab.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Rerun prettier",
+  "packageName": "@fluentui-react-native/experimental-drawer",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-experimental-tabs-7c669631-b3a1-4c00-ac06-3cba517b55fb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Rerun prettier",
+  "packageName": "@fluentui-react-native/experimental-tabs",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-tester-8091eb11-3ab9-4454-8f2d-ef355b03d255.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Rerun prettier",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-native-theme-tokens-133a03d3-5beb-4b4a-bee1-10072a57c569.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Rerun prettier",
+  "packageName": "@fluentui-react-native/theme-tokens",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "none"
+}

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

@@ -10,7 +10,7 @@ export const settings: IComposeSettings<IButtonType> = [
       borderColor: 'neutralStroke1',
       borderWidth: 1,
       borderRadius: 4,
-      wrapperBorderColor: 'transparent'
+      wrapperBorderColor: 'transparent',
     },
     root: {
       accessible: true,
@@ -28,7 +28,7 @@ export const settings: IComposeSettings<IButtonType> = [
         display: 'flex',
         flexGrow: 1,
         borderWidth: 1,
-      }
+      },
     },
     endIcon: {
       style: {

packages/experimental/Drawer/src/Drawer.tsx

@@ -1,8 +1,8 @@
 /** @jsx withSlots */
 import * as React from 'react';
-import { drawerName, DrawerTokens, DrawerProps, NativeDrawerProps, DrawerType} from './Drawer.types';
+import { drawerName, DrawerTokens, DrawerProps, NativeDrawerProps, DrawerType } from './Drawer.types';
 import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework';
-import { findNodeHandle} from 'react-native';
+import { findNodeHandle } from 'react-native';
 import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
 
 const FRNDrawer = ensureNativeComponent('FRNDrawer');
@@ -13,8 +13,7 @@ export const Drawer = compose<DrawerType>({
   slots: { root: FRNDrawer },
   slotProps: {
     root: buildProps<NativeDrawerProps, DrawerTokens>(() => ({
-      style: {
-      },
+      style: {},
     })),
   },
   render: (props: DrawerProps, useSlots: UseSlots<DrawerType>) => {
@@ -35,4 +34,4 @@ export const Drawer = compose<DrawerType>({
     };
   },
 });
-export default Drawer;
+export default Drawer;

packages/experimental/Drawer/src/Drawer.types.ts

@@ -16,14 +16,9 @@ export type DrawerSlotProps = {
   root: NativeDrawerProps;
 };
 
+export interface DrawerTokens {}
 
-export interface DrawerTokens {
-
-}
-
-export interface DrawerState {
-
-}
+export interface DrawerState {}
 
 export interface DrawerInfo {
   props: DrawerProps;

packages/experimental/Tabs/src/Tabs.tsx

@@ -72,9 +72,9 @@ export const Tabs = compose<TabsType>({
               <Slots.stack>{children}</Slots.stack>
             </Slots.container>
             <Slots.tabPanel>
-                <TabsContext.Consumer>
-                  {context => !tabs?.state?.headersOnly && <View>{context.views.get(context.selectedKey)}</View>}
-                </TabsContext.Consumer>
+              <TabsContext.Consumer>
+                {(context) => !tabs?.state?.headersOnly && <View>{context.views.get(context.selectedKey)}</View>}
+              </TabsContext.Consumer>
             </Slots.tabPanel>
           </Slots.root>
         </TabsContext.Provider>

packages/experimental/Tabs/src/Tabs.types.ts

@@ -42,7 +42,7 @@ export interface TabsContextData {
    * Reference to the Focus Container as there is no FocusZone on windows.
    * GH #964
    */
-   focusZoneRef?: React.RefObject<any> | null;
+  focusZoneRef?: React.RefObject<any> | null;
 }
 
 export interface TabsTokens extends IForegroundColorTokens, FontTokens, IBackgroundColorTokens {}
@@ -98,7 +98,7 @@ export interface TabsState {
    * Array of enabled keys in the group
    * Windows-Specific Prop.
    */
-   enabledKeys?: string[];
+  enabledKeys?: string[];
 }
 export interface TabsInfo {
   props: TabsProps;

packages/experimental/Tabs/src/Tabs.windows.tsx

@@ -20,7 +20,7 @@ export const TabsContext = React.createContext<TabsContextData>({
   },
   tabsItemKeys: [],
   views: null,
-  focusZoneRef: null
+  focusZoneRef: null,
 });
 
 export const Tabs = compose<TabsType>({
@@ -30,21 +30,21 @@ export const Tabs = compose<TabsType>({
     root: View,
     label: Text,
     stack: View,
-    tabPanel: View
+    tabPanel: View,
   },
   render: (userProps: TabsProps, useSlots: UseSlots<TabsType>) => {
     // configure props and state for tabs based on user props
     const tabs = useTabs(userProps);
 
-    if(!tabs.state) return null;
+    if (!tabs.state) return null;
 
     // Grab the styled slots.
-    const Slots = useSlots(userProps, layer => tabs.state[layer] || userProps[layer]);
+    const Slots = useSlots(userProps, (layer) => tabs.state[layer] || userProps[layer]);
 
     const onKeyDown = (ev: any) => {
       if (ev.nativeEvent.key === 'ArrowRight' || ev.nativeEvent.key === 'ArrowLeft') {
         const length = tabs.state.enabledKeys.length;
-        const currTabItemIndex = tabs.state.enabledKeys.findIndex(x => x == tabs.state.context.selectedKey)
+        const currTabItemIndex = tabs.state.enabledKeys.findIndex((x) => x == tabs.state.context.selectedKey);
         let newCurrTabItemIndex;
         if (ev.nativeEvent.key === 'ArrowRight') {
           if (tabs.props.isCircularNavigation || !(currTabItemIndex + 1 == length)) {
@@ -52,8 +52,7 @@ export const Tabs = compose<TabsType>({
             tabs.state.context.selectedKey = tabs.state.enabledKeys[newCurrTabItemIndex];
             tabs.state.context.onTabsClick(tabs.state.context.selectedKey);
           }
-        }
-        else {
+        } else {
           if (tabs.props.isCircularNavigation || !(currTabItemIndex == 0)) {
             newCurrTabItemIndex = (currTabItemIndex - 1 + length) % length;
             tabs.state.context.selectedKey = tabs.state.enabledKeys[newCurrTabItemIndex];
@@ -64,7 +63,9 @@ export const Tabs = compose<TabsType>({
     };
 
     const stackProps = {
-      focusable: true, ref: tabs.state.context.focusZoneRef, onKeyDown: onKeyDown
+      focusable: true,
+      ref: tabs.state.context.focusZoneRef,
+      onKeyDown: onKeyDown,
     };
 
     // Return the handler to finish render.
@@ -104,11 +105,11 @@ export const Tabs = compose<TabsType>({
         >
           <Slots.root {...mergedProps}>
             {tabs?.state?.label && <Slots.label key="label">{label}</Slots.label>}
-              <Slots.stack {...stackProps}>{children}</Slots.stack>
+            <Slots.stack {...stackProps}>{children}</Slots.stack>
             <Slots.tabPanel>
-                <TabsContext.Consumer>
-                  {context => !tabs?.state?.headersOnly && <View>{context.views.get(context.selectedKey)}</View>}
-                </TabsContext.Consumer>
+              <TabsContext.Consumer>
+                {(context) => !tabs?.state?.headersOnly && <View>{context.views.get(context.selectedKey)}</View>}
+              </TabsContext.Consumer>
             </Slots.tabPanel>
           </Slots.root>
         </TabsContext.Provider>

packages/experimental/Tabs/src/useTabs.ts

@@ -26,18 +26,21 @@ export const useTabs = (props: TabsProps): TabsInfo => {
     [setSelectedTabsItemRef],
   );
 
-  const findTabId = React.useCallback((key: string, index: number) => {
-    if (getTabId) {
-      return getTabId(key, index);
-    }
-    return `${key}-Tab${index}`;
-  }, [getTabId]);
+  const findTabId = React.useCallback(
+    (key: string, index: number) => {
+      if (getTabId) {
+        return getTabId(key, index);
+      }
+      return `${key}-Tab${index}`;
+    },
+    [getTabId],
+  );
 
   // Stores views to be displayed.
   const map = new Map<string, React.ReactNode[]>();
 
   const state: TabsState = {
-    context:{
+    context: {
       selectedKey: selectedKey ?? data.selectedKey,
       onTabsClick: data.onKeySelect,
       getTabId: findTabId,
@@ -58,7 +61,7 @@ export const useTabs = (props: TabsProps): TabsInfo => {
       isCircularNavigation: props.isCircularNavigation ?? false,
     },
     state: {
-      ...state
+      ...state,
     },
   };
 };

packages/experimental/Tabs/src/useTabs.windows.ts

@@ -12,16 +12,28 @@ import { TabsProps, TabsState, TabsInfo } from './Tabs.types';
 export const useTabs = (props: TabsProps): TabsInfo => {
   const defaultComponentRef = React.useRef(null);
   const focusZoneRef = React.useRef(null);
-  const { componentRef = defaultComponentRef, selectedKey, getTabId, onTabsClick, defaultSelectedKey, isCircularNavigation, headersOnly, label } = props;
+  const {
+    componentRef = defaultComponentRef,
+    selectedKey,
+    getTabId,
+    onTabsClick,
+    defaultSelectedKey,
+    isCircularNavigation,
+    headersOnly,
+    label,
+  } = props;
 
   const data = useSelectedKey(selectedKey || defaultSelectedKey || null, onTabsClick);
 
-  const findTabId = React.useCallback((key: string, index: number) => {
-    if (getTabId) {
-      return getTabId(key, index);
-    }
-    return `${key}-Tab${index}`;
-  }, [getTabId]);
+  const findTabId = React.useCallback(
+    (key: string, index: number) => {
+      if (getTabId) {
+        return getTabId(key, index);
+      }
+      return `${key}-Tab${index}`;
+    },
+    [getTabId],
+  );
 
   // Stores views to be displayed.
   const map = new Map<string, React.ReactNode[]>();
@@ -38,7 +50,6 @@ export const useTabs = (props: TabsProps): TabsInfo => {
     label: !!label,
   };
 
-
   return {
     props: {
       ...props,
@@ -48,7 +59,7 @@ export const useTabs = (props: TabsProps): TabsInfo => {
       isCircularNavigation: isCircularNavigation ?? false,
     },
     state: {
-      ...state
+      ...state,
     },
   };
 };

packages/experimental/Tabs/src/useTabsItem.windows.ts

@@ -19,7 +19,7 @@ export const useTabsItem = (props: TabsItemProps): TabsItemInfo => {
   const changeSelection = React.useCallback(() => {
     info.focusZoneRef?.current?.focus(); // GH #964, FocusZone not implemented on windows.
     info.onTabsClick && info.onTabsClick(itemKey);
-    info.getTabId && info.getTabId(itemKey, info.tabsItemKeys.findIndex(x => x == itemKey) + 1);
+    info.getTabId && info.getTabId(itemKey, info.tabsItemKeys.findIndex((x) => x == itemKey) + 1);
     info.updateSelectedTabsItemRef && componentRef && info.updateSelectedTabsItemRef(componentRef);
   }, [componentRef, info, itemKey]);
 
@@ -65,13 +65,13 @@ export const useTabsItem = (props: TabsItemProps): TabsItemInfo => {
       focusable: false,
       headerText: headerText ?? '',
       accessibilityState: { disabled: disabled, selected: info.selectedKey === itemKey },
-      accessibilityActions: [{ name: 'Select'}],
+      accessibilityActions: [{ name: 'Select' }],
       onAccessibilityAction: onAccessibilityAction,
       itemCount: itemCount,
       itemKey: itemKey,
     },
     state: {
-      ...state
+      ...state,
     },
   };
 };

packages/theming/theme-tokens/src/pipeline-input/token-input-light.android.json

@@ -108,7 +108,7 @@
           "Hover": { "aliasOf": "Global.Color.Brand.Shade.10" },
           "Pressed": { "aliasOf": "Global.Color.Brand.Shade.30" },
           "Selected": { "aliasOf": "Global.Color.Brand.Shade.20" },
-          "Disabled": { "aliasOf": "Global.Color.Grey.88"}
+          "Disabled": { "aliasOf": "Global.Color.Grey.88" }
         }
       }
     },