diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index b38cfc74b..5def8356f 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -38,7 +38,7 @@ export const Dropdown: FC = ({ children, placement = 'bottom-start', overlay, - offset = 0, + offset = 4, positionStrategy = 'absolute', onVisibleChange, showDropdown, diff --git a/src/components/Icon/mdi.ts b/src/components/Icon/mdi.ts index 0677fb0f9..c79b5def6 100644 --- a/src/components/Icon/mdi.ts +++ b/src/components/Icon/mdi.ts @@ -381,6 +381,7 @@ export enum IconName { mdiWeb = 'M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z', mdiWebBox = 'M8.95 13.4H6.58A5.5 5.5 0 0 1 6.58 10.6H8.95A11.56 11.56 0 0 0 8.85 12A11.56 11.56 0 0 0 8.95 13.4M7.16 9.2H9.2A12.06 12.06 0 0 1 10.18 6.71A5.55 5.55 0 0 0 7.16 9.2M16.84 9.2A5.59 5.59 0 0 0 13.81 6.71A10.95 10.95 0 0 1 14.78 9.2M12 17.57A9.5 9.5 0 0 0 13.34 14.8H10.66A9.5 9.5 0 0 0 12 17.57M12 6.42A9.53 9.53 0 0 0 10.66 9.2H13.34A9.53 9.53 0 0 0 12 6.42M7.16 14.8A5.61 5.61 0 0 0 10.18 17.29A12.06 12.06 0 0 1 9.2 14.8M21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19A2 2 0 0 1 21 5M19 12A7 7 0 1 0 12 19A7 7 0 0 0 19 12M15.15 12A11.56 11.56 0 0 1 15.05 13.4H17.42A5.5 5.5 0 0 0 17.42 10.6H15.05A11.56 11.56 0 0 1 15.15 12M13.81 17.29A5.62 5.62 0 0 0 16.84 14.8H14.78A10.95 10.95 0 0 1 13.81 17.29M10.36 10.6A8.81 8.81 0 0 0 10.36 13.4H13.64A10.3 10.3 0 0 0 13.75 12A10.21 10.21 0 0 0 13.64 10.6Z', mdiWebcam = 'M12,2A7,7 0 0,1 19,9A7,7 0 0,1 12,16A7,7 0 0,1 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9A5,5 0 0,0 12,14A5,5 0 0,0 17,9A5,5 0 0,0 12,4M12,6A3,3 0 0,1 15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6M6,22A2,2 0 0,1 4,20C4,19.62 4.1,19.27 4.29,18.97L6.11,15.81C7.69,17.17 9.75,18 12,18C14.25,18 16.31,17.17 17.89,15.81L19.71,18.97C19.9,19.27 20,19.62 20,20A2,2 0 0,1 18,22H6Z', + mdiWhatsapp = 'M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z', mdiWindowMaximize = 'M4,4H20V20H4V4M6,8V18H18V8H6Z', mdiWindowMinimize = 'M20,14H4V10H20', mdiWindowRestore = 'M4,8H8V4H20V16H16V20H4V8M16,8V14H18V6H10V8H16M6,12V18H14V12H6Z', diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 91016c048..344bf1913 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Menu } from './'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Menu, MenuType } from './'; import { IconName } from '../Icon'; import { Dropdown } from '../Dropdown'; import { DefaultButton } from '../Button'; @@ -88,14 +88,17 @@ const Overlay = (args: any) => ( const Menu_Story: ComponentStory = (args) => ( - + ); export const Menus = Menu_Story.bind({}); Menus.args = { - disruptive: false, + type: MenuType.neutral, classNames: 'my-menu-class', style: {}, itemClassNames: 'my-menu-item-class', diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 3087bb179..826906e50 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -1,12 +1,18 @@ import React, { FC } from 'react'; -import { MenuItem, MenuProps } from './Menu.types'; +import { MenuItem, MenuProps, MenuType } from './Menu.types'; import { List } from '../List'; -import { ButtonTextAlign, ButtonWidth, DefaultButton } from '../Button'; +import { + ButtonSize, + ButtonTextAlign, + ButtonWidth, + DefaultButton, + NeutralButton, +} from '../Button'; export const Menu: FC = ({ items, onChange, - disruptive = false, + type = MenuType.neutral, classNames, style, itemClassNames, @@ -21,16 +27,34 @@ export const Menu: FC = ({ {...item} alignText={ButtonTextAlign.Left} buttonWidth={ButtonWidth.fill} - disruptive={disruptive} + size={ButtonSize.Medium} + disruptive={type === MenuType.disruptive} onClick={() => onChange(item.value)} /> ); + const getNeutralButton = (item: MenuItem): JSX.Element => ( + onChange(item.value)} + /> + ); + + const getMenuItem = (item: MenuItem) => { + if (type === MenuType.neutral) { + return getNeutralButton(item); + } + return getDefaultButton(item); + }; + return ( {...rest} items={items} - renderItem={getDefaultButton} + renderItem={getMenuItem} classNames={classNames} style={style} itemClassNames={itemClassNames} diff --git a/src/components/Menu/Menu.types.ts b/src/components/Menu/Menu.types.ts index 9e94cd6eb..e9a975364 100644 --- a/src/components/Menu/Menu.types.ts +++ b/src/components/Menu/Menu.types.ts @@ -9,13 +9,19 @@ export interface MenuItem value: any; } +export enum MenuType { + disruptive = 'disruptive', + default = 'default', + neutral = 'neutral', +} + export interface MenuProps extends Omit, 'renderItem' | 'role' | 'itemRole'> { /** * If menu is disruptive or not * @default false */ - disruptive?: boolean; + type?: MenuType; /** * On change callback when menu item is clicked * @param value