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

Use svg icons for case sensitivity button and give it better textual representation (#9808)

Browse Source 
Light mode:
<img width="110" alt="image"
src="https://github.com/user-attachments/assets/dba5dd69-685c-4259-ba07-f50ad7c66833"
/>
<img width="265" alt="image"
src="https://github.com/user-attachments/assets/1ac2e71b-36f7-4a90-b96c-38f9aee4cb51"
/>

Dark mode:
<img width="311" alt="image"
src="https://github.com/user-attachments/assets/780c2110-2871-4634-b755-e3e0e3681826"
/>
<img width="285" alt="image"
src="https://github.com/user-attachments/assets/fdf0d790-eee6-4640-823a-758570c53b2f"
/>
This commit is contained in:
Thomas Heartman 2025-04-22 12:25:05 +02:00 committed by GitHub
parent e9628f529d
commit 150a044207
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/icons/case-insensitive.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none"><path fill="#9F9FA1" d="m2.6 10.45-.725 2.025a.696.696 0 0 1-.275.388.776.776 0 0 1-.45.137.788.788 0 0 1-.675-.35.76.76 0 0 1-.1-.75l3.15-8.35a.91.91 0 0 1 .3-.4A.77.77 0 0 1 4.3 3h.65a.77.77 0 0 1 .475.15.91.91 0 0 1 .3.4l3.15 8.375c.1.267.07.512-.088.737a.765.765 0 0 1-.662.338.77.77 0 0 1-.475-.15.91.91 0 0 1-.3-.4l-.7-2H2.6ZM3.125 9h3l-1.45-4.15h-.1L3.125 9Zm9.225 4.275c-.817 0-1.459-.213-1.925-.638-.467-.425-.7-1.004-.7-1.737 0-.7.27-1.27.812-1.713.542-.441 1.238-.662 2.088-.662.383 0 .737.03 1.062.088.325.058.604.154.838.287v-.35c0-.45-.155-.808-.463-1.075-.308-.267-.73-.4-1.262-.4a2.238 2.238 0 0 0-1.325.425.938.938 0 0 1-.5.2.687.687 0 0 1-.5-.15.658.658 0 0 1-.263-.438.521.521 0 0 1 .163-.462c.316-.283.675-.5 1.075-.65a3.9 3.9 0 0 1 1.375-.225c1.033 0 1.825.246 2.375.737.55.492.825 1.205.825 2.138v3.8c0 .2-.071.37-.213.513a.698.698 0 0 1-.512.212.72.72 0 0 1-.525-.225.72.72 0 0 1-.225-.525V12.2h-.075a2.285 2.285 0 0 1-.875.788 2.658 2.658 0 0 1-1.25.287Zm.25-1.25c.533 0 .987-.188 1.362-.563.375-.374.563-.829.563-1.362a2.848 2.848 0 0 0-.8-.3c-.3-.067-.575-.1-.825-.1-.534 0-.942.104-1.225.313-.284.208-.425.504-.425.887 0 .333.125.604.375.813.25.208.575.312.975.312Z"/><rect width="1" height="18.374" x="11.885" y=".531" fill="#6E6E70" rx=".5" transform="rotate(32.071 11.885 .531)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -40,6 +40,9 @@ import { ConstraintOperatorSelect } from './ConstraintOperatorSelect';
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
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';
const Container = styled('article')(({ theme }) => ({
'--padding': theme.spacing(2),
@ -123,6 +126,23 @@ const StyledButton = styled('button')(({ theme }) => ({
},
}));
const StyledCaseInsensitiveIcon = styled(CaseInsensitiveIcon)(({ theme }) => ({
path: {
fill: theme.palette.text.disabled,
},
rect: {
fill: theme.palette.text.secondary,
},
}));
const StyledCaseSensitiveIcon = styled(CaseSensitiveIcon)(({ theme }) => ({
fill: 'currentcolor',
}));
const CaseButton = styled(StyledButton)(({ theme }) => ({
display: 'grid',
placeItems: 'center',
}));
type Props = {
localConstraint: IConstraint;
setContextName: (contextName: string) => void;
@ -371,12 +391,23 @@ export const EditableConstraint: FC<Props> = ({
/>
{showCaseSensitiveButton ? (
<StyledButton
<CaseButton
type='button'
onClick={toggleCaseSensitivity}
>
{localConstraint.caseInsensitive ? 'Aa' : 'A/a'}
</StyledButton>
{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>
</CaseButton>
) : null}
{!input.includes('LEGAL_VALUES') && (