From d2893c2d1ad1fb69105396d15b8385f61b78d697 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Tue, 19 Feb 2019 11:17:40 +0100 Subject: [PATCH] Fixes #15506 --- .../src/components/Switch/Switch.tsx | 20 ++++++++++--------- public/sass/components/_switch.scss | 4 ++++ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index feee58386b8..f79de95fd2d 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -17,7 +17,7 @@ export interface State { export class Switch extends PureComponent { state = { - id: _.uniqueId(), + id: _.uniqueId('check-'), }; internalOnChange = (event: React.FormEvent) => { @@ -29,18 +29,20 @@ export class Switch extends PureComponent { render() { const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props; - const labelId = `check-${this.state.id}`; + const labelId = this.state.id; const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`; const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`; return ( - +
+ +
); } } diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index 92756f81a76..f7980215659 100644 --- a/public/sass/components/_switch.scss +++ b/public/sass/components/_switch.scss @@ -13,6 +13,10 @@ gf-form-switch[disabled] { } } +.gf-form-switch-container-react { + display: flex; +} + .gf-form-switch-container { display: flex; cursor: pointer;