Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-27 01:19:00 +02:00
Code Issues Projects Releases Wiki Activity

feat: add tooltips to constraint operator buttons (#9941)

Browse Source 
![image](https://github.com/user-attachments/assets/9e40b6f8-a98e-48e0-a931-a946ad6ec9cf)
This commit is contained in:
Jaanus Sellin 2025-05-09 14:56:32 +03:00 committed by GitHub
parent fd4042db00
commit 7a012ce910
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
View File

@ -10,7 +10,6 @@ import Delete from '@mui/icons-material/Delete';
import { ValueList } from './ValueList'; import { ValueList } from './ValueList';
import { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive.svg'; import { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive.svg';
import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg'; import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg';
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
import { AddValuesWidget } from './AddValuesWidget'; import { AddValuesWidget } from './AddValuesWidget';
import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg'; import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg';
@ -268,6 +267,11 @@ export const EditableConstraint: FC<Props> = ({
/> />
<OperatorOptions> <OperatorOptions>
<HtmlTooltip
title={`Make the selected operator${localConstraint.inverted ? ' inclusive' : ' exclusive'}`}
arrow
describeChild
>
<StyledButton <StyledButton
type='button' type='button'
onClick={() => onClick={() =>
@ -281,13 +285,8 @@ export const EditableConstraint: FC<Props> = ({
) : ( ) : (
<StyledEqualsIcon aria-label='The constraint operator is inclusive.' /> <StyledEqualsIcon aria-label='The constraint operator is inclusive.' />
)} )}
<ScreenReaderOnly>
Make the selected operator
{localConstraint.inverted
? ' inclusive'
: ' exclusive'}
</ScreenReaderOnly>
</StyledButton> </StyledButton>
</HtmlTooltip>
<ConstraintOperatorSelect <ConstraintOperatorSelect
options={operatorsForContext(contextName)} options={operatorsForContext(contextName)}
@ -297,6 +296,11 @@ export const EditableConstraint: FC<Props> = ({
/> />
{showCaseSensitiveButton ? ( {showCaseSensitiveButton ? (
<HtmlTooltip
title={`Make match${localConstraint.caseInsensitive ? ' ' : ' not '}case sensitive`}
arrow
describeChild
>
<StyledButton <StyledButton
type='button' type='button'
onClick={() => onClick={() =>
@ -310,14 +314,8 @@ export const EditableConstraint: FC<Props> = ({
) : ( ) : (
<StyledCaseSensitiveIcon aria-label='The match is case sensitive.' /> <StyledCaseSensitiveIcon aria-label='The match is case sensitive.' />
)} )}
<ScreenReaderOnly>
Make match
{localConstraint.caseInsensitive
? ' '
: ' not '}
case sensitive
</ScreenReaderOnly>
</StyledButton> </StyledButton>
</HtmlTooltip>
) : null} ) : null}
</OperatorOptions> </OperatorOptions>
</ConstraintOptions> </ConstraintOptions>