Skip to content

Commit 7162f9f

Browse files
iM-GeeKyiM-GeeKy
committed
Update color and text specs for MD3.
1 parent 149f55f commit 7162f9f

16 files changed

+443
-177
lines changed

‎src/Date/Calendar.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,9 @@ function Calendar(
100100
const theme = useTheme()
101101

102102
const selectColor = useMemo<string>(() => {
103+
if (theme.isV3) {
104+
return theme.colors.primaryContainer
105+
}
103106
if (theme.dark) {
104107
return darkenBy(Color(theme.colors.primary), 0.1).hex()
105108
}

‎src/Date/CalendarHeader.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ function CalendarHeader({
5353
onPress={onPrev}
5454
/>
5555
</View>
56-
5756
<View
5857
style={[
5958
styles.buttonWrapper,

‎src/Date/DatePickerModalContent.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Calendar, {
1111
} from './Calendar'
1212

1313
import AnimatedCrossView from './AnimatedCrossView'
14-
14+
import { useTheme } from 'react-native-paper'
1515
import DatePickerModalHeader from './DatePickerModalHeader'
1616
import DatePickerModalContentHeader, {
1717
HeaderPickProps,
@@ -86,7 +86,7 @@ export function DatePickerModalContent(
8686
startYear,
8787
endYear,
8888
} = props
89-
89+
const theme = useTheme()
9090
const anyProps = props as any
9191

9292
// use local state to add only onConfirm state changes
@@ -164,11 +164,12 @@ export function DatePickerModalContent(
164164
endLabel={props.endLabel}
165165
uppercase={props.uppercase ?? true}
166166
locale={locale}
167-
editIcon={props.editIcon}
168-
calendarIcon={props.calendarIcon}
167+
editIcon={props?.editIcon ?? theme.isV3 ? 'pencil-outline' : 'pencil'}
168+
calendarIcon={
169+
props.calendarIcon ?? theme.isV3 ? 'calendar-blank' : 'calendar'
170+
}
169171
/>
170172
</DatePickerModalHeaderBackground>
171-
172173
<AnimatedCrossView
173174
collapsed={collapsed}
174175
calendar={

‎src/Date/DatePickerModalContentHeader.tsx‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export interface HeaderPickProps {
1616
headerSeparator?: string
1717
startLabel?: string
1818
endLabel?: string
19-
editIcon?: string
20-
calendarIcon?: string
19+
editIcon: string
20+
calendarIcon: string
2121
closeIcon?: string
2222
}
2323

@@ -58,23 +58,26 @@ export default function DatePickerModalContentHeader(
5858
mode,
5959
moreLabel,
6060
uppercase,
61-
editIcon = 'pencil',
62-
calendarIcon = 'calendar',
61+
editIcon,
62+
calendarIcon,
6363
} = props
6464
const theme = useTheme()
6565
const label = getLabel(props.locale, props.mode, props.label)
6666

6767
const color = useHeaderTextColor()
68+
const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
6869
const allowEditing = mode !== 'multiple'
6970

7071
let textFont = theme?.isV3
71-
? theme.fonts.bodyLarge
72+
? theme.fonts.labelMedium
7273
: (theme as any as MD2Theme).fonts.medium
7374

7475
return (
75-
<View style={[styles.header]}>
76+
<View style={styles.header}>
7677
<View>
77-
<Text style={[styles.label, { color, ...textFont }]}>
78+
<Text
79+
style={[styles.label, { color: supportingTextColor, ...textFont }]}
80+
>
7881
{uppercase ? label.toUpperCase() : label}
7982
</Text>
8083
<View style={styles.headerContentContainer}>
@@ -102,7 +105,7 @@ export default function DatePickerModalContentHeader(
102105
? getTranslation(props.locale, 'typeInDate')
103106
: getTranslation(props.locale, 'pickDateFromCalendar')
104107
}
105-
iconColor={color}
108+
iconColor={theme.isV3 ? theme.colors.onSurface : color}
106109
onPress={onToggle}
107110
/>
108111
) : null}
@@ -116,8 +119,13 @@ export function HeaderContentSingle({
116119
color,
117120
locale,
118121
}: HeaderContentProps & { color: string }) {
122+
const theme = useTheme()
119123
const lighterColor = Color(color).fade(0.5).rgb().toString()
120-
const dateColor = state.date ? color : lighterColor
124+
const dateColor = state.date
125+
? theme.isV3
126+
? theme.colors.onSurface
127+
: color
128+
: lighterColor
121129

122130
const formatter = React.useMemo(() => {
123131
return new Intl.DateTimeFormat(locale, {
@@ -140,9 +148,14 @@ export function HeaderContentMulti({
140148
color,
141149
locale,
142150
}: HeaderContentProps & { color: string; moreLabel: string | undefined }) {
151+
const theme = useTheme()
143152
const dateCount = state.dates?.length || 0
144153
const lighterColor = Color(color).fade(0.5).rgb().toString()
145-
const dateColor = dateCount ? color : lighterColor
154+
const dateColor = dateCount
155+
? theme.isV3
156+
? theme.colors.onSurface
157+
: color
158+
: lighterColor
146159

147160
const formatter = React.useMemo(() => {
148161
return new Intl.DateTimeFormat(locale, {
@@ -174,6 +187,7 @@ export function HeaderContentRange({
174187
endLabel = 'End',
175188
color,
176189
}: HeaderContentProps & { color: string }) {
190+
const theme = useTheme()
177191
const formatter = React.useMemo(() => {
178192
return new Intl.DateTimeFormat(locale, {
179193
month: 'short',
@@ -182,8 +196,16 @@ export function HeaderContentRange({
182196
}, [locale])
183197

184198
const lighterColor = Color(color).fade(0.5).rgb().toString()
185-
const startColor = state.startDate ? color : lighterColor
186-
const endColor = state.endDate ? color : lighterColor
199+
const startColor = state.startDate
200+
? theme.isV3
201+
? theme.colors.onSurface
202+
: color
203+
: lighterColor
204+
const endColor = state.endDate
205+
? theme.isV3
206+
? theme.colors.onSurface
207+
: color
208+
: lighterColor
187209

188210
return (
189211
<>
@@ -226,7 +248,6 @@ const styles = StyleSheet.create({
226248
marginTop: -3,
227249
marginLeft: 3,
228250
},
229-
230251
headerSeparator: {
231252
color: 'rgba(255,255,255,1)',
232253
fontSize: 25,

‎src/Date/DatePickerModalHeader.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import { Animated, StyleSheet } from 'react-native'
3-
import { Appbar, Button } from 'react-native-paper'
3+
import { Appbar, Button, useTheme } from 'react-native-paper'
44

55
import { useHeaderTextColor } from '../utils'
66
import { getTranslation } from '../translations/utils'
@@ -20,6 +20,7 @@ export interface DatePickerModalHeaderProps {
2020
export default function DatePickerModalHeader(
2121
props: DatePickerModalHeaderProps
2222
) {
23+
const theme = useTheme()
2324
const { disableSafeTop, locale, closeIcon = 'close' } = props
2425
const saveLabel = props.saveLabel || getTranslation(locale, 'save')
2526
const color = useHeaderTextColor()
@@ -29,6 +30,7 @@ export default function DatePickerModalHeader(
2930
<Animated.View
3031
style={[
3132
styles.animated,
33+
// eslint-disable-next-line react-native/no-inline-styles
3234
{
3335
paddingTop: disableSafeTop ? 0 : insets.top,
3436
paddingLeft: insets.left,
@@ -47,7 +49,7 @@ export default function DatePickerModalHeader(
4749
<Appbar.Content title={''} />
4850
<Button
4951
color={color}
50-
textColor={color}
52+
textColor={theme.isV3 ? theme.colors.primary : color}
5153
onPress={props.onSave}
5254
disabled={props.saveLabelDisabled ?? false}
5355
uppercase={props.uppercase ?? true}
@@ -90,6 +92,5 @@ const styles = StyleSheet.create({
9092
appbarHeader: {
9193
elevation: 0,
9294
backgroundColor: 'transparent',
93-
// alignItems:'center'
9495
},
9596
})

‎src/Date/Day.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -47,17 +47,27 @@ function Day(props: {
4747
onPressDate(new Date(year, month, day))
4848
}, [onPressDate, year, month, day])
4949

50-
const borderColor =
51-
selected || (inRange && theme.dark)
52-
? textColorOnPrimary
53-
: theme.dark
54-
? '#fff'
55-
: '#000'
50+
const borderColor = theme.isV3
51+
? theme.colors.primary
52+
: selected || (inRange && theme.dark)
53+
? textColorOnPrimary
54+
: theme.dark
55+
? '#fff'
56+
: '#000'
57+
5658
const textColor =
57-
selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
59+
theme.isV3 && selected
60+
? theme.colors.onPrimary
61+
: theme.isV3 && inRange && theme.dark
62+
? theme.colors.onPrimaryContainer
63+
: selected || (inRange && theme.dark)
64+
? textColorOnPrimary
65+
: theme.isV3
66+
? theme.colors.onSurface
67+
: undefined
5868

5969
let textFont = theme?.isV3
60-
? theme.fonts.bodyMedium
70+
? theme.fonts.bodySmall
6171
: (theme as any as MD2Theme).fonts.medium
6272

6373
return (
@@ -68,7 +78,6 @@ function Day(props: {
6878
rightCrop={rightCrop}
6979
selectColor={selectColor}
7080
/>
71-
7281
<TouchableRipple
7382
testID={`react-native-paper-dates-day-${year}-${month}-${day}`}
7483
disabled={disabled}
@@ -89,7 +98,12 @@ function Day(props: {
8998
>
9099
<Text
91100
style={[
92-
textColor ? { color: textColor } : undefined,
101+
textColor
102+
? {
103+
color:
104+
theme.isV3 && isToday ? theme.colors.primary : textColor,
105+
}
106+
: undefined,
93107
{ ...textFont },
94108
]}
95109
selectable={false}

‎src/Date/DayName.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,18 @@ function DayName({ label }: { label: string }) {
66
const theme = useTheme()
77

88
let textFont = theme?.isV3
9-
? theme.fonts.bodyMedium
9+
? theme.fonts.bodySmall
1010
: (theme as any as MD2Theme).fonts.medium
1111

1212
return (
1313
<View style={styles.dayName}>
14-
<Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
14+
<Text
15+
style={[
16+
styles.dayNameLabel,
17+
{ ...textFont, color: theme.colors.onSurface },
18+
]}
19+
selectable={false}
20+
>
1521
{label}
1622
</Text>
1723
</View>

‎src/Date/Month.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
251251
])
252252

253253
let textFont = theme?.isV3
254-
? theme.fonts.bodyMedium
254+
? theme.fonts.titleSmall
255255
: (theme as any as MD2Theme).fonts.medium
256256

257257
return (
@@ -288,21 +288,36 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
288288
]}
289289
>
290290
<Text
291-
style={[styles.monthLabel, { ...textFont }]}
291+
style={[
292+
styles.monthLabel,
293+
{
294+
...textFont,
295+
color: theme.isV3
296+
? theme.colors.onSurfaceVariant
297+
: theme.colors.onSurface,
298+
},
299+
]}
292300
selectable={false}
293301
>
294302
{monthName} {year}
295303
</Text>
296304
<View style={isHorizontal ? styles.opacity1 : styles.opacity0}>
297305
<IconButton
298306
onPress={isHorizontal ? () => onPressYear(year) : undefined}
299-
icon={selectingYear ? 'chevron-up' : 'chevron-down'}
307+
icon={
308+
selectingYear
309+
? theme.isV3
310+
? 'menu-up'
311+
: 'chevron-up'
312+
: theme.isV3
313+
? 'menu-down'
314+
: 'chevron-down'
315+
}
300316
/>
301317
</View>
302318
</View>
303319
</TouchableRipple>
304320
</View>
305-
306321
{grid.map(({ weekIndex, generatedDays }) => (
307322
<View style={styles.week} key={weekIndex}>
308323
{generatedDays
@@ -350,9 +365,7 @@ const styles = StyleSheet.create({
350365
marginBottom: weekMargin,
351366
height: daySize,
352367
},
353-
354368
month: {},
355-
356369
monthHeader: {
357370
height: montHeaderHeight,
358371
justifyContent: 'center',

‎src/Date/YearPicker.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,14 @@ function YearPure({
9696
<Text
9797
style={[
9898
styles.yearLabel,
99-
selected ? styles.selectedYear : null,
99+
selected
100+
? // eslint-disable-next-line react-native/no-inline-styles
101+
{ color: theme.isV3 ? theme.colors.onPrimary : '#fff' }
102+
: {
103+
color: theme.isV3
104+
? theme.colors.onSurfaceVariant
105+
: undefined,
106+
},
100107
{ ...textFont },
101108
]}
102109
selectable={false}
@@ -127,7 +134,6 @@ const styles = StyleSheet.create({
127134
height: ITEM_HEIGHT,
128135
justifyContent: 'center',
129136
},
130-
selectedYear: { color: '#fff' },
131137
yearButton: {
132138
borderRadius: 46 / 2,
133139
overflow: 'hidden',

0 commit comments

Comments
 (0)