Skip to content

Commit a939bd1

Browse files
youngkidwarrioryoungkidwarrior
authored
Custom Link with Button style properties (#480)
2 parents 47ee596 + 9e9730f commit a939bd1

File tree

12 files changed

+889
-797
lines changed

12 files changed

+889
-797
lines changed

‎packages/app/features/account/__snapshots__/screen.test.tsx.snap

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
327327
}
328328
>
329329
<View
330+
accessibilityRole="link"
330331
href="/account/settings/edit-profile"
331332
testID="MockSolitoLink"
332333
>
@@ -351,7 +352,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
351352
"borderTopLeftRadius": 9,
352353
"borderTopRightRadius": 9,
353354
"borderTopWidth": 1,
354-
"color": "#40FB50",
355+
"color": "#111f22",
355356
"fontFamily": "System",
356357
"fontSize": 16.8,
357358
"fontWeight": "400",
@@ -530,6 +531,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
530531
}
531532
>
532533
<View
534+
accessibilityRole="link"
533535
href="/account/sendtag"
534536
testID="MockSolitoLink"
535537
>
@@ -549,7 +551,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
549551
"borderTopLeftRadius": 9,
550552
"borderTopRightRadius": 9,
551553
"borderTopWidth": 1,
552-
"color": "#081619",
554+
"color": "#40FB50",
553555
"fontFamily": "System",
554556
"fontSize": 16.8,
555557
"fontWeight": "400",
@@ -747,6 +749,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
747749
}
748750
>
749751
<View
752+
accessibilityRole="link"
750753
href="/account/rewards"
751754
testID="MockSolitoLink"
752755
>
@@ -766,7 +769,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
766769
"borderTopLeftRadius": 9,
767770
"borderTopRightRadius": 9,
768771
"borderTopWidth": 1,
769-
"color": "#081619",
772+
"color": "#40FB50",
770773
"fontFamily": "System",
771774
"fontSize": 16.8,
772775
"fontWeight": "400",
@@ -1109,6 +1112,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
11091112
}
11101113
>
11111114
<View
1115+
accessibilityRole="link"
11121116
href="/account/sendtag"
11131117
testID="MockSolitoLink"
11141118
>
@@ -1128,7 +1132,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
11281132
"borderTopLeftRadius": 9,
11291133
"borderTopRightRadius": 9,
11301134
"borderTopWidth": 1,
1131-
"color": "#081619",
1135+
"color": "#40FB50",
11321136
"fontFamily": "System",
11331137
"fontSize": 16.8,
11341138
"fontWeight": "400",
@@ -1228,6 +1232,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
12281232
</Text>
12291233
</View>
12301234
<View
1235+
accessibilityRole="link"
12311236
href="/account/rewards"
12321237
testID="MockSolitoLink"
12331238
>
@@ -1247,7 +1252,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
12471252
"borderTopLeftRadius": 9,
12481253
"borderTopRightRadius": 9,
12491254
"borderTopWidth": 1,
1250-
"color": "#081619",
1255+
"color": "#40FB50",
12511256
"fontFamily": "System",
12521257
"fontSize": 16.8,
12531258
"fontWeight": "400",

‎packages/app/features/auth/onboarding/__snapshots__/screen.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -624,7 +624,7 @@ exports[`OnboardingScreen 1`] = `
624624
numberOfLines={1}
625625
style={
626626
{
627-
"color": "#081619",
627+
"color": "#12643F",
628628
"flexGrow": 0,
629629
"flexShrink": 1,
630630
"fontFamily": "System",

‎packages/app/features/auth/sign-in/screen.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const ContinueButton = ({ nextScreen }: { nextScreen: () => void }) => (
8686
<Stack w="100%" jc="center" py="$5" gap="$2">
8787
<Button
8888
variant="outlined"
89-
theme={'green_ghost'}
89+
theme={'green_ghost_dim'}
9090
hoverStyle={{ boc: '$borderColor' }}
9191
bw={1}
9292
br="$5"
@@ -103,7 +103,7 @@ const SignInButtons = ({ nextScreen }: { nextScreen: () => void }) => (
103103
<Button f={1} br="$5" onPress={nextScreen}>
104104
<ButtonText>LOGIN</ButtonText>
105105
</Button>
106-
<Button variant="outlined" theme="ghost" bw={1} f={1} br="$5" onPress={nextScreen}>
106+
<Button variant="outlined" theme="ghost_dim" bw={1} f={1} br="$5" onPress={nextScreen}>
107107
<ButtonText>SIGN UP</ButtonText>
108108
</Button>
109109
</Theme>

‎packages/app/features/deposit/web3/__snapshots__/screen.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1018,7 +1018,7 @@ exports[`DepositWeb3Screen renders the deposit web3 form when wallet is connecte
10181018
numberOfLines={1}
10191019
style={
10201020
{
1021-
"color": "#081619",
1021+
"color": "#12643F",
10221022
"flexGrow": 0,
10231023
"flexShrink": 1,
10241024
"fontFamily": "System",

‎packages/app/features/home/__snapshots__/screen.test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ exports[`HomeScreen 1`] = `
411411
numberOfLines={1}
412412
style={
413413
{
414-
"color": "#081619",
414+
"color": "#12643F",
415415
"flexGrow": 0,
416416
"flexShrink": 1,
417417
"fontFamily": "System",
@@ -440,7 +440,7 @@ exports[`HomeScreen 1`] = `
440440
align="xMidYMid"
441441
bbHeight="32"
442442
bbWidth="32"
443-
color="#081619"
443+
color="#12643F"
444444
fill="none"
445445
focusable={false}
446446
height={32}
@@ -462,7 +462,7 @@ exports[`HomeScreen 1`] = `
462462
},
463463
]
464464
}
465-
tintColor="#081619"
465+
tintColor="#12643F"
466466
vbHeight={24}
467467
vbWidth={24}
468468
width={32}

‎packages/app/features/profile/__snapshots__/screen.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ exports[`ProfileScreen: ProfileScreen 1`] = `
230230
numberOfLines={1}
231231
style={
232232
{
233-
"color": "#081619",
233+
"color": "#12643F",
234234
"flexGrow": 0,
235235
"flexShrink": 1,
236236
"fontFamily": "System",

‎packages/ui/src/components/Link.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Link as SolitoLink, type LinkProps as SolitoLinkProps } from 'solito/link'
2-
import { SizableText, type TextProps } from 'tamagui'
2+
import { SizableText, styled, type TextProps } from 'tamagui'
33

44
export type LinkProps = Omit<SolitoLinkProps, 'passHref' | 'as'> &
55
TextProps & {
@@ -8,6 +8,11 @@ export type LinkProps = Omit<SolitoLinkProps, 'passHref' | 'as'> &
88
title?: string
99
}
1010

11+
const StyledLink = styled(SolitoLink, {
12+
name: 'Link',
13+
role: 'link',
14+
})
15+
1116
export const Link = ({
1217
href = '',
1318
replace,
@@ -20,10 +25,10 @@ export const Link = ({
2025
}: LinkProps) => {
2126
const linkProps = { href, replace, scroll, shallow, prefetch, locale }
2227
return (
23-
<SolitoLink {...linkProps}>
28+
<StyledLink {...linkProps}>
2429
<SizableText tag="span" {...props}>
2530
{children}
2631
</SizableText>
27-
</SolitoLink>
32+
</StyledLink>
2833
)
2934
}

‎packages/ui/src/components/LinkButton.tsx

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { styled, ButtonText, ButtonIcon, ButtonContext } from 'tamagui'
2+
import { withStaticProperties } from '@tamagui/helpers'
3+
import { Link } from './Link'
4+
5+
import { getButtonSized } from '@tamagui/get-button-sized'
6+
7+
const BUTTON_NAME = 'Button'
8+
9+
const LinkButtonFrame = styled(Link, {
10+
name: BUTTON_NAME,
11+
tag: 'a',
12+
context: ButtonContext,
13+
role: 'button',
14+
15+
variants: {
16+
unstyled: {
17+
false: {
18+
display: 'flex',
19+
size: '$true',
20+
justifyContent: 'center',
21+
alignItems: 'center',
22+
flexWrap: 'nowrap',
23+
flexDirection: 'row',
24+
cursor: 'pointer',
25+
26+
bc: '$background',
27+
hoverStyle: {
28+
bc: '$backgroundHover',
29+
},
30+
pressStyle: {
31+
bc: '$backgroundPress',
32+
},
33+
focusStyle: {
34+
bc: '$backgroundFocus',
35+
},
36+
37+
borderWidth: 1,
38+
borderColor: 'transparent',
39+
40+
focusVisibleStyle: {
41+
outlineColor: '$outlineColor',
42+
outlineStyle: 'solid',
43+
outlineWidth: 2,
44+
},
45+
},
46+
},
47+
48+
variant: {
49+
outlined: {
50+
backgroundColor: 'transparent',
51+
borderWidth: 2,
52+
borderColor: '$borderColor',
53+
color: '$borderColor',
54+
hoverStyle: {
55+
backgroundColor: 'transparent',
56+
borderColor: '$borderColorHover',
57+
},
58+
59+
pressStyle: {
60+
backgroundColor: 'transparent',
61+
borderColor: '$borderColorPress',
62+
},
63+
64+
focusVisibleStyle: {
65+
backgroundColor: 'transparent',
66+
borderColor: '$borderColorFocus',
67+
},
68+
},
69+
},
70+
71+
size: {
72+
'...size': getButtonSized,
73+
':number': getButtonSized,
74+
},
75+
76+
disabled: {
77+
true: {
78+
pointerEvents: 'none',
79+
},
80+
},
81+
} as const,
82+
83+
defaultVariants: {
84+
unstyled: process.env.TAMAGUI_HEADLESS === '1' ? true : false,
85+
},
86+
})
87+
88+
export const LinkButton = withStaticProperties(LinkButtonFrame, {
89+
Text: ButtonText,
90+
Icon: ButtonIcon,
91+
})
92+
93+
export type LinkButtonProps = React.ComponentProps<typeof LinkButtonFrame>

‎packages/ui/src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@ export * from './SuperScript'
1313
export * from './BigHeading'
1414
export * from './ProfileAvatar'
1515
export * from './Fade'
16+
export * from './LinkButton'

‎packages/ui/src/themes/componentThemeDefinitions.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,6 @@ export const componentThemeDefinitions = {
4646
parent: 'dark_green',
4747
mask: 'inverseSoften3',
4848
...maskOptions.button,
49-
override: {
50-
color: 0,
51-
},
5249
},
5350
{
5451
parent: '',

‎packages/ui/src/themes/masks.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@ export const masks = {
8383
backgroundHover: plain.backgroundTransparent,
8484
color: plain.borderColor,
8585
colorPress: plain.background,
86-
borderColor: plain.borderColor,
8786
}
8887
}),
8988
}

0 commit comments

Comments
 (0)