diff --git a/.loki/reference/chrome_iphone7_shared_ArticlesFilters_Normal.png b/.loki/reference/chrome_iphone7_shared_ArticlesFilters_Normal.png index 0b631832..072593bf 100644 Binary files a/.loki/reference/chrome_iphone7_shared_ArticlesFilters_Normal.png and b/.loki/reference/chrome_iphone7_shared_ArticlesFilters_Normal.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Input_Primary.png b/.loki/reference/chrome_iphone7_shared_redesigned_Input_Primary.png index e377cc3c..579c1d92 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_Input_Primary.png and b/.loki/reference/chrome_iphone7_shared_redesigned_Input_Primary.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Left.png b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Left.png index 21787a83..f6ba170a 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Left.png and b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Left.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Right.png b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Right.png index 21787a83..f6ba170a 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Right.png and b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Right.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Left.png b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Left.png index 21787a83..f6ba170a 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Left.png and b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Left.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Right.png b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Right.png index 21787a83..f6ba170a 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Right.png and b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Top_Right.png differ diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Normal.png b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Normal.png index 80eebe30..2d0d502a 100644 Binary files a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Normal.png and b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Normal.png differ diff --git a/.loki/reference/chrome_laptop_shared_ArticlesFilters_Normal.png b/.loki/reference/chrome_laptop_shared_ArticlesFilters_Normal.png index 05793177..31c09ace 100644 Binary files a/.loki/reference/chrome_laptop_shared_ArticlesFilters_Normal.png and b/.loki/reference/chrome_laptop_shared_ArticlesFilters_Normal.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Input_Primary.png b/.loki/reference/chrome_laptop_shared_redesigned_Input_Primary.png index a92d7be5..f636ed3f 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_Input_Primary.png and b/.loki/reference/chrome_laptop_shared_redesigned_Input_Primary.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Left.png b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Left.png index dec35494..da8b7562 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Left.png and b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Left.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Right.png b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Right.png index dec35494..da8b7562 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Right.png and b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Bottom_Right.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Left.png b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Left.png index dec35494..da8b7562 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Left.png and b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Left.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Right.png b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Right.png index dec35494..da8b7562 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Right.png and b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Direction_Top_Right.png differ diff --git a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Normal.png b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Normal.png index ef326c03..8e28c9c5 100644 Binary files a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Normal.png and b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Normal.png differ diff --git a/src/shared/ui/redesigned/Button/ui/Button.module.scss b/src/shared/ui/redesigned/Button/ui/Button.module.scss index 885a477c..658483a5 100644 --- a/src/shared/ui/redesigned/Button/ui/Button.module.scss +++ b/src/shared/ui/redesigned/Button/ui/Button.module.scss @@ -1,13 +1,35 @@ +.addonLeft svg, +.addonRight svg { + color: var(--hint-redesigned); +} + .button { + display: flex; + align-items: center; + gap: 4px; cursor: pointer; color: var(--text-redesigned); padding: 6px 15px; &:hover { color: var(--accent-redesigned); + + .addonLeft svg, + .addonRight svg { + color: var(--accent-redesigned); + } } } +.addonLeft, +.addonRight { + display: flex; +} + +.withAddon { + padding: 0 16px; +} + .clear { padding: 0; margin: 0; @@ -20,7 +42,6 @@ background: var(--light-bg-redesigned); border: none; outline: none; - padding: 8px 16px; border-radius: 34px; } diff --git a/src/shared/ui/redesigned/Button/ui/Button.tsx b/src/shared/ui/redesigned/Button/ui/Button.tsx index 45ec8c05..91249afc 100644 --- a/src/shared/ui/redesigned/Button/ui/Button.tsx +++ b/src/shared/ui/redesigned/Button/ui/Button.tsx @@ -19,6 +19,8 @@ interface ButtonProps extends ButtonHTMLAttributes { disabled?: boolean; children?: ReactNode; fullWidth?: boolean; + addonLeft?: ReactNode; + addonRight?: ReactNode; } export const Button = memo((props: ButtonProps) => { @@ -30,6 +32,8 @@ export const Button = memo((props: ButtonProps) => { disabled, size = 'm', fullWidth, + addonLeft, + addonRight, ...otherProps } = props; @@ -37,6 +41,7 @@ export const Button = memo((props: ButtonProps) => { [cls.square]: square, [cls.disabled]: disabled, [cls.fullWidth]: fullWidth, + [cls.withAddon]: Boolean(addonLeft) || Boolean(addonRight), }; return ( @@ -46,7 +51,9 @@ export const Button = memo((props: ButtonProps) => { disabled={disabled} {...otherProps} > + {!!addonLeft &&
{addonLeft}
} {children} + {!!addonRight &&
{addonRight}
} ); }); diff --git a/src/shared/ui/redesigned/Popups/ui/ListBox/ui/ListBox.tsx b/src/shared/ui/redesigned/Popups/ui/ListBox/ui/ListBox.tsx index 239bec86..5216443f 100644 --- a/src/shared/ui/redesigned/Popups/ui/ListBox/ui/ListBox.tsx +++ b/src/shared/ui/redesigned/Popups/ui/ListBox/ui/ListBox.tsx @@ -4,7 +4,9 @@ import { Listbox as HListBox } from '@headlessui/react'; import { classNames } from '@/shared/lib/classNames'; import { DropdownDirection } from '@/shared/types/ui'; +import ArrowIcon from '@/shared/assets/icons/arrow-bottom.svg'; +import { Icon } from '../../../../Icon'; import { HStack } from '../../../../../redesigned/Stack'; import { Button } from '../../../../Button'; import cls from './ListBox.module.scss'; @@ -54,7 +56,7 @@ export const ListBox = (props: ListBoxProps) => { onChange={onChange} > -