@fluentui-react-native/tester 0.100.1 → 0.100.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.100.1",
+  "version": "0.100.3",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -36,40 +36,40 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.12.6 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.15.5 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.2.18",
-    "@fluentui-react-native/badge": ">=0.1.40 <1.0.0",
-    "@fluentui-react-native/button": ">=0.25.6 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.16.2 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.4.8 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.8 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.16.11 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.33",
-    "@fluentui-react-native/experimental-checkbox": "0.12.24",
-    "@fluentui-react-native/experimental-expander": "0.4.10",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.39 <1.0.0",
-    "@fluentui-react-native/experimental-native-date-picker": ">=0.7.2 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.5.6",
-    "@fluentui-react-native/experimental-shadow": "0.2.26",
-    "@fluentui-react-native/experimental-shimmer": "0.7.9",
-    "@fluentui-react-native/experimental-tabs": "0.5.22",
-    "@fluentui-react-native/experimental-text": ">=0.11.10 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.8.8 <1.0.0",
-    "@fluentui-react-native/icon": "0.13.13",
-    "@fluentui-react-native/interactive-hooks": ">=0.18.11 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.45",
+    "@fluentui-react-native/android-theme": ">=0.12.7 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.16.0 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.2.19",
+    "@fluentui-react-native/badge": ">=0.1.41 <1.0.0",
+    "@fluentui-react-native/button": ">=0.25.7 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.16.3 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.4.9 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.9 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.16.13 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.34",
+    "@fluentui-react-native/experimental-checkbox": "0.12.25",
+    "@fluentui-react-native/experimental-expander": "0.4.11",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.40 <1.0.0",
+    "@fluentui-react-native/experimental-native-date-picker": ">=0.7.3 <1.0.0",
+    "@fluentui-react-native/experimental-radio-group": "^0.5.7",
+    "@fluentui-react-native/experimental-shadow": "0.2.27",
+    "@fluentui-react-native/experimental-shimmer": "0.7.10",
+    "@fluentui-react-native/experimental-tabs": "0.5.23",
+    "@fluentui-react-native/experimental-text": ">=0.11.11 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.8.9 <1.0.0",
+    "@fluentui-react-native/icon": "0.13.14",
+    "@fluentui-react-native/interactive-hooks": ">=0.18.12 <1.0.0",
+    "@fluentui-react-native/menu": "^1.0.46",
     "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
-    "@fluentui-react-native/notification": "0.17.18",
-    "@fluentui-react-native/stack": ">=0.7.12 <1.0.0",
-    "@fluentui-react-native/switch": "^0.6.13",
-    "@fluentui-react-native/text": ">=0.15.4 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.7.4 <1.0.0",
-    "@fluentui-react-native/theme-types": ">=0.20.0 <1.0.0",
+    "@fluentui-react-native/notification": "0.17.19",
+    "@fluentui-react-native/stack": ">=0.7.13 <1.0.0",
+    "@fluentui-react-native/switch": "^0.6.14",
+    "@fluentui-react-native/text": ">=0.15.5 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.7.5 <1.0.0",
+    "@fluentui-react-native/theme-types": ">=0.21.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.1",
-    "@fluentui-react-native/theming-utils": ">=0.16.0 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.21.6 <1.0.0",
-    "@fluentui/react-native": ">=0.32.31 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.16.1 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.21.7 <1.0.0",
+    "@fluentui/react-native": ">=0.32.32 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/TestComponents/Spacing/SpacingTest.tsx

@@ -0,0 +1,63 @@
+import { createAppleTheme } from '@fluentui-react-native/apple-theme';
+import { Stack } from '@fluentui-react-native/stack';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { stackStyle } from '../Common/styles';
+import { Test, TestSection, PlatformStatus } from '../Test';
+
+const BasicUsage: React.FunctionComponent = () => {
+  function spacingExample(tokenName: string, spacing?: number | string) {
+    return (
+      <View>
+        <Text>
+          {tokenName} ({spacing})
+        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+          <Text style={{ padding: spacing, backgroundColor: '#f80' }}>First</Text>
+          <Text style={{ padding: spacing, backgroundColor: '#0af' }}>Second</Text>
+        </View>
+      </View>
+    );
+  }
+
+  const appleTheme = createAppleTheme().theme;
+
+  return (
+    <View>
+      <Stack style={stackStyle} gap={5}>
+        {spacingExample('None', appleTheme.spacing.none)}
+        {spacingExample('XXXS', appleTheme.spacing.xxxs)}
+        {spacingExample('XXS', appleTheme.spacing.xxs)}
+        {spacingExample('XS', appleTheme.spacing.xs)}
+        {spacingExample('S', appleTheme.spacing.s)}
+        {spacingExample('M', appleTheme.spacing.m)}
+        {spacingExample('L', appleTheme.spacing.l)}
+        {spacingExample('XL', appleTheme.spacing.xl)}
+        {spacingExample('XXL', appleTheme.spacing.xxl)}
+        {spacingExample('XXXL', appleTheme.spacing.xxxl)}
+        {spacingExample('XXXXL', appleTheme.spacing.xxxxl)}
+      </Stack>
+    </View>
+  );
+};
+
+export const SpacingTokensTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Experimental',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description = 'This showcases the different spacing tokens available in Fluent UI.';
+
+  const spacingSections: TestSection[] = [
+    {
+      name: 'Basic Usage',
+      component: BasicUsage,
+    },
+  ];
+
+  return <Test name="Spacing Tokens Test" description={description} sections={spacingSections} status={status} />;
+};

package/src/TestComponents/Spacing/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_SPACING_BUTTON = 'Homepage_Spacing_Button';
+export const SPACING_TESTPAGE = 'Spacing_TestPage';

package/src/TestComponents/Spacing/index.ts

@@ -0,0 +1,2 @@
+export * from './SpacingTest';
+export * from './consts';

package/src/testPages.ts

@@ -25,6 +25,7 @@ import { PressableTest, HOMEPAGE_PRESSABLE_BUTTON } from './TestComponents/Press
 import { RadioGroupTest, HOMEPAGE_RADIOGROUP_BUTTON } from './TestComponents/RadioGroup';
 import { RadioGroupExperimentalTest, HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON } from './TestComponents/RadioGroupExperimental';
 import { SeparatorTest, HOMEPAGE_SEPARATOR_BUTTON } from './TestComponents/Separator';
+import { SpacingTokensTest, HOMEPAGE_SPACING_BUTTON } from './TestComponents/Spacing';
 import { ShadowTest, HOMEPAGE_SHADOW_BUTTON } from './TestComponents/Shadow';
 import { ShimmerTest, HOMEPAGE_SHIMMER_BUTTON } from './TestComponents/Shimmer';
 import { SvgTest, HOMEPAGE_SVG_BUTTON } from './TestComponents/Svg';
@@ -194,6 +195,12 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_RADIO_GROUP_EXPERIMENTAL_BUTTON,
     platforms: ['android', 'ios', 'macos', 'web', 'win32'],
   },
+  {
+    name: 'Spacing Tokens',
+    component: SpacingTokensTest,
+    testPage: HOMEPAGE_SPACING_BUTTON,
+    platforms: ['ios'],
+  },
   {
     name: 'Separator',
     component: SeparatorTest,