freenowtech / freenowtech/wave

New ButtonGroup component

Open
#99 5 comments 2 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
67
Forks
31
Avg merge
1d 8h
Merged PRs (30d)
4

Description

We recently needed a group of buttons to be able to select different weekdays.
Screenshot 2021-06-02 at 11 21 08
Screenshot 2021-06-02 at 11 21 00

So I went ahead and created this using the Button and Box component and styling them to our needs.

Styling code:
```
const ButtonGroup = styled(Box)`
border-radius: 4px;
overflow: hidden;
border: ${props =>
props.error ? `1px solid ${Colors.NEGATIVE_ORANGE_900}` : `1px solid ${Colors.AUTHENTIC_BLUE_200}`};
`;

const ButtonGroupItem = styled(Button)`
background: ${props => (props.selected ? Colors.ACTION_BLUE_900 : Colors.WHITE)};
border-top: none;
border-bottom: none;
border-left: none;
border-right: ${props =>
props.selected ? `1px solid ${Colors.ACTION_BLUE_900}` : `1px solid ${Colors.AUTHENTIC_BLUE_200}`};

padding: 0 8px;
min-width: 0;
border-radius: 0;

:nth-child(1) {
border-left: ${props =>
props.selected ? `1px solid ${Colors.ACTION_BLUE_900}` : `1px solid ${Colors.AUTHENTIC_BLUE_200}`};
}

&:hover {
background: ${props => (props.selected ? Colors.ACTION_BLUE_1000 : Colors.AUTHENTIC_BLUE_50)};
}
`;
```
JSX code:
```

{days.map((day, index) => (
handleDayChange(day.value)}
>
{day.label}

))}

```

It feels a little bit hacky overriding a bunch of the styles, but it seemed like the best approach to have the elements look like all other buttons.
What do you think about this solution and do you see this as something worth adding to wave?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.