Chore: UserSignup and LoginServiceButtons - Replace VerticalGroup with Stack (#86616)

.betterer.results

@@ -1151,12 +1151,6 @@ exports[`better eslint`] = {
     "public/app/core/components/LocalStorageValueProvider/index.tsx:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./LocalStorageValueProvider\`)", "0"]
     ],
-    "public/app/core/components/Login/LoginServiceButtons.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/core/components/Login/UserSignup.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],

public/app/core/components/Login/LoginServiceButtons.tsx

@@ -3,7 +3,7 @@ import { pickBy } from 'lodash';
 import React from 'react';
 
 import { GrafanaTheme2, DEFAULT_SAML_NAME } from '@grafana/data';
-import { Icon, IconName, LinkButton, useStyles2, useTheme2, VerticalGroup } from '@grafana/ui';
+import { Icon, IconName, LinkButton, Stack, useStyles2, useTheme2 } from '@grafana/ui';
 import config from 'app/core/config';
 import { Trans } from 'app/core/internationalization';
 
@@ -149,7 +149,7 @@ export const LoginServiceButtons = () => {
 
   if (hasServices) {
     return (
-      <VerticalGroup>
+      <Stack direction="column">
         <LoginDivider />
         {Object.entries(enabledServices).map(([key, service]) => {
           const serviceName = service.name;
@@ -166,7 +166,7 @@ export const LoginServiceButtons = () => {
             </LinkButton>
           );
         })}
-      </VerticalGroup>
+      </Stack>
     );
   }
 

public/app/core/components/Login/UserSignup.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { LinkButton, VerticalGroup } from '@grafana/ui';
+import { LinkButton, Stack } from '@grafana/ui';
 import { getConfig } from 'app/core/config';
 import { Trans } from 'app/core/internationalization';
 
@@ -10,7 +10,7 @@ export const UserSignup = () => {
   const paddingTop = css({ paddingTop: '16px' });
 
   return (
-    <VerticalGroup>
+    <Stack direction="column">
       <div className={paddingTop}>
         <Trans i18nKey="login.signup.new-to-question">New to Grafana?</Trans>
       </div>
@@ -25,6 +25,6 @@ export const UserSignup = () => {
       >
         <Trans i18nKey="login.signup.button-label">Sign up</Trans>
       </LinkButton>
-    </VerticalGroup>
+    </Stack>
   );
 };