feat(system): add ButtonGroup component

This commit is contained in:
Pavel Prichodko 2022-04-06 14:47:10 +02:00
parent 9c351dd0d0
commit c14b74002d
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
5 changed files with 91 additions and 0 deletions

View File

@ -0,0 +1,5 @@
# ButtonGroup
```tsx
import { ButtonGroup } from '@status-im/components'
```

View File

@ -0,0 +1,42 @@
import React from 'react'
import { Button, Group } from './styles'
interface Props<V> {
value: V
onChange: (value: V) => void
children: React.ReactElement[]
}
const ButtonGroup = <Value extends string>(props: Props<Value>) => {
const { children, value, onChange } = props
const handleChange = (value: string) => {
// Ensure non-empty value
if (value) {
onChange(value as Value)
}
}
return (
<Group type="single" value={value} onValueChange={handleChange}>
{children}
</Group>
)
}
interface ItemProps {
value: string
children: string
}
const ButtonGroupItem = (props: ItemProps) => {
const { value, children } = props
return <Button value={value}>{children}</Button>
}
ButtonGroup.Item = ButtonGroupItem
export { ButtonGroup }
export type { Props as ButtonGroupProps }

View File

@ -0,0 +1,2 @@
export type { ButtonGroupProps } from './button-group'
export { ButtonGroup } from './button-group'

View File

@ -0,0 +1,41 @@
import { Item, Root } from '@radix-ui/react-toggle-group'
import { styled } from '~/src/styles/config'
export const Group = styled(Root, {
backgroundColor: '$primary-3',
borderRadius: '$2',
height: 36,
display: 'inline-flex',
alignItems: 'stretch',
})
export const Button = styled(Item, {
backgroundColor: '$transparent',
color: '$primary-1',
display: 'inline-flex',
fontSize: 15,
lineHeight: 1.2,
fontWeight: '$500',
padding: '8px 36px',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 1,
'&:first-child': {
marginLeft: 0,
borderTopLeftRadius: '$2',
borderBottomLeftRadius: '$2',
},
'&:last-child': {
borderTopRightRadius: '$2',
borderBottomRightRadius: '$2',
},
'&[data-state=on]': {
backgroundColor: '$primary-1',
color: '$white',
borderRadius: '$2',
},
})

View File

@ -1,6 +1,7 @@
export { Avatar } from './avatar'
export { Box } from './box'
export { Button } from './button'
export { ButtonGroup } from './button-group'
export { ContextMenu, ContextMenuTrigger } from './context-menu'
export { CopyInput } from './copy-input'
export {