IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Switch: Another design update (#33170)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-04-20 17:10:05 +02:00 committed by GitHub
parent d3e510e92f
commit 6bbcd43b4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

@ -12,7 +12,7 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
} }
export const Switch = React.forwardRef<HTMLInputElement, Props>( export const Switch = React.forwardRef<HTMLInputElement, Props>(
({ value, checked, disabled = false, onChange, id, ...inputProps }, ref) => { ({ value, checked, disabled, onChange, id, ...inputProps }, ref) => {
if (checked) { if (checked) {
deprecationWarning('Switch', 'checked prop', 'value'); deprecationWarning('Switch', 'checked prop', 'value');
} }
@ -75,6 +75,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
&:checked + label { &:checked + label {
background: ${theme.v2.palette.primary.main}; background: ${theme.v2.palette.primary.main};
border-color: ${theme.v2.palette.primary.main};
&:hover { &:hover {
background: ${theme.v2.palette.primary.shade}; background: ${theme.v2.palette.primary.shade};
@ -82,6 +83,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
&::after { &::after {
transform: translate3d(18px, -50%, 0); transform: translate3d(18px, -50%, 0);
background: ${theme.v2.palette.primary.contrastText};
} }
} }
@ -101,11 +103,12 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
cursor: pointer; cursor: pointer;
border: none; border: none;
border-radius: 50px; 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; transition: all 0.3s ease;
&:hover { &:hover {
background: ${theme.v2.palette.secondary.shade}; border-color: ${theme.v2.components.input.borderHover};
} }
&::after { &::after {
@ -115,7 +118,8 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 6px; border-radius: 6px;
background: ${theme.v2.palette.text.primary}; background: ${theme.v2.palette.text.secondary};
box-shadow: ${theme.v2.shadows.z1};
top: 50%; top: 50%;
transform: translate3d(2px, -50%, 0); transform: translate3d(2px, -50%, 0);
transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.2s cubic-bezier(0.19, 1, 0.22, 1);

4
packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
View File

@ -148,8 +148,8 @@ export const ThemeDemo = () => {
<Field label="Switch true"> <Field label="Switch true">
<Switch value={true} /> <Switch value={true} />
</Field> </Field>
<Field label="Switch false disabled"> <Field label="Switch false disabled" disabled={true}>
<Switch value={false} disabled /> <Switch value={false} />
</Field> </Field>
</HorizontalGroup> </HorizontalGroup>
<VerticalGroup> <VerticalGroup>