Adding button with menu component and using it for the new button

webapp/src/components/viewHeader.tsx

@@ -21,11 +21,13 @@ import DropdownIcon from '../widgets/icons/dropdown'
 import OptionsIcon from '../widgets/icons/options'
 import SortUpIcon from '../widgets/icons/sortUp'
 import SortDownIcon from '../widgets/icons/sortDown'
+import ButtonWithMenu from '../widgets/buttons/buttonWithMenu'
 
 import {Editable} from './editable'
 import FilterComponent from './filterComponent'
 
 import './viewHeader.scss'
+import {sendFlashMessage} from './flashMessages'
 
 type Props = {
     boardTree?: BoardTree
@@ -348,17 +350,33 @@ class ViewHeader extends React.Component<Props, State> {
                         />
                     </Menu>
                 </MenuWrapper>
-                <div
-                    className='octo-button filled'
+                <ButtonWithMenu
                     onClick={() => {
                         this.props.addCard(true)
                     }}
+                    text={(
+                        <FormattedMessage
+                            id='ViewHeader.new'
+                            defaultMessage='New'
+                        />
+                    )}
                 >
-                    <FormattedMessage
-                        id='ViewHeader.new'
-                        defaultMessage='New'
-                    />
-                </div>
+                    <Menu position='left'>
+                        <Menu.Label>
+                            <b>
+                                <FormattedMessage
+                                    id='ViewHeader.select-a-template'
+                                    defaultMessage='Select a template'
+                                />
+                            </b>
+                        </Menu.Label>
+                        <Menu.Text
+                            id='example-template'
+                            name={intl.formatMessage({id: 'ViewHeader.sample-templte', defaultMessage: 'Sample template'})}
+                            onClick={() => sendFlashMessage({content: 'Not implemented yet', severity: 'low'})}
+                        />
+                    </Menu>
+                </ButtonWithMenu>
             </div>
         )
     }

webapp/src/widgets/buttons/buttonWithMenu.scss

@@ -0,0 +1,40 @@
+.ButtonWithMenu.octo-button {
+    display: flex;
+    align-items: stretch;
+	text-align: center;
+	min-width: 20px;
+	cursor: pointer;
+    overflow: visible;
+    padding: 0;
+
+    .button-text {
+	    padding: 3px 10px;
+        background-color: rgb(var(--button-bg));
+        color: rgb(var(--button-fg));
+	    border-radius: 5px 0 0 5px;
+	    transition: background 100ms ease-out 0s;
+        height: 100%;
+
+	    &:hover {
+            background-color: rgba(var(--button-bg), 0.8);
+        }
+    }
+
+    .button-dropdown {
+        background-color: rgb(var(--button-bg));
+        border-left: 1px solid rgba(var(--button-fg), 0.2);
+        display: flex;
+        padding: 0 3px;
+        align-items: center;
+	    border-radius: 0 5px 5px 0;
+	    transition: background 100ms ease-out 0s;
+        height: 100%;
+
+        &:hover {
+            background-color: rgba(var(--button-bg), 0.8);
+        }
+        .DropdownIcon {
+            stroke: rgb(var(--button-fg));
+        }
+    }
+}

webapp/src/widgets/buttons/buttonWithMenu.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import DropdownIcon from '../icons/dropdown'
+import MenuWrapper from '../menuWrapper'
+
+import './buttonWithMenu.scss'
+
+type Props = {
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+    children?: React.ReactNode
+    title?: string
+    text: React.ReactNode
+}
+
+export default class ButtonWithMenu extends React.PureComponent<Props> {
+    public render(): JSX.Element {
+        return (
+            <div
+                onClick={this.props.onClick}
+                className='ButtonWithMenu octo-button'
+                title={this.props.title}
+            >
+                <div className='button-text'>
+                    {this.props.text}
+                </div>
+                <MenuWrapper stopPropagationOnToggle={true}>
+                    <div className='button-dropdown'>
+                        <DropdownIcon/>
+                    </div>
+                    {this.props.children}
+                </MenuWrapper>
+            </div>
+        )
+    }
+}

webapp/src/widgets/menu/labelOption.scss

@@ -0,0 +1,8 @@
+.Menu {
+    .LabelOption.menu-option {
+        cursor: auto;
+        &:hover {
+            background: inherit;
+        }
+    }
+}

webapp/src/widgets/menu/labelOption.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import './labelOption.scss'
+
+type LabelOptionProps = {
+    icon?: string
+    children: React.ReactNode
+}
+
+export default class LabelOption extends React.PureComponent<LabelOptionProps> {
+    public render(): JSX.Element {
+        return (
+            <div className='MenuOption LabelOption menu-option'>
+                <div className='menu-name'>{this.props.children}</div>
+                {this.props.icon}
+            </div>
+        )
+    }
+}

webapp/src/widgets/menu/menu.tsx

@@ -7,6 +7,7 @@ import SwitchOption from './switchOption'
 import TextOption from './textOption'
 import ColorOption from './colorOption'
 import SubMenuOption from './subMenuOption'
+import LabelOption from './labelOption'
 
 import './menu.scss'
 
@@ -21,6 +22,7 @@ export default class Menu extends React.PureComponent<MenuProps> {
     static Switch = SwitchOption
     static Separator = SeparatorOption
     static Text = TextOption
+    static Label = LabelOption
 
     public render(): JSX.Element {
         const {position, children} = this.props