From d7fe4d08db1c9b6c18555c39c6ef0c7fef5f6b4b Mon Sep 17 00:00:00 2001
From: Yannick Lohse <contact@yannick-lohse.fr>
Date: Tue, 7 Apr 2020 09:48:38 +0200
Subject: [PATCH] feat: Support descriptions in action menus

---
 react/ActionMenu/Readme.md                 | 10 +++++++++-
 react/ActionMenu/index.jsx                 |  6 +++++-
 react/__snapshots__/examples.spec.jsx.snap | 21 ++++++++++++---------
 stylus/components/action-menu.styl         |  6 +++---
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
index f37f2b75c5..40f5b48442 100644
--- a/react/ActionMenu/Readme.md
+++ b/react/ActionMenu/Readme.md
@@ -6,6 +6,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';
+import { Caption } from 'cozy-ui/transpiled/react/Text';
 
 initialState = { menuDisplayed: isTesting() };
 
@@ -19,7 +20,14 @@ const hideMenu = () => setState({ menuDisplayed: false });
       onClose={hideMenu}>
       <ActionMenuItem left={<Icon icon='file' />}>Item 1</ActionMenuItem>
       <ActionMenuItem left={<Icon icon='right' />}>Item 2</ActionMenuItem>
-      <ActionMenuItem left={<Icon icon='file' />}>Item 3</ActionMenuItem>
+      <ActionMenuItem left={<Icon icon='file' />}>
+        <div>
+          Item 3
+          <Caption className="u-mt-half">
+            Descriptive text to elaborate on what item 3 does.
+          </Caption>
+        </div>
+      </ActionMenuItem>
   </ActionMenu>}
 </div>
 ```
diff --git a/react/ActionMenu/index.jsx b/react/ActionMenu/index.jsx
index 0c7714a69f..6dfff55079 100644
--- a/react/ActionMenu/index.jsx
+++ b/react/ActionMenu/index.jsx
@@ -130,7 +130,11 @@ const ActionMenuItem = ({ left, children, right, onClick }) => {
   }
 
   return (
-    <Media className={styles['c-actionmenu-item']} onClick={onClickEnhanced}>
+    <Media
+      className={styles['c-actionmenu-item']}
+      onClick={onClickEnhanced}
+      align="top"
+    >
       {left && <Img className="u-mh-1">{left}</Img>}
       <Bd className={left ? 'u-mr-1' : 'u-mh-1'}>{children}</Bd>
       {right && <Img className="u-mr-1">{right}</Img>}
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index 9eb7d9aebb..1b7de2f173 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -7,23 +7,26 @@ exports[`ActionMenu should render examples: ActionMenu 1`] = `
       </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#file\\"></use>
             </svg></div>
           <div class=\\"styles__bd___1Uv-F u-mr-1\\">Item 1</div>
         </div>
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#right\\"></use>
             </svg></div>
           <div class=\\"styles__bd___1Uv-F u-mr-1\\">Item 2</div>
         </div>
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#file\\"></use>
             </svg></div>
-          <div class=\\"styles__bd___1Uv-F u-mr-1\\">Item 3</div>
+          <div class=\\"styles__bd___1Uv-F u-mr-1\\">
+            <div>Item 3 <div class=\\"u-caption u-mt-half\\">Descriptive text to elaborate on what item 3 does.</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -38,19 +41,19 @@ exports[`ActionMenu should render examples: ActionMenu 2`] = `
       </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#file\\"></use>
             </svg></div>
           <div class=\\"styles__bd___1Uv-F u-mr-1\\">Item 1</div>
         </div>
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#right\\"></use>
             </svg></div>
           <div class=\\"styles__bd___1Uv-F u-mr-1\\">Item 2</div>
         </div>
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#file\\"></use>
             </svg></div>
@@ -69,7 +72,7 @@ exports[`ActionMenu should render examples: ActionMenu 3`] = `
       </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#file\\"></use>
             </svg></div>
@@ -88,7 +91,7 @@ exports[`ActionMenu should render examples: ActionMenu 4`] = `
       </svg></button>
     <div>
       <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
-        <div class=\\"styles__media___cSJMp styles__c-actionmenu-item___gODqd\\">
+        <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
           <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
               <use xlink:href=\\"#file\\"></use>
             </svg></div>
diff --git a/stylus/components/action-menu.styl b/stylus/components/action-menu.styl
index 94ef7d5a24..51468269f5 100644
--- a/stylus/components/action-menu.styl
+++ b/stylus/components/action-menu.styl
@@ -1,5 +1,6 @@
 @require './popover.styl'
 @require '../tools/mixins'
+@require '../settings/spaces.styl'
 
 $actionmenu
     @extend $popover
@@ -8,8 +9,7 @@ $actionmenu
         margin-top 0
 
 $actionmenu--inline
-    width auto
-    min-width rem(220)
+    width rem(256)
 
 $actionmenu-header
     box-sizing border-box
@@ -18,7 +18,7 @@ $actionmenu-header
     min-height rem(64)
 
 $actionmenu-item
-    height rem(48)
+    padding spacing_values.s 0
     cursor pointer
 
     &:hover