From 984e75a03b133482dea34ad4af69cce24c1de4a0 Mon Sep 17 00:00:00 2001 From: olav Date: Mon, 25 Apr 2022 09:24:09 +0200 Subject: [PATCH] refactor: make help tooltip icons focusable (#905) * refactor: restore rollout slider focus state * refactor: fix disconnected form field labels * refactor: make help tooltip icons focusable --- .../common/HelpIcon/HelpIcon.styles.ts | 22 +++++++++++++ .../component/common/HelpIcon/HelpIcon.tsx | 27 +++++++++++++++ .../AddFeatureVariant.styles.ts | 7 +++- .../AddFeatureVariant/AddFeatureVariant.tsx | 24 +++++--------- .../FlexibleStrategy/FlexibleStrategy.tsx | 33 +++++-------------- .../RolloutSlider/RolloutSlider.tsx | 3 -- .../PasswordChecker/PasswordChecker.styles.ts | 4 +-- .../PasswordChecker/PasswordChecker.tsx | 21 ++++-------- 8 files changed, 79 insertions(+), 62 deletions(-) create mode 100644 frontend/src/component/common/HelpIcon/HelpIcon.styles.ts create mode 100644 frontend/src/component/common/HelpIcon/HelpIcon.tsx diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts b/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts new file mode 100644 index 0000000000..d405802eee --- /dev/null +++ b/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts @@ -0,0 +1,22 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles(theme => ({ + container: { + display: 'inline-grid', + alignItems: 'center', + outline: 0, + + '&:is(:focus-visible, :active) > *, &:hover > *': { + outlineStyle: 'solid', + outlineWidth: 2, + outlineOffset: 0, + outlineColor: theme.palette.primary.main, + borderRadius: '100%', + color: theme.palette.primary.main, + }, + }, + icon: { + fontSize: '1rem', + color: theme.palette.grey[600], + }, +})); diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.tsx b/frontend/src/component/common/HelpIcon/HelpIcon.tsx new file mode 100644 index 0000000000..198bc710b5 --- /dev/null +++ b/frontend/src/component/common/HelpIcon/HelpIcon.tsx @@ -0,0 +1,27 @@ +import { Tooltip } from '@material-ui/core'; +import { Info } from '@material-ui/icons'; +import { useStyles } from 'component/common/HelpIcon/HelpIcon.styles'; +import React from 'react'; + +interface IHelpIconProps { + tooltip: string; + style?: React.CSSProperties; +} + +export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => { + const styles = useStyles(); + + return ( + + + + + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts index 0aba375799..11a02a30d5 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts @@ -16,7 +16,12 @@ export const useStyles = makeStyles(theme => ({ weightInput: { marginRight: '0.8rem', }, - label: { marginBottom: '1rem' }, + label: { + display: 'flex', + alignItems: 'center', + gap: '1ch', + marginBottom: '1rem', + }, info: { width: '18.5px', height: '18.5px', diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx index fc494c9677..528317b4f6 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx @@ -5,9 +5,7 @@ import { FormControlLabel, Grid, InputAdornment, - Tooltip, } from '@material-ui/core'; -import { Info } from '@material-ui/icons'; import { weightTypes } from './enums'; import { OverrideConfig } from './OverrideConfig/OverrideConfig'; import ConditionallyRender from 'component/common/ConditionallyRender'; @@ -26,6 +24,7 @@ import { useStyles } from './AddFeatureVariant.styles'; import Input from 'component/common/Input/Input'; import { formatUnknownError } from 'utils/formatUnknownError'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; const payloadOptions = [ { key: 'string', label: 'string' }, @@ -268,6 +267,7 @@ export const AddVariant = ({ label="Variant name" autoFocus name="name" + id="variant-name" className={styles.input} errorText={error.name} value={data.name || ''} @@ -317,7 +317,7 @@ export const AddVariant = ({

Payload - - - +

@@ -368,7 +363,9 @@ export const AddVariant = ({ onPayload('value')(e.target.value)} @@ -376,9 +373,8 @@ export const AddVariant = ({ placeholder={ payload.type === 'json' ? '{ "hello": "world" }' - : 'value' + : '' } - label="value" /> @@ -387,9 +383,7 @@ export const AddVariant = ({ show={

Overrides - - - +

} /> diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx index 8c8545ab90..5efefd91da 100644 --- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx +++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx @@ -1,6 +1,4 @@ -import { Tooltip, Typography } from '@material-ui/core'; -import { Info } from '@material-ui/icons'; - +import { Typography } from '@material-ui/core'; import { IParameter } from 'interfaces/strategy'; import RolloutSlider from '../RolloutSlider/RolloutSlider'; import Select from 'component/common/select'; @@ -10,6 +8,7 @@ import { FLEXIBLE_STRATEGY_GROUP_ID, FLEXIBLE_STRATEGY_STICKINESS_ID, } from 'utils/testIds'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; const builtInStickinessOptions = [ { key: 'default', label: 'default' }, @@ -81,22 +80,14 @@ const FlexibleStrategy = ({ Stickiness - - - + ({ marginBottom: '0', display: 'flex', alignItems: 'center', + gap: '1ch', }, statusBarSuccess: { backgroundColor: theme.palette.primary.main, }, - helpIcon: { - height: '17.5px', - }, repeatingError: { marginTop: '0.5rem', bottom: '0', diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx index 63d420bea4..dbccbd8f08 100644 --- a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx +++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx @@ -1,13 +1,13 @@ -import { Tooltip, Typography } from '@material-ui/core'; +import { Typography } from '@material-ui/core'; import classnames from 'classnames'; import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { BAD_REQUEST, OK } from 'constants/statusCodes'; import { useStyles } from './PasswordChecker.styles'; -import HelpIcon from '@material-ui/icons/Help'; import { useCallback } from 'react'; import { formatApiPath } from 'utils/formatPath'; import { Alert } from '@material-ui/lab'; import ConditionallyRender from 'component/common/ConditionallyRender'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; interface IPasswordCheckerProps { password: string; @@ -157,19 +157,10 @@ const PasswordChecker = ({ return ( <> - - - Please set a strong password - - - + + Please set a strong password + +