Skip to content

Commit e34a937

Browse files
rohanprasadofficialrohanprasadofficial
authored
[Separator - Android] Tokenization , InsetSpacing and TesterApp and Platform utils addition (#2413)
### Platforms Impacted - [x] iOS - [ ] macOS - [x] win32 (Office) (Just the tester app : migrated components used from Stock RN to FURN) - [ ] windows - [x] android ### Description of changes (a summary of the changes made, often organized by file) This PR targets to tokenize and adding of insetSpacing to the Separator component for Android. packages/components/Separator/src/* - General separation/cleaning of files and Android Specific changes apps/fluent-tester/* - tester app changes. ### Verification Visual Verified for Win32. (how the change was tested, including both manual and automated tests) | Light | Dark | |----------------------------------------------|--------------------------------------------| | ![Screenshot_1670843312](https://user-images.githubusercontent.com/30728574/207031493-16dfbd71-c3fc-4bb6-8f28-f0169b695680.png) | ![Screenshot_1670843317](https://user-images.githubusercontent.com/30728574/207031465-f068725a-2c75-4c9c-a922-d6318d154f34.png) | ### Pull request checklist This PR has considered (when applicable): - [ ] Automated Tests - [x] Documentation and examples - [ ] Keyboard Accessibility - [ ] Voiceover - [ ] Internationalization and Right-to-left Layouts
1 parent 7bfe8d5 commit e34a937

16 files changed

+195
-31
lines changed

‎apps/fluent-tester/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"@fluentui-react-native/interactive-hooks": ">=0.22.1 <1.0.0",
6464
"@fluentui-react-native/menu": "^1.2.0",
6565
"@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
66+
"@fluentui-react-native/separator": "^0.13.8",
6667
"@fluentui-react-native/notification": "0.21.2",
6768
"@fluentui-react-native/stack": ">=0.7.32 <1.0.0",
6869
"@fluentui-react-native/switch": "^0.8.2",

‎apps/fluent-tester/src/TestComponents/Common/styles.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,10 @@ export const mobileStyles = StyleSheet.create({
166166
fontSize: 18,
167167
paddingVertical: 8,
168168
},
169+
testSection: {
170+
width: '100%',
171+
marginVertical: 15,
172+
},
169173
containerSpacedEvenly: {
170174
display: 'flex',
171175
flexDirection: 'column',

‎apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.android.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { SeparatorTest } from './SeparatorTest.mobile';
2+
export { SeparatorTest } from './SeparatorTest.mobile';
3+
export default SeparatorTest;

‎apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.ios.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { SeparatorTest } from './SeparatorTest.mobile';
2+
export { SeparatorTest } from './SeparatorTest.mobile';
3+
export default SeparatorTest;

‎apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.mobile.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as React from 'react';
2+
import { Separator } from '@fluentui-react-native/separator';
3+
import { Text } from '@fluentui-react-native/experimental-text';
4+
import { commonTestStyles, mobileStyles } from '../Common/styles';
5+
import { Stack } from '@fluentui-react-native/stack';
6+
import { SEPARATOR_TESTPAGE } from './consts';
7+
import { Test, TestSection, PlatformStatus } from '../Test';
8+
9+
const CustomisedText = Text.customize({
10+
textAlign: 'right',
11+
fontSize: 'caption',
12+
});
13+
14+
const SeparatorBasicUsage: React.FunctionComponent = () => {
15+
return (
16+
<Stack style={commonTestStyles.section} gap={5}>
17+
<Separator insetSpacing={0} />
18+
<CustomisedText>Inset : 0</CustomisedText>
19+
20+
<Separator insetSpacing={16} />
21+
<CustomisedText>Inset : 16</CustomisedText>
22+
23+
<Separator insetSpacing={56} />
24+
<CustomisedText>Inset : 56</CustomisedText>
25+
26+
<Separator insetSpacing={68} />
27+
<CustomisedText>Inset : 68</CustomisedText>
28+
29+
<Separator insetSpacing={72} />
30+
<CustomisedText>Inset : 72</CustomisedText>
31+
32+
<Separator insetSpacing={108} />
33+
<CustomisedText>Inset : 108</CustomisedText>
34+
</Stack>
35+
);
36+
};
37+
38+
const RedSeparator = Separator.customize({ color: 'red' });
39+
const BlueSeparatorWithCustomWidth = Separator.customize({ color: 'blue', separatorWidth: 10 });
40+
41+
const SeparatorCustomisedUsage: React.FunctionComponent = () => {
42+
return (
43+
<Stack style={mobileStyles.testSection} gap={5}>
44+
<RedSeparator />
45+
<CustomisedText>Customised Color Seperator</CustomisedText>
46+
<BlueSeparatorWithCustomWidth insetSpacing={16} />
47+
<CustomisedText>Customised Color and Width Seperator</CustomisedText>
48+
</Stack>
49+
);
50+
};
51+
52+
const separatorSections: TestSection[] = [
53+
{
54+
name: 'Basic Mobile Seperator',
55+
testID: SEPARATOR_TESTPAGE,
56+
component: SeparatorBasicUsage,
57+
},
58+
{
59+
name: 'Customised Mobile Seperator',
60+
testID: SEPARATOR_TESTPAGE,
61+
component: SeparatorCustomisedUsage,
62+
},
63+
];
64+
65+
export const SeparatorTest: React.FunctionComponent = () => {
66+
const status: PlatformStatus = {
67+
win32Status: 'Beta',
68+
uwpStatus: 'Experimental',
69+
iosStatus: 'Experimental',
70+
macosStatus: 'Beta',
71+
androidStatus: 'Experimental',
72+
};
73+
74+
const description =
75+
"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.";
76+
77+
return <Test name="Separator Test" description={description} sections={separatorSections} status={status} />;
78+
};

‎apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
2-
import { Text } from 'react-native';
3-
import { Button, Separator } from '@fluentui/react-native';
2+
import { Separator } from '@fluentui-react-native/separator';
3+
import { ButtonV1 } from '@fluentui-react-native/button';
4+
import { Text } from '@fluentui-react-native/experimental-text';
45
import { stackStyle, separatorStackStyle } from '../Common/styles';
56
import { Stack } from '@fluentui-react-native/stack';
67
import { SEPARATOR_TESTPAGE } from './consts';
@@ -13,23 +14,23 @@ const SeparatorMainTest: React.FunctionComponent = () => {
1314
return (
1415
<Stack style={stackStyle} gap={5}>
1516
<Stack gap={4} style={separatorStackStyle}>
16-
<Button content="Button4" />
17+
<ButtonV1>Button1</ButtonV1>
1718
<BlueSeparator vertical />
18-
<Button content="Button5" />
19+
<ButtonV1>Button2</ButtonV1>
1920
<RedSeparator vertical />
20-
<Button content="Button6" />
21+
<ButtonV1>Button3 </ButtonV1>
2122
<Separator />
2223
</Stack>
2324
<Text>This is a text element</Text>
2425
<Separator />
25-
<Button content="This button has longer text" />
26+
<ButtonV1>This button has longer text</ButtonV1>
2627
</Stack>
2728
);
2829
};
2930

3031
const separatorSections: TestSection[] = [
3132
{
32-
name: 'Basic Button',
33+
name: 'Basic Seperator',
3334
testID: SEPARATOR_TESTPAGE,
3435
component: SeparatorMainTest,
3536
},
@@ -41,7 +42,7 @@ export const SeparatorTest: React.FunctionComponent = () => {
4142
uwpStatus: 'Experimental',
4243
iosStatus: 'Experimental',
4344
macosStatus: 'Beta',
44-
androidStatus: 'Backlog',
45+
androidStatus: 'Experimental',
4546
};
4647

4748
const description =

‎change/@fluentui-react-native-platform-utils-37f27f7c-d8ed-4901-b8ba-a6e8cd9bb892.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "additional of isMobile utils",
4+
"packageName": "@fluentui-react-native/platform-utils",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/@fluentui-react-native-separator-3a98e0a8-e3f9-4f78-a7e0-721548b0532c.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "android seperator implem , tester app changes",
4+
"packageName": "@fluentui-react-native/separator",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/@fluentui-react-native-tester-5ee459d2-6c8d-4181-83c3-4807b418b20f.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "android seperator implem , tester app changes",
4+
"packageName": "@fluentui-react-native/tester",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/components/Separator/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@
2626
"directory": "packages/components/Separator"
2727
},
2828
"dependencies": {
29-
"@fluentui-react-native/framework": ">=0.8.26 <1.0.0"
29+
"@fluentui-react-native/framework": ">=0.8.26 <1.0.0",
30+
"@fluentui-react-native/theme-tokens": "^0.22.1",
31+
"@fluentui-react-native/use-styling": "^0.9.1"
3032
},
3133
"devDependencies": {
3234
"@fluentui-react-native/eslint-config-rules": "^0.1.1",

0 commit comments

Comments
 (0)