feat: add some icons and addons

sashtje · Oct 11, 2023 · 837e8a3 · 837e8a3
1 parent dca720d
commit 837e8a3
Show file tree

Hide file tree

Showing 17 changed files with 32 additions and 2 deletions.
diff --git a/.loki/reference/chrome_iphone7_shared_ArticlesFilters_Normal.png b/.loki/reference/chrome_iphone7_shared_ArticlesFilters_Normal.png
diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_Input_Primary.png b/.loki/reference/chrome_iphone7_shared_redesigned_Input_Primary.png
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
diff --git a/...i/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Right.png b/...i/reference/chrome_iphone7_shared_redesigned_ListBox_Direction_Bottom_Right.png
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
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
diff --git a/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Normal.png b/.loki/reference/chrome_iphone7_shared_redesigned_ListBox_Normal.png
diff --git a/.loki/reference/chrome_laptop_shared_ArticlesFilters_Normal.png b/.loki/reference/chrome_laptop_shared_ArticlesFilters_Normal.png
diff --git a/.loki/reference/chrome_laptop_shared_redesigned_Input_Primary.png b/.loki/reference/chrome_laptop_shared_redesigned_Input_Primary.png
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
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
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
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
diff --git a/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Normal.png b/.loki/reference/chrome_laptop_shared_redesigned_ListBox_Normal.png
diff --git 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
@@ -19,6 +19,8 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   children?: ReactNode;
   fullWidth?: boolean;
+  addonLeft?: ReactNode;
+  addonRight?: ReactNode;
 }
 
 export const Button = memo((props: ButtonProps) => {
@@ -30,13 +32,16 @@ export const Button = memo((props: ButtonProps) => {
     disabled,
     size = 'm',
     fullWidth,
+    addonLeft,
+    addonRight,
     ...otherProps
   } = props;
 
   const mods: Mods = {
     [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 && <div className={cls.addonLeft}>{addonLeft}</div>}
       {children}
+      {!!addonRight && <div className={cls.addonRight}>{addonRight}</div>}
     </button>
   );
 });

diff --git 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 = <T extends string>(props: ListBoxProps<T>) => {
         onChange={onChange}
       >
         <HListBox.Button as="div" className={commonCls.trigger}>
-          <Button variant="filled" disabled={readonly}>
+          <Button variant="filled" disabled={readonly} addonRight={<Icon Svg={ArrowIcon} />}>
             {selectedItem?.content ?? defaultValue}
           </Button>
         </HListBox.Button>