From 314865dd882b1c1f975139468eccc8fb86e919b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 11 Jan 2021 10:50:17 +0100 Subject: [PATCH] InlineSwitch: Added missing InlineSwitch component and fixed two places that used unaligned inline switch (#30162) * InlineSwitch: Added missing InlineSwitch component and fixed two places that used unaligned inline switch * Fixed e2e tests --- .../specs/variables/new-query-variable.ts | 30 ++----- .../src/components/Forms/getFormStyles.ts | 2 - .../src/components/Switch/Switch.mdx | 6 ++ .../src/components/Switch/Switch.story.tsx | 22 ++++- .../src/components/Switch/Switch.tsx | 88 ++++++++++++------- packages/grafana-ui/src/components/index.ts | 2 +- .../variables/editor/VariableSwitchField.tsx | 20 +---- .../SettingsEditor/index.tsx | 8 +- 8 files changed, 97 insertions(+), 81 deletions(-) diff --git a/e2e/suite1/specs/variables/new-query-variable.ts b/e2e/suite1/specs/variables/new-query-variable.ts index 48485efb702..fa1c090bd33 100644 --- a/e2e/suite1/specs/variables/new-query-variable.ts +++ b/e2e/suite1/specs/variables/new-query-variable.ts @@ -66,27 +66,11 @@ describe('Variables - Add variable', () => { .within(select => { e2e.components.Select.singleValue().should('have.text', 'Disabled'); }); - e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch() - .should('be.visible') - .within(select => { - e2e() - .get('input') - .should('not.be.checked'); - }); - e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch() - .should('be.visible') - .within(select => { - e2e() - .get('input') - .should('not.be.checked'); - }); - e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch() - .should('be.visible') - .within(select => { - e2e() - .get('input') - .should('not.be.checked'); - }); + e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch().should('not.be.checked'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch().should('not.be.checked'); + + e2e.pages.Dashboard.Settings.Variables.Edit.QueryVariable.valueGroupsTagsEnabledSwitch().should('not.be.checked'); + e2e.pages.Dashboard.Settings.Variables.Edit.General.previewOfValuesOption().should('not.exist'); e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsCustomAllInput().should('not.exist'); }); @@ -190,7 +174,7 @@ describe('Variables - Add variable', () => { .blur(); e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsMultiSwitch() - .click() + .click({ force: true }) .within(() => { e2e() .get('input') @@ -198,7 +182,7 @@ describe('Variables - Add variable', () => { }); e2e.pages.Dashboard.Settings.Variables.Edit.General.selectionOptionsIncludeAllSwitch() - .click() + .click({ force: true }) .within(() => { e2e() .get('input') diff --git a/packages/grafana-ui/src/components/Forms/getFormStyles.ts b/packages/grafana-ui/src/components/Forms/getFormStyles.ts index baf6fd8f292..7ee51b0f725 100644 --- a/packages/grafana-ui/src/components/Forms/getFormStyles.ts +++ b/packages/grafana-ui/src/components/Forms/getFormStyles.ts @@ -6,7 +6,6 @@ import { getFieldValidationMessageStyles } from './FieldValidationMessage'; import { getButtonStyles, ButtonVariant } from '../Button'; import { ComponentSize } from '../../types/size'; import { getInputStyles } from '../Input/Input'; -import { getSwitchStyles } from '../Switch/Switch'; import { getCheckboxStyles } from './Checkbox'; export const getFormStyles = stylesFactory( @@ -23,7 +22,6 @@ export const getFormStyles = stylesFactory( hasText: true, }), input: getInputStyles({ theme, invalid: options.invalid }), - switch: getSwitchStyles(theme), checkbox: getCheckboxStyles(theme), }; } diff --git a/packages/grafana-ui/src/components/Switch/Switch.mdx b/packages/grafana-ui/src/components/Switch/Switch.mdx index 129f3669362..089e0807e63 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.mdx +++ b/packages/grafana-ui/src/components/Switch/Switch.mdx @@ -22,3 +22,9 @@ import { Switch } from '@grafana/ui'; ### Props + +# InlineSwitch + +### When to use + +Same as for Switch but for inline forms. diff --git a/packages/grafana-ui/src/components/Switch/Switch.story.tsx b/packages/grafana-ui/src/components/Switch/Switch.story.tsx index e567dbdf1d3..4e7e8525dcc 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.story.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.story.tsx @@ -1,8 +1,10 @@ import React, { useState, useCallback } from 'react'; import { boolean } from '@storybook/addon-knobs'; import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { Switch } from '@grafana/ui'; +import { InlineField, Switch, InlineSwitch } from '@grafana/ui'; import mdx from './Switch.mdx'; +import { InlineFieldRow } from '../Forms/InlineFieldRow'; +import { Field } from '../Forms/Field'; export default { title: 'Forms/Switch', @@ -20,7 +22,23 @@ export const Controlled = () => { const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]); const BEHAVIOUR_GROUP = 'Behaviour props'; const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP); - return ; + + return ( +
+

+ + + +

+

+ + + + + +

+
+ ); }; export const Uncontrolled = () => { diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index 108f7974370..8e9ec47c4b6 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -5,11 +5,55 @@ import { GrafanaTheme, deprecationWarning } from '@grafana/data'; import { stylesFactory, useTheme } from '../../themes'; import { focusCss } from '../../themes/mixins'; -export interface SwitchProps extends Omit, 'value'> { +export interface Props extends Omit, 'value'> { value?: boolean; } -export const getSwitchStyles = stylesFactory((theme: GrafanaTheme) => { +export const Switch = React.forwardRef( + ({ value, checked, disabled = false, onChange, id, ...inputProps }, ref) => { + if (checked) { + deprecationWarning('Switch', 'checked prop', 'value'); + } + + const theme = useTheme(); + const styles = getSwitchStyles(theme); + const switchIdRef = useRef(id ? id : uniqueId('switch-')); + + return ( +
+ { + onChange?.(event); + }} + id={switchIdRef.current} + {...inputProps} + ref={ref} + /> +
+ ); + } +); + +Switch.displayName = 'Switch'; + +export const InlineSwitch = React.forwardRef((props, ref) => { + const theme = useTheme(); + const styles = getSwitchStyles(theme); + + return ( +
+ +
+ ); +}); + +InlineSwitch.displayName = 'Switch'; + +const getSwitchStyles = stylesFactory((theme: GrafanaTheme) => { return { switch: css` width: 32px; @@ -71,36 +115,14 @@ export const getSwitchStyles = stylesFactory((theme: GrafanaTheme) => { } } `, + inlineContainer: css` + padding: 0 ${theme.spacing.sm}; + height: ${theme.spacing.formInputHeight}px; + display: flex; + align-items: center; + background: ${theme.colors.formInputBg}; + border: 1px solid ${theme.colors.formInputBorder}; + border-radius: ${theme.border.radius.md}; + `, }; }); - -export const Switch = React.forwardRef( - ({ value, checked, disabled = false, onChange, id, ...inputProps }, ref) => { - if (checked) { - deprecationWarning('Switch', 'checked prop', 'value'); - } - - const theme = useTheme(); - const styles = getSwitchStyles(theme); - const switchIdRef = useRef(id ? id : uniqueId('switch-')); - - return ( -
- { - onChange?.(event); - }} - id={switchIdRef.current} - {...inputProps} - ref={ref} - /> -
- ); - } -); - -Switch.displayName = 'Switch'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 99c7c9df87a..c05e4435e8d 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -168,7 +168,7 @@ export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup'; export { Input } from './Input/Input'; export { FormInputSize } from './Forms/types'; -export { Switch } from './Switch/Switch'; +export { Switch, InlineSwitch } from './Switch/Switch'; export { Checkbox } from './Forms/Checkbox'; export { TextArea } from './TextArea/TextArea'; diff --git a/public/app/features/variables/editor/VariableSwitchField.tsx b/public/app/features/variables/editor/VariableSwitchField.tsx index 6a2ed2bc15a..f4db5fa442b 100644 --- a/public/app/features/variables/editor/VariableSwitchField.tsx +++ b/public/app/features/variables/editor/VariableSwitchField.tsx @@ -1,8 +1,5 @@ import React, { ChangeEvent, PropsWithChildren, ReactElement } from 'react'; -import { InlineField, Switch, useStyles } from '@grafana/ui'; -import { GrafanaTheme } from '@grafana/data'; -import { css } from 'emotion'; - +import { InlineField, InlineSwitch } from '@grafana/ui'; interface VariableSwitchFieldProps { value: boolean; name: string; @@ -18,22 +15,9 @@ export function VariableSwitchField({ onChange, ariaLabel, }: PropsWithChildren): ReactElement { - const styles = useStyles(getStyles); - return ( -
- -
+ ); } - -function getStyles(theme: GrafanaTheme) { - return { - switchContainer: css` - margin-left: ${theme.spacing.sm}; - margin-right: ${theme.spacing.sm}; - `, - }; -} diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx index bebbfddf581..215e4ed4371 100644 --- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx +++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx @@ -1,4 +1,4 @@ -import { InlineField, Input, Switch } from '@grafana/ui'; +import { InlineField, Input, InlineSwitch } from '@grafana/ui'; import React, { FunctionComponent, ComponentProps, useState } from 'react'; import { extendedStats } from '../../../../query_def'; import { useDispatch } from '../../../../hooks/useStatelessReducer'; @@ -132,7 +132,11 @@ const ExtendedStatSetting: FunctionComponent = ({ stat return ( - ) => onChange(e.target.checked)} value={value} /> + ) => onChange(e.target.checked)} + value={value} + /> ); };