feat(system): add ButtonGroup component
This commit is contained in:
parent
9c351dd0d0
commit
c14b74002d
|
@ -0,0 +1,5 @@
|
|||
# ButtonGroup
|
||||
|
||||
```tsx
|
||||
import { ButtonGroup } from '@status-im/components'
|
||||
```
|
|
@ -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 }
|
|
@ -0,0 +1,2 @@
|
|||
export type { ButtonGroupProps } from './button-group'
|
||||
export { ButtonGroup } from './button-group'
|
|
@ -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',
|
||||
},
|
||||
})
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue