Skip to content

Commit b389cde

Browse files
sbs44sbs44
committed
fix(feedback): deep merge custom styles with defaults
- Replace shallow spread with dynamic deep merge over all style keys - Custom style props now override specific properties while preserving defaults - Add test verifying partial style overrides don't lose default properties - Update snapshots to reflect correct merged styles
1 parent b1579bc commit b389cde

File tree

4 files changed

+109
-1
lines changed

4 files changed

+109
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
> make sure you follow our [migration guide](https://docs.sentry.io/platforms/react-native/migration/) first.
77
<!-- prettier-ignore-end -->
88
9+
## Unreleased
10+
11+
### Fixes
12+
13+
- Deep merge custom `styles` with defaults in `FeedbackWidget` instead of replacing them ([#5625](https://github.com/getsentry/sentry-react-native/pull/5625))
14+
915
## 7.12.0
1016

1117
### Features

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,15 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
260260
const config: FeedbackGeneralConfiguration = this.props;
261261
const imagePickerConfiguration: ImagePickerConfiguration = this.props;
262262
const text: FeedbackTextConfiguration = this.props;
263-
const styles: FeedbackWidgetStyles = { ...defaultStyles(theme), ...this.props.styles };
263+
const _defaultStyles = defaultStyles(theme);
264+
const _propStyles = this.props.styles || {};
265+
const styles = (Object.keys(_defaultStyles) as Array<keyof FeedbackWidgetStyles>).reduce<FeedbackWidgetStyles>(
266+
(merged, key) => {
267+
(merged as Record<string, unknown>)[key] = { ...(_defaultStyles[key] as object), ...(_propStyles[key] as object) };
268+
return merged;
269+
},
270+
{},
271+
);
264272
const onCancel = (): void => {
265273
if (onFormClose) {
266274
onFormClose();

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,30 @@ describe('FeedbackWidget', () => {
149149
expect(toJSON()).toMatchSnapshot();
150150
});
151151

152+
it('deep merges custom styles with defaults instead of replacing them', () => {
153+
const partialStyles: FeedbackWidgetStyles = {
154+
input: {
155+
color: '#ff0000',
156+
},
157+
};
158+
const { getByTestId } = render(
159+
<FeedbackWidget {...defaultProps} styles={partialStyles} />,
160+
);
161+
162+
const nameInput = getByTestId('sentry-feedback-name-input');
163+
const inputStyle = nameInput.props.style;
164+
165+
// The custom color should be applied
166+
expect(inputStyle.color).toBe('#ff0000');
167+
// Default properties should be preserved, not lost
168+
expect(inputStyle.height).toBe(50);
169+
expect(inputStyle.borderWidth).toBe(1);
170+
expect(inputStyle.borderRadius).toBe(5);
171+
expect(inputStyle.paddingHorizontal).toBe(10);
172+
expect(inputStyle.marginBottom).toBe(15);
173+
expect(inputStyle.fontSize).toBe(16);
174+
});
175+
152176
it('renders correctly', () => {
153177
const { getByPlaceholderText, getByText, getByTestId, queryByText } = render(<FeedbackWidget {...defaultProps} />);
154178

‎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
>
@@ -78,9 +85,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
7885
style={
7986
{
8087
"borderColor": "#0000ff",
88+
"borderRadius": 5,
89+
"borderWidth": 1,
8190
"color": "#000000",
8291
"fontSize": 13,
8392
"height": 50,
93+
"marginBottom": 15,
94+
"paddingHorizontal": 10,
8495
}
8596
}
8697
testID="sentry-feedback-name-input"
@@ -91,6 +102,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
91102
{
92103
"color": "#00ff00",
93104
"fontSize": 15,
105+
"marginBottom": 4,
94106
}
95107
}
96108
>
@@ -103,9 +115,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
103115
style={
104116
{
105117
"borderColor": "#0000ff",
118+
"borderRadius": 5,
119+
"borderWidth": 1,
106120
"color": "#000000",
107121
"fontSize": 13,
108122
"height": 50,
123+
"marginBottom": 15,
124+
"paddingHorizontal": 10,
109125
}
110126
}
111127
testID="sentry-feedback-email-input"
@@ -116,6 +132,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
116132
{
117133
"color": "#00ff00",
118134
"fontSize": 15,
135+
"marginBottom": 4,
119136
}
120137
}
121138
>
@@ -130,13 +147,18 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
130147
[
131148
{
132149
"borderColor": "#0000ff",
150+
"borderRadius": 5,
151+
"borderWidth": 1,
133152
"color": "#000000",
134153
"fontSize": 13,
135154
"height": 50,
155+
"marginBottom": 15,
156+
"paddingHorizontal": 10,
136157
},
137158
{
138159
"color": "#00ff00",
139160
"height": 50,
161+
"textAlignVertical": "top",
140162
},
141163
]
142164
}
@@ -173,8 +195,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
173195
onStartShouldSetResponder={[Function]}
174196
style={
175197
{
198+
"alignItems": "center",
176199
"backgroundColor": "#ffff00",
200+
"borderRadius": 5,
201+
"marginBottom": 10,
177202
"opacity": 1,
203+
"paddingVertical": 15,
178204
}
179205
}
180206
>
@@ -220,7 +246,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles 1`] = `
220246
onStartShouldSetResponder={[Function]}
221247
style={
222248
{
249+
"alignItems": "center",
250+
"backgroundColor": "#ffffff",
251+
"borderColor": "rgba(41, 35, 47, 0.13)",
252+
"borderRadius": 5,
253+
"borderWidth": 1,
223254
"opacity": 1,
255+
"padding": 15,
224256
"paddingVertical": 10,
225257
}
226258
}
@@ -263,6 +295,8 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
263295
style={
264296
{
265297
"backgroundColor": "#ffffff",
298+
"flex": 1,
299+
"padding": 20,
266300
}
267301
}
268302
>
@@ -278,7 +312,11 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
278312
style={
279313
{
280314
"color": "#ff0000",
315+
"flex": 1,
281316
"fontSize": 20,
317+
"fontWeight": "bold",
318+
"marginBottom": 20,
319+
"textAlign": "left",
282320
}
283321
}
284322
testID="sentry-feedback-form-title"
@@ -306,6 +344,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
306344
{
307345
"color": "#00ff00",
308346
"fontSize": 15,
347+
"marginBottom": 4,
309348
}
310349
}
311350
>
@@ -317,9 +356,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
317356
style={
318357
{
319358
"borderColor": "#0000ff",
359+
"borderRadius": 5,
360+
"borderWidth": 1,
320361
"color": "#000000",
321362
"fontSize": 13,
322363
"height": 50,
364+
"marginBottom": 15,
365+
"paddingHorizontal": 10,
323366
}
324367
}
325368
testID="sentry-feedback-name-input"
@@ -330,6 +373,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
330373
{
331374
"color": "#00ff00",
332375
"fontSize": 15,
376+
"marginBottom": 4,
333377
}
334378
}
335379
>
@@ -342,9 +386,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
342386
style={
343387
{
344388
"borderColor": "#0000ff",
389+
"borderRadius": 5,
390+
"borderWidth": 1,
345391
"color": "#000000",
346392
"fontSize": 13,
347393
"height": 50,
394+
"marginBottom": 15,
395+
"paddingHorizontal": 10,
348396
}
349397
}
350398
testID="sentry-feedback-email-input"
@@ -355,6 +403,7 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
355403
{
356404
"color": "#00ff00",
357405
"fontSize": 15,
406+
"marginBottom": 4,
358407
}
359408
}
360409
>
@@ -369,13 +418,18 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
369418
[
370419
{
371420
"borderColor": "#0000ff",
421+
"borderRadius": 5,
422+
"borderWidth": 1,
372423
"color": "#000000",
373424
"fontSize": 13,
374425
"height": 50,
426+
"marginBottom": 15,
427+
"paddingHorizontal": 10,
375428
},
376429
{
377430
"color": "#00ff00",
378431
"height": 50,
432+
"textAlignVertical": "top",
379433
},
380434
]
381435
}
@@ -422,8 +476,14 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
422476
onStartShouldSetResponder={[Function]}
423477
style={
424478
{
479+
"alignItems": "center",
425480
"backgroundColor": "#00ff00",
481+
"borderColor": "rgba(41, 35, 47, 0.13)",
482+
"borderRadius": 5,
483+
"borderWidth": 1,
484+
"flex": 1,
426485
"opacity": 1,
486+
"padding": 15,
427487
}
428488
}
429489
>
@@ -469,8 +529,12 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
469529
onStartShouldSetResponder={[Function]}
470530
style={
471531
{
532+
"alignItems": "center",
472533
"backgroundColor": "#ffff00",
534+
"borderRadius": 5,
535+
"marginBottom": 10,
473536
"opacity": 1,
537+
"paddingVertical": 15,
474538
}
475539
}
476540
>
@@ -516,7 +580,13 @@ exports[`FeedbackWidget matches the snapshot with custom styles and screenshot b
516580
onStartShouldSetResponder={[Function]}
517581
style={
518582
{
583+
"alignItems": "center",
584+
"backgroundColor": "#ffffff",
585+
"borderColor": "rgba(41, 35, 47, 0.13)",
586+
"borderRadius": 5,
587+
"borderWidth": 1,
519588
"opacity": 1,
589+
"padding": 15,
520590
"paddingVertical": 10,
521591
}
522592
}

0 commit comments

Comments
 (0)