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
+41 -118
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,18 +6,18 @@ 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',
@@ -24,140 +25,62 @@ export function Buttons() {
'negative', 'negative',
'negative_secondary', 'negative_secondary',
].map(color => ( ].map(color => (
<View key={color} style={[a.gap_md, a.align_start]}> <Fragment key={color}>
{['tiny', 'small', 'large'].map(size => (
<Fragment key={size}>
<Text style={[a.font_heavy, a.text_2xl]}>
color={color} size={size}
</Text>
<View style={[a.flex_row, a.gap_md]}>
<Button <Button
color={color as ButtonColor} color={color as ButtonColor}
size="large" size={size as ButtonSize}
label="Click here"> label="Click here">
<ButtonText>Button</ButtonText> <ButtonText>Button</ButtonText>
</Button> </Button>
<Button <Button
disabled disabled
color={color as ButtonColor} color={color as ButtonColor}
size="large" size={size as ButtonSize}
label="Click here"> label="Click here">
<ButtonText>Button</ButtonText> <ButtonText>Button</ButtonText>
</Button> </Button>
<Button
color={color as ButtonColor}
size={size as ButtonSize}
shape="round"
label="Click here">
<ButtonIcon icon={ChevronLeft} />
</Button>
<Button
color={color as ButtonColor}
size={size as ButtonSize}
shape="square"
label="Click here">
<ButtonIcon icon={ChevronLeft} />
</Button>
</View> </View>
))} <View style={[a.flex_row, a.gap_md]}>
</View> <Button
color={color as ButtonColor}
<View style={[a.flex_wrap, a.gap_md, a.align_start]}> size={size as ButtonSize}
<Button color="primary" size="large" label="Link out"> label="Click here">
<ButtonText>Button</ButtonText>
</Button>
<Button color="primary" size="large" label="Link out">
<ButtonText>Button</ButtonText>
<ButtonIcon icon={Globe} position="right" />
</Button>
<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="tiny" label="Link out">
<ButtonIcon icon={Globe} position="left" /> <ButtonIcon icon={Globe} position="left" />
<ButtonText>Button</ButtonText> <ButtonText>Button</ButtonText>
</Button> </Button>
</View> <Button
disabled
<View style={[a.flex_row, a.gap_md, a.align_center]}> color={color as ButtonColor}
<Button color="primary" size="large" label="Link out"> size={size as ButtonSize}
<ButtonText>Button</ButtonText> label="Click here">
</Button>
<Button color="primary" size="large" label="Link out">
<ButtonText>Button</ButtonText> <ButtonText>Button</ButtonText>
<ButtonIcon icon={Globe} position="right" /> <ButtonIcon icon={Globe} position="right" />
</Button> </Button>
<Button color="primary" size="large" label="Link out">
<ButtonText>Button</ButtonText>
<ButtonIcon icon={Globe} position="right" size="lg" />
</Button>
<Button color="primary" size="large" shape="round" label="Link out">
<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>
</Fragment>
))}
</Fragment>
))}
</View> </View>
) )
} }