[APP-1310] Button refresh (#8758)
* Rm gradient buttons from Storybook * TEMP move storybook button section * Remove gradient_sky * Remove actual defs for gradient_sky and gradient_primary * Remove other gradient defs * Remove gradient support entirely * Deprecate 'variant' in favor of 'color' * Fork base styles codepath to make variant deprecation more obvious * Remove text styles for when no color is set, never been used * Fork text styles codepath to make variant deprecation more obvious * Revert temp storybook commit, remove deprecated values * Replace remaining gradient button usage * Update Buttons storybook section * Update tiny styles * Update small styles * Update large sizes * Ensure proper alignment of buttons in storybook * Update button colors * Rename negative_secondary to negative_subtle * Remove unnecessary select() * Update icon size and gap * Update negative_subtle styles * Custom button colors * Add borderCurve
This commit is contained in:
Eric Bailey
@@ -1,3 +1,4 @@
|
||||
import {Fragment} from 'react'
|
||||
import {View} from 'react-native'
|
||||
|
||||
import {atoms as a} from '#/alf'
|
||||
@@ -5,159 +6,82 @@ import {
|
||||
Button,
|
||||
type ButtonColor,
|
||||
ButtonIcon,
|
||||
type ButtonSize,
|
||||
ButtonText,
|
||||
} from '#/components/Button'
|
||||
import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
|
||||
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
|
||||
import {H1} from '#/components/Typography'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function Buttons() {
|
||||
return (
|
||||
<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',
|
||||
'secondary',
|
||||
'secondary_inverted',
|
||||
'negative',
|
||||
'negative_secondary',
|
||||
].map(color => (
|
||||
<View key={color} style={[a.gap_md, a.align_start]}>
|
||||
<Button
|
||||
color={color as ButtonColor}
|
||||
size="large"
|
||||
label="Click here">
|
||||
<ButtonText>Button</ButtonText>
|
||||
</Button>
|
||||
<Button
|
||||
disabled
|
||||
color={color as ButtonColor}
|
||||
size="large"
|
||||
label="Click here">
|
||||
<ButtonText>Button</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={[a.flex_wrap, a.gap_md, a.align_start]}>
|
||||
<Button color="primary" size="large" label="Link out">
|
||||
<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" />
|
||||
<ButtonText>Button</ButtonText>
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
||||
<Button color="primary" size="large" label="Link out">
|
||||
<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="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>
|
||||
{[
|
||||
'primary',
|
||||
'secondary',
|
||||
'secondary_inverted',
|
||||
'negative',
|
||||
'primary_subtle',
|
||||
'negative_subtle',
|
||||
].map(color => (
|
||||
<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.align_start, a.gap_md]}>
|
||||
<Button
|
||||
color={color as ButtonColor}
|
||||
size={size as ButtonSize}
|
||||
label="Click here">
|
||||
<ButtonText>Button</ButtonText>
|
||||
</Button>
|
||||
<Button
|
||||
disabled
|
||||
color={color as ButtonColor}
|
||||
size={size as ButtonSize}
|
||||
label="Click here">
|
||||
<ButtonText>Button</ButtonText>
|
||||
</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 style={[a.flex_row, a.gap_md]}>
|
||||
<Button
|
||||
color={color as ButtonColor}
|
||||
size={size as ButtonSize}
|
||||
label="Click here">
|
||||
<ButtonIcon icon={Globe} position="left" />
|
||||
<ButtonText>Button</ButtonText>
|
||||
</Button>
|
||||
<Button
|
||||
disabled
|
||||
color={color as ButtonColor}
|
||||
size={size as ButtonSize}
|
||||
label="Click here">
|
||||
<ButtonText>Button</ButtonText>
|
||||
<ButtonIcon icon={Globe} position="right" />
|
||||
</Button>
|
||||
</View>
|
||||
</Fragment>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -87,6 +87,7 @@ function StorybookInner() {
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
<Buttons />
|
||||
<Toasts />
|
||||
|
||||
<Button
|
||||
@@ -109,7 +110,6 @@ function StorybookInner() {
|
||||
</ThemeProvider>
|
||||
|
||||
<Forms />
|
||||
<Buttons />
|
||||
<Typography />
|
||||
<Spacing />
|
||||
<Shadows />
|
||||
|
||||
Reference in New Issue
Block a user