From 42b38afe9799983fd960aaef0252f600a790150b Mon Sep 17 00:00:00 2001 From: Brandon Fitzwater Date: Sun, 25 Dec 2022 16:25:19 -0500 Subject: [PATCH 1/5] Update time picker to material 3 specs. --- example/src/App.tsx | 14 - src/Time/AmPmSwitcher.tsx | 26 +- src/Time/AnalogClock.tsx | 25 +- src/Time/AnalogClockHours.tsx | 34 +- src/Time/AnalogClockMinutes.tsx | 14 +- src/Time/TimeInput.tsx | 13 +- src/Time/TimeInputs.tsx | 140 ++-- src/Time/TimePickerModal.tsx | 40 +- src/Time/timeUtils.ts | 40 +- .../DatePickerInput.test.tsx.snap | 2 +- .../DatePickerInputWithoutModa.test.tsx.snap | 2 +- .../__snapshots__/AmPmSwitcher.test.tsx.snap | 31 +- .../__snapshots__/AnalogClock.test.tsx.snap | 649 +++++++++-------- .../AnalogClockHours.test.tsx.snap | 662 +++++++++--------- .../AnalogClockMinutes.test.tsx.snap | 314 +++++---- .../__snapshots__/TimeInput.test.tsx.snap | 12 +- .../__snapshots__/TimeInputs.test.tsx.snap | 177 +++-- .../__snapshots__/TimePicker.test.tsx.snap | 208 ++++-- src/utils.ts | 9 + 19 files changed, 1351 insertions(+), 1061 deletions(-) diff --git a/example/src/App.tsx b/example/src/App.tsx index 370d856f..570ec782 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -175,17 +175,6 @@ function App() { }, ]} > - {/**/} - {/* */} - {/* Dark mode (does not wo*/} - {/* */} - {/* */} - {/* */} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} @@ -432,7 +421,6 @@ const styles = StyleSheet.create({ marginTop: 12, padding: 24, alignSelf: 'center', - // flex: 1, }, contentInline: { padding: 0, @@ -466,8 +454,6 @@ const styles = StyleSheet.create({ left: 12, right: 12, bottom: 12, - // borderTopRightRadius: 20, - // borderBottomRightRadius: 20, backgroundColor: '#fff', overflow: 'hidden', shadowColor: '#000', diff --git a/src/Time/AmPmSwitcher.tsx b/src/Time/AmPmSwitcher.tsx index 4613fcdb..7cbdf206 100644 --- a/src/Time/AmPmSwitcher.tsx +++ b/src/Time/AmPmSwitcher.tsx @@ -3,24 +3,28 @@ import { View, StyleSheet } from 'react-native' import { MD2Theme, Text, TouchableRipple, useTheme } from 'react-native-paper' import { useMemo } from 'react' import Color from 'color' -import { useSwitchColors } from './timeUtils' +import { inputTypes, PossibleInputTypes, useSwitchColors } from './timeUtils' import { DisplayModeContext } from './TimePicker' export default function AmPmSwitcher({ onChange, hours, + inputType, }: { hours: number - onChange: (newHours: number) => any + onChange: (newHours: number) => any, + inputType: PossibleInputTypes }) { const { setMode, mode } = React.useContext(DisplayModeContext) const theme = useTheme() const backgroundColor = useMemo(() => { - if (theme.dark) { - return Color(theme.colors.surface).lighten(1.2).hex() + if (theme.isV3) { + return theme.colors.outline } return Color( - theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface + theme.dark + ? Color(theme.colors.surface).lighten(1.2).hex() + : theme.colors.surface ) .darken(0.1) .hex() @@ -31,9 +35,12 @@ export default function AmPmSwitcher({ @@ -79,7 +86,7 @@ function SwitchButton({ const { backgroundColor, color } = useSwitchColors(selected) let textFont = theme?.isV3 - ? theme.fonts.bodyMedium + ? theme.fonts.titleMedium : (theme as any as MD2Theme).fonts.medium return ( @@ -114,14 +121,13 @@ function SwitchButton({ const styles = StyleSheet.create({ root: { - width: 50, - height: 80, + width: 52, borderWidth: 1, overflow: 'hidden', }, switchSeparator: { height: 1, - width: 48, + width: 52, }, switchButton: { flex: 1, diff --git a/src/Time/AnalogClock.tsx b/src/Time/AnalogClock.tsx index 31cb8d66..ca4618fc 100644 --- a/src/Time/AnalogClock.tsx +++ b/src/Time/AnalogClock.tsx @@ -127,10 +127,10 @@ function AnalogClock({ style={[ styles.clock, { - backgroundColor: theme.dark + backgroundColor: theme.isV3 + ? theme.colors.surfaceVariant + : theme.dark ? Color(theme.colors.surface).lighten(1.4).hex() - : theme.isV3 - ? Color(theme.colors.outline).lighten(0.9).hex() : Color(theme.colors.surface).darken(0.1).hex(), }, ]} @@ -145,7 +145,15 @@ function AnalogClock({ transform: [ { rotate: -90 + pointerNumber * degreesPerNumber + 'deg' }, { - translateX: circleSize / 4 - 4 - dynamicSize / 2, + translateX: + circleSize / 4 - + (focused === clockTypes.hours && + pointerNumber >= 0 && + pointerNumber < 13 + ? 0 + : 4) + + (focused === clockTypes.minutes ? 4 : 0) - + dynamicSize / 2, }, ], width: circleSize / 2 - 4 - dynamicSize, @@ -194,16 +202,15 @@ const styles = StyleSheet.create({ }, center: { justifyContent: 'center', alignItems: 'center' }, endPoint: { - borderRadius: 15, - height: 30, - width: 30, + borderRadius: 24, + height: 48, + width: 48, position: 'absolute', right: 0, - bottom: -14, + bottom: -23, }, line: { position: 'absolute', - marginBottom: -1, height: 2, borderRadius: 4, }, diff --git a/src/Time/AnalogClockHours.tsx b/src/Time/AnalogClockHours.tsx index 2e29068b..a95e4d31 100644 --- a/src/Time/AnalogClockHours.tsx +++ b/src/Time/AnalogClockHours.tsx @@ -33,7 +33,11 @@ function AnalogClockHours({ > {/* Display 00 instead of 12 for AM hours */} - + {mode === 'AM' && !is24Hour && i + 1 === 12 ? '00' : i + 1} @@ -56,11 +60,11 @@ function AnalogClockHours({ {i + 13 === 24 ? '00' : i + 13} @@ -78,27 +82,25 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', zIndex: 20, - width: 50, - height: 50, - marginLeft: -25, - marginTop: -25, - - borderRadius: 25, + width: 48, + height: 48, + marginLeft: -24, + marginTop: -24, + borderRadius: 24, }, - outerHourInner: { borderRadius: 25 }, + outerHourInner: { borderRadius: 24 }, innerHourRoot: { position: 'absolute', zIndex: 20, justifyContent: 'center', alignItems: 'center', - width: 40, - height: 40, - marginLeft: -20, - marginTop: -20, - borderRadius: 20, + width: 48, + height: 48, + marginLeft: -24, + marginTop: -24, + borderRadius: 24, }, - innerHourInner: { borderRadius: 20 }, - innerHourText: { fontSize: 13 }, + innerHourInner: { borderRadius: 24 }, }) function getHourNumbers( diff --git a/src/Time/AnalogClockMinutes.tsx b/src/Time/AnalogClockMinutes.tsx index 42304ead..211a8766 100644 --- a/src/Time/AnalogClockMinutes.tsx +++ b/src/Time/AnalogClockMinutes.tsx @@ -33,6 +33,7 @@ function AnalogClockMinutes({ minutes }: { minutes: number }) { {isZero ? '00' : currentMinutes} @@ -50,14 +51,13 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', zIndex: 20, - width: 50, - height: 50, - marginLeft: -25, - marginTop: -25, - - borderRadius: 25, + width: 48, + height: 48, + marginLeft: -24, + marginTop: -24, + borderRadius: 24, }, - outerHourInner: { borderRadius: 25 }, + outerHourInner: { borderRadius: 24 }, innerHourRoot: { position: 'absolute', zIndex: 20, diff --git a/src/Time/TimeInput.tsx b/src/Time/TimeInput.tsx index 25f8a814..e54a3e38 100644 --- a/src/Time/TimeInput.tsx +++ b/src/Time/TimeInput.tsx @@ -68,10 +68,17 @@ function TimeInput( ref={ref} style={[ styles.input, + // eslint-disable-next-line react-native/no-inline-styles { color, backgroundColor, - borderRadius: theme.roundness, + borderRadius: theme.roundness * 2, + borderColor: + theme.isV3 && highlighted + ? theme.colors.onPrimaryContainer + : undefined, + borderWidth: theme.isV3 && highlighted ? 2 : 0, + height: inputType === inputTypes.keyboard ? 72 : 80, }, ]} value={formattedValue} @@ -89,7 +96,6 @@ function TimeInput( StyleSheet.absoluteFill, styles.buttonOverlay, { - // backgroundColor: 'blue', borderRadius: theme.roundness, }, ]} @@ -107,11 +113,10 @@ function TimeInput( const styles = StyleSheet.create({ root: { position: 'relative', height: 80, width: 96 }, input: { - fontSize: 50, + fontSize: 57, textAlign: 'center', textAlignVertical: 'center', width: 96, - height: 80, }, buttonOverlay: { overflow: 'hidden' }, }) diff --git a/src/Time/TimeInputs.tsx b/src/Time/TimeInputs.tsx index 4f5760a4..69721e48 100644 --- a/src/Time/TimeInputs.tsx +++ b/src/Time/TimeInputs.tsx @@ -1,6 +1,3 @@ -// @typescript-eslint/no-unused-vars -// WORK IN PROGRESS - import * as React from 'react' import { View, @@ -8,7 +5,7 @@ import { useWindowDimensions, TextInput as TextInputNative, } from 'react-native' -import { MD2Theme, useTheme } from 'react-native-paper' +import { MD2Theme, Text, useTheme } from 'react-native-paper' import { clockTypes, @@ -78,41 +75,56 @@ function TimeInputs({ isLandscape && styles.inputContainerLandscape, ]} > - { - let newHours = toHourOutputFormat(newHoursFromInput, hours, is24Hour) - if (newHoursFromInput > 24) { - newHours = 24 + + - + returnKeyType={'next'} + onSubmitEditing={onSubmitStartInput} + blurOnSubmit={false} + onChanged={(newHoursFromInput) => { + let newHours = toHourOutputFormat( + newHoursFromInput, + hours, + is24Hour + ) + if (newHoursFromInput > 24) { + newHours = 24 + } + onChange({ + hours: newHours, + minutes, + }) + }} + /> + {inputType === 'keyboard' ? ( + Hour + ) : null} + + - { - let newMinutes = newMinutesFromInput - if (newMinutesFromInput > 59) { - newMinutes = 59 + + + onSubmitEditing={onSubmitEndInput} + onChanged={(newMinutesFromInput) => { + let newMinutes = newMinutesFromInput + if (newMinutesFromInput > 59) { + newMinutes = 59 + } + onChange({ + hours, + minutes: newMinutes, + }) + }} + /> + {inputType === 'keyboard' ? ( + Minute + ) : null} + {!is24Hour && ( <> - + )} @@ -166,6 +187,9 @@ function TimeInputs({ } const styles = StyleSheet.create({ + column: { + flexDirection: 'column', + }, spaceBetweenInputsAndSwitcher: { width: 12 }, inputContainer: { flexDirection: 'row', diff --git a/src/Time/TimePickerModal.tsx b/src/Time/TimePickerModal.tsx index e3a1bb47..a9cbc605 100644 --- a/src/Time/TimePickerModal.tsx +++ b/src/Time/TimePickerModal.tsx @@ -67,9 +67,10 @@ export function TimePickerModal({ const theme = useTheme() let textFont + let labelText = label if (theme.isV3) { - textFont = theme.fonts.bodyMedium + textFont = theme.fonts.labelMedium } else { textFont = (theme as any as MD2Theme)?.fonts.medium } @@ -85,6 +86,10 @@ export function TimePickerModal({ getMinutes(minutes) ) + if (inputType === inputTypes.keyboard && !label) { + labelText = 'Enter time' + } + React.useEffect(() => { setLocalHours(getHours(hours)) }, [setLocalHours, hours]) @@ -133,7 +138,6 @@ export function TimePickerModal({ ]} /> - @@ -160,12 +171,12 @@ export function TimePickerModal({ { ...textFont, color: theme?.isV3 - ? theme.colors.onBackground + ? theme.colors.onSurfaceVariant : (theme as any as MD2Theme).colors.text, }, ]} > - {uppercase ? label.toUpperCase() : label} + {uppercase ? labelText.toUpperCase() : labelText} @@ -242,21 +253,26 @@ const styles = StyleSheet.create({ }, shadowOpacity: 0.34, shadowRadius: 6.27, - elevation: 10, + elevation: 3, minWidth: 287, + paddingVertical: 8, }, labelContainer: { - height: 28, justifyContent: 'flex-end', paddingLeft: 24, paddingRight: 24, - marginTop: 8, + paddingTop: 16, }, label: { letterSpacing: 1, fontSize: 13, }, - timePickerContainer: { padding: 24 }, + timePickerContainer: { + paddingLeft: 24, + paddingTop: 20, + paddingBottom: 16, + paddingRight: 24, + }, bottom: { flexDirection: 'row', alignItems: 'center', diff --git a/src/Time/timeUtils.ts b/src/Time/timeUtils.ts index 1ea000c8..d5761fc2 100644 --- a/src/Time/timeUtils.ts +++ b/src/Time/timeUtils.ts @@ -2,8 +2,7 @@ import * as React from 'react' import Color from 'color' import { MD2Theme, useTheme } from 'react-native-paper' -// 250? when bigger? -export const circleSize = 215 +export const circleSize = 256 export type PossibleHourTypes = 'am' | 'pm' export type HourTypeMap = { @@ -161,10 +160,9 @@ export function useSwitchColors(highlighted: boolean) { const backgroundColor = React.useMemo(() => { if (theme.dark) { if (highlighted) { - return Color(theme.colors.primary).hex() - } - if (theme.isV3) { - return Color(theme.colors.surface).lighten(1.4).hex() + return theme.isV3 + ? theme.colors.tertiaryContainer + : Color(theme.colors.primary).hex() } return theme.colors.backdrop } @@ -181,10 +179,12 @@ export function useSwitchColors(highlighted: boolean) { const color = React.useMemo(() => { if (highlighted && !theme.dark) { - return theme.colors.primary + return theme.isV3 ? theme.colors.onSurfaceVariant : theme.colors.primary } if (highlighted && theme.dark) { - return theme.colors.background + return theme.isV3 + ? theme.colors.onTertiaryContainer + : theme.colors.background } if (theme.isV3) { return theme.colors.onSurfaceVariant @@ -201,33 +201,39 @@ export function useInputColors(highlighted: boolean) { const backgroundColor = React.useMemo(() => { if (theme.dark) { if (highlighted) { - return Color(theme.colors.primary).hex() + return theme.isV3 + ? theme.colors.primaryContainer + : Color(theme.colors.primary).hex() } - return Color(theme.colors.surface).lighten(1.4).hex() + return theme.isV3 + ? theme.colors.surfaceVariant + : Color(theme.colors.surface).lighten(1.4).hex() } if (highlighted) { if (theme.isV3) { - return Color(theme.colors.primaryContainer).hex() + return theme.colors.secondaryContainer } return Color(theme.colors.primary).lighten(1).hex() } if (theme.isV3) { - return Color(theme.colors.outline).lighten(0.9).hex() + return theme.colors.surfaceVariant } return Color(theme.colors.surface).darken(0.1).hex() }, [highlighted, theme]) const color = React.useMemo(() => { - if (highlighted && !theme.dark) { - return theme.colors.primary - } if (theme.isV3) { if (!highlighted) { - return theme.colors.onBackground + return theme.isV3 ? theme.colors.onSurface : theme.colors.onBackground } - return theme.colors.background + return theme.isV3 + ? theme.colors.onPrimaryContainer + : theme.colors.onBackground } else { + if (highlighted && !theme.dark) { + return theme.colors.primary + } return (theme as any as MD2Theme).colors.text } }, [highlighted, theme]) diff --git a/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap b/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap index cb406dbe..53c5a8b9 100644 --- a/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap +++ b/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap @@ -210,7 +210,7 @@ exports[`renders DatePickerInput 1`] = ` } testID="text-input-flat" underlineColorAndroid="transparent" - value="12/24/2022" + value="12/25/2022" /> diff --git a/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap b/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap index 9ed16efa..6e5d5427 100644 --- a/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap +++ b/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap @@ -209,7 +209,7 @@ exports[`renders DatePickerInput 1`] = ` } testID="text-input-flat" underlineColorAndroid="transparent" - value="12/24/2022" + value="12/25/2022" /> diff --git a/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap b/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap index 24895008..805e919e 100644 --- a/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap @@ -6,13 +6,14 @@ exports[`renders AmPmSwitcher 1`] = ` [ { "borderWidth": 1, - "height": 80, "overflow": "hidden", - "width": 50, + "width": 52, }, { - "borderColor": "#E0D2E0", - "borderRadius": 4, + "borderColor": "rgba(121, 116, 126, 1)", + "borderRadius": 8, + "height": 80, + "marginBottom": 0, }, ] } @@ -86,12 +87,12 @@ exports[`renders AmPmSwitcher 1`] = ` }, [ { - "color": "rgba(103, 80, 164, 1)", + "color": "rgba(73, 69, 79, 1)", "fontFamily": "System", - "fontSize": 14, - "fontWeight": "400", - "letterSpacing": 0.25, - "lineHeight": 20, + "fontSize": 16, + "fontWeight": "500", + "letterSpacing": 0.15, + "lineHeight": 24, }, ], ] @@ -106,10 +107,10 @@ exports[`renders AmPmSwitcher 1`] = ` [ { "height": 1, - "width": 48, + "width": 52, }, { - "backgroundColor": "#E0D2E0", + "backgroundColor": "rgba(121, 116, 126, 1)", }, ] } @@ -180,10 +181,10 @@ exports[`renders AmPmSwitcher 1`] = ` { "color": "rgba(73, 69, 79, 1)", "fontFamily": "System", - "fontSize": 14, - "fontWeight": "400", - "letterSpacing": 0.25, - "lineHeight": 20, + "fontSize": 16, + "fontWeight": "500", + "letterSpacing": 0.15, + "lineHeight": 24, }, ], ] diff --git a/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap b/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap index 755aed7d..b885b7f9 100644 --- a/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/AnalogClock.test.tsx.snap @@ -19,14 +19,14 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 107.5, - "height": 215, + "borderRadius": 128, + "height": 256, "justifyContent": "center", "position": "relative", - "width": 215, + "width": 256, }, { - "backgroundColor": "#E6E5E7", + "backgroundColor": "rgba(231, 224, 236, 1)", }, ] } @@ -38,7 +38,6 @@ exports[`renders AnalogClock 1`] = ` { "borderRadius": 4, "height": 2, - "marginBottom": -1, "position": "absolute", }, { @@ -48,10 +47,10 @@ exports[`renders AnalogClock 1`] = ` "rotate": "270deg", }, { - "translateX": 49.75, + "translateX": 64, }, ], - "width": 103.5, + "width": 124, }, ] } @@ -60,12 +59,12 @@ exports[`renders AnalogClock 1`] = ` style={ [ { - "borderRadius": 15, - "bottom": -14, - "height": 30, + "borderRadius": 24, + "bottom": -23, + "height": 48, "position": "absolute", "right": 0, - "width": 30, + "width": 48, }, { "backgroundColor": "rgba(103, 80, 164, 1)", @@ -143,18 +142,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 33, + "left": 179, + "top": 39, }, ] } @@ -162,7 +161,7 @@ exports[`renders AnalogClock 1`] = ` @@ -170,14 +169,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -196,18 +197,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 65, + "left": 217, + "top": 77, }, ] } @@ -215,7 +216,7 @@ exports[`renders AnalogClock 1`] = ` @@ -223,14 +224,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -249,18 +252,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 194, - "top": 107, + "left": 230, + "top": 128, }, ] } @@ -268,7 +271,7 @@ exports[`renders AnalogClock 1`] = ` @@ -276,14 +279,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -302,18 +307,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 150, + "left": 217, + "top": 179, }, ] } @@ -321,7 +326,7 @@ exports[`renders AnalogClock 1`] = ` @@ -329,14 +334,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -355,18 +362,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 182, + "left": 179, + "top": 217, }, ] } @@ -374,7 +381,7 @@ exports[`renders AnalogClock 1`] = ` @@ -382,14 +389,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -408,18 +417,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 108, - "top": 194, + "left": 128, + "top": 230, }, ] } @@ -427,7 +436,7 @@ exports[`renders AnalogClock 1`] = ` @@ -435,14 +444,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -461,18 +472,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 65, - "top": 182, + "left": 77, + "top": 217, }, ] } @@ -480,7 +491,7 @@ exports[`renders AnalogClock 1`] = ` @@ -488,14 +499,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -514,18 +527,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 151, + "left": 39, + "top": 179, }, ] } @@ -533,7 +546,7 @@ exports[`renders AnalogClock 1`] = ` @@ -541,14 +554,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -567,18 +582,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 22, - "top": 108, + "left": 26, + "top": 128, }, ] } @@ -586,7 +601,7 @@ exports[`renders AnalogClock 1`] = ` @@ -594,14 +609,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -620,18 +637,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 65, + "left": 39, + "top": 77, }, ] } @@ -639,7 +656,7 @@ exports[`renders AnalogClock 1`] = ` @@ -647,14 +664,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -673,18 +692,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 64, - "top": 33, + "left": 77, + "top": 39, }, ] } @@ -692,7 +711,7 @@ exports[`renders AnalogClock 1`] = ` @@ -700,14 +719,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -726,18 +747,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 107, - "top": 22, + "left": 128, + "top": 26, }, ] } @@ -745,7 +766,7 @@ exports[`renders AnalogClock 1`] = ` @@ -753,20 +774,22 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, { - "color": "#fff", + "color": "rgba(255, 255, 255, 1)", }, ] } @@ -801,18 +824,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 108, - "top": 22, + "left": 128, + "top": 26, }, ] } @@ -820,7 +843,7 @@ exports[`renders AnalogClock 1`] = ` @@ -828,14 +851,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -854,18 +879,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 33, + "left": 179, + "top": 39, }, ] } @@ -873,7 +898,7 @@ exports[`renders AnalogClock 1`] = ` @@ -881,14 +906,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -907,18 +934,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 65, + "left": 217, + "top": 77, }, ] } @@ -926,7 +953,7 @@ exports[`renders AnalogClock 1`] = ` @@ -934,14 +961,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -960,18 +989,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 194, - "top": 107, + "left": 230, + "top": 128, }, ] } @@ -979,7 +1008,7 @@ exports[`renders AnalogClock 1`] = ` @@ -987,14 +1016,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -1013,18 +1044,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 150, + "left": 217, + "top": 179, }, ] } @@ -1032,7 +1063,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1040,14 +1071,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -1066,18 +1099,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 182, + "left": 179, + "top": 217, }, ] } @@ -1085,7 +1118,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1093,14 +1126,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -1119,18 +1154,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 108, - "top": 194, + "left": 128, + "top": 230, }, ] } @@ -1138,7 +1173,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1146,20 +1181,22 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, { - "color": "#fff", + "color": "rgba(255, 255, 255, 1)", }, ] } @@ -1174,18 +1211,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 65, - "top": 182, + "left": 77, + "top": 217, }, ] } @@ -1193,7 +1230,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1201,14 +1238,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -1227,18 +1266,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 151, + "left": 39, + "top": 179, }, ] } @@ -1246,7 +1285,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1254,14 +1293,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -1280,18 +1321,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 22, - "top": 108, + "left": 26, + "top": 128, }, ] } @@ -1299,7 +1340,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1307,14 +1348,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -1333,18 +1376,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 65, + "left": 39, + "top": 77, }, ] } @@ -1352,7 +1395,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1360,14 +1403,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -1386,18 +1431,18 @@ exports[`renders AnalogClock 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 64, - "top": 33, + "left": 77, + "top": 39, }, ] } @@ -1405,7 +1450,7 @@ exports[`renders AnalogClock 1`] = ` @@ -1413,14 +1458,16 @@ exports[`renders AnalogClock 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", diff --git a/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap b/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap index 816db3ee..59473a63 100644 --- a/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/AnalogClockHours.test.tsx.snap @@ -8,18 +8,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 33, + "left": 179, + "top": 39, }, ] } @@ -27,7 +27,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -35,14 +35,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -61,18 +63,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 65, + "left": 217, + "top": 77, }, ] } @@ -80,7 +82,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -88,14 +90,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -114,18 +118,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 194, - "top": 107, + "left": 230, + "top": 128, }, ] } @@ -133,7 +137,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -141,14 +145,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -167,18 +173,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 150, + "left": 217, + "top": 179, }, ] } @@ -186,7 +192,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -194,14 +200,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -220,18 +228,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 182, + "left": 179, + "top": 217, }, ] } @@ -239,7 +247,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -247,14 +255,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -273,18 +283,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 108, - "top": 194, + "left": 128, + "top": 230, }, ] } @@ -292,7 +302,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -300,14 +310,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -326,18 +338,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 65, - "top": 182, + "left": 77, + "top": 217, }, ] } @@ -345,7 +357,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -353,14 +365,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -379,18 +393,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 151, + "left": 39, + "top": 179, }, ] } @@ -398,7 +412,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -406,14 +420,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -432,18 +448,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 22, - "top": 108, + "left": 26, + "top": 128, }, ] } @@ -451,7 +467,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -459,14 +475,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -485,18 +503,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 65, + "left": 39, + "top": 77, }, ] } @@ -504,7 +522,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -512,14 +530,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -538,18 +558,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 64, - "top": 33, + "left": 77, + "top": 39, }, ] } @@ -557,7 +577,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -565,14 +585,16 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -591,18 +613,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 107, - "top": 22, + "left": 128, + "top": 26, }, ] } @@ -610,7 +632,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -618,20 +640,22 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, { - "color": "#fff", + "color": "rgba(255, 255, 255, 1)", }, ] } @@ -646,18 +670,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 134, - "top": 61, + "left": 160, + "top": 73, }, ] } @@ -665,7 +689,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -673,22 +697,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -704,18 +727,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 154, - "top": 81, + "left": 183, + "top": 96, }, ] } @@ -723,7 +746,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -731,22 +754,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -762,18 +784,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 161, - "top": 107, + "left": 192, + "top": 128, }, ] } @@ -781,7 +803,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -789,22 +811,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -820,18 +841,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 154, - "top": 134, + "left": 183, + "top": 160, }, ] } @@ -839,7 +860,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -847,22 +868,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -878,18 +898,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 134, - "top": 154, + "left": 160, + "top": 183, }, ] } @@ -897,7 +917,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -905,22 +925,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -936,18 +955,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 108, - "top": 161, + "left": 128, + "top": 192, }, ] } @@ -955,7 +974,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -963,22 +982,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -994,18 +1012,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 81, - "top": 154, + "left": 96, + "top": 183, }, ] } @@ -1013,7 +1031,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -1021,22 +1039,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -1052,18 +1069,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 61, - "top": 134, + "left": 73, + "top": 160, }, ] } @@ -1071,7 +1088,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -1079,22 +1096,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -1110,18 +1126,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 54, - "top": 108, + "left": 64, + "top": 128, }, ] } @@ -1129,7 +1145,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -1137,22 +1153,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -1168,18 +1183,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 61, - "top": 81, + "left": 73, + "top": 96, }, ] } @@ -1187,7 +1202,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -1195,22 +1210,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -1226,18 +1240,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 81, - "top": 61, + "left": 96, + "top": 73, }, ] } @@ -1245,7 +1259,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -1253,22 +1267,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] @@ -1284,18 +1297,18 @@ exports[`renders AnalogClockHours 1`] = ` [ { "alignItems": "center", - "borderRadius": 20, - "height": 40, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -20, - "marginTop": -20, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 40, + "width": 48, "zIndex": 20, }, { - "left": 107, - "top": 54, + "left": 128, + "top": 64, }, ] } @@ -1303,7 +1316,7 @@ exports[`renders AnalogClockHours 1`] = ` @@ -1311,22 +1324,21 @@ exports[`renders AnalogClockHours 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, [ - { - "fontSize": 13, - }, null, ], ] diff --git a/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap b/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap index f37756e0..a91adb7a 100644 --- a/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/AnalogClockMinutes.test.tsx.snap @@ -8,18 +8,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 108, - "top": 22, + "left": 128, + "top": 26, }, ] } @@ -27,7 +27,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -35,14 +35,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -61,18 +63,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 33, + "left": 179, + "top": 39, }, ] } @@ -80,7 +82,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -88,14 +90,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -114,18 +118,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 65, + "left": 217, + "top": 77, }, ] } @@ -133,7 +137,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -141,14 +145,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -167,18 +173,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 194, - "top": 107, + "left": 230, + "top": 128, }, ] } @@ -186,7 +192,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -194,14 +200,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -220,18 +228,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 182, - "top": 150, + "left": 217, + "top": 179, }, ] } @@ -239,7 +247,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -247,14 +255,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -273,18 +283,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 151, - "top": 182, + "left": 179, + "top": 217, }, ] } @@ -292,7 +302,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -300,14 +310,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -326,18 +338,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 108, - "top": 194, + "left": 128, + "top": 230, }, ] } @@ -345,7 +357,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -353,14 +365,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -379,18 +393,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 65, - "top": 182, + "left": 77, + "top": 217, }, ] } @@ -398,7 +412,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -406,14 +420,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -432,18 +448,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 151, + "left": 39, + "top": 179, }, ] } @@ -451,7 +467,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -459,14 +475,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -485,18 +503,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 22, - "top": 108, + "left": 26, + "top": 128, }, ] } @@ -504,7 +522,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -512,20 +530,22 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", }, { - "color": "#fff", + "color": "rgba(255, 255, 255, 1)", }, ] } @@ -540,18 +560,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 33, - "top": 65, + "left": 39, + "top": 77, }, ] } @@ -559,7 +579,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -567,14 +587,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", @@ -593,18 +615,18 @@ exports[`renders AnalogClockMinutes 1`] = ` [ { "alignItems": "center", - "borderRadius": 25, - "height": 50, + "borderRadius": 24, + "height": 48, "justifyContent": "center", - "marginLeft": -25, - "marginTop": -25, + "marginLeft": -24, + "marginTop": -24, "position": "absolute", - "width": 50, + "width": 48, "zIndex": 20, }, { - "left": 64, - "top": 33, + "left": 77, + "top": 39, }, ] } @@ -612,7 +634,7 @@ exports[`renders AnalogClockMinutes 1`] = ` @@ -620,14 +642,16 @@ exports[`renders AnalogClockMinutes 1`] = ` selectable={false} style={ [ - { - "textAlign": "left", - }, { "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", + "fontSize": 16, "fontWeight": "400", - "letterSpacing": 0, + "letterSpacing": 0.15, + "lineHeight": 24, + }, + { + "textAlign": "left", }, { "writingDirection": "ltr", diff --git a/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap index 84985a88..4ec88cca 100644 --- a/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/TimeInput.test.tsx.snap @@ -20,16 +20,18 @@ exports[`renders TimeInput 1`] = ` style={ [ { - "fontSize": 50, - "height": 80, + "fontSize": 57, "textAlign": "center", "textAlignVertical": "center", "width": 96, }, { - "backgroundColor": "#EADDFF", - "borderRadius": 4, - "color": "rgba(103, 80, 164, 1)", + "backgroundColor": "rgba(232, 222, 248, 1)", + "borderColor": "rgba(33, 0, 93, 1)", + "borderRadius": 8, + "borderWidth": 2, + "color": "rgba(33, 0, 93, 1)", + "height": 80, }, ] } diff --git a/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap index cc90c3d4..17c42666 100644 --- a/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/TimeInputs.test.tsx.snap @@ -15,50 +15,88 @@ exports[`renders TimeInputs 1`] = ` - + + + + > + Hour + - + + + + > + Minute + `; diff --git a/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap b/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap index 60ba7a5e..c39bc492 100644 --- a/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/TimePicker.test.tsx.snap @@ -23,50 +23,88 @@ exports[`renders TimePicker 1`] = ` - + + + + > + Hour + - + + + + > + Minute + Date: Sun, 25 Dec 2022 19:40:56 -0500 Subject: [PATCH 2/5] Fix lint issue. --- src/Time/AmPmSwitcher.tsx | 2 +- src/__tests__/Date/DatePickerInput.test.tsx | 2 +- ...ithoutModa.test.tsx => DatePickerInputWithoutModal.test.tsx} | 2 +- src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap | 2 +- ....test.tsx.snap => DatePickerInputWithoutModal.test.tsx.snap} | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) rename src/__tests__/Date/{DatePickerInputWithoutModa.test.tsx => DatePickerInputWithoutModal.test.tsx} (92%) rename src/__tests__/Date/__snapshots__/{DatePickerInputWithoutModa.test.tsx.snap => DatePickerInputWithoutModal.test.tsx.snap} (99%) diff --git a/src/Time/AmPmSwitcher.tsx b/src/Time/AmPmSwitcher.tsx index 7cbdf206..2b662ecd 100644 --- a/src/Time/AmPmSwitcher.tsx +++ b/src/Time/AmPmSwitcher.tsx @@ -12,7 +12,7 @@ export default function AmPmSwitcher({ inputType, }: { hours: number - onChange: (newHours: number) => any, + onChange: (newHours: number) => any inputType: PossibleInputTypes }) { const { setMode, mode } = React.useContext(DisplayModeContext) diff --git a/src/__tests__/Date/DatePickerInput.test.tsx b/src/__tests__/Date/DatePickerInput.test.tsx index 17430567..d1983998 100644 --- a/src/__tests__/Date/DatePickerInput.test.tsx +++ b/src/__tests__/Date/DatePickerInput.test.tsx @@ -8,7 +8,7 @@ it('renders DatePickerInput', () => { .create( null} inputMode="start" autoComplete={'birthdate-full'} diff --git a/src/__tests__/Date/DatePickerInputWithoutModa.test.tsx b/src/__tests__/Date/DatePickerInputWithoutModal.test.tsx similarity index 92% rename from src/__tests__/Date/DatePickerInputWithoutModa.test.tsx rename to src/__tests__/Date/DatePickerInputWithoutModal.test.tsx index 94889536..f3b9084b 100644 --- a/src/__tests__/Date/DatePickerInputWithoutModa.test.tsx +++ b/src/__tests__/Date/DatePickerInputWithoutModal.test.tsx @@ -8,7 +8,7 @@ it('renders DatePickerInput', () => { .create( null} inputMode="start" autoComplete={'birthdate-full'} diff --git a/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap b/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap index 53c5a8b9..2c746544 100644 --- a/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap +++ b/src/__tests__/Date/__snapshots__/DatePickerInput.test.tsx.snap @@ -210,7 +210,7 @@ exports[`renders DatePickerInput 1`] = ` } testID="text-input-flat" underlineColorAndroid="transparent" - value="12/25/2022" + value="12/26/2022" /> diff --git a/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap b/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap similarity index 99% rename from src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap rename to src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap index 6e5d5427..e3990ba7 100644 --- a/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModa.test.tsx.snap +++ b/src/__tests__/Date/__snapshots__/DatePickerInputWithoutModal.test.tsx.snap @@ -209,7 +209,7 @@ exports[`renders DatePickerInput 1`] = ` } testID="text-input-flat" underlineColorAndroid="transparent" - value="12/25/2022" + value="12/26/2022" /> From a8622892924d214cb9017127768230111c3fb0e1 Mon Sep 17 00:00:00 2001 From: Brandon Fitzwater Date: Sun, 25 Dec 2022 19:51:32 -0500 Subject: [PATCH 3/5] Fix broken test. --- src/__tests__/Time/AmPmSwitcher.test.tsx | 9 ++++++++- .../Time/__snapshots__/AmPmSwitcher.test.tsx.snap | 4 ++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/__tests__/Time/AmPmSwitcher.test.tsx b/src/__tests__/Time/AmPmSwitcher.test.tsx index ff0b7e51..de7c6f3d 100644 --- a/src/__tests__/Time/AmPmSwitcher.test.tsx +++ b/src/__tests__/Time/AmPmSwitcher.test.tsx @@ -1,11 +1,18 @@ import * as React from 'react' import renderer from 'react-test-renderer' +import { inputTypes } from '../../Time/timeUtils' import AmPmSwitcher from '../../Time/AmPmSwitcher' it('renders AmPmSwitcher', () => { const tree = renderer - .create( null} />) + .create( + null} + inputType={inputTypes.keyboard} + /> + ) .toJSON() expect(tree).toMatchSnapshot() diff --git a/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap b/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap index 805e919e..df461441 100644 --- a/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap +++ b/src/__tests__/Time/__snapshots__/AmPmSwitcher.test.tsx.snap @@ -12,8 +12,8 @@ exports[`renders AmPmSwitcher 1`] = ` { "borderColor": "rgba(121, 116, 126, 1)", "borderRadius": 8, - "height": 80, - "marginBottom": 0, + "height": 72, + "marginBottom": 24, }, ] } From 9eb93c723646a82c7b029203595abb9bdd8f71ee Mon Sep 17 00:00:00 2001 From: Brandon Fitzwater Date: Mon, 26 Dec 2022 07:42:39 -0500 Subject: [PATCH 4/5] Fix purple highlight on ripple (iOS). --- src/Time/TimeInput.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/Time/TimeInput.tsx b/src/Time/TimeInput.tsx index e54a3e38..96b2f4d7 100644 --- a/src/Time/TimeInput.tsx +++ b/src/Time/TimeInput.tsx @@ -1,5 +1,11 @@ import * as React from 'react' -import { View, TextInput, TextInputProps, StyleSheet } from 'react-native' +import { + View, + TextInput, + TextInputProps, + StyleSheet, + Platform, +} from 'react-native' import { useTheme, TouchableRipple } from 'react-native-paper' import Color from 'color' @@ -99,7 +105,11 @@ function TimeInput( borderRadius: theme.roundness, }, ]} - rippleColor={Color(theme.colors.primary).fade(0.7).hex()} + rippleColor={ + Platform.OS !== 'ios' + ? Color(theme.colors.onSurface).fade(0.7).hex() + : undefined + } onPress={() => onPress(clockType)} borderless={true} > From 96e42a3002791878189100791bce9a8d835e94ab Mon Sep 17 00:00:00 2001 From: Brandon Fitzwater Date: Mon, 26 Dec 2022 08:00:20 -0500 Subject: [PATCH 5/5] Fix keyboard picker landscape being too wide. --- src/Time/TimePicker.tsx | 20 ++++++++++++++++++-- src/Time/TimePickerModal.tsx | 9 +++++++-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/Time/TimePicker.tsx b/src/Time/TimePicker.tsx index 7f67583f..d1804b18 100644 --- a/src/Time/TimePicker.tsx +++ b/src/Time/TimePicker.tsx @@ -84,7 +84,24 @@ function TimePicker({ - + <>