From 46322b77526ce1b7ac4ecfdcdcc1c9feac290371 Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Mon, 16 Dec 2024 10:50:05 -0800 Subject: [PATCH] Use spacing token instead of marginBottom: 0. Use common textProps for Label and required text --- .../src/components/Button/Button.tsx | 2 +- .../components/src/components/Link/Link.tsx | 4 +-- .../SegmentedControl/SegmentedControl.tsx | 14 ++++++--- .../src/components/Snackbar/Snackbar.tsx | 4 +-- .../components/src/components/Text/Text.tsx | 5 +++- .../src/components/shared/FormText.tsx | 29 ++++++++++--------- 6 files changed, 34 insertions(+), 24 deletions(-) diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx index 0a4c403b..5e30fd3d 100644 --- a/packages/components/src/components/Button/Button.tsx +++ b/packages/components/src/components/Button/Button.tsx @@ -118,7 +118,7 @@ export const Button: React.FC = ({ const getTextStyle = (pressed: boolean): TextStyle => ({ ...typography.vadsFontBodyLarge, fontFamily: family.vadsFontFamilySansSerifBold, - marginBottom: 0, + marginBottom: spacing.vadsSpaceNone, color: pressed ? textColorPressed : textColor, }) diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx index e5f2efc2..93ab4432 100644 --- a/packages/components/src/components/Link/Link.tsx +++ b/packages/components/src/components/Link/Link.tsx @@ -5,7 +5,7 @@ import { TextProps, TextStyle, } from 'react-native' -import { font } from '@department-of-veterans-affairs/mobile-tokens' +import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens' import { t } from 'i18next' import React, { FC } from 'react' @@ -156,7 +156,7 @@ export const Link: FC = ({ const textStyle: TextStyle = { ...typography.vadsFontBodyLarge, - marginBottom: 0, + marginBottom: spacing.vadsSpaceNone, color: linkColor, textDecorationColor: linkColor, textDecorationLine: 'underline', diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx index 056ad143..4b6bfa4d 100644 --- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx @@ -1,4 +1,10 @@ -import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native' +import { + Pressable, + Text as RNText, + TextStyle, + View, + ViewStyle, +} from 'react-native' import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens' import { useTranslation } from 'react-i18next' import React, { FC, useEffect } from 'react' @@ -93,7 +99,7 @@ export const SegmentedControl: FC = ({ const textStyle: TextStyle = { ...typography.vadsFontBodyLarge, fontFamily: isSelected ? 'SourceSansPro-Bold' : 'SourceSansPro-Regular', - marginBottom: 0, + marginBottom: spacing.vadsSpaceNone, color: theme.vadsColorForegroundDefault, textAlign: 'center', } @@ -112,9 +118,9 @@ export const SegmentedControl: FC = ({ accessibilityState={{ selected: isSelected }} style={PressableOpacityStyle()} testID={testIDs?.[index]}> - + {label} - + ) } diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/packages/components/src/components/Snackbar/Snackbar.tsx index 7afc4a8b..a4690331 100644 --- a/packages/components/src/components/Snackbar/Snackbar.tsx +++ b/packages/components/src/components/Snackbar/Snackbar.tsx @@ -33,7 +33,7 @@ const SnackbarButton: FC = ({ text, onPress }) => { const helperTextBold: TextStyle = { ...typography.vadsFontBodySmall, fontFamily: family.vadsFontFamilySansSerifBold, - marginBottom: 0, + marginBottom: spacing.vadsSpaceNone, } const getTextStyle = (pressed: boolean): TextStyle => { @@ -143,7 +143,7 @@ export const Snackbar: FC = (toast) => { const helperText: TextStyle = { ...typography.vadsFontBodySmall, - marginBottom: 0, + marginBottom: spacing.vadsSpaceNone, } const { isError, messageA11y, onActionPressed } = toast.data || {} diff --git a/packages/components/src/components/Text/Text.tsx b/packages/components/src/components/Text/Text.tsx index 7bdd0a26..8845af70 100644 --- a/packages/components/src/components/Text/Text.tsx +++ b/packages/components/src/components/Text/Text.tsx @@ -63,7 +63,7 @@ type DisplayProps = { export type TextProps = { /** True to set textAlign: center */ center?: boolean - children: React.ReactNode + children?: React.ReactNode /** AccessibilityLabel for the text */ a11yLabel?: string } & (BodyProps | HeadingProps | DisplayProps) @@ -79,6 +79,9 @@ export const Text: FC = ({ variant = 'body', }) => { const theme = useTheme() + + if (!children) return null + const { family, typography } = font let typographyKey, color diff --git a/packages/components/src/components/shared/FormText.tsx b/packages/components/src/components/shared/FormText.tsx index a81371d4..c9f553bd 100644 --- a/packages/components/src/components/shared/FormText.tsx +++ b/packages/components/src/components/shared/FormText.tsx @@ -1,10 +1,11 @@ import { Text as RNText } from 'react-native' -import { font } from '@department-of-veterans-affairs/mobile-tokens' +import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens' import { useTranslation } from 'react-i18next' import React, { FC } from 'react' +import { SpacerSize } from '../Spacer/Spacer' import { StringOrTextWithA11y } from '../../types/common' -import { Text } from '../Text/Text' +import { Text, TextProps } from '../Text/Text' import { getA11yLabel, getDisplayText, useTheme } from '../../utils' type FormTextProps = { @@ -30,7 +31,7 @@ export const Header: FC = ({ text, required }) => { const textStyle = { ...typography.vadsFontBodyLarge, - marginBottom: 0, + marginBottom: spacing.vadsSpaceNone, color: theme.vadsColorForegroundDefault, } @@ -109,20 +110,20 @@ export const Label: FC = ({ text, error, required }) => { if (!text) return null + const bold = error ? true : false + + const textProps: TextProps = { + variant: 'body', + size: 'lg', + bottomSpacing: 'none', + bold, + } + return ( - + {getDisplayText(text)} {required && ( - {` (*${t('required')})`} + {` (*${t('required')})`} )} )