Unverified Commit 6bbcd43b authored by Torkel Ödegaard's avatar Torkel Ödegaard Committed by GitHub
Browse files

Switch: Another design update (#33170)

parent d3e510e9
......@@ -12,7 +12,7 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
}
export const Switch = React.forwardRef<HTMLInputElement, Props>(
({ value, checked, disabled = false, onChange, id, ...inputProps }, ref) => {
({ value, checked, disabled, onChange, id, ...inputProps }, ref) => {
if (checked) {
deprecationWarning('Switch', 'checked prop', 'value');
}
......@@ -75,6 +75,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
&:checked + label {
background: ${theme.v2.palette.primary.main};
border-color: ${theme.v2.palette.primary.main};
&:hover {
background: ${theme.v2.palette.primary.shade};
......@@ -82,6 +83,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
&::after {
transform: translate3d(18px, -50%, 0);
background: ${theme.v2.palette.primary.contrastText};
}
}
......@@ -101,11 +103,12 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
cursor: pointer;
border: none;
border-radius: 50px;
background: ${theme.v2.palette.secondary.main};
background: ${theme.v2.components.input.background};
border: 1px solid ${theme.v2.components.input.border};
transition: all 0.3s ease;
&:hover {
background: ${theme.v2.palette.secondary.shade};
border-color: ${theme.v2.components.input.borderHover};
}
&::after {
......@@ -115,7 +118,8 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
width: 12px;
height: 12px;
border-radius: 6px;
background: ${theme.v2.palette.text.primary};
background: ${theme.v2.palette.text.secondary};
box-shadow: ${theme.v2.shadows.z1};
top: 50%;
transform: translate3d(2px, -50%, 0);
transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);
......
......@@ -148,8 +148,8 @@ export const ThemeDemo = () => {
<Field label="Switch true">
<Switch value={true} />
</Field>
<Field label="Switch false disabled">
<Switch value={false} disabled />
<Field label="Switch false disabled" disabled={true}>
<Switch value={false} />
</Field>
</HorizontalGroup>
<VerticalGroup>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment