@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import {
-  RADIOGROUPV1_TEST_COMPONENT,
-  RADIOGROUPV1_NO_A11Y_LABEL_COMPONENT,
-  RADIOGROUPV1_TEST_COMPONENT_LABEL,
-  RADIOGROUPV1_ACCESSIBILITY_LABEL,
-  FIRST_RADIO,
-  SECOND_RADIO,
-  THIRD_RADIO,
-  FOURTH_RADIO,
-  FIFTH_RADIO,
-  FIRST_RADIO_ACCESSIBILITY_LABEL,
-  SECOND_RADIO_LABEL,
-} from '@fluentui-react-native/e2e-testing';
-import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const RadioGroupV1E2ETest: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <RadioGroup
-          label="RadioGroup for E2E Testing - Ally Label Set"
-          accessibilityLabel={RADIOGROUPV1_ACCESSIBILITY_LABEL}
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(RADIOGROUPV1_TEST_COMPONENT)}
-        >
-          <Radio
-            label="Option A"
-            value="A"
-            accessibilityLabel={FIRST_RADIO_ACCESSIBILITY_LABEL}
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(FIRST_RADIO)}
-          />
-          <Radio
-            label={SECOND_RADIO_LABEL}
-            value="B"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(SECOND_RADIO)}
-          />
-          <Radio
-            label="Option C (disabled)"
-            value="C"
-            disabled={true}
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(THIRD_RADIO)}
-          />
-          <Radio
-            label="Option D"
-            value="C"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(FOURTH_RADIO)}
-          />
-        </RadioGroup>
-        <RadioGroup
-          label={RADIOGROUPV1_TEST_COMPONENT_LABEL}
-          required
-          /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-          {...testProps(RADIOGROUPV1_NO_A11Y_LABEL_COMPONENT)}
-        >
-          <Radio
-            label="Option W"
-            value="W"
-            /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-            {...testProps(FIFTH_RADIO)}
-          />
-          <Radio label="Option X" value="X" />
-          <Radio label="Option Y (disabled)" value="C" disabled={true} />
-          <Radio label="Option Z" value="Z" />
-        </RadioGroup>
-      </Stack>
-    </View>
-  );
-};

package/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-import { RADIOGROUPV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { CustomizedRadioGroup } from './CustomizedRadioGroup';
-import { DefaultRadioGroup } from './DefaultRadioGroup';
-import { DisabledRadioGroup } from './DisabledRadioGroup';
-import { HorizontalRadioGroup } from './HorizontalRadioGroup';
-import { RadioGroupV1E2ETest } from './RadioGroupV1E2ETest';
-import { RequiredRadioGroup } from './RequiredRadioGroup';
-import { SubtextRadioGroup } from './SubtextRadioGroup';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const radioGroupV1Sections: TestSection[] = [
-  {
-    name: 'Default RadioGroup Usage',
-    testID: RADIOGROUPV1_TESTPAGE,
-    component: DefaultRadioGroup,
-  },
-  {
-    name: 'Disabled RadioGroup',
-    testID: RADIOGROUPV1_TESTPAGE,
-    component: DisabledRadioGroup,
-  },
-  {
-    name: 'Required RadioGroup',
-    testID: RADIOGROUPV1_TESTPAGE,
-    component: RequiredRadioGroup,
-  },
-  ...Platform.select({
-    android: [null],
-    ios: [null],
-    native: [
-      {
-        name: 'RadioGroup with Label Subtext',
-        testID: RADIOGROUPV1_TESTPAGE,
-        component: SubtextRadioGroup,
-      },
-    ],
-    default: [
-      {
-        name: 'RadioGroup with Label Subtext',
-        testID: RADIOGROUPV1_TESTPAGE,
-        component: SubtextRadioGroup,
-      },
-      {
-        name: 'Other Layouts',
-        testID: RADIOGROUPV1_TESTPAGE,
-        component: HorizontalRadioGroup,
-      },
-      {
-        name: 'Customized RadioGroup Usage',
-        testID: RADIOGROUPV1_TESTPAGE,
-        component: CustomizedRadioGroup,
-      },
-    ],
-  }),
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'RadioGroup for E2E Testing',
-    testID: RADIOGROUPV1_TESTPAGE,
-    component: RadioGroupV1E2ETest,
-  },
-];
-
-export const RadioGroupV1Test: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description =
-    'RadioGroup lets users select a single option from two or more choices. Each option is represented by one Radio; a user can select only one Radio in a RadioGroup.';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/RadioGroup/SPEC.md';
-
-  return (
-    <Test
-      name="RadioGroupV1 Test"
-      description={description}
-      spec={spec}
-      sections={radioGroupV1Sections}
-      status={status}
-      e2eSections={e2eSections}
-    />
-  );
-};

package/src/TestComponents/RadioGroupV1/RequiredRadioGroup.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
-
-export const RequiredRadioGroup: React.FunctionComponent = () => {
-  // Client's example onChange function
-  const onChange = React.useCallback((key: string) => {
-    console.log(key);
-  }, []);
-
-  return (
-    <View>
-      <RadioGroup required label="Required RadioGroup" defaultValue="X" onChange={onChange}>
-        <Radio label="Option W" value="W" accessibilityLabel="Test Accessibility Label" />
-        <Radio label="Option X" value="X" />
-        <Radio label="Option Y" value="C" />
-        <Radio label="Option Z" value="Z" />
-      </RadioGroup>
-    </View>
-  );
-};

package/src/TestComponents/RadioGroupV1/SubtextRadioGroup.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
-
-export const SubtextRadioGroup: React.FunctionComponent = () => {
-  // Client's example onChange function
-  const onChange = React.useCallback((key: string) => {
-    console.log(key);
-  }, []);
-
-  return (
-    <View>
-      <RadioGroup label="Select a fruit:" defaultValue="X" onChange={onChange}>
-        <Radio label="Apple" subtext="This is a type of fruit" value="W" />
-        <Radio label="Pear" subtext="This is a type of fruit" value="X" />
-        <Radio label="Banana" subtext="This is a type of fruit" value="C" />
-        <Radio label="Tomato" subtext="This is a type of fruit" value="Z" />
-      </RadioGroup>
-    </View>
-  );
-};

package/src/TestComponents/RadioGroupV1/index.ts

@@ -1 +0,0 @@
-export * from './RadioGroupV1Test';

package/src/TestComponents/Separator/SeparatorTest.android.tsx

@@ -1,3 +0,0 @@
-import { SeparatorTest } from './SeparatorTest.mobile';
-export { SeparatorTest } from './SeparatorTest.mobile';
-export default SeparatorTest;

package/src/TestComponents/Separator/SeparatorTest.ios.tsx

@@ -1,3 +0,0 @@
-import { SeparatorTest } from './SeparatorTest.mobile';
-export { SeparatorTest } from './SeparatorTest.mobile';
-export default SeparatorTest;

package/src/TestComponents/Separator/SeparatorTest.mobile.tsx

@@ -1,81 +0,0 @@
-import * as React from 'react';
-
-import { SEPARATOR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Separator } from '@fluentui-react-native/separator';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { commonTestStyles, mobileStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const CustomisedText = Text.customize({
-  textAlign: 'right',
-  fontSize: 'caption',
-});
-
-const SeparatorBasicUsage: React.FunctionComponent = () => {
-  return (
-    <Stack style={commonTestStyles.section} gap={5}>
-      <Separator insetSpacing={0} />
-      <CustomisedText>Inset : 0</CustomisedText>
-
-      <Separator insetSpacing={16} />
-      <CustomisedText>Inset : 16</CustomisedText>
-
-      <Separator insetSpacing={56} />
-      <CustomisedText>Inset : 56</CustomisedText>
-
-      <Separator insetSpacing={68} />
-      <CustomisedText>Inset : 68</CustomisedText>
-
-      <Separator insetSpacing={72} />
-      <CustomisedText>Inset : 72</CustomisedText>
-
-      <Separator insetSpacing={108} />
-      <CustomisedText>Inset : 108</CustomisedText>
-    </Stack>
-  );
-};
-
-const RedSeparator = Separator.customize({ color: 'red' });
-const BlueSeparatorWithCustomWidth = Separator.customize({ color: 'blue', separatorWidth: 10 });
-
-const SeparatorCustomisedUsage: React.FunctionComponent = () => {
-  return (
-    <Stack style={mobileStyles.testSection} gap={5}>
-      <RedSeparator />
-      <CustomisedText>Customised Color Seperator</CustomisedText>
-      <BlueSeparatorWithCustomWidth insetSpacing={16} />
-      <CustomisedText>Customised Color and Width Seperator</CustomisedText>
-    </Stack>
-  );
-};
-
-const separatorSections: TestSection[] = [
-  {
-    name: 'Basic Mobile Seperator',
-    testID: SEPARATOR_TESTPAGE,
-    component: SeparatorBasicUsage,
-  },
-  {
-    name: 'Customised Mobile Seperator',
-    testID: SEPARATOR_TESTPAGE,
-    component: SeparatorCustomisedUsage,
-  },
-];
-
-export const SeparatorTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Experimental',
-    macosStatus: 'Beta',
-    androidStatus: 'Experimental',
-  };
-
-  const description =
-    "A separator visually separates content into groups.\n\nYou can render content in the separator by specifying the component's children. The component's children can be plain text or a component like Icon. The content is center-aligned by default.";
-
-  return <Test name="Separator Test" description={description} sections={separatorSections} status={status} />;
-};

package/src/TestComponents/Separator/SeparatorTest.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import { ButtonV1 } from '@fluentui-react-native/button';
-import { SEPARATOR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Separator } from '@fluentui-react-native/separator';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { stackStyle, separatorStackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const BlueSeparator = Separator.customize({ color: 'blue' });
-const RedSeparator = Separator.customize({ color: 'red' });
-
-const SeparatorMainTest: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle} gap={5}>
-      <Stack gap={4} style={separatorStackStyle}>
-        <ButtonV1>Button1</ButtonV1>
-        <BlueSeparator vertical />
-        <ButtonV1>Button2</ButtonV1>
-        <RedSeparator vertical />
-        <ButtonV1>Button3 </ButtonV1>
-        <Separator />
-      </Stack>
-      <Text>This is a text element</Text>
-      <Separator />
-      <ButtonV1>This button has longer text</ButtonV1>
-    </Stack>
-  );
-};
-
-const separatorSections: TestSection[] = [
-  {
-    name: 'Basic Seperator',
-    testID: SEPARATOR_TESTPAGE,
-    component: SeparatorMainTest,
-  },
-];
-
-export const SeparatorTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Deprecated',
-    uwpStatus: 'Deprecated',
-    iosStatus: 'Deprecated',
-    macosStatus: 'Deprecated',
-    androidStatus: 'Deprecated',
-  };
-
-  const description =
-    "A separator visually separates content into groups.\n\nYou can render content in the separator by specifying the component's children. The component's children can be plain text or a component like Icon. The content is center-aligned by default.";
-
-  return <Test name="Separator Test" description={description} sections={separatorSections} status={status} />;
-};

package/src/TestComponents/Separator/index.ts

@@ -1 +0,0 @@
-export * from './SeparatorTest';

package/src/TestComponents/Shadow/ShadowButtonTestSection.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { Platform, View, StyleSheet } from 'react-native';
-
-import { FAB, Text } from '@fluentui/react-native';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Shadow } from '@fluentui-react-native/experimental-shadow';
-import { useFluentTheme } from '@fluentui-react-native/framework';
-
-import { shadowTestPageStyles } from './ShadowTestPageStyles';
-import { iconProps } from '../Common/iconExamples';
-import { stackStyle } from '../Common/styles';
-
-const styles = StyleSheet.create({ marginBetweenComponentsWithShadow: { margin: 10 } });
-
-const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
-const CustomFABShadow64 = FAB.customize({
-  shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
-});
-
-const platformSupportsShadow = Platform.OS !== 'android';
-const platformSupportsFAB = Platform.OS === 'ios' || Platform.OS === 'android';
-
-export const ShadowButtonTestSection: React.FunctionComponent = () => {
-  const t = useFluentTheme();
-
-  if (platformSupportsShadow) {
-    return (
-      <View style={shadowTestPageStyles(t).backgroundColor}>
-        {platformSupportsShadow && platformSupportsFAB && (
-          <View style={stackStyle}>
-            <FAB icon={iconProps} style={styles.marginBetweenComponentsWithShadow}>
-              FAB with default shadow
-            </FAB>
-            <CustomFABShadow64 icon={iconProps} style={styles.marginBetweenComponentsWithShadow}>
-              Custom FAB with shadow64
-            </CustomFABShadow64>
-            <CustomFABNoShadow icon={iconProps} style={styles.marginBetweenComponentsWithShadow}>
-              Custom FAB with no shadow
-            </CustomFABNoShadow>
-          </View>
-        )}
-        {platformSupportsShadow && (
-          <View style={stackStyle}>
-            <Shadow shadowToken={t.shadows['shadow16']}>
-              <Button style={styles.marginBetweenComponentsWithShadow}>Button with shadow16</Button>
-            </Shadow>
-            <View>
-              <Button style={styles.marginBetweenComponentsWithShadow}>Button without shadow</Button>
-            </View>
-          </View>
-        )}
-      </View>
-    );
-  } else {
-    return (
-      <View style={stackStyle}>
-        <Text>Shadows not implemented on this platform at this time</Text>
-      </View>
-    );
-  }
-};

package/src/TestComponents/Shadow/ShadowDepthTestSection.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
-import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
-import type { ShadowToken, Theme } from '@fluentui-react-native/theme-types';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-
-import { shadowTestPageStyles } from './ShadowTestPageStyles';
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
-  return {
-    shadowTestBox: {
-      maxWidth: 732,
-      minHeight: 64,
-      borderRadius: 8,
-      padding: 20,
-      marginVertical: 16,
-      marginHorizontal: 32,
-    },
-    defaultBackground: shadowTestPageStyles(t).backgroundColor,
-    brandedBackground: {
-      backgroundColor: t.colors.brandedBackground,
-    },
-  };
-});
-
-interface ShadowTestBoxProps {
-  shadowDepthText: string;
-  shadowToken: ShadowToken;
-  isBrand?: boolean;
-}
-
-const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: ShadowTestBoxProps) => {
-  const theme = useTheme();
-  const themedStyles = getThemedStyles(theme);
-
-  const backgroundColor = props.isBrand ? themedStyles.brandedBackground : themedStyles.defaultBackground;
-  const textColor = props.isBrand ? theme.colors.primaryButtonText : theme.colors.bodyText;
-
-  return (
-    <Shadow shadowToken={props.shadowToken}>
-      <View style={mergeStyles(themedStyles.shadowTestBox, backgroundColor)}>
-        <Text variant="bodySemibold" color={textColor}>
-          {props.shadowDepthText}
-        </Text>
-        <Text color={textColor}>{getShadowDescription(props.shadowToken)}</Text>
-      </View>
-    </Shadow>
-  );
-};
-
-export const ShadowDepthTestSection: React.FunctionComponent = () => {
-  const theme = useFluentTheme();
-  const backgroundViewStyle = shadowTestPageStyles(theme).backgroundColor;
-
-  return (
-    <View style={backgroundViewStyle}>
-      <ShadowTestBox shadowDepthText="Shadow 2" shadowToken={theme.shadows.shadow2} />
-      <ShadowTestBox shadowDepthText="Shadow 4" shadowToken={theme.shadows.shadow4} />
-      <ShadowTestBox shadowDepthText="Shadow 8" shadowToken={theme.shadows.shadow8} />
-      <ShadowTestBox shadowDepthText="Shadow 16" shadowToken={theme.shadows.shadow16} />
-      <ShadowTestBox shadowDepthText="Shadow 28" shadowToken={theme.shadows.shadow28} />
-      <ShadowTestBox shadowDepthText="Shadow 64" shadowToken={theme.shadows.shadow64} />
-      <ShadowTestBox shadowDepthText="Brand Shadow 2" shadowToken={theme.shadows.shadow2brand} isBrand={true} />
-      <ShadowTestBox shadowDepthText="Brand Shadow 4" shadowToken={theme.shadows.shadow4brand} isBrand={true} />
-      <ShadowTestBox shadowDepthText="Brand Shadow 8" shadowToken={theme.shadows.shadow8brand} isBrand={true} />
-      <ShadowTestBox shadowDepthText="Brand Shadow 16" shadowToken={theme.shadows.shadow16brand} isBrand={true} />
-      <ShadowTestBox shadowDepthText="Brand Shadow 28" shadowToken={theme.shadows.shadow28brand} isBrand={true} />
-      <ShadowTestBox shadowDepthText="Brand Shadow 64" shadowToken={theme.shadows.shadow64brand} isBrand={true} />
-    </View>
-  );
-};
-
-function getShadowDescription(shadowToken: ShadowToken): string {
-  const shadowStyle = getShadowTokenStyleSet(shadowToken);
-
-  return (
-    '\nAmbient: ' +
-    JSON.stringify(shadowStyle.ambient, undefined, ' ').split('\n').join('').replace(/['"]+/g, '') +
-    '\n\nKey: ' +
-    JSON.stringify(shadowStyle.key, undefined, ' ').split('\n').join('').replace(/['"]+/g, '')
-  );
-}

package/src/TestComponents/Shadow/ShadowTest.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import { SHADOW_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { ShadowButtonTestSection } from './ShadowButtonTestSection';
-import { ShadowDepthTestSection } from './ShadowDepthTestSection';
-import { ShadowWithDifferentPropsTestSection } from './ShadowWithDifferentPropsTestSection';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const shadowSections: TestSection[] = [
-  {
-    name: 'Shadow Depth Ramp',
-    testID: SHADOW_TESTPAGE,
-    component: ShadowDepthTestSection,
-  },
-  {
-    name: 'Shadows on Button Examples',
-    component: ShadowButtonTestSection,
-  },
-  {
-    name: 'Shadows with Different Props Test',
-    component: ShadowWithDifferentPropsTestSection,
-  },
-];
-
-export const ShadowTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Production',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description = 'A Shadow component using the Fluent Design System. Shadow components can be added to other components.';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Shadow/SPEC.md';
-
-  return <Test name="Shadow Test" description={description} spec={spec} sections={shadowSections} status={status} />;
-};

package/src/TestComponents/Shadow/ShadowTestPageStyles.tsx

@@ -1,22 +0,0 @@
-import { Platform } from 'react-native';
-
-import type { Theme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-
-/**
- * The default dark mode iOS background color from the theme is black ('#000000'), which shadows are not visible against.
- * Shadows are also not very visible when placed on a view that is black.
- *
- * For dark mode iOS, returns a dark grey that shadows are visible on. Otherwise, will return either undefined or the default
- * background color from the theme based on whether or not a theme has been provided.
- */
-
-export const shadowTestPageStyles = themedStyleSheet((t: Theme) => {
-  const useLighterBackgroundColor = Platform.OS === 'ios' && t.host.appearance === 'dark';
-
-  return {
-    backgroundColor: {
-      backgroundColor: useLighterBackgroundColor ? '#313131' : t.colors.background,
-    },
-  };
-});