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>(
({ 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);

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

@ -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>