Merge pull request #1429 from cozy/actionmenu-desc

feat: Support more complex action menu items
cozy · Apr 11, 2020 · b905116 · b905116
2 parents ee56a5c + d7fe4d0
commit b905116
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git 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
@@ -135,7 +135,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
@@ -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
@@ -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