Skip to content

[SDK-431] notification-buttons-overflow-with-large-text #859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lposen wants to merge 2 commits into
base: emb-ootb/master
Choose a base branch
from
Open

[SDK-431] notification-buttons-overflow-with-large-text #859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c75cac
style: enhance Embedded component styles and layout for improved usab…
lposen Apr 22, 2026
99b9ebd
style: update button styles for accessibility
lposen Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 57 additions & 6 deletions example/src/components/Embedded/Embedded.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,31 @@ import {
const styles = StyleSheet.create({
button,
buttonText,
container,
compactUtilityButton: {
...button,
paddingVertical: 8,
},
compactUtilityButtonText: {
...buttonText,
fontSize: 12,
lineHeight: 17,
},
container:{
...container,
marginHorizontal: 0,
marginTop: 0,
paddingHorizontal: 0,
},
Comment on lines +31 to +36
Copy link

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor formatting inconsistency: container:{ is missing a space after the colon. Other style objects in the example app use key: { (e.g., Commerce.styles.ts). Update to container: { to keep formatting consistent and avoid churn in future diffs.

Copilot uses AI. Check for mistakes.
embeddedHr: {
...hr,
marginVertical: 12,
},
embeddedSection: {
display: 'flex',
flexDirection: 'column',
gap: 16,
paddingHorizontal: 16,
},
hr,
inputContainer: {
marginVertical: 10,
},
Expand All @@ -39,6 +56,30 @@ const styles = StyleSheet.create({
modalButtons,
modalContent,
modalOverlay,
placementIdsInput: {
...input,
flex: 1,
marginBottom: 0,
minWidth: 72,
},
placementIdsLabel: {
flexShrink: 1,
fontSize: 14,
},
placementIdsRow: {
alignItems: 'center',
flexDirection: 'row',
gap: 8,
marginBottom: 8,
},
sessionButtonHalf: {
flex: 1,
},
sessionButtonsRow: {
flexDirection: 'row',
gap: 8,
marginBottom: 8,
},
subtitle: { ...subtitle, textAlign: 'center' },
text: { textAlign: 'center' },
textInput: input,
Expand All @@ -52,27 +93,37 @@ const styles = StyleSheet.create({
borderRadius: 8,
borderWidth: 2,
flex: 1,
paddingHorizontal: 12,
paddingVertical: 8,
paddingHorizontal: 8,
paddingVertical: 7,
},
viewTypeButtonSelected: {
backgroundColor: colors.brandCyan,
},
viewTypeButtonText: {
color: colors.brandCyan,
fontSize: 14,
fontSize: 12,
fontWeight: '600',
},
viewTypeButtonTextSelected: {
color: colors.backgroundPrimary,
},
viewTypeButtons: {
flex: 1,
flexDirection: 'row',
gap: 8,
justifyContent: 'space-around',
marginTop: 8,
minWidth: 0,
},
viewTypeLabel: {
flexShrink: 0,
fontSize: 13,
fontWeight: '600',
},
viewTypeSelector: {
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
gap: 8,
marginVertical: 12,
},
warningContainer: {
Expand Down
63 changes: 37 additions & 26 deletions example/src/components/Embedded/Embedded.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export const Embedded = () => {

return (
<SafeAreaView style={styles.container}>
Copy link
Copy Markdown
Contributor Author

@lposen lposen Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes that I made to this file is just so that the example page is not so crowded

<Text style={styles.title}>Embedded</Text>
{!Iterable.embeddedManager.isEnabled && (
<View style={styles.warningContainer}>
<Text style={styles.warningText}>
Expand All @@ -97,12 +96,9 @@ export const Embedded = () => {
</Text>
</View>
)}
<Text style={styles.subtitle}>
Enter placement IDs to fetch embedded messages
</Text>
<View style={styles.utilitySection}>
<View style={styles.viewTypeSelector}>
<Text style={styles.text}>Select View Type:</Text>
<Text style={styles.viewTypeLabel}>View:</Text>
<View style={styles.viewTypeButtons}>
<TouchableOpacity
style={[
Expand Down Expand Up @@ -164,28 +160,43 @@ export const Embedded = () => {
</TouchableOpacity>
</View>
</View>
<TouchableOpacity style={styles.button} onPress={syncEmbeddedMessages}>
<Text style={styles.buttonText}>Sync messages</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={startEmbeddedSession}>
<Text style={styles.buttonText}>Start session</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={endEmbeddedSession}>
<Text style={styles.buttonText}>End session</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={openConfigEditor}>
<Text style={styles.buttonText}>Set view config</Text>
<View style={styles.sessionButtonsRow}>
<TouchableOpacity
style={[styles.compactUtilityButton, styles.sessionButtonHalf]}
onPress={syncEmbeddedMessages}
>
<Text style={styles.compactUtilityButtonText}>Sync</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.compactUtilityButton, styles.sessionButtonHalf]}
onPress={startEmbeddedSession}
>
<Text style={styles.compactUtilityButtonText}>Start session</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.compactUtilityButton, styles.sessionButtonHalf]}
onPress={endEmbeddedSession}
>
<Text style={styles.compactUtilityButtonText}>End session</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.compactUtilityButton} onPress={openConfigEditor}>
<Text style={styles.compactUtilityButtonText}>Set view config</Text>
</TouchableOpacity>
<View style={styles.inputContainer}>
<Text style={styles.text}>Placement IDs (comma-separated):</Text>
<TextInput
style={styles.textInput}
placeholder="e.g., 1, 2, 3"
placeholderTextColor="#999"
value={placementIdsInput}
onChangeText={setPlacementIdsInput}
keyboardType="numbers-and-punctuation"
/>
<View style={styles.placementIdsRow}>
<Text style={styles.placementIdsLabel}>
Placement IDs{'\n'}(comma-separated):
</Text>
<TextInput
style={styles.placementIdsInput}
placeholder="e.g., 1, 2, 3"
placeholderTextColor="#999"
value={placementIdsInput}
onChangeText={setPlacementIdsInput}
keyboardType="numbers-and-punctuation"
/>
</View>
<TouchableOpacity style={styles.button} onPress={getEmbeddedMessages}>
<Text style={styles.buttonText}>
Get messages for placement ids
Expand Down Expand Up @@ -227,7 +238,7 @@ export const Embedded = () => {
</View>
</View>
</Modal>
<View style={styles.hr} />
<View style={styles.embeddedHr} />
<ScrollView>
<View style={styles.embeddedSection}>
{embeddedMessages.map((message) => (
Expand Down
2 changes: 1 addition & 1 deletion src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const styles = StyleSheet.create({
},
buttonText: {
fontSize: 14,
fontWeight: '400',
fontWeight: '700',
lineHeight: 20,
Comment on lines 35 to 38
Copy link

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is scoped to fixing Notification button overflow, but this change also alters Banner button typography (fontWeight 400 → 700). If this is intended, please mention it in the PR description / ticket context; otherwise consider reverting or splitting into a separate PR to avoid unexpected visual changes for Banner consumers.

Copilot uses AI. Check for mistakes.
paddingHorizontal: 12,
paddingVertical: 8,
Expand Down
10 changes: 10 additions & 0 deletions src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,14 @@ export const styles = StyleSheet.create({
width: '100%',
},
button: {
alignItems: 'center',
alignSelf: 'flex-start',
borderRadius: 32,
flexShrink: 1,
gap: 8,
justifyContent: 'center',
maxWidth: '100%',
minWidth: 0,
paddingHorizontal: 12,
paddingVertical: 8,
},
Expand All @@ -28,13 +34,17 @@ export const styles = StyleSheet.create({
alignSelf: 'stretch',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
gap: 12,
width: '100%',
},
buttonText: {
flexShrink: 1,
fontSize: 14,
fontWeight: '700',
lineHeight: 20,
maxWidth: '100%',
textAlign: 'center',
},
container: {
alignItems: 'flex-start',
Expand Down
2 changes: 2 additions & 0 deletions src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,8 @@ export const IterableEmbeddedNotification = ({
key={button.id}
>
<Text
ellipsizeMode="tail"
numberOfLines={1}
style={[
Comment on lines 100 to 103
Copy link

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New truncation behavior (numberOfLines/ellipsizeMode) isn’t covered by tests. Since this repo already has @testing-library tests for IterableEmbeddedNotification, add an assertion that the button title renders with numberOfLines={1} (and ellipsizeMode="tail") so this overflow fix doesn’t regress.

Copilot uses AI. Check for mistakes.
styles.buttonText,
{ color: textColor } as TextStyle,
Expand Down
Loading