Skip to content

F
frontend
Commit eb7637a9 authored by tom's avatar tom
Browse files
Options

input showcase

parent 2d99aba9
Show whitespace changes
Inline Side-by-side
Showing with 209 additions and 152 deletions
toolkit/theme/foundations/semanticTokens.ts
View file @ eb7637a9
...@@ -191,12 +191,11 @@ const semanticTokens: ThemingConfig['semanticTokens'] = { ...@@ -191,12 +191,11 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } }, DEFAULT: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
}, },
bg: { bg: {
info: { value: { _light: '{colors.blue.100}', _dark: '{colors.blue.900}' } }, info: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
warning: { value: { _light: '{colors.orange.100}', _dark: '{colors.orange.800/60}' } }, warning: { value: { _light: '{colors.orange.100}', _dark: '{colors.orange.800/60}' } },
warning_table: { value: { _light: '{colors.orange.50}', _dark: '{colors.orange.800/60}' } }, warning_table: { value: { _light: '{colors.orange.50}', _dark: '{colors.orange.800/60}' } },
success: { value: { _light: '{colors.green.100}', _dark: '{colors.green.900}' } }, success: { value: { _light: '{colors.green.100}', _dark: '{colors.green.900}' } },
error: { value: { _light: '{colors.red.100}', _dark: '{colors.red.900}' } }, error: { value: { _light: '{colors.red.100}', _dark: '{colors.red.900}' } },
neutral: { value: { _light: '{colors.blackAlpha.50}', _dark: '{colors.whiteAlpha.100}' } },
}, },
}, },
input: { input: {
......
toolkit/theme/recipes/alert.recipe.ts
View file @ eb7637a9
...@@ -84,15 +84,6 @@ export const recipe = defineSlotRecipe({ ...@@ -84,15 +84,6 @@ export const recipe = defineSlotRecipe({
color: 'alert.fg', color: 'alert.fg',
}, },
}, },
neutral: {
root: {
bgColor: 'alert.bg.neutral',
'&:not([data-loading], [aria-busy=true])': {
bgColor: 'alert.bg.neutral',
},
color: 'alert.fg',
},
},
}, },
variant: { variant: {
...@@ -139,7 +130,7 @@ export const recipe = defineSlotRecipe({ ...@@ -139,7 +130,7 @@ export const recipe = defineSlotRecipe({
}, },
defaultVariants: { defaultVariants: {
status: 'neutral', status: 'info',
size: 'md', size: 'md',
inline: true, inline: true,
variant: 'subtle', variant: 'subtle',
......
ui/pages/Chakra.tsx
View file @ eb7637a9
...@@ -3,12 +3,11 @@ ...@@ -3,12 +3,11 @@
import { HStack, Spinner, VStack } from '@chakra-ui/react'; import { HStack, Spinner, VStack } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
import { Button } from 'toolkit/chakra/button'; import { Button } from 'toolkit/chakra/button';
import { useColorMode } from 'toolkit/chakra/color-mode'; import { useColorMode } from 'toolkit/chakra/color-mode';
import { Field } from 'toolkit/chakra/field'; import { Field } from 'toolkit/chakra/field';
import { Heading } from 'toolkit/chakra/heading'; import { Heading } from 'toolkit/chakra/heading';
import { Input } from 'toolkit/chakra/input';
import { InputGroup } from 'toolkit/chakra/input-group';
import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select'; import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
import { PinInput } from 'toolkit/chakra/pin-input'; import { PinInput } from 'toolkit/chakra/pin-input';
import { ProgressCircleRing, ProgressCircleRoot } from 'toolkit/chakra/progress-circle'; import { ProgressCircleRing, ProgressCircleRoot } from 'toolkit/chakra/progress-circle';
...@@ -18,27 +17,28 @@ import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tab ...@@ -18,27 +17,28 @@ import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tab
import { Textarea } from 'toolkit/chakra/textarea'; import { Textarea } from 'toolkit/chakra/textarea';
import { toaster } from 'toolkit/chakra/toaster'; import { toaster } from 'toolkit/chakra/toaster';
import ContentLoader from 'ui/shared/ContentLoader'; import ContentLoader from 'ui/shared/ContentLoader';
import IconSvg from 'ui/shared/IconSvg';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import AccordionsShowcase from 'ui/showcases/Accordion'; import AccordionsShowcase from 'ui/showcases/Accordion';
import AlertsShowcase from 'ui/showcases/Alerts'; import AlertShowcase from 'ui/showcases/Alert';
import BadgesShowcase from 'ui/showcases/Badges'; import BadgeShowcase from 'ui/showcases/Badge';
import ButtonShowcase from 'ui/showcases/Button'; import ButtonShowcase from 'ui/showcases/Button';
import CheckboxesShowcase from 'ui/showcases/Checkbox'; import CheckboxShowcase from 'ui/showcases/Checkbox';
import DialogsShowcase from 'ui/showcases/Dialog'; import DialogShowcase from 'ui/showcases/Dialog';
import LinksShowcase from 'ui/showcases/Links'; import InputShowcase from 'ui/showcases/Input';
import MenusShowcase from 'ui/showcases/Menu'; import LinkShowcase from 'ui/showcases/Link';
import MenuShowcase from 'ui/showcases/Menu';
import PaginationShowcase from 'ui/showcases/Pagination'; import PaginationShowcase from 'ui/showcases/Pagination';
import RadiosShowcase from 'ui/showcases/Radio'; import RadioShowcase from 'ui/showcases/Radio';
import SelectsShowcase from 'ui/showcases/Select'; import SelectShowcase from 'ui/showcases/Select';
import TabsShowcase from 'ui/showcases/Tabs'; import TabsShowcase from 'ui/showcases/Tabs';
import TagsShowcase from 'ui/showcases/Tags'; import TagShowcase from 'ui/showcases/Tag';
import TooltipsShowcase from 'ui/showcases/Tooltip'; import TooltipShowcase from 'ui/showcases/Tooltip';
const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const ChakraShowcases = () => { const ChakraShowcases = () => {
const colorMode = useColorMode(); const colorMode = useColorMode();
const isMobile = useIsMobile();
return ( return (
<> <>
...@@ -47,106 +47,44 @@ const ChakraShowcases = () => { ...@@ -47,106 +47,44 @@ const ChakraShowcases = () => {
Color mode: { colorMode.colorMode } Color mode: { colorMode.colorMode }
</Switch> </Switch>
<TabsRoot defaultValue="alerts"> <TabsRoot defaultValue="accordion" orientation={ isMobile ? 'horizontal' : 'vertical' }>
<TabsList flexWrap="wrap"> <TabsList flexWrap="wrap" w="fit-content">
<TabsTrigger value="accordions">Accordions</TabsTrigger> <TabsTrigger value="accordion">Accordion</TabsTrigger>
<TabsTrigger value="alerts">Alerts</TabsTrigger> <TabsTrigger value="alert">Alert</TabsTrigger>
<TabsTrigger value="badges">Badges</TabsTrigger> <TabsTrigger value="badge">Badge</TabsTrigger>
<TabsTrigger value="buttons">Buttons</TabsTrigger> <TabsTrigger value="button">Button</TabsTrigger>
<TabsTrigger value="checkboxes">Checkboxes</TabsTrigger> <TabsTrigger value="checkbox">Checkbox</TabsTrigger>
<TabsTrigger value="dialogs">Dialogs</TabsTrigger> <TabsTrigger value="dialog">Dialog</TabsTrigger>
<TabsTrigger value="links">Links</TabsTrigger> <TabsTrigger value="input">Input</TabsTrigger>
<TabsTrigger value="menus">Menus</TabsTrigger> <TabsTrigger value="link">Link</TabsTrigger>
<TabsTrigger value="menu">Menu</TabsTrigger>
<TabsTrigger value="pagination">Pagination</TabsTrigger> <TabsTrigger value="pagination">Pagination</TabsTrigger>
<TabsTrigger value="radios">Radios</TabsTrigger> <TabsTrigger value="radio">Radio</TabsTrigger>
<TabsTrigger value="selects">Selects</TabsTrigger> <TabsTrigger value="select">Select</TabsTrigger>
<TabsTrigger value="tabs">Tabs</TabsTrigger> <TabsTrigger value="tabs">Tabs</TabsTrigger>
<TabsTrigger value="tags">Tags</TabsTrigger> <TabsTrigger value="tag">Tag</TabsTrigger>
<TabsTrigger value="tooltips">Tooltips</TabsTrigger> <TabsTrigger value="tooltip">Tooltip</TabsTrigger>
<TabsTrigger value="unsorted">Unsorted</TabsTrigger> <TabsTrigger value="unsorted">Unsorted</TabsTrigger>
</TabsList> </TabsList>
<AccordionsShowcase/> <AccordionsShowcase/>
<AlertsShowcase/> <AlertShowcase/>
<BadgesShowcase/> <BadgeShowcase/>
<ButtonShowcase/> <ButtonShowcase/>
<DialogsShowcase/> <CheckboxShowcase/>
<CheckboxesShowcase/> <DialogShowcase/>
<LinksShowcase/> <InputShowcase/>
<MenusShowcase/> <LinkShowcase/>
<TabsShowcase/> <MenuShowcase/>
<PaginationShowcase/> <PaginationShowcase/>
<RadiosShowcase/> <RadioShowcase/>
<SelectsShowcase/> <SelectShowcase/>
<TooltipsShowcase/> <TabsShowcase/>
<TagsShowcase/> <TagShowcase/>
<TooltipShowcase/>
<TabsContent value="unsorted"> <TabsContent value="unsorted">
<VStack align="flex-start" gap={ 6 }> <VStack align="flex-start" gap={ 6 }>
<section> <section>
<Heading textStyle="heading.md" mb={ 2 }>Inputs</Heading>
<Heading textStyle="heading.sm" mb={ 2 }>Regular</Heading>
<HStack gap={ 4 } whiteSpace="nowrap" flexWrap="wrap">
<Field label="Email" required maxWidth="300px">
<Input type="email"/>
</Field>
<Field label="Email" maxWidth="300px">
<Input value="me@example.com"/>
</Field>
<Field label="Email" invalid maxWidth="300px">
<Input value="duck"/>
</Field>
<Field label="Email" readOnly maxWidth="300px">
<Input value="duck"/>
</Field>
<Field label="Email" disabled maxWidth="300px">
<Input value="duck"/>
</Field>
</HStack>
<HStack gap={ 4 } whiteSpace="nowrap" mt={ 4 } alignItems="flex-start" flexWrap="wrap">
<Field label="Email" required size="sm" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="md" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="lg" maxWidth="300px">
<Input/>
</Field>
<Field label="Email" required size="xl" maxWidth="300px">
<Input/>
</Field>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Floating (only XL size)</Heading>
<HStack gap={ 4 } mt={ 4 } alignItems="flex-start" flexWrap="wrap">
<Field label="Email" required floating size="xl" helperText="Helper text" w="300px">
<Input type="email"/>
</Field>
<Field label="Email" required floating invalid errorText="Something went wrong" size="xl" w="300px">
<Input type="email"/>
</Field>
</HStack>
<HStack p={ 6 } mt={ 4 } gap={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} flexWrap="wrap">
<Field label="Email" required floating size="xl" w="300px">
<Input type="email"/>
</Field>
<Field label="Email" required floating disabled size="xl" w="300px">
<Input type="email" value="me@example.com"/>
</Field>
<Field label="Email" required floating readOnly size="xl" w="300px">
<Input type="email" value="me@example.com"/>
</Field>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Input group</Heading>
<HStack gap={ 4 } mt={ 4 } alignItems="flex-start" w="fit-content" flexWrap="wrap">
<Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 } helperText="Helper text">
<InputGroup endElement={ <IconSvg name="copy" boxSize={ 5 }/> }>
<Input/>
</InputGroup>
</Field>
<InputGroup startElement={ <IconSvg name="search" boxSize={ 5 }/> }>
<Input placeholder="Search"/>
</InputGroup>
</HStack>
<Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Pin input</Heading> <Heading textStyle="heading.sm" mb={ 2 } mt={ 6 }>Pin input</Heading>
<HStack mt={ 4 }> <HStack mt={ 4 }>
<PinInput otp count={ 3 }/> <PinInput otp count={ 3 }/>
......
ui/showcases/Accordion.tsx
View file @ eb7637a9
...@@ -13,9 +13,9 @@ const items = [ ...@@ -13,9 +13,9 @@ const items = [
// https://eth-sepolia.k8s-dev.blockscout.com/address/0x00000000000000ADc04C56Bf30aC9d3c0aAF14dC?tab=read_write_contract // https://eth-sepolia.k8s-dev.blockscout.com/address/0x00000000000000ADc04C56Bf30aC9d3c0aAF14dC?tab=read_write_contract
// https://base.blockscout.com/token/0x8f9C456C928a33a3859Fa283fb57B23c908fE843/instance/1924977?tab=metadata // https://base.blockscout.com/token/0x8f9C456C928a33a3859Fa283fb57B23c908fE843/instance/1924977?tab=metadata
const AccordionsShowcase = () => { const AccordionShowcase = () => {
return ( return (
<Container value="accordions"> <Container value="accordion">
<Section> <Section>
<SectionHeader>Variant</SectionHeader> <SectionHeader>Variant</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -69,4 +69,4 @@ const AccordionsShowcase = () => { ...@@ -69,4 +69,4 @@ const AccordionsShowcase = () => {
); );
}; };
export default React.memo(AccordionsShowcase); export default React.memo(AccordionShowcase);
ui/showcases/Alerts.tsx → ui/showcases/Alert.tsx
View file @ eb7637a9
...@@ -9,18 +9,15 @@ import TxPendingAlert from 'ui/tx/TxPendingAlert'; ...@@ -9,18 +9,15 @@ import TxPendingAlert from 'ui/tx/TxPendingAlert';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const AlertsShowcase = () => { const AlertShowcase = () => {
return ( return (
<Container value="alerts"> <Container value="alert">
<Section> <Section>
<SectionHeader>Status</SectionHeader> <SectionHeader>Status</SectionHeader>
<SamplesStack> <SamplesStack>
<Sample label="status: info"> <Sample label="status: info">
<Alert status="info" title="Info"> Alert content </Alert> <Alert status="info" title="Info"> Alert content </Alert>
</Sample> </Sample>
<Sample label="status: neutral">
<Alert status="neutral" title="Neutral"> Alert content </Alert>
</Sample>
<Sample label="status: warning"> <Sample label="status: warning">
<Alert status="warning" title="Warning"> Alert content </Alert> <Alert status="warning" title="Warning"> Alert content </Alert>
</Sample> </Sample>
...@@ -125,4 +122,4 @@ const AlertsShowcase = () => { ...@@ -125,4 +122,4 @@ const AlertsShowcase = () => {
); );
}; };
export default React.memo(AlertsShowcase); export default React.memo(AlertShowcase);
ui/showcases/Badges.tsx → ui/showcases/Badge.tsx
View file @ eb7637a9
...@@ -6,9 +6,9 @@ import StatusTag from 'ui/shared/statusTag/StatusTag'; ...@@ -6,9 +6,9 @@ import StatusTag from 'ui/shared/statusTag/StatusTag';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const BadgesShowcase = () => { const BadgeShowcase = () => {
return ( return (
<Container value="badges"> <Container value="badge">
<Section> <Section>
<SectionHeader>Color palette</SectionHeader> <SectionHeader>Color palette</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -112,4 +112,4 @@ const BadgesShowcase = () => { ...@@ -112,4 +112,4 @@ const BadgesShowcase = () => {
); );
}; };
export default React.memo(BadgesShowcase); export default React.memo(BadgeShowcase);
ui/showcases/Button.tsx
View file @ eb7637a9
...@@ -10,7 +10,7 @@ import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHead ...@@ -10,7 +10,7 @@ import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHead
const ButtonShowcase = () => { const ButtonShowcase = () => {
return ( return (
<Container value="buttons"> <Container value="button">
<Section> <Section>
<SectionHeader>Size</SectionHeader> <SectionHeader>Size</SectionHeader>
<SamplesStack> <SamplesStack>
......
ui/showcases/Checkbox.tsx
View file @ eb7637a9
...@@ -4,10 +4,10 @@ import { Checkbox } from 'toolkit/chakra/checkbox'; ...@@ -4,10 +4,10 @@ import { Checkbox } from 'toolkit/chakra/checkbox';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const CheckboxesShowcase = () => { const CheckboxShowcase = () => {
return ( return (
<Container value="checkboxes"> <Container value="checkbox">
<Section> <Section>
<SectionHeader>Variant</SectionHeader> <SectionHeader>Variant</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -41,4 +41,4 @@ const CheckboxesShowcase = () => { ...@@ -41,4 +41,4 @@ const CheckboxesShowcase = () => {
); );
}; };
export default React.memo(CheckboxesShowcase); export default React.memo(CheckboxShowcase);
ui/showcases/Dialog.tsx
View file @ eb7637a9
...@@ -8,10 +8,10 @@ import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts ...@@ -8,10 +8,10 @@ import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts
const CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; const CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const DialogsShowcase = () => { const DialogShowcase = () => {
return ( return (
<Container value="dialogs"> <Container value="dialog">
<Section> <Section>
<SectionHeader>Size</SectionHeader> <SectionHeader>Size</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -91,4 +91,4 @@ const DialogsShowcase = () => { ...@@ -91,4 +91,4 @@ const DialogsShowcase = () => {
); );
}; };
export default React.memo(DialogsShowcase); export default React.memo(DialogShowcase);
ui/showcases/Input.tsx 0 → 100644
View file @ eb7637a9
import React from 'react';
import { Field } from 'toolkit/chakra/field';
import { Input } from 'toolkit/chakra/input';
import { InputGroup } from 'toolkit/chakra/input-group';
import IconSvg from 'ui/shared/IconSvg';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const InputShowcase = () => {
return (
<Container value="input">
<Section>
<SectionHeader>Size</SectionHeader>
<SamplesStack>
<Sample label="size: sm">
<Input type="text" placeholder="Name" size="sm"/>
</Sample>
<Sample label="size: md">
<Input type="text" placeholder="Name" size="md"/>
</Sample>
<Sample label="size: lg">
<Input type="text" placeholder="Name" size="lg"/>
</Sample>
<Sample label="size: xl">
<Input type="text" placeholder="Name" size="xl"/>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack>
<Sample label="variant: outline" maxW="300px">
<Input type="text" placeholder="Name"/>
<Input type="text" placeholder="Name (disabled)" disabled/>
<Input type="text" placeholder="Name (readOnly)" readOnly/>
<Input type="text" placeholder="Name (invalid)" data-invalid/>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Field</SectionHeader>
<SectionSubHeader>Size</SectionSubHeader>
<SamplesStack>
{ ([ 'sm', 'md', 'lg' ] as const).map((size) => (
<Sample label={ `size: ${ size }` } w="100%" key={ size } alignItems="flex-start">
<Field label="Email" required size={ size } helperText="Helper text" maxWidth="200px">
<Input size={ size }/>
</Field>
<Field label="Email (disabled)" required size={ size } maxWidth="200px">
<Input size={ size } disabled value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required size={ size } maxWidth="200px">
<Input size={ size } readOnly value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required size={ size } errorText="Something went wrong" invalid maxWidth="200px">
<Input size={ size } value="duck"/>
</Field>
</Sample>
)) }
<Sample label="size: xl" w="100%" alignItems="flex-start">
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required floating size="xl" maxWidth="300px">
<Input size="xl" disabled value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required floating size="xl" maxWidth="300px">
<Input size="xl" readOnly value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>
</Field>
</Sample>
</SamplesStack>
<SectionSubHeader>On custom background</SectionSubHeader>
<SamplesStack>
<Sample label="no floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
<Field label="Email" required helperText="Helper text" maxWidth="200px">
<Input/>
</Field>
<Field label="Email (disabled)" required maxWidth="200px">
<Input disabled value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required maxWidth="200px">
<Input readOnly value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required errorText="Something went wrong" invalid maxWidth="200px">
<Input size="xl" value="duck"/>
</Field>
</Sample>
<Sample label="floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required floating size="xl" maxWidth="300px">
<Input size="xl" disabled value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required floating size="xl" maxWidth="300px">
<Input size="xl" readOnly value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>
</Field>
</Sample>
</SamplesStack>
<SectionSubHeader>Input group</SectionSubHeader>
<SamplesStack>
<Sample label="with end element">
<Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 }>
<InputGroup endElement={ <IconSvg name="copy" boxSize={ 5 }/> }>
<Input/>
</InputGroup>
</Field>
</Sample>
<Sample label="with start element">
<InputGroup startElement={ <IconSvg name="search" boxSize={ 5 }/> }>
<Input placeholder="Search"/>
</InputGroup>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(InputShowcase);
ui/showcases/Links.tsx → ui/showcases/Link.tsx
View file @ eb7637a9
...@@ -37,10 +37,10 @@ const TOKEN = { ...@@ -37,10 +37,10 @@ const TOKEN = {
volume_24h: '82069586622.4918', volume_24h: '82069586622.4918',
}; };
const LinksShowcase = () => { const LinkShowcase = () => {
return ( return (
<Container value="links"> <Container value="link">
<Section> <Section>
<SectionHeader>Variants</SectionHeader> <SectionHeader>Variants</SectionHeader>
...@@ -243,4 +243,4 @@ const LinksShowcase = () => { ...@@ -243,4 +243,4 @@ const LinksShowcase = () => {
); );
}; };
export default React.memo(LinksShowcase); export default React.memo(LinkShowcase);
ui/showcases/Menu.tsx
View file @ eb7637a9
...@@ -6,10 +6,10 @@ import IconSvg from 'ui/shared/IconSvg'; ...@@ -6,10 +6,10 @@ import IconSvg from 'ui/shared/IconSvg';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const MenusShowcase = () => { const MenuShowcase = () => {
return ( return (
<Container value="menus"> <Container value="menu">
<Section> <Section>
<SectionHeader>Variant</SectionHeader> <SectionHeader>Variant</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -53,4 +53,4 @@ const MenusShowcase = () => { ...@@ -53,4 +53,4 @@ const MenusShowcase = () => {
); );
}; };
export default React.memo(MenusShowcase); export default React.memo(MenuShowcase);
ui/showcases/Radio.tsx
View file @ eb7637a9
...@@ -4,10 +4,10 @@ import { Radio, RadioGroup } from 'toolkit/chakra/radio'; ...@@ -4,10 +4,10 @@ import { Radio, RadioGroup } from 'toolkit/chakra/radio';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const RadiosShowcase = () => { const RadioShowcase = () => {
return ( return (
<Container value="radios"> <Container value="radio">
<Section> <Section>
<SectionHeader>Variant</SectionHeader> <SectionHeader>Variant</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -77,4 +77,4 @@ const RadiosShowcase = () => { ...@@ -77,4 +77,4 @@ const RadiosShowcase = () => {
); );
}; };
export default React.memo(RadiosShowcase); export default React.memo(RadioShowcase);
ui/showcases/Select.tsx
View file @ eb7637a9
...@@ -21,10 +21,10 @@ const txSortingOptions = createListCollection({ ...@@ -21,10 +21,10 @@ const txSortingOptions = createListCollection({
items: SORT_OPTIONS, items: SORT_OPTIONS,
}); });
const SelectsShowcase = () => { const SelectShowcase = () => {
return ( return (
<Container value="selects"> <Container value="select">
<Section> <Section>
<SectionHeader>Variant</SectionHeader> <SectionHeader>Variant</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -91,4 +91,4 @@ const SelectsShowcase = () => { ...@@ -91,4 +91,4 @@ const SelectsShowcase = () => {
); );
}; };
export default React.memo(SelectsShowcase); export default React.memo(SelectShowcase);
ui/showcases/Tags.tsx → ui/showcases/Tag.tsx
View file @ eb7637a9
...@@ -6,10 +6,10 @@ import EntityTag from 'ui/shared/EntityTags/EntityTag'; ...@@ -6,10 +6,10 @@ import EntityTag from 'ui/shared/EntityTags/EntityTag';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const TagsShowcase = () => { const TagShowcase = () => {
// TODO @tom2drum filtered tags // TODO @tom2drum filtered tags
return ( return (
<Container value="tags"> <Container value="tag">
<Section> <Section>
<SectionHeader>Variant</SectionHeader> <SectionHeader>Variant</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -68,4 +68,4 @@ const TagsShowcase = () => { ...@@ -68,4 +68,4 @@ const TagsShowcase = () => {
); );
}; };
export default React.memo(TagsShowcase); export default React.memo(TagShowcase);
ui/showcases/Tooltip.tsx
View file @ eb7637a9
...@@ -5,9 +5,9 @@ import Utilization from 'ui/shared/Utilization/Utilization'; ...@@ -5,9 +5,9 @@ import Utilization from 'ui/shared/Utilization/Utilization';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const TooltipsShowcase = () => { const TooltipShowcase = () => {
return ( return (
<Container value="tooltips"> <Container value="tooltip">
<Section> <Section>
<SectionHeader>Variant</SectionHeader> <SectionHeader>Variant</SectionHeader>
<SamplesStack> <SamplesStack>
...@@ -35,4 +35,4 @@ const TooltipsShowcase = () => { ...@@ -35,4 +35,4 @@ const TooltipsShowcase = () => {
); );
}; };
export default React.memo(TooltipsShowcase); export default React.memo(TooltipShowcase);
ui/showcases/parts.tsx
View file @ eb7637a9
...@@ -5,7 +5,7 @@ import React from 'react'; ...@@ -5,7 +5,7 @@ import React from 'react';
import { Heading } from 'toolkit/chakra/heading'; import { Heading } from 'toolkit/chakra/heading';
import { TabsContent } from 'toolkit/chakra/tabs'; import { TabsContent } from 'toolkit/chakra/tabs';
export const Container = (props: TabsContentProps) => <TabsContent display="flex" flexDirection="column" gap={ 6 } { ...props }/>; export const Container = (props: TabsContentProps) => <TabsContent display="flex" flexDirection="column" gap={ 6 } w="100%" { ...props }/>;
export const Section = ({ children }: { children: React.ReactNode }) => <section>{ children }</section>; export const Section = ({ children }: { children: React.ReactNode }) => <section>{ children }</section>;
export const SectionHeader = ({ children }: { children: React.ReactNode }) => <Heading level="2" mb={ 4 }>{ children }</Heading>; export const SectionHeader = ({ children }: { children: React.ReactNode }) => <Heading level="2" mb={ 4 }>{ children }</Heading>;
export const SectionSubHeader = ({ children }: { children: React.ReactNode }) => <Heading level="3" mb={ 3 } _notFirst={{ mt: 4 }}>{ children }</Heading>; export const SectionSubHeader = ({ children }: { children: React.ReactNode }) => <Heading level="3" mb={ 3 } _notFirst={{ mt: 4 }}>{ children }</Heading>;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment