Merge pull request #953 from CPatchane/fix_infos_margin

fix(infos): Better handling text bottom margin
cozy · Apr 30, 2019 · f6d5061 · f6d5061
2 parents 9f450d4 + fb710d8
commit f6d5061
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/react/Infos/index.jsx b/react/Infos/index.jsx
@@ -32,7 +32,11 @@ const Infos = ({ actionButton, icon, isImportant, text, className, title }) => {
           {title}
         </SubTitle>
       )}
-      <div className="u-flex u-mv-1 u-w-100">
+      <div
+        className={cx('u-flex', 'u-w-100', 'u-mt-1', {
+          'u-mb-1': !!actionButton
+        })}
+      >
         {icon && (
           <Icon
             icon={icon}

diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -1033,14 +1033,14 @@ exports[`Infos should render examples: Infos 1`] = `
 "<div>
   <div>
     <div class=\\"u-flex u-flex-column u-maw-6 u-mih-2 u-bdrs-4 u-p-1 u-bg-paleGrey u-ta-left\\">
-      <div class=\\"u-flex u-mv-1 u-w-100\\">
+      <div class=\\"u-flex u-w-100 u-mt-1\\">
         <div class=\\"styles__u-text___2UfQa u-ta-left\\">My small persistent information! </div>
       </div>
       <div class=\\"u-flex-shrink-0\\"></div>
     </div>
     <div style=\\"height: 10px;\\"></div>
     <div class=\\"u-flex u-flex-column u-maw-6 u-mih-2 u-bdrs-4 u-p-1 u-bg-paleGrey u-ta-left\\">
-      <div class=\\"u-flex u-mv-1 u-w-100\\"><svg class=\\"styles__infos--icon___2XWQm u-w-1 u-h-1 u-flex-shrink-0 styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <div class=\\"u-flex u-w-100 u-mt-1\\"><svg class=\\"styles__infos--icon___2XWQm u-w-1 u-h-1 u-flex-shrink-0 styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
           <use xlink:href=\\"#info\\"></use>
         </svg>
         <div class=\\"styles__u-text___2UfQa u-ta-left u-pl-half\\">My small persistent information, with an icon. And lot of text ? Again and again...</div>
@@ -1050,7 +1050,7 @@ exports[`Infos should render examples: Infos 1`] = `
     <div style=\\"height: 10px;\\"></div>
     <div class=\\"u-flex u-flex-column u-maw-6 u-mih-2 u-bdrs-4 u-p-1 u-bg-paleGrey u-ta-left u-bg-chablis\\">
       <div class=\\"styles__u-title-h3___1ZGqN u-pomegranate\\">Infos breaking news</div>
-      <div class=\\"u-flex u-mv-1 u-w-100\\"><svg class=\\"styles__infos--icon___2XWQm u-w-1 u-h-1 u-flex-shrink-0 styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+      <div class=\\"u-flex u-w-100 u-mt-1 u-mb-1\\"><svg class=\\"styles__infos--icon___2XWQm u-w-1 u-h-1 u-flex-shrink-0 styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
           <use xlink:href=\\"#warning\\"></use>
         </svg>
         <div class=\\"styles__u-text___2UfQa u-ta-left u-pl-half\\">My small persistent information, with an icon. And lot of text ? Again and again...</div>