Skip to content

Commit fe3f484

Browse files
fluiddotfluiddot
authored
Improve UI of error boundary component (#59823)
1 parent dc648e5 commit fe3f484

File tree

2 files changed

+189
-43
lines changed

2 files changed

+189
-43
lines changed

‎packages/editor/src/components/error-boundary/index.native.js‎

Lines changed: 100 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
/**
22
* External dependencies
33
*/
4-
import { Text, TouchableOpacity, View } from 'react-native';
4+
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
55
import Clipboard from '@react-native-clipboard/clipboard';
6+
import { SafeAreaView } from 'react-native-safe-area-context';
67

78
/**
89
* WordPress dependencies
910
*/
1011
import { Component } from '@wordpress/element';
1112
import { __ } from '@wordpress/i18n';
1213
import { select } from '@wordpress/data';
13-
import { Warning } from '@wordpress/block-editor';
1414
import { logException } from '@wordpress/react-native-bridge';
15-
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
15+
import {
16+
usePreferredColorSchemeStyle,
17+
withPreferredColorScheme,
18+
} from '@wordpress/compose';
19+
import { warning } from '@wordpress/icons';
20+
import { Icon } from '@wordpress/components';
1621

1722
/**
1823
* Internal dependencies
@@ -32,21 +37,38 @@ function getContent() {
3237
} catch ( error ) {}
3338
}
3439

35-
function CopyButton( { text, label, accessibilityLabel, accessibilityHint } ) {
40+
function CopyButton( {
41+
text,
42+
label,
43+
accessibilityLabel,
44+
accessibilityHint,
45+
secondary = false,
46+
} ) {
3647
const containerStyle = usePreferredColorSchemeStyle(
3748
styles[ 'copy-button__container' ],
3849
styles[ 'copy-button__container--dark' ]
3950
);
51+
52+
const containerSecondaryStyle = usePreferredColorSchemeStyle(
53+
styles[ 'copy-button__container--secondary' ],
54+
styles[ 'copy-button__container--secondary-dark' ]
55+
);
56+
4057
const textStyle = usePreferredColorSchemeStyle(
4158
styles[ 'copy-button__text' ],
4259
styles[ 'copy-button__text--dark' ]
4360
);
4461

62+
const textSecondaryStyle = usePreferredColorSchemeStyle(
63+
styles[ 'copy-button__text--secondary' ],
64+
styles[ 'copy-button__text--secondary-dark' ]
65+
);
66+
4567
return (
4668
<TouchableOpacity
4769
activeOpacity={ 0.5 }
4870
accessibilityLabel={ accessibilityLabel }
49-
style={ containerStyle }
71+
style={ [ containerStyle, secondary && containerSecondaryStyle ] }
5072
accessibilityRole={ 'button' }
5173
accessibilityHint={ accessibilityHint }
5274
onPress={ () => {
@@ -55,7 +77,9 @@ function CopyButton( { text, label, accessibilityLabel, accessibilityHint } ) {
5577
);
5678
} }
5779
>
58-
<Text style={ textStyle }>{ label }</Text>
80+
<Text style={ [ textStyle, secondary && textSecondaryStyle ] }>
81+
{ label }
82+
</Text>
5983
</TouchableOpacity>
6084
);
6185
}
@@ -89,34 +113,80 @@ class ErrorBoundary extends Component {
89113
return this.props.children;
90114
}
91115

92-
const actions = (
93-
<View style={ styles[ 'error-boundary__actions-container' ] }>
94-
<CopyButton
95-
label={ __( 'Copy Post Text' ) }
96-
accessibilityLabel={ __( 'Button to copy post text' ) }
97-
accessibilityHint={ __( 'Tap here to copy post text' ) }
98-
text={ getContent }
99-
/>
100-
<CopyButton
101-
label={ __( 'Copy Error' ) }
102-
accessibilityLabel={ __( 'Button to copy error' ) }
103-
accessibilityHint={ __( 'Tap here to copy error' ) }
104-
text={ error.stack }
105-
/>
106-
</View>
116+
const { getStylesFromColorScheme } = this.props;
117+
118+
const iconContainerStyle = getStylesFromColorScheme(
119+
styles[ 'error-boundary__icon-container' ],
120+
styles[ 'error-boundary__icon-container--dark' ]
121+
);
122+
123+
const titleStyle = getStylesFromColorScheme(
124+
styles[ 'error-boundary__title' ],
125+
styles[ 'error-boundary__title--dark' ]
126+
);
127+
128+
const messageStyle = getStylesFromColorScheme(
129+
styles[ 'error-boundary__message' ],
130+
styles[ 'error-boundary__message--dark' ]
107131
);
108132

109133
return (
110-
<Warning
111-
actions={ actions }
112-
message={ __(
113-
'The editor has encountered an unexpected error.'
114-
) }
115-
containerStyle={ styles[ 'error-boundary__container' ] }
116-
messageStyle={ styles[ 'error-boundary__message' ] }
117-
/>
134+
<SafeAreaView>
135+
<ScrollView
136+
style={ styles[ 'error-boundary__scroll' ] }
137+
contentContainerStyle={
138+
styles[ 'error-boundary__scroll-container' ]
139+
}
140+
>
141+
<View style={ styles[ 'error-boundary__container' ] }>
142+
<View style={ iconContainerStyle }>
143+
<Icon
144+
icon={ warning }
145+
{ ...styles[ 'error-boundary__icon' ] }
146+
/>
147+
</View>
148+
<Text style={ titleStyle }>
149+
{ __(
150+
'The editor has encountered an unexpected error.'
151+
) }
152+
</Text>
153+
<Text style={ messageStyle }>
154+
{ __(
155+
'You can copy your post text in case your content is impacted. Copy error details to debug and share with support.'
156+
) }
157+
</Text>
158+
<View
159+
style={
160+
styles[ 'error-boundary__actions-container' ]
161+
}
162+
>
163+
<CopyButton
164+
label={ __( 'Copy post text' ) }
165+
accessibilityLabel={ __(
166+
'Button to copy post text'
167+
) }
168+
accessibilityHint={ __(
169+
'Tap here to copy post text'
170+
) }
171+
text={ getContent }
172+
/>
173+
<CopyButton
174+
label={ __( 'Copy error details' ) }
175+
accessibilityLabel={ __(
176+
'Button to copy error details'
177+
) }
178+
accessibilityHint={ __(
179+
'Tap here to copy error details'
180+
) }
181+
text={ error.stack }
182+
secondary
183+
/>
184+
</View>
185+
</View>
186+
</ScrollView>
187+
</SafeAreaView>
118188
);
119189
}
120190
}
121191

122-
export default ErrorBoundary;
192+
export default withPreferredColorScheme( ErrorBoundary );

‎packages/editor/src/components/error-boundary/style.native.scss‎

Lines changed: 89 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,115 @@
1-
.error-boundary__container {
1+
.error-boundary__scroll {
2+
height: 100%;
3+
width: 100%;
4+
}
5+
6+
.error-boundary__scroll-container {
27
flex-grow: 1;
3-
justify-content: flex-start;
8+
max-height: 580px;
9+
align-items: center;
10+
justify-content: center;
11+
}
12+
13+
14+
.error-boundary__container {
15+
width: 100%;
16+
max-width: 600px;
17+
justify-content: center;
18+
align-items: center;
19+
padding: 0 24px;
20+
}
21+
22+
.error-boundary__icon-container {
23+
$size: 40px;
24+
25+
width: $size;
26+
height: $size;
27+
align-items: center;
28+
justify-content: center;
29+
margin-bottom: 8px;
30+
background-color: rgba(60, 60, 67, 0.3);
31+
border-radius: $size/2;
32+
}
33+
34+
.error-boundary__icon-container--dark {
35+
background-color: $gray-20;
36+
}
37+
38+
.error-boundary__icon {
39+
width: 24px;
40+
height: 24px;
41+
fill: $white;
42+
}
43+
44+
.error-boundary__title {
45+
font-size: 20px;
46+
font-weight: 600;
47+
line-height: 25px;
48+
color: $black;
49+
text-align: center;
50+
margin-bottom: 8px;
51+
}
52+
53+
.error-boundary__title--dark {
54+
color: $white;
455
}
556

657
.error-boundary__message {
7-
font-size: 16;
58+
font-size: 16px;
59+
font-weight: 400;
60+
line-height: 21px;
61+
color: rgba(60, 60, 67, 0.6);
62+
text-align: center;
63+
margin-bottom: 16px;
64+
}
65+
66+
.error-boundary__message--dark {
67+
color: $white;
868
}
969

1070
.error-boundary__actions-container {
11-
margin-top: 16px;
71+
width: 100%;
72+
max-width: 400px;
1273
justify-content: center;
13-
flex-direction: row;
74+
gap: 12px;
75+
padding-top: 16px;
1476
}
1577

1678
.copy-button__container {
17-
background-color: $light-primary;
18-
border-radius: 3px;
79+
border-radius: 5px;
1980
padding: $grid-unit $grid-unit-20;
20-
margin-top: 8px;
21-
margin-left: 8px;
22-
margin-right: 8px;
81+
background-color: $light-primary;
2382
}
2483

2584
.copy-button__container--dark {
26-
color: $background-dark-secondary;
2785
background-color: $gray-20;
2886
}
2987

88+
.copy-button__container--secondary {
89+
border: 1px #c6c6c8;
90+
background-color: $white;
91+
}
92+
93+
.copy-button__container--secondary-dark {
94+
background-color: $black;
95+
}
96+
3097
.copy-button__text {
98+
font-size: 17px;
99+
font-weight: 400;
100+
line-height: 22px;
31101
text-align: center;
32102
color: $white;
33-
font-size: 16;
34-
font-weight: 400;
35103
}
36104

37105
.copy-button__text--dark {
106+
color: $background-dark-secondary;
107+
}
108+
109+
.copy-button__text--secondary {
38110
color: $black;
39111
}
112+
113+
.copy-button__text--secondary-dark {
114+
color: $white;
115+
}

0 commit comments

Comments
 (0)