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