Review#5: use EuiSpacer instead of CSS margin.

elastic · Mar 23, 2020 · f6b1d4f · f6b1d4f
1 parent 37c6489
commit f6b1d4f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 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
@@ -27,7 +27,3 @@
     max-width: 700px;
   }
 }
-
-.loginWelcome__selectorButton {
-  margin-bottom: $euiSize;
-}
diff --git a/.../public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap b/.../public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
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
@@ -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}
       </>