Merge pull request #1423 from cozy/dropdown-button

feat: Added DropdownButton component
cozy · Apr 6, 2020 · 8297340 · 8297340
2 parents 51e4282 + 906f6ed
commit 8297340
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 8 deletions.
diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
@@ -15,6 +15,7 @@ module.exports = {
         '../react/Badge/index.jsx',
         '../react/Button/index.jsx',
         '../react/ButtonAction/index.jsx',
+        '../react/DropdownButton/index.jsx',
         '../react/Card/index.jsx',
         '../react/CompositeRow/index.jsx',
         '../react/InlineCard/index.jsx',

diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
@@ -4,6 +4,7 @@ Use an ActionMenu to show a list of actions. ActionMenus automatically switch th
 
 ```
 import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
 initialState = { menuDisplayed: isTesting() };
@@ -12,7 +13,7 @@ const showMenu = () => setState({ menuDisplayed: true });
 const hideMenu = () => setState({ menuDisplayed: false });
 
 <div>
-  <button onClick={showMenu}>Show action menu</button>
+  <DropdownButton onClick={showMenu}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       onClose={hideMenu}>
@@ -27,6 +28,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 
 ```
 import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
 
@@ -36,7 +38,7 @@ const showMenu = () => setState({ menuDisplayed: true });
 const hideMenu = () => setState({ menuDisplayed: false });
 
 <div>
-  <button onClick={showMenu}>Show action menu</button>
+  <DropdownButton onClick={showMenu}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       onClose={hideMenu}>
@@ -54,6 +56,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 
 ```
 import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
 import Filename from '../Filename';
 
@@ -63,7 +66,7 @@ const showMenu = () => setState({ menuDisplayed: true });
 const hideMenu = () => setState({ menuDisplayed: false });
 
 <div>
-  <button onClick={showMenu}>Show action menu</button>
+  <DropdownButton onClick={showMenu}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       onClose={hideMenu}>
@@ -81,6 +84,7 @@ The `placement` and `anchorElRef` prop can be used to control the placement of t
 
 ```
 import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 
 const testRef = React.createRef();
@@ -93,7 +97,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 const anchorRef = React.createRef();
 
 <div>
-  <button onClick={showMenu} ref={anchorRef}>Show action menu</button>
+  <DropdownButton onClick={showMenu} ref={anchorRef}>Show action menu</DropdownButton>
   {state.menuDisplayed &&
     <ActionMenu
       anchorElRef={anchorRef}

diff --git a/react/DropdownButton/Readme.md b/react/DropdownButton/Readme.md
@@ -0,0 +1,29 @@
+This component can be used as a trigger to open menus, for example an ActionMenu component.
+
+```
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import Text, { MainTitle, Title, SubTitle } from 'cozy-ui/transpiled/react/Text';
+
+<div>
+  <div>
+    <DropdownButton>
+      <MainTitle>Cozy</MainTitle>
+    </DropdownButton>
+  </div>
+  <div>
+    <DropdownButton>
+      <Title>Cozy</Title>
+    </DropdownButton>
+  </div>
+  <div>
+    <DropdownButton>
+      <SubTitle>Cozy</SubTitle>
+    </DropdownButton>
+  </div>
+  <div>
+    <DropdownButton>
+      <Text>Cozy</Text>
+    </DropdownButton>
+  </div>
+</div>
+```
diff --git a/react/DropdownButton/index.jsx b/react/DropdownButton/index.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import cx from 'classnames'
+import styles from './styles.styl'
+import Icon from '../Icon'
+
+const DropdownButton = React.forwardRef(
+  ({ children, className, ...props }, ref) => (
+    <button
+      role="button"
+      className={cx(styles['c-DropdownButton'], className)}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <Icon
+        icon="bottom"
+        size="12"
+        className={styles['c-DropdownButton-Icon']}
+      />
+    </button>
+  )
+)
+
+export default DropdownButton
diff --git a/react/DropdownButton/styles.styl b/react/DropdownButton/styles.styl
@@ -0,0 +1,14 @@
+@require '../../stylus/settings/spaces'
+@require '../../stylus/tools/mixins'
+
+.c-DropdownButton
+    display inline-flex
+    align-items center
+    background none
+    border 0
+    cursor pointer
+    padding spacing_values.xs spacing_values.m
+
+.c-DropdownButton-Icon
+    margin-top rem(4)
+    margin-left rem(4)
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -2,7 +2,9 @@
 
 exports[`ActionMenu should render examples: ActionMenu 1`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
@@ -31,7 +33,9 @@ exports[`ActionMenu should render examples: ActionMenu 1`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 2`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
@@ -60,7 +64,9 @@ exports[`ActionMenu should render examples: ActionMenu 2`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 3`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
@@ -77,7 +83,9 @@ exports[`ActionMenu should render examples: ActionMenu 3`] = `
 
 exports[`ActionMenu should render examples: ActionMenu 4`] = `
 "<div>
-  <div><button>Show action menu</button>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
         <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">