Chore: Move Switch SCSS to emotion/angular (#88553)
move switch scss to emotion/angular
This commit is contained in:
Ashley Harrison
@@ -7732,11 +7732,6 @@ exports[`no gf-form usage`] = {
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { Placement } from '@popperjs/core';
|
||||
import { uniqueId } from 'lodash';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
import { withTheme2 } from '../../../../themes';
|
||||
import { Themeable2 } from '../../../../types';
|
||||
import { Icon } from '../../../Icon/Icon';
|
||||
import { Tooltip } from '../../../Tooltip/Tooltip';
|
||||
|
||||
export interface Props {
|
||||
export interface Props extends Themeable2 {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
disabled?: boolean;
|
||||
@@ -23,7 +28,7 @@ export interface State {
|
||||
}
|
||||
|
||||
/** @deprecated Please use the `Switch` component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-switch--controlled as seen in Storybook} */
|
||||
export class Switch extends PureComponent<Props, State> {
|
||||
class UnthemedSwitch extends PureComponent<Props, State> {
|
||||
state = {
|
||||
id: uniqueId(),
|
||||
};
|
||||
@@ -42,17 +47,21 @@ export class Switch extends PureComponent<Props, State> {
|
||||
disabled,
|
||||
transparent,
|
||||
className,
|
||||
theme,
|
||||
tooltip,
|
||||
tooltipPlacement,
|
||||
} = this.props;
|
||||
const styles = getStyles(theme);
|
||||
|
||||
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' : ''}`;
|
||||
const switchClassName = cx(styles.switch, switchClass, {
|
||||
[styles.switchTransparent]: transparent,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="gf-form-switch-container-react">
|
||||
<label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
|
||||
<div className={styles.container}>
|
||||
<label htmlFor={labelId} className={cx('gf-form', styles.labelContainer, className)}>
|
||||
{label && (
|
||||
<div className={labelClassName}>
|
||||
{label}
|
||||
@@ -71,10 +80,76 @@ export class Switch extends PureComponent<Props, State> {
|
||||
checked={checked}
|
||||
onChange={this.internalOnChange}
|
||||
/>
|
||||
<span className="gf-form-switch__slider" />
|
||||
<span className={styles.slider} />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const Switch = withTheme2(UnthemedSwitch);
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => {
|
||||
const slider = css({
|
||||
background: theme.v1.palette.gray1,
|
||||
borderRadius: theme.shape.radius.pill,
|
||||
height: '16px',
|
||||
width: '32px',
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
content: "''",
|
||||
height: '12px',
|
||||
width: '12px',
|
||||
left: '2px',
|
||||
top: '2px',
|
||||
background: theme.components.input.background,
|
||||
transition: '0.4s',
|
||||
borderRadius: theme.shape.radius.circle,
|
||||
boxShadow: theme.shadows.z1,
|
||||
},
|
||||
});
|
||||
return {
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexShrink: 0,
|
||||
}),
|
||||
labelContainer: css({
|
||||
display: 'flex',
|
||||
cursor: 'pointer',
|
||||
marginRight: theme.spacing(0.5),
|
||||
}),
|
||||
switch: css({
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
width: '56px',
|
||||
height: theme.spacing(4),
|
||||
background: theme.components.input.background,
|
||||
border: `1px solid ${theme.components.input.borderColor}`,
|
||||
borderRadius: theme.shape.radius.default,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
input: {
|
||||
opacity: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
[`input:checked + .${slider}`]: {
|
||||
background: theme.colors.primary.main,
|
||||
},
|
||||
|
||||
[`input:checked + .${slider}::before`]: {
|
||||
transform: 'translateX(16px)',
|
||||
},
|
||||
}),
|
||||
switchTransparent: css({
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
width: '40px',
|
||||
}),
|
||||
slider,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1268,3 +1268,133 @@ div.editor-option label {
|
||||
border-radius: 5px;
|
||||
counter-reset: flag;
|
||||
}
|
||||
|
||||
gf-form-switch[disabled] {
|
||||
.gf-form-switch,
|
||||
.gf-form-switch-container {
|
||||
cursor: default;
|
||||
pointer-events: none !important;
|
||||
.gf-form-label {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-switch-container {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
|
||||
.gf-form-switch {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: $input-height;
|
||||
background: $switch-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-switch__slider {
|
||||
background: $switch-slider-off-bg;
|
||||
border-radius: 8px;
|
||||
height: 16px;
|
||||
width: 32px;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background: $switch-slider-color;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
box-shadow: $switch-slider-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__slider {
|
||||
background: $switch-slider-on-bg;
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__slider::before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.gf-form-checkbox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: $input-height;
|
||||
background: $switch-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
border-left: none;
|
||||
border-radius: $input-border-radius;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: 23px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&--table-cell {
|
||||
width: 20px;
|
||||
background: transparent;
|
||||
height: auto;
|
||||
border: none;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-switch__checkbox {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
border: $checkbox-border;
|
||||
background: $checkbox-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__checkbox::before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f00c';
|
||||
color: $checkbox-color;
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__checkbox {
|
||||
background: $checkbox-checked-bg;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,6 @@
|
||||
@import 'components/scrollbar';
|
||||
@import 'components/buttons';
|
||||
@import 'components/alerts';
|
||||
@import 'components/switch';
|
||||
@import 'components/tags';
|
||||
@import 'components/submenu';
|
||||
@import 'components/gf-form';
|
||||
|
||||
@@ -1,139 +0,0 @@
|
||||
/* ============================================================
|
||||
SWITCH 3 - YES NO
|
||||
============================================================ */
|
||||
|
||||
gf-form-switch[disabled] {
|
||||
.gf-form-switch,
|
||||
.gf-form-switch-container {
|
||||
cursor: default;
|
||||
pointer-events: none !important;
|
||||
.gf-form-label {
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-switch-container-react {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.gf-form-switch-container {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-right: $space-xs;
|
||||
}
|
||||
|
||||
.gf-form-switch {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: $input-height;
|
||||
background: $switch-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.gf-form-switch__slider {
|
||||
background: $switch-slider-off-bg;
|
||||
border-radius: 8px;
|
||||
height: 16px;
|
||||
width: 32px;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
background: $switch-slider-color;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
box-shadow: $switch-slider-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__slider {
|
||||
background: $switch-slider-on-bg;
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__slider::before {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.gf-form-checkbox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: $input-height;
|
||||
background: $switch-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
border-left: none;
|
||||
border-radius: $input-border-radius;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: 23px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&--table-cell {
|
||||
width: 20px;
|
||||
background: transparent;
|
||||
height: auto;
|
||||
border: none;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-switch__checkbox {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
border: $checkbox-border;
|
||||
background: $checkbox-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__checkbox::before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f00c';
|
||||
color: $checkbox-color;
|
||||
}
|
||||
|
||||
input:checked + .gf-form-switch__checkbox {
|
||||
background: $checkbox-checked-bg;
|
||||
border: none;
|
||||
}
|
||||
Reference in New Issue
Block a user