diff --git a/src/view/com/Button.tsx b/src/view/com/Button.tsx index 259ae59771..8aa17ec5a9 100644 --- a/src/view/com/Button.tsx +++ b/src/view/com/Button.tsx @@ -11,11 +11,17 @@ import {atoms, tokens, web, native} from '#/alf' export type ButtonType = 'primary' | 'secondary' | 'negative' export type ButtonSize = 'small' | 'large' - export type VariantProps = { + /** + * The presentation styles of the button + */ type?: ButtonType + /** + * The size of the button + */ size?: ButtonSize } + export type ButtonProps = Omit & VariantProps & { children: diff --git a/src/view/com/Link.tsx b/src/view/com/Link.tsx index f139e2d45c..8ff28f5fb3 100644 --- a/src/view/com/Link.tsx +++ b/src/view/com/Link.tsx @@ -26,9 +26,19 @@ import {useModalControls} from '#/state/modals' import {router} from '#/routes' export type LinkProps = Omit & { - style?: StyleProp // only accept text styles on element itself - warnOnMismatchingLabel?: boolean + /** + * `TextStyle` to apply to the anchor element itself. Does not apply to any children. + */ + style?: StyleProp + /** + * The React Navigation `StackAction` to perform when the link is pressed. + */ action?: 'push' | 'replace' | 'navigate' + /** + * If true, will warn the user if the link text does not match the href. Only + * works for Links with children that are strings i.e. text links. + */ + warnOnMismatchingTextChild?: boolean } & Pick>[0], 'to'> /** @@ -44,7 +54,7 @@ export function Link({ to, style, action = 'push', - warnOnMismatchingLabel, + warnOnMismatchingTextChild, ...rest }: LinkProps) { const t = useTheme() @@ -59,7 +69,7 @@ export function Link({ (e: GestureResponderEvent) => { const label = typeof children === 'string' ? children : '' const requiresWarning = Boolean( - warnOnMismatchingLabel && + warnOnMismatchingTextChild && label && isExternal && linkRequiresWarning(href, label), @@ -118,7 +128,7 @@ export function Link({ [ href, isExternal, - warnOnMismatchingLabel, + warnOnMismatchingTextChild, navigation, action, children,