apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Move `Switch` SCSS to emotion/angular (#88553)

Browse Source 
move switch scss to emotion/angular
pull/88660/head
Ashley Harrison 1 year ago committed by GitHub
parent 799ae387ff
commit 1cb701c304
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 211 additions and 151 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      .betterer.results
  2. 87
      packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx
  3. 130
      public/sass/_angular.scss
  4. 1
      public/sass/_grafana.scss
  5. 139
      public/sass/components/_switch.scss

5
.betterer.results
Unescape View File

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

87
packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx
Unescape View File

@ -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,
};
};

130
public/sass/_angular.scss
Unescape View File

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

1
public/sass/_grafana.scss
Unescape View File

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

139
public/sass/components/_switch.scss
Unescape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save