Skip to content

fix: ordinal suffix in date and background color #7567

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
OtavioStasiak wants to merge 5 commits into
base: develop
Choose a base branch
from
+77 −27
Open

fix: ordinal suffix in date and background color #7567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
34d5f45
feat: add formatLongDate with locale-aware ordinal day
OtavioStasiak Aug 11, 2026
36f67c7
fix: date separator pill background and web-aligned colors
OtavioStasiak Aug 11, 2026
846fb50
fix: snapshot
OtavioStasiak Aug 11, 2026
667cc35
code improvements
OtavioStasiak Aug 11, 2026
b3baab7
chore: format code and fix lint issues
OtavioStasiak Aug 11, 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
20 changes: 15 additions & 5 deletions app/containers/MessageSeparator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type ReactElement } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import dayjs from '../lib/dayjs';
import { formatLongDate } from '../lib/dayjs';
import I18n from '../i18n';
import sharedStyles from '../views/Styles';
import { themes } from '../lib/constants/colors';
Expand All @@ -26,6 +26,11 @@ const styles = StyleSheet.create({
},
marginHorizontal: {
marginHorizontal: 14
},
label: {
paddingHorizontal: 8,
paddingVertical: 2,
borderRadius: 16
}
});

Expand All @@ -36,9 +41,11 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
return null;
}

const date = ts ? dayjs(ts).format('LL') : null;
const date = ts ? formatLongDate(ts) : null;
const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault };
const unreadText = { color: themes[theme].fontDanger };
const lineBackground = { backgroundColor: themes[theme].strokeLight };

if (ts && unread) {
return (
<View style={styles.container}>
Expand All @@ -51,9 +58,12 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
if (ts) {
return (
<View style={styles.container}>
<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }, styles.marginHorizontal]}>{date}</Text>
<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
<View style={[styles.line, lineBackground]} />
<View
style={[styles.label, styles.marginHorizontal, { backgroundColor: themes[theme].buttonBackgroundSecondaryDefault }]}>
<Text style={[styles.text, { color: themes[theme].buttonFontSecondary }]}>{date}</Text>
</View>
<View style={[styles.line, lineBackground]} />
</View>
);
}
Expand Down
74 changes: 52 additions & 22 deletions app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22711,7 +22711,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
]
}
>
November 10, 2017
November 10th, 2017
</Text>
</View>
<A11yOrderView
Expand Down Expand Up @@ -23922,27 +23922,42 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
]
}
/>
<Text
<View
style={
[
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500",
"textAlign": "left",
"borderRadius": 16,
"paddingHorizontal": 8,
"paddingVertical": 2,
},
{
"color": "#6C727A",
"marginHorizontal": 14,
},
{
"marginHorizontal": 14,
"backgroundColor": "#E4E7EA",
},
]
}
>
November 10, 2017
</Text>
<Text
style={
[
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500",
"textAlign": "left",
},
{
"color": "#1F2329",
},
]
}
>
November 10th, 2017
</Text>
</View>
<View
style={
[
Expand Down Expand Up @@ -24945,7 +24960,7 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
]
}
>
November 10, 2017
November 10th, 2017
</Text>
</View>
<A11yOrderView
Expand Down Expand Up @@ -26156,27 +26171,42 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
]
}
/>
<Text
<View
style={
[
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500",
"textAlign": "left",
"borderRadius": 16,
"paddingHorizontal": 8,
"paddingVertical": 2,
},
{
"color": "#6C727A",
"marginHorizontal": 14,
},
{
"marginHorizontal": 14,
"backgroundColor": "#E4E7EA",
},
]
}
>
November 10, 2017
</Text>
<Text
style={
[
{
"backgroundColor": "transparent",
"fontFamily": "Inter",
"fontSize": 14,
"fontWeight": "500",
"textAlign": "left",
},
{
"color": "#1F2329",
},
]
}
>
November 10th, 2017
</Text>
</View>
<View
style={
[
Expand Down
10 changes: 10 additions & 0 deletions app/lib/dayjs/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import timezone from 'dayjs/plugin/timezone';
import calendar from 'dayjs/plugin/calendar';
import relativeTime from 'dayjs/plugin/relativeTime';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import advancedFormat from 'dayjs/plugin/advancedFormat';

import 'dayjs/locale/en';
import 'dayjs/locale/ar';
Expand Down Expand Up @@ -36,6 +37,15 @@ dayjs.extend(timezone);
dayjs.extend(calendar);
dayjs.extend(relativeTime);
dayjs.extend(localizedFormat);
dayjs.extend(advancedFormat);

// Web's date-fns `PPP` (its `LL`) uses an ordinal day in English only; dayjs' `LL` never does.
const ORDINAL_DAY_LOCALES = ['en'];

export const formatLongDate = (ts: Date | number | string): string => {
const date = dayjs(ts);
return ORDINAL_DAY_LOCALES.includes(date.locale()) ? date.format('MMMM Do, YYYY') : date.format('LL');
};

// WatermelonDB hands a message `ts` back as Date, ms number, or ISO string depending on the read path;
// dayjs parses all three where Number(ts) / new Date(ts) each NaN on one. Normalize to ms since epoch.
Expand Down
Loading