[Callout][macOS] Support Border Tokens (#3002)

Saadnajmi · web-flow · commit 0458d809d772 · 2023-08-08T13:42:53.000-07:00
* [Callout][macOS] Support Border Tokens

* Change files

* PR feedback
diff --git a/apps/fluent-tester/src/TestComponents/Callout/CalloutTest.tsx b/apps/fluent-tester/src/TestComponents/Callout/CalloutTest.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { KeyboardMetrics } from 'react-native';
-import { Text, View, Switch, ScrollView } from 'react-native';
+import { Text, View, Switch, ScrollView, Platform } from 'react-native';
 
 import { Button, Callout, Separator, Pressable, StealthButton } from '@fluentui/react-native';
 import type { IFocusable, RestoreFocusEvent, DismissBehaviors, ICalloutProps } from '@fluentui/react-native';
@@ -190,16 +190,26 @@ const StandardCallout: React.FunctionComponent = () => {
   const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState<string | undefined>(undefined);
   const [selectedBorderColor, setSelectedBorderColor] = React.useState<string | undefined>(undefined);
 
-  const borderWidthDefault: string = '1';
-  const borderWidthSelections: string[] = ['1', '2', '4', '10'];
+  const borderWidthDefault: string = Platform.OS === 'macos' ? '0' : '1';
+  const borderWidthSelections: string[] = ['0', '1', '2', '4', '10'];
   const menuPickerBorderWidthCollection = borderWidthSelections.map((width) => {
     return {
       label: width,
       value: width,
     };
   });
 
+  const borderRadiusDefault: string = '5';
+  const borderRadiusSelections: string[] = ['0', '5', '7', '15'];
+  const menuPickerBorderRadiusCollection = borderRadiusSelections.map((width) => {
+    return {
+      label: width,
+      value: width,
+    };
+  });
+
   const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<string | undefined>(undefined);
+  const [selectedBorderRadius, setSelectedBorderRadius] = React.useState<string | undefined>(undefined);
 
   const [showScrollViewCallout, setShowScrollViewCalout] = React.useState(false);
   const [scrollviewContents, setScrollviewContents] = React.useState([1, 2, 3]);
@@ -278,6 +288,12 @@ const StandardCallout: React.FunctionComponent = () => {
             onChange={(color) => setSelectedBorderWidth(color === colorDefault ? undefined : color)}
             collection={menuPickerBorderWidthCollection}
           />
+          <MenuPicker
+            prompt="Border Radius"
+            selected={selectedBorderRadius || borderRadiusDefault}
+            onChange={(radius) => setSelectedBorderRadius(radius === borderRadiusDefault ? undefined : radius)}
+            collection={menuPickerBorderRadiusCollection}
+          />
         </View>
 
         <Separator vertical />
@@ -345,6 +361,7 @@ const StandardCallout: React.FunctionComponent = () => {
             ...(selectedBorderColor && { borderColor: selectedBorderColor }),
             ...(selectedBackgroundColor && { backgroundColor: selectedBackgroundColor }),
             ...(selectedBorderWidth && { borderWidth: parseInt(selectedBorderWidth) }),
+            ...(selectedBorderRadius && { borderRadius: parseInt(selectedBorderRadius) }),
             ...(calloutDismissBehaviors && { dismissBehaviors: calloutDismissBehaviors }),
           }}
         >
diff --git a/change/@fluentui-react-native-callout-d29aa3b2-0424-40dd-885c-593cfb1efea5.json b/change/@fluentui-react-native-callout-d29aa3b2-0424-40dd-885c-593cfb1efea5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "[Callout][macOS] Support Border Tokens",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-menu-c879068b-f9e4-46fb-9673-de13745c679a.json b/change/@fluentui-react-native-menu-c879068b-f9e4-46fb-9673-de13745c679a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "[Callout][macOS] Support Border Tokens",
+  "packageName": "@fluentui-react-native/menu",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-native-tester-263d571d-5f37-4902-8c1b-f1e31c60d001.json b/change/@fluentui-react-native-tester-263d571d-5f37-4902-8c1b-f1e31c60d001.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "[Callout][macOS] Support Border Tokens",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "saadnajmi2@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/components/Callout/macos/CalloutView.swift b/packages/components/Callout/macos/CalloutView.swift
@@ -64,6 +64,14 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		}
 	}
 
+	override func updateLayer() {
+		if let layer = calloutWindow.contentView?.layer {
+			layer.borderColor =  borderColor.cgColor
+			layer.borderWidth = borderWidth
+			layer.backgroundColor = backgroundColor.cgColor
+			layer.cornerRadius = borderRadius
+		}
+	}
 
 	// MARK: RCTComponent Overrides
 
@@ -365,7 +373,6 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 		visualEffectView.material = .menu
 		visualEffectView.state = .active
 		visualEffectView.wantsLayer = true
-		visualEffectView.layer?.cornerRadius = calloutWindowCornerRadius
 
 		/**
 		 * We can't directly call touchHandler.attach(to:) because `visualEffectView` is not an RCTUIView.
@@ -398,7 +405,3 @@ class CalloutView: RCTView, CalloutWindowLifeCycleDelegate {
 
 	private var isCalloutWindowShown = false
 }
-
-
-
-private var calloutWindowCornerRadius: CGFloat = 5.0
diff --git a/packages/components/Callout/src/Callout.settings.macos.ts b/packages/components/Callout/src/Callout.settings.macos.ts
@@ -7,12 +7,10 @@ export const settings: IComposeSettings<ICalloutType> = [
   {
     tokens: {
       backgroundColor: 'bodyStandoutBackground',
-      beakWidth: 20,
-      borderColor: 'bodyFrameBackground',
-      borderWidth: 1,
+      borderColor: 'transparent',
+      borderWidth: 0,
+      borderRadius: 5,
       directionalHint: 'bottonLeftEdge',
-      gapSpace: 0,
-      minPadding: 0,
     },
     root: {
       style: {
diff --git a/packages/components/Callout/src/Callout.types.ts b/packages/components/Callout/src/Callout.types.ts
@@ -39,7 +39,6 @@ export interface RestoreFocusEvent {
 }
 
 interface OmittedBorderTokens {
-  borderRadius?: number | string;
   borderStyle?: ViewStyle['borderStyle'];
 }
 
diff --git a/packages/components/Menu/SPEC.md b/packages/components/Menu/SPEC.md
@@ -293,9 +293,9 @@ export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
 
   /**
    * Corner radius of the menu list
-   * @platform android
+   * @platform android macos
    */
-  cornerRadius?: number;
+  borderRadius?: number;
 }
 ```
 
diff --git a/packages/components/Menu/src/MenuCallout/MenuCallout.android.tsx b/packages/components/Menu/src/MenuCallout/MenuCallout.android.tsx
@@ -35,7 +35,7 @@ export const MenuCallout = stagedComponent((props: MenuCalloutProps) => {
                   maxHeight: mergedProps.maxHeight ? mergedProps.maxHeight : tokens.maxHeight,
                   maxWidth: tokens.maxWidth,
                   position: 'absolute',
-                  borderRadius: tokens.cornerRadius,
+                  borderRadius: tokens.borderRadius,
                   elevation: tokens.elevation,
                   overflow: 'hidden',
                 },
diff --git a/packages/components/Menu/src/MenuCallout/MenuCallout.types.ts b/packages/components/Menu/src/MenuCallout/MenuCallout.types.ts
@@ -8,9 +8,9 @@ export type MenuCalloutTokens =
   | Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
       /**
        * The token for the corner radius for the Modal MenuPopover
-       * @platform android
+       * @platform android macos
        */
-      cornerRadius?: number;
+      borderRadius?: number;
 
       /**
        * Shadown elevation token for the Modal MenuPopover
diff --git a/packages/components/Menu/src/MenuList/MenuList.styling.ts b/packages/components/Menu/src/MenuList/MenuList.styling.ts
@@ -20,7 +20,7 @@ export const stylingSettings: UseStylingOptions<MenuListProps, MenuListSlotProps
           backgroundColor: tokens.backgroundColor,
           display: 'flex',
           ...layoutStyles.from(tokens, theme),
-          ...(Platform.OS === 'android' && { borderRadius: tokens.cornerRadius }),
+          ...(Platform.OS === 'android' && { borderRadius: tokens.borderRadius }),
         },
         gap: tokens.gap,
       }),
diff --git a/packages/components/Menu/src/MenuList/MenuList.types.ts b/packages/components/Menu/src/MenuList/MenuList.types.ts
@@ -20,10 +20,10 @@ export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
   hasMaxHeight?: MenuListTokens;
 
   /**
-   * Corner radius of the menu list
-   * @platform android
+   * Border radius of the menu list
+   * @platform android macos
    */
-  cornerRadius?: number;
+  borderRadius?: number;
 }
 
 export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
diff --git a/packages/components/Menu/src/MenuList/MenuListTokens.android.ts b/packages/components/Menu/src/MenuList/MenuListTokens.android.ts
@@ -6,6 +6,6 @@ import type { MenuListTokens } from './MenuList.types';
 
 export const defaultMenuListTokens: TokenSettings<MenuListTokens, Theme> = (t: Theme): MenuListTokens => ({
   backgroundColor: t.colors.neutralBackground1,
-  cornerRadius: globalTokens.corner.radius80,
+  borderRadius: globalTokens.corner.radius80,
   paddingVertical: globalTokens.size80,
 });
diff --git a/packages/components/Menu/src/MenuPopover/MenuPopover.types.ts b/packages/components/Menu/src/MenuPopover/MenuPopover.types.ts
@@ -9,9 +9,9 @@ export type MenuPopoverTokens =
   | Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'> & {
       /**
        * The props for the corner radius for the Modal MenuPopover
-       * @platform android
+       * @platform android macos
        */
-      cornerRadius?: number;
+      borderRadius?: number;
 
       /**
        * Shadown elevation for the Modal MenuPopover
diff --git a/packages/components/Menu/src/MenuPopover/MenuPopoverTokens.macos.ts b/packages/components/Menu/src/MenuPopover/MenuPopoverTokens.macos.ts
@@ -0,0 +1,13 @@
+import type { Theme } from '@fluentui-react-native/framework';
+import { buildUseTokens } from '@fluentui-react-native/framework';
+
+import type { MenuPopoverTokens } from './MenuPopover.types';
+import { menuPopoverName } from './MenuPopover.types';
+
+export const useMenuPopoverTokens = buildUseTokens<MenuPopoverTokens>(
+  (_t: Theme) => ({
+    borderWidth: 0,
+    borderRadius: 5,
+  }),
+  menuPopoverName,
+);

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,6 @@ export interface RestoreFocusEvent {`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`interface OmittedBorderTokens {`
`42`		`- borderRadius?: number \| string;`
`43`	`42`	`borderStyle?: ViewStyle['borderStyle'];`
`44`	`43`	`}`
`45`	`44`