Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

refactor: make help tooltip icons focusable (#905)

Browse Source 
* refactor: restore rollout slider focus state

* refactor: fix disconnected form field labels

* refactor: make help tooltip icons focusable
This commit is contained in:
olav 2022-04-25 09:24:09 +02:00 committed by GitHub
parent 76951f5d98
commit 984e75a03b
8 changed files with 79 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/component/common/HelpIcon/HelpIcon.styles.ts Normal file
View File

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

27
frontend/src/component/common/HelpIcon/HelpIcon.tsx Normal file
View File

@ -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 (
<Tooltip title={tooltip} arrow>
<span
className={styles.container}
style={style}
tabIndex={0}
role="tooltip"
aria-label="Help"
>
<Info className={styles.icon} />
</span>
</Tooltip>
);
};

7
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
View File

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

24
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
View File

@ -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 = ({
<Grid item md={4}>
<Input
id="weight"
label="Weight"
label="Variant weight"
name="weight"
data-testid={'VARIANT_WEIGHT_INPUT'}
InputProps={{
@ -345,12 +345,7 @@ export const AddVariant = ({
</Grid>
<p className={styles.label}>
<strong>Payload </strong>
<Tooltip
title="Passed to the variant object. Can be anything
(json, value, csv)"
>
<Info className={styles.info} />
</Tooltip>
<HelpIcon tooltip="Passed along with the the variant object." />
</p>
<Grid container>
<Grid item md={2} sm={2} xs={4}>
@ -368,7 +363,9 @@ export const AddVariant = ({
<Input
error={Boolean(error.payload)}
errorText={error.payload}
name="value"
name="variant-payload-value"
id="variant-payload-value"
label="Value"
className={commonStyles.fullWidth}
value={payload.value}
onChange={e => onPayload('value')(e.target.value)}
@ -376,9 +373,8 @@ export const AddVariant = ({
placeholder={
payload.type === 'json'
? '{ "hello": "world" }'
: 'value'
: ''
}
label="value"
/>
</Grid>
</Grid>
@ -387,9 +383,7 @@ export const AddVariant = ({
show={
<p className={styles.label}>
<strong>Overrides </strong>
<Tooltip title="Here you can specify which users should get this variant.">
<Info className={styles.info} />
</Tooltip>
<HelpIcon tooltip="Here you can specify which users should get this variant." />
</p>
}
/>

33
frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
View File

@ -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 = ({
<Typography
variant="subtitle2"
style={{
marginBottom: '0.5rem',
marginBottom: '1rem',
display: 'flex',
alignItems: 'center',
gap: '1ch',
}}
component="h2"
>
Stickiness
<Tooltip title="Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random.">
<Info
style={{
fontSize: '1rem',
color: 'gray',
marginLeft: '0.2rem',
}}
/>
</Tooltip>
<HelpIcon tooltip="Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random." />
</Typography>
<Select
id="stickiness-select"
@ -116,22 +107,14 @@ const FlexibleStrategy = ({
<Typography
variant="subtitle2"
style={{
marginBottom: '0.5rem',
marginBottom: '1rem',
display: 'flex',
alignItems: 'center',
gap: '1ch',
}}
component="h2"
>
GroupId
<Tooltip title="GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles.">
<Info
style={{
fontSize: '1rem',
color: 'gray',
marginLeft: '0.2rem',
}}
/>
</Tooltip>
<HelpIcon tooltip="GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles." />
</Typography>
<Input
label="groupId"

3
frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
View File

@ -14,9 +14,6 @@ const StyledSlider = withStyles({
border: '2px solid currentColor',
marginTop: -8,
marginLeft: -12,
'&:focus, &:hover, &$active': {
boxShadow: 'inherit',
},
},
active: {},
valueLabel: {

4
frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts
View File

@ -35,13 +35,11 @@ export const useStyles = makeStyles(theme => ({
marginBottom: '0',
display: 'flex',
alignItems: 'center',
gap: '1ch',
},
statusBarSuccess: {
backgroundColor: theme.palette.primary.main,
},
helpIcon: {
height: '17.5px',
},
repeatingError: {
marginTop: '0.5rem',
bottom: '0',

21
frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
View File

@ -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 (
<>
<Tooltip
arrow
title="Your password needs to be at least ten characters long, and include an uppercase letter, a lowercase letter, a number and a symbol to be a valid OWASP password"
>
<Typography
variant="body2"
className={styles.title}
data-loading
>
Please set a strong password
<HelpIcon className={styles.helpIcon} />
</Typography>
</Tooltip>
<Typography variant="body2" className={styles.title} data-loading>
Please set a strong password
<HelpIcon tooltip="Your password needs to be at least ten characters long, and include an uppercase letter, a lowercase letter, a number and a symbol to be a valid OWASP password" />
</Typography>
<div
className={styles.container}
style={{