ref(ui): Consistent close button on dismissable alerts (#42918)

static/app/components/globalSdkUpdateAlert.spec.tsx

@@ -239,7 +239,7 @@ describe('GlobalSDKUpdateAlert', () => {
       organization: TestStubs.Organization(),
     });
 
-    userEvent.click(await screen.findByText(/Remind me later/));
+    userEvent.click(await screen.findByRole('button', {name: 'Remind me later'}));
 
     expect(promptsActivityMock).toHaveBeenCalledWith(
       '/prompts-activity/',

static/app/components/globalSdkUpdateAlert.tsx

@@ -1,8 +1,12 @@
-import {Fragment, useCallback, useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 
 import {promptsCheck, promptsUpdate} from 'sentry/actionCreators/prompts';
 import Alert, {AlertProps} from 'sentry/components/alert';
+import Button from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
+import {SidebarPanelKey} from 'sentry/components/sidebar/types';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
+import {IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import SidebarPanelStore from 'sentry/stores/sidebarPanelStore';
 import {ProjectSdkUpdates} from 'sentry/types';
@@ -13,9 +17,6 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import withSdkUpdates from 'sentry/utils/withSdkUpdates';
 
-import {SidebarPanelKey} from './sidebar/types';
-import Button from './button';
-
 interface InnerGlobalSdkSuggestionsProps extends AlertProps {
   className?: string;
   sdkUpdates?: ProjectSdkUpdates[] | null;
@@ -92,20 +93,19 @@ function InnerGlobalSdkUpdateAlert(
       showIcon
       className={props.className}
       trailingItems={
-        <Fragment>
+        <ButtonBar gap={2}>
+          <Button priority="link" size="xs" onClick={handleReviewUpdatesClick}>
+            {t('Review updates')}
+          </Button>
           <Button
-            priority="link"
-            size="zero"
+            aria-label={t('Remind me later')}
             title={t('Dismiss for the next two weeks')}
+            priority="link"
+            size="xs"
+            icon={<IconClose />}
             onClick={handleSnoozePrompt}
-          >
-            {t('Remind me later')}
-          </Button>
-          <span>|</span>
-          <Button priority="link" size="zero" onClick={handleReviewUpdatesClick}>
-            {t('Review updates')}
-          </Button>
-        </Fragment>
+          />
+        </ButtonBar>
       }
     >
       {t(
@@ -115,9 +115,6 @@ function InnerGlobalSdkUpdateAlert(
   );
 }
 
-const WithSdkUpdatesGlobalSdkUpdateAlert = withSdkUpdates(InnerGlobalSdkUpdateAlert);
+const GlobalSdkUpdateAlert = withSdkUpdates(InnerGlobalSdkUpdateAlert);
 
-export {
-  WithSdkUpdatesGlobalSdkUpdateAlert as GlobalSdkUpdateAlert,
-  InnerGlobalSdkUpdateAlert,
-};
+export {GlobalSdkUpdateAlert, InnerGlobalSdkUpdateAlert};

static/app/views/organizationGroupDetails/quickTrace/issueQuickTrace.tsx

@@ -58,13 +58,13 @@ function IssueQuickTrace({
         showIcon
         trailingItems={
           <Button
-            priority="link"
-            size="zero"
+            aria-label={t('Remind me later')}
             title={t('Dismiss for a month')}
+            priority="link"
+            size="xs"
+            icon={<IconClose />}
             onClick={snoozePrompt}
-          >
-            <IconClose />
-          </Button>
+          />
         }
       >
         {tct(