Merge branch 'main' of github.com:deriv-com/ui into niloofar/FEQ-1564…

…/sidenote-component

CHANGELOG.md

@@ -1,3 +1,19 @@
+## [1.5.6](https://github.com/deriv-com/ui/compare/v1.5.5...v1.5.6) (2024-02-15)
+
+
+### 📦 	 Code Refactoring
+
+* Added max-height for dropdown list ([8519176](https://github.com/deriv-com/ui/commit/8519176af284945dd6864c7f9d56fa58a458b5d6))
+* Added xs in style ([0e4c564](https://github.com/deriv-com/ui/commit/0e4c564840afc90fe823cffc17e8da2d4b7b2268))
+* made changes in css file ([45a2c4e](https://github.com/deriv-com/ui/commit/45a2c4e01ce6c7a6a0417913f3aecc54885fc901))
+
+## [1.5.5](https://github.com/deriv-com/ui/compare/v1.5.4...v1.5.5) (2024-02-15)
+
+
+### ♻️ 	 Chores
+
+* expose all props to button ([d8f45d1](https://github.com/deriv-com/ui/commit/d8f45d10b08e0912e5398d5239c108da4373e5f6))
+
 ## [1.5.4](https://github.com/deriv-com/ui/compare/v1.5.3...v1.5.4) (2024-02-14)
 
 

lib/components/Button/index.tsx

@@ -8,37 +8,28 @@ import './Button.scss';
 type TVariant = 'contained' | 'ghost' | 'outlined';
 type TColor = 'black' | 'primary-light' | 'primary' | 'white';
 
-interface ButtonProps {
-    ariaLabel?: ComponentProps<'button'>['aria-label'];
+interface ButtonProps extends ComponentProps<'button'> {
     color?: TColor;
-    disabled?: ComponentProps<'button'>['disabled'];
     icon?: ReactElement;
     isFullWidth?: boolean;
     isLoading?: boolean;
-    onClick?: ComponentProps<'button'>['onClick'];
     rounded?: Extract<TGenericSizes, 'md' | 'sm'>;
     size?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
     textSize?: ComponentProps<typeof Text>['size'];
-    type?: ComponentProps<'button'>['type'];
     variant?: TVariant;
-    className?: string;
 }
 
 export const Button = ({
-    ariaLabel,
     children,
     color = 'primary',
-    disabled = false,
     icon,
     isFullWidth = false,
     isLoading = false,
-    onClick,
     rounded = 'sm',
     size = 'md',
     textSize,
-    type,
     variant = 'contained',
-    className
+    ...props
 }: PropsWithChildren<ButtonProps>) => {
     const isContained = variant === 'contained';
 
@@ -49,7 +40,7 @@ export const Button = ({
         `derivs-button__rounded--${rounded}`,
         isContained && `derivs-button__color--${color}`,
         isFullWidth && 'derivs-button__full-width',
-        className
+        props.className
     );
 
     type TButtonFontColor = {
@@ -94,11 +85,9 @@ export const Button = ({
 
     return (
         <button
-            aria-label={ariaLabel}
             className={buttonClassNames}
-            disabled={disabled || isLoading}
-            onClick={onClick}
-            type={type}
+            disabled={props.disabled || isLoading}
+            {...props}
         >
             {isLoading && (
                 <div className='derivs-button__loader'>

lib/components/Dropdown/Dropdown.scss

@@ -89,7 +89,7 @@
 
     &__items {
         position: absolute;
-        top: 2.7rem;
+        top: 2.9rem;
         width: 100%;
         display: flex;
         flex-direction: column;
@@ -107,7 +107,9 @@
         & > :last-child {
             border-radius: 0 0 0.4rem 0.4rem;
         }
-
+        &--xs {
+            max-height: 12.5rem;
+        }
         &--sm {
             max-height: 22rem;
         }

lib/components/Dropdown/index.tsx

@@ -1,13 +1,13 @@
-import React, { isValidElement, useCallback, useEffect, useState } from 'react';
+import React, { isValidElement, HtmlHTMLAttributes, useCallback, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { useCombobox } from 'downshift';
 import { TGenericSizes } from "../../types";
 import { Text } from '../Text';
-import  {Input } from '../Input/index';
+import { Input } from '../Input/index';
 import './Dropdown.scss';
 
 type InputProps = React.ComponentProps<typeof Input>;
-type TProps = {
+type TProps = HtmlHTMLAttributes<HTMLInputElement> & {
     disabled?: boolean;
     dropdownIcon: React.ReactNode;
     errorMessage?: InputProps['message'];
@@ -18,28 +18,31 @@ type TProps = {
         text?: React.ReactNode;
         value?: string;
     }[];
-    listHeight?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
+    listHeight?: Extract<TGenericSizes, 'lg' | 'md' | 'sm' | 'xs'>;
     name: InputProps['name'];
-    onChange?: (inputValue: string) => void;
+    onSearch?: (inputValue: string) => void;
     onSelect: (value: string) => void;
     value?: InputProps['value'];
     variant?: 'comboBox' | 'prompt';
 };
 
+
 export const Dropdown = ({
+    className,
     disabled,
     dropdownIcon,
     errorMessage,
     icon = false,
     label,
     list,
-    listHeight = 'md',
+    listHeight = 'xs',
     name,
-    onChange,
+    onSearch,
     onSelect,
     value,
     variant = 'prompt',
-}:TProps) => {
+    ...rest
+}: TProps) => {
     const [items, setItems] = useState(list);
     const [shouldFilterList, setShouldFilterList] = useState(false);
     const clearFilter = useCallback(() => {
@@ -69,7 +72,7 @@ export const Dropdown = ({
                 return item ? reactNodeToString(item.text) : '';
             },
             onInputValueChange({ inputValue }) {
-                onChange?.(inputValue ?? '');
+                onSearch?.(inputValue ?? '');
                 if (shouldFilterList) {
                     setItems(
                         list.filter(item =>
@@ -101,6 +104,18 @@ export const Dropdown = ({
         }
     }, [closeMenu, isOpen, openMenu, variant]);
 
+    const DropdownButton = () => {
+        return (
+            <button
+                className={clsx('deriv-dropdown__button', {
+                    'deriv-dropdown__button--active': isOpen,
+                })}
+            >
+                {dropdownIcon}
+            </button>
+        );
+    };
+
     useEffect(() => {
         setItems(list);
     }, [list]);
@@ -114,30 +129,24 @@ export const Dropdown = ({
         >
             <div className='deriv-dropdown__content'>
                 <Input
+                    className={className}
                     disabled={disabled}
                     message={errorMessage}
                     label={reactNodeToString(label)}
                     name={name}
                     onClickCapture={handleInputClick}
                     onKeyUp={() => setShouldFilterList(true)}
                     readOnly={variant !== 'comboBox'}
-                    leftPlaceholder={icon ?  icon : undefined}
-                    rightPlaceholder={ (
-                        <button
-                            className={clsx('deriv-dropdown__button', {
-                                'deriv-dropdown__button--active': isOpen,
-                            })}
-                        >
-                            {dropdownIcon}
-                        </button>
-                    )}
+                    leftPlaceholder={icon ? icon : undefined}
+                    rightPlaceholder={<DropdownButton/>}
                     type='text'
                     value={value}
                     {...getInputProps()}
+                    {...rest}
                 />
             </div>
             <ul className={`deriv-dropdown__items deriv-dropdown__items--${listHeight}`} {...getMenuProps()}>
-                {isOpen &&
+                {isOpen && (
                     items.map((item, index) => (
                         <li
                             className={clsx('deriv-dropdown__item', {
@@ -151,7 +160,9 @@ export const Dropdown = ({
                                 {item.text}
                             </Text>
                         </li>
-                    ))}
+                    ))
+                )
+                }
             </ul>
         </div>
     );

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deriv-com/ui",
   "private": false,
-  "version": "1.5.4",
+  "version": "1.5.6",
   "type": "module",
   "main": "dist/main.js",
   "files": [

src/stories/Button.stories.ts

@@ -31,7 +31,7 @@ const meta = {
       options: ['contained', 'outlined', 'ghost'],
       control: { type: 'radio' },
     },
-    ariaLabel: {
+    'aria-label': {
       table: {
         disable: true,
       }