Skip to content

Commit b909a37

Browse files
lyzhan7lyzhan7
authored
Remove compound button from iOS (#2585)
* Remove compound button from iOS * Change files * Add comment, make isMobile variable * Updated android link, followed same path but on a more recent version * Try more general link * Fix type * Update snapshots
1 parent e9cfe9d commit b909a37

12 files changed

+96
-157
lines changed

‎apps/fluent-tester/src/TestComponents/Button/ButtonSizeTestSection.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { Platform, View } from 'react-native';
44
import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
55
import { iconProps } from '../Common/iconExamples';
66

7+
const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
8+
79
export const ButtonSizeTest: React.FunctionComponent = () => {
810
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
911

@@ -61,7 +63,7 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
6163
<Button size="large" style={commonTestStyles.vmargin}>
6264
Large
6365
</Button>
64-
{Platform.OS !== 'android' && (
66+
{!isMobile && (
6567
<>
6668
<Button loading size="small" style={commonTestStyles.vmargin}>
6769
Loading Button Small

‎apps/fluent-tester/src/TestComponents/Button/ButtonTest.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ const buttonSections: TestSection[] = [
2525
component: ButtonIconTest,
2626
},
2727
...Platform.select({
28-
android: [null], //Following sections are not supported from Fluent Android
28+
// The following sections are not supported for iOS or Android
29+
ios: [],
30+
android: [],
2931
default: [
3032
{
3133
name: 'Toggle Button',
@@ -53,7 +55,7 @@ const buttonSections: TestSection[] = [
5355
component: E2EButtonTest,
5456
},
5557
...Platform.select({
56-
android: [null], //Following sections are not supported from Fluent Android
58+
android: [], // Following sections are not supported from Fluent Android
5759
default: [
5860
{
5961
name: 'Deprecated Basic Button',

‎apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.android.tsx

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1 @@
1-
import { Button, FAB } from '@fluentui-react-native/experimental-button';
2-
import * as React from 'react';
3-
import { View } from 'react-native';
4-
import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
5-
import { iconProps } from '../Common/iconExamples';
6-
7-
export const ButtonVariantTest: React.FunctionComponent = () => {
8-
const [showFABText, setShowFABText] = React.useState(true);
9-
const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
10-
11-
return (
12-
<View style={testContentRootViewStyle}>
13-
<Button style={commonTestStyles.vmargin}>Default</Button>
14-
<Button disabled style={commonTestStyles.vmargin}>
15-
Default Disabled
16-
</Button>
17-
<Button appearance="accent" style={commonTestStyles.vmargin}>
18-
Accent
19-
</Button>
20-
<Button disabled appearance="accent" style={commonTestStyles.vmargin}>
21-
Accent Disabled
22-
</Button>
23-
<Button appearance="outline" style={commonTestStyles.vmargin}>
24-
Outline
25-
</Button>
26-
<Button appearance="outline" disabled style={commonTestStyles.vmargin}>
27-
Outline Disabled
28-
</Button>
29-
<Button appearance="subtle" style={commonTestStyles.vmargin}>
30-
Subtle
31-
</Button>
32-
<Button appearance="subtle" disabled style={commonTestStyles.vmargin}>
33-
Subtle Disabled
34-
</Button>
35-
<FAB icon={iconProps} iconOnly disabled style={commonTestStyles.vmargin} />
36-
<FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
37-
Click Me!
38-
</FAB>
39-
<FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} />
40-
<FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
41-
Click Me!
42-
</FAB>
43-
</View>
44-
);
45-
};
1+
export { ButtonVariantTest } from './ButtonVariantTestSection.mobile';

‎apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.ios.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ButtonVariantTest } from './ButtonVariantTestSection.mobile';

‎apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.mobile.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Button, FAB } from '@fluentui-react-native/experimental-button';
2+
import * as React from 'react';
3+
import { View } from 'react-native';
4+
import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
5+
import { iconProps } from '../Common/iconExamples';
6+
7+
export const ButtonVariantTest: React.FunctionComponent = () => {
8+
const [showFABText, setShowFABText] = React.useState(true);
9+
const flipFABcontent = React.useCallback(() => setShowFABText(!showFABText), [showFABText]);
10+
11+
return (
12+
<View style={testContentRootViewStyle}>
13+
<Button style={commonTestStyles.vmargin}>Default</Button>
14+
<Button disabled style={commonTestStyles.vmargin}>
15+
Default Disabled
16+
</Button>
17+
<Button appearance="accent" style={commonTestStyles.vmargin}>
18+
Accent
19+
</Button>
20+
<Button disabled appearance="accent" style={commonTestStyles.vmargin}>
21+
Accent Disabled
22+
</Button>
23+
<Button appearance="outline" style={commonTestStyles.vmargin}>
24+
Outline
25+
</Button>
26+
<Button appearance="outline" disabled style={commonTestStyles.vmargin}>
27+
Outline Disabled
28+
</Button>
29+
<Button appearance="subtle" style={commonTestStyles.vmargin}>
30+
Subtle
31+
</Button>
32+
<Button appearance="subtle" disabled style={commonTestStyles.vmargin}>
33+
Subtle Disabled
34+
</Button>
35+
<FAB icon={iconProps} iconOnly disabled style={commonTestStyles.vmargin} />
36+
<FAB icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
37+
Click Me!
38+
</FAB>
39+
<FAB appearance="subtle" iconOnly disabled icon={iconProps} style={commonTestStyles.vmargin} />
40+
<FAB appearance="subtle" icon={iconProps} style={commonTestStyles.vmargin} showContent={showFABText} onClick={flipFABcontent}>
41+
Click Me!
42+
</FAB>
43+
</View>
44+
);
45+
};

‎change/@fluentui-react-native-button-1bc62984-d506-4525-9d5b-9bd4c12214bb.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": "Remove compound button from iOS",
4+
"packageName": "@fluentui-react-native/button",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/@fluentui-react-native-tester-359a52f2-fe6a-4836-904f-b00facdef539.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": "Remove compound button from iOS",
4+
"packageName": "@fluentui-react-native/tester",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/components/Button/src/CompoundButton/CompoundButton.android.tsx

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1 @@
1-
/** @jsx withSlots */
2-
import { View } from 'react-native';
3-
import type { CompoundButtonType } from './CompoundButton.types';
4-
import { compoundButtonName } from './CompoundButton.types';
5-
import { TextV1 as Text } from '@fluentui-react-native/text';
6-
import { compose } from '@fluentui-react-native/framework';
7-
import { Icon } from '@fluentui-react-native/icon';
8-
9-
export const CompoundButton = compose<CompoundButtonType>({
10-
displayName: compoundButtonName,
11-
slots: {
12-
root: View,
13-
icon: Icon,
14-
content: Text,
15-
secondaryContent: Text,
16-
contentContainer: View,
17-
},
18-
useRender: () => {
19-
return () => {
20-
console.warn('Compound Button is not implemented for Android');
21-
return null;
22-
};
23-
},
24-
});
1+
export { CompoundButton } from './CompoundButton.mobile';

‎packages/components/Button/src/CompoundButton/CompoundButton.ios.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { CompoundButton } from './CompoundButton.mobile';

‎packages/components/Button/src/CompoundButton/CompoundButton.mobile.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/** @jsx withSlots */
2+
import { View } from 'react-native';
3+
import type { CompoundButtonType } from './CompoundButton.types';
4+
import { compoundButtonName } from './CompoundButton.types';
5+
import { TextV1 as Text } from '@fluentui-react-native/text';
6+
import { compose } from '@fluentui-react-native/framework';
7+
import { Icon } from '@fluentui-react-native/icon';
8+
9+
export const CompoundButton = compose<CompoundButtonType>({
10+
displayName: compoundButtonName,
11+
slots: {
12+
root: View,
13+
icon: Icon,
14+
content: Text,
15+
secondaryContent: Text,
16+
contentContainer: View,
17+
},
18+
useRender: () => {
19+
return () => {
20+
console.warn('Compound Button is not implemented on Android/iOS');
21+
return null;
22+
};
23+
},
24+
});

‎packages/components/Button/src/CompoundButton/SPEC.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Background
44

55
The `CompoundButton` is a `Button` that is designed to show an extra line of text.
6-
Does not render on Android.
6+
Does not render on mobile (Android/iOS).
77

88
## Requirements
99

‎packages/components/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap

Lines changed: 1 addition & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,3 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`CompoundButton default 1`] = `
4-
<View
5-
accessibilityLabel="Default Button sublabel"
6-
accessibilityRole="button"
7-
accessible={true}
8-
collapsable={false}
9-
enableFocusRing={true}
10-
focusable={true}
11-
onBlur={[Function]}
12-
onClick={[Function]}
13-
onFocus={[Function]}
14-
onResponderGrant={[Function]}
15-
onResponderMove={[Function]}
16-
onResponderRelease={[Function]}
17-
onResponderTerminate={[Function]}
18-
onResponderTerminationRequest={[Function]}
19-
onStartShouldSetResponder={[Function]}
20-
style={
21-
Object {
22-
"alignItems": "center",
23-
"alignSelf": "flex-start",
24-
"backgroundColor": "#0f6cbd",
25-
"borderColor": "#0f548c",
26-
"borderRadius": 4,
27-
"borderWidth": 1,
28-
"display": "flex",
29-
"flexDirection": "row",
30-
"justifyContent": "center",
31-
"minWidth": 96,
32-
"padding": 11,
33-
"paddingHorizontal": 11,
34-
"width": undefined,
35-
}
36-
}
37-
>
38-
<View
39-
style={
40-
Object {
41-
"display": "flex",
42-
"flexDirection": "column",
43-
}
44-
}
45-
>
46-
<Text
47-
ellipsizeMode="tail"
48-
numberOfLines={0}
49-
style={
50-
Object {
51-
"color": "#ffffff",
52-
"fontFamily": "System",
53-
"fontSize": 15,
54-
"fontWeight": "600",
55-
"margin": 0,
56-
"marginBottom": 0,
57-
"marginEnd": 0,
58-
"marginStart": 0,
59-
"marginTop": 0,
60-
}
61-
}
62-
>
63-
Default Button
64-
</Text>
65-
<Text
66-
ellipsizeMode="tail"
67-
numberOfLines={0}
68-
style={
69-
Object {
70-
"color": "#faf9f8",
71-
"fontFamily": "System",
72-
"fontSize": 13,
73-
"fontWeight": "400",
74-
"margin": 0,
75-
"marginBottom": 0,
76-
"marginEnd": 0,
77-
"marginStart": 0,
78-
"marginTop": 0,
79-
}
80-
}
81-
>
82-
sublabel
83-
</Text>
84-
</View>
85-
</View>
86-
`;
3+
exports[`CompoundButton default 1`] = `null`;

0 commit comments

Comments
 (0)