From fb710d86823fe88b8ea8c01ef8d8f9d913219219 Mon Sep 17 00:00:00 2001
From: CPatchane <code@patchane.com>
Date: Tue, 30 Apr 2019 15:54:19 +0200
Subject: [PATCH] fix(infos): :lipstick: Better handling text bottom margin

---
 react/Infos/index.jsx                      | 6 +++++-
 react/__snapshots__/examples.spec.jsx.snap | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/react/Infos/index.jsx b/react/Infos/index.jsx
index 62499932a3..50362ec1a9 100644
--- 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
index eeaf482aa7..b293328cfa 100644
--- 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>