Fix noninteractive toggle (#8383)

- Use a label to make the whole card interactive
- Disallow the Toggle component to shrink; it used to on mobile devices

A focus indicator is missing for the Toggle component. We'll have to add
one.
This commit is contained in:
Baptiste Devessier
2024-11-08 12:42:15 +01:00
committed by GitHub
parent 8b5e90aca9
commit f3e3c186dc
5 changed files with 58 additions and 50 deletions

View File

@ -12,6 +12,7 @@ type ContainerProps = {
};
const StyledContainer = styled.label<ContainerProps>`
flex-shrink: 0;
align-items: center;
background-color: ${({ theme, isOn, color }) =>
isOn ? (color ?? theme.color.blue) : theme.background.transparent.medium};