-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(list): improves the List component
Improves the design of the list and simplifies some of the fix #195
- Loading branch information
1 parent
117279a
commit 6780c46
Showing
12 changed files
with
374 additions
and
218 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| [{"/workspaces/components/src/stitches.config.ts":"1"},{"size":17197,"mtime":1627388069412,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"3iazni","/workspaces/components/src/stitches.config.ts",[]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,153 @@ | ||
| import React from 'react' | ||
| import { mdiBluetooth, mdiComment, mdiWifi } from '@mdi/js' | ||
| import { action } from '@storybook/addon-actions' | ||
| import { Meta } from '@storybook/react' | ||
| import React from 'react' | ||
| import { | ||
| List, | ||
| ListItem, | ||
| ListItemIcon, | ||
| ListItemSecondaryAction, | ||
| ListItemText, | ||
| } from '.' | ||
| import { Box, Button, Flex } from '..' | ||
|
|
||
| import { Check } from '../Icons' | ||
| import { Checkbox, Svg, Switch } from '..' | ||
|
|
||
| export default { | ||
| title: 'Components/List', | ||
| component: List, | ||
| subcomponents: { | ||
| ListItem, | ||
| ListItemIcon, | ||
| ListItemSecondaryAction, | ||
| ListItemText, | ||
| }, | ||
| } as Meta | ||
|
|
||
| export const Default: React.FC = () => { | ||
| return ( | ||
| <Flex css={{ background: '$background', justifyContent: 'center' }}> | ||
| <Box css={{ background: '$paper', minWidth: '500px', margin: '$3' }}> | ||
| <List as="nav" aria-label="main mailbox folders"> | ||
| <ListItem interactive> | ||
| <ListItemIcon> | ||
| {/* drafts */} | ||
| <Check /> | ||
| </ListItemIcon> | ||
| <ListItemText text="Inbox" /> | ||
| </ListItem> | ||
| <ListItem interactive> | ||
| <ListItemIcon> | ||
| {/* inbox */} | ||
| <Check /> | ||
| </ListItemIcon> | ||
| <ListItemText text="Drafts" /> | ||
| </ListItem> | ||
| </List> | ||
| <hr /> | ||
| <List as="nav" aria-label="secondary mailbox folders"> | ||
| <ListItem interactive> | ||
| <ListItemText text="Trash" /> | ||
| </ListItem> | ||
| <ListItem interactive> | ||
| <ListItemText text="Spam" /> | ||
| </ListItem> | ||
| </List> | ||
| </Box> | ||
| </Flex> | ||
| ) | ||
| } | ||
| export const Default: React.FC = () => ( | ||
| <List> | ||
| <ListItem> | ||
| <ListItemText text="Item 1" /> | ||
| </ListItem> | ||
| <ListItem> | ||
| <ListItemText text="Item 2" /> | ||
| </ListItem> | ||
| </List> | ||
| ) | ||
|
|
||
| export const WithIcons: React.FC = () => { | ||
| return ( | ||
| <Flex css={{ background: '$background', justifyContent: 'center' }}> | ||
| <Box css={{ background: '$paper', minWidth: '500px', margin: '$3' }}> | ||
| <List> | ||
| <ListItem interactive> | ||
| <ListItemIcon> | ||
| {/* | ||
| button in a button | ||
| causes browser to lockup | ||
| <Checkbox/> | ||
| */} | ||
| </ListItemIcon> | ||
| <ListItemText text={`Line item`} /> | ||
| <ListItemSecondaryAction> | ||
| <Button aria-label="comments"> | ||
| {/* comment */} | ||
| <Check /> | ||
| </Button> | ||
| </ListItemSecondaryAction> | ||
| </ListItem> | ||
| </List> | ||
| </Box> | ||
| </Flex> | ||
| ) | ||
| } | ||
| export const Interactive: React.FC = () => ( | ||
| <List> | ||
| <ListItem interactive onClick={action('Item 1')}> | ||
| <ListItemText text={`Line item 1`} /> | ||
| </ListItem> | ||
| <ListItem interactive onClick={action('Item 2')}> | ||
| <ListItemText text={`Line item 2`} /> | ||
| </ListItem> | ||
| <ListItem interactive disabled onClick={action('Item 3')}> | ||
| <ListItemText text={`Line item 3`} /> | ||
| </ListItem> | ||
| </List> | ||
| ) | ||
|
|
||
| export const WithSecondary: React.FC = () => { | ||
| /** List items can be marked as selected and the color can be controlled through the css variable `$$selectionColor` */ | ||
| export const Selectable: React.FC = () => { | ||
| const [selected, setSelected] = React.useState('') | ||
| return ( | ||
| <Flex css={{ background: '$background', justifyContent: 'center' }}> | ||
| <Box css={{ background: '$paper', minWidth: '500px', margin: '$3' }}> | ||
| <List> | ||
| <ListItem> | ||
| <ListItemText text="Item" subtext="secondary" /> | ||
| </ListItem> | ||
| </List> | ||
| </Box> | ||
| </Flex> | ||
| <List> | ||
| <ListItem | ||
| interactive | ||
| selected={selected === 'Item 1'} | ||
| onClick={() => setSelected('Item 1')} | ||
| > | ||
| <ListItemText text={`Line item 1`} /> | ||
| </ListItem> | ||
| <ListItem | ||
| css={{ $$selectionColor: '$colors$errorHighlight' }} | ||
| interactive | ||
| selected={selected === 'Item 2'} | ||
| onClick={() => setSelected('Item 2')} | ||
| > | ||
| <ListItemText text={`Line item 2`} /> | ||
| </ListItem> | ||
| <ListItem | ||
| interactive | ||
| disabled | ||
| selected={selected === 'Item 3'} | ||
| onClick={() => setSelected('Item 3')} | ||
| > | ||
| <ListItemText text={`Line item 3`} /> | ||
| </ListItem> | ||
| </List> | ||
| ) | ||
| } | ||
|
|
||
| export const WithBorder: React.FC = () => ( | ||
| <List border> | ||
| <ListItem> | ||
| <ListItemText text="Item 1" /> | ||
| </ListItem> | ||
| <ListItem> | ||
| <ListItemText text="Item 2" /> | ||
| </ListItem> | ||
| </List> | ||
| ) | ||
|
|
||
| export const WithSecondaryActions: React.FC = () => ( | ||
| <List> | ||
| <ListItem> | ||
| <ListItemText text={`Line item 1`} /> | ||
| <ListItemSecondaryAction | ||
| path={mdiComment} | ||
| onClick={action('Secondary Item 1')} | ||
| /> | ||
| </ListItem> | ||
| <ListItem> | ||
| <ListItemText text={`Line item 2`} /> | ||
| <ListItemSecondaryAction | ||
| path={mdiComment} | ||
| onClick={action('Secondary Item 2')} | ||
| /> | ||
| </ListItem> | ||
| </List> | ||
| ) | ||
|
|
||
| export const WithSubtext: React.FC = () => ( | ||
| <List> | ||
| <ListItem> | ||
| <ListItemText text="Item 1" subtext="Secondary item text" /> | ||
| </ListItem> | ||
| <ListItem> | ||
| <ListItemText text="Item 2" subtext="Secondary item text" /> | ||
| </ListItem> | ||
| </List> | ||
| ) | ||
|
|
||
| export const WithSwitches: React.FC = () => ( | ||
| <List> | ||
| <ListItem> | ||
| <ListItemIcon> | ||
| <Svg path={mdiWifi} /> | ||
| </ListItemIcon> | ||
| <ListItemText text="Wi-Fi" /> | ||
| <Switch /> | ||
| </ListItem> | ||
| <ListItem> | ||
| <ListItemIcon> | ||
| <Svg path={mdiBluetooth} /> | ||
| </ListItemIcon> | ||
| <ListItemText text="Bluetooth" /> | ||
| <Switch /> | ||
| </ListItem> | ||
| </List> | ||
| ) | ||
|
|
||
| export const WithCheckbox: React.FC = () => ( | ||
| <List> | ||
| <ListItem> | ||
| <ListItemText text="Wi-Fi" /> | ||
| <Checkbox /> | ||
| </ListItem> | ||
| <ListItem> | ||
| <ListItemText text="Bluetooth" /> | ||
| <Checkbox /> | ||
| </ListItem> | ||
| </List> | ||
| ) |
Oops, something went wrong.