Skip to content

Commit d42d03e

Browse files
lucas-zimermanlucas-zimerman
authored
Merge branch 'main' into feat/feedback-widget-autocorrect-spellcheck
2 parents c8cfaa3 + a483f9f commit d42d03e

File tree

4 files changed

+106
-0
lines changed

4 files changed

+106
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
- Add `autoCorrect` and `spellCheck` config options to `FeedbackWidget` ([#5627](https://github.com/getsentry/sentry-react-native/pull/5627))
1414
- Add `autoCapitalize="none"` to `FeedbackWidget` email input ([#5627](https://github.com/getsentry/sentry-react-native/pull/5627))
1515

16+
### Fixes
17+
18+
- Deep merge custom `styles` with defaults in `FeedbackWidget` instead of replacing them ([#5625](https://github.com/getsentry/sentry-react-native/pull/5625))
19+
- Note that partial style overrides now preserve default properties like padding and borders
20+
1621
## 7.12.0
1722

1823
### Features

‎packages/core/src/js/feedback/FeedbackWidget.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,8 +261,17 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
261261
const imagePickerConfiguration: ImagePickerConfiguration = this.props;
262262
const text: FeedbackTextConfiguration = this.props;
263263
const styles: FeedbackWidgetStyles = { ...defaultStyles(theme), ...this.props.styles };
264+
const _defaultStyles = defaultStyles(theme);
265+
const _propStyles = this.props.styles || {};
264266
const autoCorrect = config.autoCorrect !== false;
265267
const spellCheck = config.spellCheck !== false;
268+
const styles = (Object.keys(_defaultStyles) as Array<keyof FeedbackWidgetStyles>).reduce<FeedbackWidgetStyles>(
269+
(merged, key) => {
270+
(merged as Record<string, unknown>)[key] = { ...(_defaultStyles[key] as object), ...(_propStyles[key] as object) };
271+
return merged;
272+
},
273+
{},
274+
);
266275
const onCancel = (): void => {
267276
if (onFormClose) {
268277
onFormClose();

‎packages/core/test/feedback/FeedbackWidget.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,28 @@ describe('FeedbackWidget', () => {
178178
const { getByTestId } = render(<FeedbackWidget {...defaultProps} />);
179179

180180
expect(getByTestId('sentry-feedback-email-input').props.autoCapitalize).toBe('none');
181+
it('deep merges custom styles with defaults instead of replacing them', () => {
182+
const partialStyles: FeedbackWidgetStyles = {
183+
input: {
184+
color: '#ff0000',
185+
},
186+
};
187+
const { getByTestId } = render(
188+
<FeedbackWidget {...defaultProps} styles={partialStyles} />,
189+
);
190+
191+
const nameInput = getByTestId('sentry-feedback-name-input');
192+
const inputStyle = nameInput.props.style;
193+
194+
// The custom color should be applied
195+
expect(inputStyle.color).toBe('#ff0000');
196+
// Default properties should be preserved, not lost
197+
expect(inputStyle.height).toBe(50);
198+
expect(inputStyle.borderWidth).toBe(1);
199+
expect(inputStyle.borderRadius).toBe(5);
200+
expect(inputStyle.paddingHorizontal).toBe(10);
201+
expect(inputStyle.marginBottom).toBe(15);
202+
expect(inputStyle.fontSize).toBe(16);
181203
});
182204

183205
it('renders correctly', () => {

‎packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
2424
style={
2525
{
2626
"backgroundColor": "#ffffff",
27+
"flex": 1,
28+
"padding": 20,
2729
}
2830
}
2931
>
@@ -39,7 +41,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
3941
style={
4042
{
4143
"color": "#ff0000",
44+
"flex": 1,
4245
"fontSize": 20,
46+
"fontWeight": "bold",
47+
"marginBottom": 20,
48+
"textAlign": "left",
4349
}
4450
}
4551
testID="sentry-feedback-form-title"
@@ -67,6 +73,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
6773
{
6874
"color": "#00ff00",
6975
"fontSize": 15,
76+
"marginBottom": 4,
7077
}
7178
}
7279
>
@@ -80,9 +87,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
8087
style={
8188
{
8289
"borderColor": "#0000ff",
90+
"borderRadius": 5,
91+
"borderWidth": 1,
8392
"color": "#000000",
8493
"fontSize": 13,
8594
"height": 50,
95+
"marginBottom": 15,
96+
"paddingHorizontal": 10,
8697
}
8798
}
8899
testID="sentry-feedback-name-input"
@@ -93,6 +104,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
93104
{
94105
"color": "#00ff00",
95106
"fontSize": 15,
107+
"marginBottom": 4,
96108
}
97109
}
98110
>
@@ -108,9 +120,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
108120
style={
109121
{
110122
"borderColor": "#0000ff",
123+
"borderRadius": 5,
124+
"borderWidth": 1,
111125
"color": "#000000",
112126
"fontSize": 13,
113127
"height": 50,
128+
"marginBottom": 15,
129+
"paddingHorizontal": 10,
114130
}
115131
}
116132
testID="sentry-feedback-email-input"
@@ -121,6 +137,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
121137
{
122138
"color": "#00ff00",
123139
"fontSize": 15,
140+
"marginBottom": 4,
124141
}
125142
}
126143
>
@@ -137,13 +154,18 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
137154
[
138155
{
139156
"borderColor": "#0000ff",
157+
"borderRadius": 5,
158+
"borderWidth": 1,
140159
"color": "#000000",
141160
"fontSize": 13,
142161
"height": 50,
162+
"marginBottom": 15,
163+
"paddingHorizontal": 10,
143164
},
144165
{
145166
"color": "#00ff00",
146167
"height": 50,
168+
"textAlignVertical": "top",
147169
},
148170
]
149171
}
@@ -180,8 +202,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
180202
onStartShouldSetResponder={[Function]}
181203
style={
182204
{
205+
"alignItems": "center",
183206
"backgroundColor": "#ffff00",
207+
"borderRadius": 5,
208+
"marginBottom": 10,
184209
"opacity": 1,
210+
"paddingVertical": 15,
185211
}
186212
}
187213
>
@@ -227,7 +253,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
227253
onStartShouldSetResponder={[Function]}
228254
style={
229255
{
256+
"alignItems": "center",
257+
"backgroundColor": "#ffffff",
258+
"borderColor": "rgba(41, 35, 47, 0.13)",
259+
"borderRadius": 5,
260+
"borderWidth": 1,
230261
"opacity": 1,
262+
"padding": 15,
231263
"paddingVertical": 10,
232264
}
233265
}
@@ -270,6 +302,8 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
270302
style={
271303
{
272304
"backgroundColor": "#ffffff",
305+
"flex": 1,
306+
"padding": 20,
273307
}
274308
}
275309
>
@@ -285,7 +319,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
285319
style={
286320
{
287321
"color": "#ff0000",
322+
"flex": 1,
288323
"fontSize": 20,
324+
"fontWeight": "bold",
325+
"marginBottom": 20,
326+
"textAlign": "left",
289327
}
290328
}
291329
testID="sentry-feedback-form-title"
@@ -313,6 +351,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
313351
{
314352
"color": "#00ff00",
315353
"fontSize": 15,
354+
"marginBottom": 4,
316355
}
317356
}
318357
>
@@ -326,9 +365,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
326365
style={
327366
{
328367
"borderColor": "#0000ff",
368+
"borderRadius": 5,
369+
"borderWidth": 1,
329370
"color": "#000000",
330371
"fontSize": 13,
331372
"height": 50,
373+
"marginBottom": 15,
374+
"paddingHorizontal": 10,
332375
}
333376
}
334377
testID="sentry-feedback-name-input"
@@ -339,6 +382,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
339382
{
340383
"color": "#00ff00",
341384
"fontSize": 15,
385+
"marginBottom": 4,
342386
}
343387
}
344388
>
@@ -354,9 +398,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
354398
style={
355399
{
356400
"borderColor": "#0000ff",
401+
"borderRadius": 5,
402+
"borderWidth": 1,
357403
"color": "#000000",
358404
"fontSize": 13,
359405
"height": 50,
406+
"marginBottom": 15,
407+
"paddingHorizontal": 10,
360408
}
361409
}
362410
testID="sentry-feedback-email-input"
@@ -367,6 +415,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
367415
{
368416
"color": "#00ff00",
369417
"fontSize": 15,
418+
"marginBottom": 4,
370419
}
371420
}
372421
>
@@ -383,13 +432,18 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
383432
[
384433
{
385434
"borderColor": "#0000ff",
435+
"borderRadius": 5,
436+
"borderWidth": 1,
386437
"color": "#000000",
387438
"fontSize": 13,
388439
"height": 50,
440+
"marginBottom": 15,
441+
"paddingHorizontal": 10,
389442
},
390443
{
391444
"color": "#00ff00",
392445
"height": 50,
446+
"textAlignVertical": "top",
393447
},
394448
]
395449
}
@@ -436,8 +490,14 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
436490
onStartShouldSetResponder={[Function]}
437491
style={
438492
{
493+
"alignItems": "center",
439494
"backgroundColor": "#00ff00",
495+
"borderColor": "rgba(41, 35, 47, 0.13)",
496+
"borderRadius": 5,
497+
"borderWidth": 1,
498+
"flex": 1,
440499
"opacity": 1,
500+
"padding": 15,
441501
}
442502
}
443503
>
@@ -483,8 +543,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
483543
onStartShouldSetResponder={[Function]}
484544
style={
485545
{
546+
"alignItems": "center",
486547
"backgroundColor": "#ffff00",
548+
"borderRadius": 5,
549+
"marginBottom": 10,
487550
"opacity": 1,
551+
"paddingVertical": 15,
488552
}
489553
}
490554
>
@@ -530,7 +594,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
530594
onStartShouldSetResponder={[Function]}
531595
style={
532596
{
597+
"alignItems": "center",
598+
"backgroundColor": "#ffffff",
599+
"borderColor": "rgba(41, 35, 47, 0.13)",
600+
"borderRadius": 5,
601+
"borderWidth": 1,
533602
"opacity": 1,
603+
"padding": 15,
534604
"paddingVertical": 10,
535605
}
536606
}

0 commit comments

Comments
 (0)