Revert temp storybook commit, remove deprecated values
This commit is contained in:
@@ -1,4 +1,3 @@
|
|||||||
import React from 'react'
|
|
||||||
import {View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
|
|
||||||
import {atoms as a} from '#/alf'
|
import {atoms as a} from '#/alf'
|
||||||
@@ -7,7 +6,6 @@ import {
|
|||||||
type ButtonColor,
|
type ButtonColor,
|
||||||
ButtonIcon,
|
ButtonIcon,
|
||||||
ButtonText,
|
ButtonText,
|
||||||
type ButtonVariant,
|
|
||||||
} 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'
|
||||||
@@ -27,232 +25,136 @@ export function Buttons() {
|
|||||||
'negative_secondary',
|
'negative_secondary',
|
||||||
].map(color => (
|
].map(color => (
|
||||||
<View key={color} style={[a.gap_md, a.align_start]}>
|
<View key={color} style={[a.gap_md, a.align_start]}>
|
||||||
{['solid', 'outline', 'ghost'].map(variant => (
|
<Button
|
||||||
<React.Fragment key={variant}>
|
color={color as ButtonColor}
|
||||||
<Button
|
size="large"
|
||||||
variant={variant as ButtonVariant}
|
label="Click here">
|
||||||
color={color as ButtonColor}
|
<ButtonText>Button</ButtonText>
|
||||||
size="large"
|
</Button>
|
||||||
label="Click here">
|
<Button
|
||||||
<ButtonText>Button</ButtonText>
|
disabled
|
||||||
</Button>
|
color={color as ButtonColor}
|
||||||
<Button
|
size="large"
|
||||||
disabled
|
label="Click here">
|
||||||
variant={variant as ButtonVariant}
|
<ButtonText>Button</ButtonText>
|
||||||
color={color as ButtonColor}
|
</Button>
|
||||||
size="large"
|
|
||||||
label="Click here">
|
|
||||||
<ButtonText>Button</ButtonText>
|
|
||||||
</Button>
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={[a.flex_wrap, a.gap_md, a.align_start]}>
|
<View style={[a.flex_wrap, a.gap_md, a.align_start]}>
|
||||||
<Button variant="solid" color="primary" size="large" label="Link out">
|
<Button color="primary" size="large" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="solid" color="primary" size="large" label="Link out">
|
<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 variant="solid" color="primary" size="small" label="Link out">
|
<Button color="primary" size="small" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="solid" color="primary" size="small" label="Link out">
|
<Button color="primary" size="small" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
<ButtonIcon icon={Globe} position="right" />
|
<ButtonIcon icon={Globe} position="right" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button variant="solid" color="primary" size="tiny" label="Link out">
|
<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>
|
</View>
|
||||||
|
|
||||||
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
||||||
<Button variant="solid" color="primary" size="large" label="Link out">
|
<Button color="primary" size="large" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="solid" color="primary" size="large" label="Link out">
|
<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 variant="solid" color="primary" size="large" label="Link out">
|
<Button color="primary" size="large" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
<ButtonIcon icon={Globe} position="right" size="lg" />
|
<ButtonIcon icon={Globe} position="right" size="lg" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="large" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="large"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="large" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="large"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} size="lg" />
|
<ButtonIcon icon={ChevronLeft} size="lg" />
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
||||||
<Button variant="solid" color="primary" size="small" label="Link out">
|
<Button color="primary" size="small" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="solid" color="primary" size="small" label="Link out">
|
<Button color="primary" size="small" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
<ButtonIcon icon={Globe} position="right" />
|
<ButtonIcon icon={Globe} position="right" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="small" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="small" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} size="lg" />
|
<ButtonIcon icon={ChevronLeft} size="lg" />
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
||||||
<Button variant="solid" color="primary" size="tiny" label="Link out">
|
<Button color="primary" size="tiny" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="solid" color="primary" size="tiny" label="Link out">
|
<Button color="primary" size="tiny" label="Link out">
|
||||||
<ButtonText>Button</ButtonText>
|
<ButtonText>Button</ButtonText>
|
||||||
<ButtonIcon icon={Globe} position="right" />
|
<ButtonIcon icon={Globe} position="right" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="tiny" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="tiny"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="tiny" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="tiny"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} size="md" />
|
<ButtonIcon icon={ChevronLeft} size="md" />
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
<View style={[a.flex_row, a.gap_md, a.align_center]}>
|
||||||
<Button
|
<Button color="primary" size="large" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="large"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="small" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="tiny" shape="round" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="tiny"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="large" shape="round" label="Link out">
|
||||||
variant="outline"
|
|
||||||
color="primary"
|
|
||||||
size="large"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="small" shape="round" label="Link out">
|
||||||
variant="ghost"
|
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="tiny" shape="round" label="Link out">
|
||||||
variant="ghost"
|
|
||||||
color="primary"
|
|
||||||
size="tiny"
|
|
||||||
shape="round"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={[a.flex_row, a.gap_md, a.align_start]}>
|
<View style={[a.flex_row, a.gap_md, a.align_start]}>
|
||||||
<Button
|
<Button color="primary" size="large" shape="square" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="large"
|
|
||||||
shape="square"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="small" shape="square" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
shape="square"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="tiny" shape="square" label="Link out">
|
||||||
variant="solid"
|
|
||||||
color="primary"
|
|
||||||
size="tiny"
|
|
||||||
shape="square"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="large" shape="square" label="Link out">
|
||||||
variant="outline"
|
|
||||||
color="primary"
|
|
||||||
size="large"
|
|
||||||
shape="square"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="small" shape="square" label="Link out">
|
||||||
variant="ghost"
|
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
shape="square"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button color="primary" size="tiny" shape="square" label="Link out">
|
||||||
variant="ghost"
|
|
||||||
color="primary"
|
|
||||||
size="tiny"
|
|
||||||
shape="square"
|
|
||||||
label="Link out">
|
|
||||||
<ButtonIcon icon={ChevronLeft} />
|
<ButtonIcon icon={ChevronLeft} />
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -87,8 +87,6 @@ function StorybookInner() {
|
|||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<Buttons />
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
color="primary"
|
color="primary"
|
||||||
size="small"
|
size="small"
|
||||||
|
|||||||
Reference in New Issue
Block a user