From 286ab6df70c7fe5dc4ecd1df2d1f75fcde7c5627 Mon Sep 17 00:00:00 2001 From: Radek Podrazky Date: Wed, 27 Nov 2024 12:13:31 +0100 Subject: [PATCH] fix(SearchBar): fix clear button color on hover Ref NOTICKET --- ...nts_forms_SearchBar_With Default Value.png | Bin 6731 -> 6734 bytes src/components/forms/SearchBar/SearchBar.tsx | 27 ++++++++++-------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/.storybook/image-snapshots/expected/components_forms_SearchBar_With Default Value.png b/.storybook/image-snapshots/expected/components_forms_SearchBar_With Default Value.png index 36c9696e8009093793b94b28e91dfaadf5eaf1e7..6a16e36ee2024a5a2280c7b23a402dc188094460 100644 GIT binary patch literal 6734 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 MJWiJX5`5!-0HM28V*mgE diff --git a/src/components/forms/SearchBar/SearchBar.tsx b/src/components/forms/SearchBar/SearchBar.tsx index 97c48953f..38f7e16e9 100644 --- a/src/components/forms/SearchBar/SearchBar.tsx +++ b/src/components/forms/SearchBar/SearchBar.tsx @@ -12,12 +12,10 @@ import { isNotNilOrEmpty, isNotUndefined, } from 'ramda-adjunct'; -import { pipe } from 'ramda'; import cls from 'classnames'; -import { getColor, getFormStyle, getSpace, pxToRem } from '../../../utils'; +import { getFormStyle } from '../../../utils'; import { Input } from '../Input'; -import { SpaceSizes } from '../../../theme'; import { Icon } from '../../Icon'; import { IconTypes, SSCIconNames } from '../../../theme/icons/icons.enums'; import { Spinner } from '../../Spinner'; @@ -34,18 +32,21 @@ const IconWrapper = styled.div` top: 0; display: flex; align-items: center; - color: ${getColor('neutral.800')}; + color: var(--sscds-color-icon-subtle); `; const SearchIconWrapper = styled(IconWrapper)` left: 0; - padding-inline: ${getSpace(SpaceSizes.md)}; + padding-inline: var(--sscds-space-4x); height: 100%; `; const ClearButton = styled(IconWrapper)` - right: ${getSpace(SpaceSizes.md)}; - height: ${pipe(getFormStyle('fieldHeight'), pxToRem)}; + display: grid; + place-items: center; + right: 0; + height: ${getFormStyle('fieldHeight')}; + width: ${getFormStyle('fieldHeight')}; background: none; border: none; border-radius: 0; @@ -53,7 +54,9 @@ const ClearButton = styled(IconWrapper)` &:hover, &:focus { - ::after { + color: var(--sscds-color-icon-inverse); + + &::after { content: ''; position: absolute; top: 50%; @@ -62,17 +65,17 @@ const ClearButton = styled(IconWrapper)` width: 24px; height: 24px; border-radius: 100%; - background-color: ${getColor('error.500')}; + background-color: var(--sscds-color-background-action-danger-hover); z-index: -1; } } `; const SearchInput = styled(Input)` - padding-left: ${getSpace(SpaceSizes.lgPlus)}; + padding-left: var(--sscds-space-12x); - padding-right: ${({ $isClearable, theme }) => - getSpace($isClearable ? SpaceSizes.lgPlus : SpaceSizes.md, { theme })}; + padding-right: ${({ $isClearable }) => + $isClearable ? 'var(--sscds-space-12x)' : 'var(--sscds-space-4x)'}; `; const SearchBar = forwardRef(