acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add round and square buttons

Browse Source
This commit is contained in:
Eric Bailey
2024-01-19 10:44:48 -06:00
parent fb596e7f79
commit 54514d1292
2 changed files with 98 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+25 -5
View File
@@ -27,6 +27,7 @@ export type ButtonColor =
| 'gradient_nordic'
| 'gradient_bonfire'
export type ButtonSize = 'small' | 'large'
export type ButtonShape = 'round' | 'square' | 'default'
export type VariantProps = {
/**
* The style variation of the button
@@ -40,6 +41,10 @@ export type VariantProps = {
* The size of the button
*/
size?: ButtonSize
/**
* The shape of the button
*/
shape?: ButtonShape
}
export type ButtonProps = React.PropsWithChildren<
@@ -74,6 +79,7 @@ export function Button({
variant,
color,
size,
shape = 'default',
label,
disabled = false,
...rest
@@ -262,10 +268,24 @@ export function Button({
}
}
if (size === 'large') {
baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_sm)
} else if (size === 'small') {
baseStyles.push({paddingVertical: 9}, a.px_md, a.rounded_sm, a.gap_sm)
if (shape === 'default') {
if (size === 'large') {
baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_sm)
} else if (size === 'small') {
baseStyles.push({paddingVertical: 9}, a.px_md, a.rounded_sm, a.gap_sm)
}
} else if (shape === 'round' || shape === 'square') {
if (size === 'large') {
baseStyles.push(a.p_lg)
} else if (size === 'small') {
baseStyles.push(a.p_md)
}
if (shape === 'round') {
baseStyles.push(a.rounded_full)
} else if (shape === 'square') {
baseStyles.push(a.rounded_sm)
}
}
return {
@@ -278,7 +298,7 @@ export function Button({
} as ViewStyle,
],
}
}, [t, variant, color, size, disabled])
}, [t, variant, color, size, shape, disabled])
const {gradientColors, gradientHoverColors, gradientLocations} =
React.useMemo(() => {
src/view/screens/Storybook/Buttons.tsx
+73
View File
@@ -11,6 +11,7 @@ import {
} from '#/components/Button'
import {H1} from '#/components/Typography'
import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight'
import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
export function Buttons() {
@@ -91,7 +92,9 @@ export function Buttons() {
)}
</View>
</View>
</View>
<View style={[a.flex_row, a.gap_md, a.align_start]}>
<Button
variant="gradient"
color="gradient_sky"
@@ -119,6 +122,76 @@ export function Buttons() {
<ButtonText>See the world</ButtonText>
</Button>
</View>
<View style={[a.flex_row, a.gap_md, a.align_start]}>
<Button
variant="solid"
color="primary"
size="large"
shape="round"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button
variant="gradient"
color="gradient_sunset"
size="small"
shape="round"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button
variant="outline"
color="primary"
size="large"
shape="round"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button
variant="ghost"
color="primary"
size="small"
shape="round"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
</View>
<View style={[a.flex_row, a.gap_md, a.align_start]}>
<Button
variant="solid"
color="primary"
size="large"
shape="square"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button
variant="gradient"
color="gradient_sunset"
size="small"
shape="square"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button
variant="outline"
color="primary"
size="large"
shape="square"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button
variant="ghost"
color="primary"
size="small"
shape="square"
label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
</View>
</View>
)
}