Skip to content

Commit

Permalink
Use spacing token instead of marginBottom: 0. Use common textProps fo…
Browse files Browse the repository at this point in the history
…r Label and required text
  • Loading branch information
narin committed Dec 16, 2024
1 parent 8a37721 commit 46322b7
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 24 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const Button: React.FC<ButtonProps> = ({
const getTextStyle = (pressed: boolean): TextStyle => ({
...typography.vadsFontBodyLarge,
fontFamily: family.vadsFontFamilySansSerifBold,
marginBottom: 0,
marginBottom: spacing.vadsSpaceNone,
color: pressed ? textColorPressed : textColor,
})

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/Link/Link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -156,7 +156,7 @@ export const Link: FC<LinkProps> = ({

const textStyle: TextStyle = {
...typography.vadsFontBodyLarge,
marginBottom: 0,
marginBottom: spacing.vadsSpaceNone,
color: linkColor,
textDecorationColor: linkColor,
textDecorationLine: 'underline',
Expand Down
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -93,7 +99,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
const textStyle: TextStyle = {
...typography.vadsFontBodyLarge,
fontFamily: isSelected ? 'SourceSansPro-Bold' : 'SourceSansPro-Regular',
marginBottom: 0,
marginBottom: spacing.vadsSpaceNone,
color: theme.vadsColorForegroundDefault,
textAlign: 'center',
}
Expand All @@ -112,9 +118,9 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
accessibilityState={{ selected: isSelected }}
style={PressableOpacityStyle()}
testID={testIDs?.[index]}>
<Text allowFontScaling={false} style={textStyle}>
<RNText allowFontScaling={false} style={textStyle}>
{label}
</Text>
</RNText>
</Segment>
)
}
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/Snackbar/Snackbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const SnackbarButton: FC<SnackbarButtonProps> = ({ text, onPress }) => {
const helperTextBold: TextStyle = {
...typography.vadsFontBodySmall,
fontFamily: family.vadsFontFamilySansSerifBold,
marginBottom: 0,
marginBottom: spacing.vadsSpaceNone,
}

const getTextStyle = (pressed: boolean): TextStyle => {
Expand Down Expand Up @@ -143,7 +143,7 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {

const helperText: TextStyle = {
...typography.vadsFontBodySmall,
marginBottom: 0,
marginBottom: spacing.vadsSpaceNone,
}

const { isError, messageA11y, onActionPressed } = toast.data || {}
Expand Down
5 changes: 4 additions & 1 deletion packages/components/src/components/Text/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -79,6 +79,9 @@ export const Text: FC<TextProps> = ({
variant = 'body',
}) => {
const theme = useTheme()

if (!children) return null

const { family, typography } = font
let typographyKey, color

Expand Down
29 changes: 15 additions & 14 deletions packages/components/src/components/shared/FormText.tsx
Original file line number Diff line number Diff line change
@@ -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'

Check warning on line 6 in packages/components/src/components/shared/FormText.tsx

View workflow job for this annotation

GitHub Actions / Lint

'SpacerSize' is defined but never used
import { StringOrTextWithA11y } from '../../types/common'
import { Text } from '../Text/Text'
import { Text, TextProps } from '../Text/Text'
import { getA11yLabel, getDisplayText, useTheme } from '../../utils'

type FormTextProps = {
Expand All @@ -30,7 +31,7 @@ export const Header: FC<HeaderProps> = ({ text, required }) => {

const textStyle = {
...typography.vadsFontBodyLarge,
marginBottom: 0,
marginBottom: spacing.vadsSpaceNone,
color: theme.vadsColorForegroundDefault,
}

Expand Down Expand Up @@ -109,20 +110,20 @@ export const Label: FC<LabelProps> = ({ text, error, required }) => {

if (!text) return null

const bold = error ? true : false

const textProps: TextProps = {
variant: 'body',
size: 'lg',
bottomSpacing: 'none',
bold,
}

return (
<Text
variant="body"
size="lg"
bottomSpacing="none"
bold={error ? true : false}>
<Text {...textProps}>
{getDisplayText(text)}
{required && (
<Text
variant="body"
size="lg"
tone="error"
bottomSpacing="none"
bold={error ? true : false}>{` (*${t('required')})`}</Text>
<Text {...textProps} tone="error">{` (*${t('required')})`}</Text>
)}
</Text>
)
Expand Down

0 comments on commit 46322b7

Please sign in to comment.