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

78
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 { ReactComponent as CaseSensitiveIcon } from 'assets/icons/case-sensitive.svg';
import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensitive.svg';
import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly';
import { AddValuesWidget } from './AddValuesWidget';
import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg';
@ -268,26 +267,26 @@ export const EditableConstraint: FC<Props> = ({
/>
<OperatorOptions>
<StyledButton
type='button'
onClick={() =>
updateConstraint({
type: 'toggle inverted operator',
})
}
<HtmlTooltip
title={`Make the selected operator${localConstraint.inverted ? ' inclusive' : ' exclusive'}`}
arrow
describeChild
>
{localConstraint.inverted ? (
<StyledNotEqualsIcon aria-label='The constraint operator is exclusive.' />
) : (
<StyledEqualsIcon aria-label='The constraint operator is inclusive.' />
)}
<ScreenReaderOnly>
Make the selected operator
{localConstraint.inverted
? ' inclusive'
: ' exclusive'}
</ScreenReaderOnly>
</StyledButton>
<StyledButton
type='button'
onClick={() =>
updateConstraint({
type: 'toggle inverted operator',
})
}
>
{localConstraint.inverted ? (
<StyledNotEqualsIcon aria-label='The constraint operator is exclusive.' />
) : (
<StyledEqualsIcon aria-label='The constraint operator is inclusive.' />
)}
</StyledButton>
</HtmlTooltip>
<ConstraintOperatorSelect
options={operatorsForContext(contextName)}
@ -297,27 +296,26 @@ export const EditableConstraint: FC<Props> = ({
/>
{showCaseSensitiveButton ? (
<StyledButton
type='button'
onClick={() =>
updateConstraint({
type: 'toggle case sensitivity',
})
}
<HtmlTooltip
title={`Make match${localConstraint.caseInsensitive ? ' ' : ' not '}case sensitive`}
arrow
describeChild
>
{localConstraint.caseInsensitive ? (
<StyledCaseInsensitiveIcon aria-label='The match is not case sensitive.' />
) : (
<StyledCaseSensitiveIcon aria-label='The match is case sensitive.' />
)}
<ScreenReaderOnly>
Make match
{localConstraint.caseInsensitive
? ' '
: ' not '}
case sensitive
</ScreenReaderOnly>
</StyledButton>
<StyledButton
type='button'
onClick={() =>
updateConstraint({
type: 'toggle case sensitivity',
})
}
>
{localConstraint.caseInsensitive ? (
<StyledCaseInsensitiveIcon aria-label='The match is not case sensitive.' />
) : (
<StyledCaseSensitiveIcon aria-label='The match is case sensitive.' />
)}
</StyledButton>
</HtmlTooltip>
) : null}
</OperatorOptions>
</ConstraintOptions>