From f6b1d4fa17aa691f22cf794977797b2a5852e535 Mon Sep 17 00:00:00 2001
From: Aleh Zasypkin <aleh.zasypkin@gmail.com>
Date: Mon, 23 Mar 2020 17:26:36 +0100
Subject: [PATCH] Review#5: use `EuiSpacer` instead of CSS margin.

---
 .../authentication/login/_login_page.scss     |  4 --
 .../__snapshots__/login_form.test.tsx.snap    | 16 +++++--
 .../components/login_form/login_form.tsx      | 44 ++++++++++---------
 3 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/x-pack/plugins/security/public/authentication/login/_login_page.scss b/x-pack/plugins/security/public/authentication/login/_login_page.scss
index 33d66e1d93eed..cdfad55ee064a 100644
--- a/x-pack/plugins/security/public/authentication/login/_login_page.scss
+++ b/x-pack/plugins/security/public/authentication/login/_login_page.scss
@@ -27,7 +27,3 @@
     max-width: 700px;
   }
 }
-
-.loginWelcome__selectorButton {
-  margin-bottom: $euiSize;
-}
diff --git a/x-pack/plugins/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap b/x-pack/plugins/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
index 9fd32c2d64310..84565b91d6d73 100644
--- a/x-pack/plugins/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
+++ b/x-pack/plugins/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`LoginForm login selector renders as expected with login form 1`] = `
 <Fragment>
   <EuiButton
-    className="loginWelcome__selectorButton"
     fullWidth={true}
     iconType="user"
     isDisabled={false}
@@ -13,8 +12,10 @@ exports[`LoginForm login selector renders as expected with login form 1`] = `
   >
     Login w/SAML
   </EuiButton>
+  <EuiSpacer
+    size="m"
+  />
   <EuiButton
-    className="loginWelcome__selectorButton"
     fullWidth={true}
     iconType="user"
     isDisabled={false}
@@ -24,6 +25,9 @@ exports[`LoginForm login selector renders as expected with login form 1`] = `
   >
     Login w/PKI
   </EuiButton>
+  <EuiSpacer
+    size="m"
+  />
   <EuiText
     color="subdued"
     textAlign="center"
@@ -121,7 +125,6 @@ exports[`LoginForm login selector renders as expected with login form 1`] = `
 exports[`LoginForm login selector renders as expected without login form for providers with and without description 1`] = `
 <Fragment>
   <EuiButton
-    className="loginWelcome__selectorButton"
     fullWidth={true}
     iconType="user"
     isDisabled={false}
@@ -131,8 +134,10 @@ exports[`LoginForm login selector renders as expected without login form for pro
   >
     Login w/SAML
   </EuiButton>
+  <EuiSpacer
+    size="m"
+  />
   <EuiButton
-    className="loginWelcome__selectorButton"
     fullWidth={true}
     iconType="user"
     isDisabled={false}
@@ -151,6 +156,9 @@ exports[`LoginForm login selector renders as expected without login form for pro
       }
     />
   </EuiButton>
+  <EuiSpacer
+    size="m"
+  />
 </Fragment>
 `;
 
diff --git a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx
index a8a1f3b534625..417bb121637f3 100644
--- a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx
+++ b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx
@@ -214,27 +214,29 @@ export class LoginForm extends Component<Props, State> {
 
     return (
       <>
-        {this.props.selector.providers.map(provider => (
-          <EuiButton
-            key={provider.name}
-            className="loginWelcome__selectorButton"
-            iconType="user"
-            fullWidth={true}
-            isDisabled={!this.isLoadingState(LoadingStateType.None)}
-            isLoading={this.isLoadingState(LoadingStateType.Selector, provider.name)}
-            onClick={() => this.loginWithSelector(provider.type, provider.name)}
-          >
-            {provider.description ?? (
-              <FormattedMessage
-                id="xpack.security.loginPage.loginProviderDescription"
-                defaultMessage="Login with {providerType}/{providerName}"
-                values={{
-                  providerType: provider.type,
-                  providerName: provider.name,
-                }}
-              />
-            )}
-          </EuiButton>
+        {this.props.selector.providers.map((provider, index) => (
+          <Fragment key={index}>
+            <EuiButton
+              key={provider.name}
+              iconType="user"
+              fullWidth={true}
+              isDisabled={!this.isLoadingState(LoadingStateType.None)}
+              isLoading={this.isLoadingState(LoadingStateType.Selector, provider.name)}
+              onClick={() => this.loginWithSelector(provider.type, provider.name)}
+            >
+              {provider.description ?? (
+                <FormattedMessage
+                  id="xpack.security.loginPage.loginProviderDescription"
+                  defaultMessage="Login with {providerType}/{providerName}"
+                  values={{
+                    providerType: provider.type,
+                    providerName: provider.name,
+                  }}
+                />
+              )}
+            </EuiButton>
+            <EuiSpacer size="m" />
+          </Fragment>
         ))}
         {loginSelectorAndLoginFormSeparator}
       </>