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

Update Buttons storybook section

Browse Source
This commit is contained in:
Eric Bailey
2025-07-30 19:00:38 -05:00
parent aef4b87a34
commit 5f5b4dadea
1 changed files with 67 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/screens/Storybook/Buttons.tsx
+67 -144
View File
@@ -1,3 +1,4 @@
import {Fragment} from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
@@ -5,159 +6,81 @@ import {
Button, Button,
type ButtonColor, type ButtonColor,
ButtonIcon, ButtonIcon,
type ButtonSize,
ButtonText, ButtonText,
} from '#/components/Button' } from '#/components/Button'
import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
import {H1} from '#/components/Typography' import {Text} from '#/components/Typography'
export function Buttons() { export function Buttons() {
return ( return (
<View style={[a.gap_md]}> <View style={[a.gap_md]}>
<H1>Buttons</H1> <Text style={[a.font_heavy, a.text_5xl]}>Buttons</Text>
<View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}> {[
{[ 'primary',
'primary', 'secondary',
'secondary', 'secondary_inverted',
'secondary_inverted', 'negative',
'negative', 'negative_secondary',
'negative_secondary', ].map(color => (
].map(color => ( <Fragment key={color}>
<View key={color} style={[a.gap_md, a.align_start]}> {['tiny', 'small', 'large'].map(size => (
<Button <Fragment key={size}>
color={color as ButtonColor} <Text style={[a.font_heavy, a.text_2xl]}>
size="large" color={color} size={size}
label="Click here"> </Text>
<ButtonText>Button</ButtonText> <View style={[a.flex_row, a.gap_md]}>
</Button> <Button
<Button color={color as ButtonColor}
disabled size={size as ButtonSize}
color={color as ButtonColor} label="Click here">
size="large" <ButtonText>Button</ButtonText>
label="Click here"> </Button>
<ButtonText>Button</ButtonText> <Button
</Button> disabled
</View> color={color as ButtonColor}
))} size={size as ButtonSize}
</View> label="Click here">
<ButtonText>Button</ButtonText>
<View style={[a.flex_wrap, a.gap_md, a.align_start]}> </Button>
<Button color="primary" size="large" label="Link out"> <Button
<ButtonText>Button</ButtonText> color={color as ButtonColor}
</Button> size={size as ButtonSize}
<Button color="primary" size="large" label="Link out"> shape="round"
<ButtonText>Button</ButtonText> label="Click here">
<ButtonIcon icon={Globe} position="right" /> <ButtonIcon icon={ChevronLeft} />
</Button> </Button>
<Button
<Button color="primary" size="small" label="Link out"> color={color as ButtonColor}
<ButtonText>Button</ButtonText> size={size as ButtonSize}
</Button> shape="square"
<Button color="primary" size="small" label="Link out"> label="Click here">
<ButtonText>Button</ButtonText> <ButtonIcon icon={ChevronLeft} />
<ButtonIcon icon={Globe} position="right" /> </Button>
</Button> </View>
<View style={[a.flex_row, a.gap_md]}>
<Button color="primary" size="tiny" label="Link out"> <Button
<ButtonIcon icon={Globe} position="left" /> color={color as ButtonColor}
<ButtonText>Button</ButtonText> size={size as ButtonSize}
</Button> label="Click here">
</View> <ButtonIcon icon={Globe} position="left" />
<ButtonText>Button</ButtonText>
<View style={[a.flex_row, a.gap_md, a.align_center]}> </Button>
<Button color="primary" size="large" label="Link out"> <Button
<ButtonText>Button</ButtonText> disabled
</Button> color={color as ButtonColor}
<Button color="primary" size="large" label="Link out"> size={size as ButtonSize}
<ButtonText>Button</ButtonText> label="Click here">
<ButtonIcon icon={Globe} position="right" /> <ButtonText>Button</ButtonText>
</Button> <ButtonIcon icon={Globe} position="right" />
<Button color="primary" size="large" label="Link out"> </Button>
<ButtonText>Button</ButtonText> </View>
<ButtonIcon icon={Globe} position="right" size="lg" /> </Fragment>
</Button> ))}
<Button color="primary" size="large" shape="round" label="Link out"> </Fragment>
<ButtonIcon icon={ChevronLeft} /> ))}
</Button>
<Button color="primary" size="large" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} size="lg" />
</Button>
</View>
<View style={[a.flex_row, a.gap_md, a.align_center]}>
<Button color="primary" size="small" label="Link out">
<ButtonText>Button</ButtonText>
</Button>
<Button color="primary" size="small" label="Link out">
<ButtonText>Button</ButtonText>
<ButtonIcon icon={Globe} position="right" />
</Button>
<Button color="primary" size="small" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="small" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} size="lg" />
</Button>
</View>
<View style={[a.flex_row, a.gap_md, a.align_center]}>
<Button color="primary" size="tiny" label="Link out">
<ButtonText>Button</ButtonText>
</Button>
<Button color="primary" size="tiny" label="Link out">
<ButtonText>Button</ButtonText>
<ButtonIcon icon={Globe} position="right" />
</Button>
<Button color="primary" size="tiny" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="tiny" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} size="md" />
</Button>
</View>
<View style={[a.flex_row, a.gap_md, a.align_center]}>
<Button color="primary" size="large" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="small" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="tiny" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="large" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="small" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="tiny" shape="round" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
</View>
<View style={[a.flex_row, a.gap_md, a.align_start]}>
<Button color="primary" size="large" shape="square" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="small" shape="square" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="tiny" shape="square" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="large" shape="square" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="small" shape="square" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button color="primary" size="tiny" shape="square" label="Link out">
<ButtonIcon icon={ChevronLeft} />
</Button>
</View>
</View> </View>
) )
} }