From b8c50e6ed28b6cad8bedd2e8ad07ac2329deabfa Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 28 Apr 2025 14:35:55 +0200 Subject: [PATCH] 1 3634/new icons 2 (#9851) Adds new icons for the constraint operator buttons (equals and case sensitive). image image The icons are all 24x24, so using them for buttons is pretty easy. There is one caveat: The heights are very subtly off (~1.25 px) when the buttons wrap and end up on a line without the input field, but it's really not noticeable. In this screenie, the Aa button has is a tiny bit smaller than the items on the row above: image --- .../src/assets/icons/case-insensitive.svg | 2 +- frontend/src/assets/icons/case-sensitive.svg | 2 +- .../src/assets/icons/constraint-equals.svg | 1 + .../assets/icons/constraint-not-equals.svg | 1 + .../EditableConstraint.tsx | 42 +++++++++++++++---- 5 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 frontend/src/assets/icons/constraint-equals.svg create mode 100644 frontend/src/assets/icons/constraint-not-equals.svg diff --git a/frontend/src/assets/icons/case-insensitive.svg b/frontend/src/assets/icons/case-insensitive.svg index ec9af26955..feefa7d560 100644 --- a/frontend/src/assets/icons/case-insensitive.svg +++ b/frontend/src/assets/icons/case-insensitive.svg @@ -1 +1 @@ - + diff --git a/frontend/src/assets/icons/case-sensitive.svg b/frontend/src/assets/icons/case-sensitive.svg index 1383f16794..2a1193a784 100644 --- a/frontend/src/assets/icons/case-sensitive.svg +++ b/frontend/src/assets/icons/case-sensitive.svg @@ -1 +1 @@ - + diff --git a/frontend/src/assets/icons/constraint-equals.svg b/frontend/src/assets/icons/constraint-equals.svg new file mode 100644 index 0000000000..acf9904531 --- /dev/null +++ b/frontend/src/assets/icons/constraint-equals.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/assets/icons/constraint-not-equals.svg b/frontend/src/assets/icons/constraint-not-equals.svg new file mode 100644 index 0000000000..484407de76 --- /dev/null +++ b/frontend/src/assets/icons/constraint-not-equals.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx index 8979a29d18..5602b60a41 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx @@ -26,6 +26,8 @@ import { ReactComponent as CaseInsensitiveIcon } from 'assets/icons/case-insensi import { ScreenReaderOnly } from 'component/common/ScreenReaderOnly/ScreenReaderOnly'; import { AddValuesWidget } from './AddValuesWidget'; import { ResolveInput } from 'component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput'; +import { ReactComponent as EqualsIcon } from 'assets/icons/constraint-equals.svg'; +import { ReactComponent as NotEqualsIcon } from 'assets/icons/constraint-not-equals.svg'; const Container = styled('article')(({ theme }) => ({ '--padding': theme.spacing(2), @@ -99,12 +101,9 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({ })); const StyledButton = styled('button')(({ theme }) => ({ - // todo (`addEditStrategy`): this is pretty rough, but it needs to be the - // same height as the input fields, which are 27.25 px at the moment. - // Consider editing this when we get new icons for the buttons. There may be - // a better solution. - height: `calc(${theme.typography.body1.fontSize} + ${theme.spacing(1.5)})`, - width: '5ch', + display: 'grid', + placeItems: 'center', + padding: 0, borderRadius: theme.shape.borderRadius, fontSize: theme.fontSizes.smallerBody, background: theme.palette.secondary.light, @@ -117,6 +116,21 @@ const StyledButton = styled('button')(({ theme }) => ({ }, })); +const StyledEqualsIcon = styled(EqualsIcon)(({ theme }) => ({ + path: { + fill: 'currentcolor', + }, +})); + +const StyledNotEqualsIcon = styled(NotEqualsIcon)(({ theme }) => ({ + path: { + fill: theme.palette.text.disabled, + }, + rect: { + fill: theme.palette.text.secondary, + }, +})); + const ButtonPlaceholder = styled('div')(({ theme }) => ({ // this is a trick that lets us use absolute positioning for the button so // that it can go over the operator context fields when necessary (narrow @@ -279,7 +293,17 @@ export const EditableConstraint: FC = ({ type='button' onClick={toggleInvertedOperator} > - {localConstraint.inverted ? 'aint' : 'is'} + {localConstraint.inverted ? ( + + ) : ( + + )} + + Make the selected operator + {localConstraint.inverted + ? ' inclusive' + : ' exclusive'} + = ({ /> {showCaseSensitiveButton ? ( - @@ -306,7 +330,7 @@ export const EditableConstraint: FC = ({ : ' not '} case sensitive - + ) : null}