ref(releaseDetails): Use `SegmentedControl` for issue type filter (#44123)

**Before ——**
<img width="811" alt="Screenshot 2023-02-03 at 11 19 18 AM"
src="https://user-images.githubusercontent.com/44172267/216692301-3f9084b3-c0a7-4a38-86cf-d4c4083884c8.png">

**After ——**
<img width="811" alt="Screenshot 2023-02-03 at 11 19 02 AM"
src="https://user-images.githubusercontent.com/44172267/216692298-ba98d92f-2721-42d6-af9d-ce607e768db4.png">

https://github.com/getsentry/sentry/issues/43865

static/app/views/releases/detail/overview/releaseIssues.spec.jsx

@@ -69,7 +69,7 @@ describe('ReleaseIssues', function () {
 
     expect(await screen.findByText('No new issues in this release.')).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('button', {name: 'Resolved 0'}));
+    userEvent.click(screen.getByRole('radio', {name: 'Resolved 0'}));
     expect(
       await screen.findByText('No resolved issues in this release.')
     ).toBeInTheDocument();
@@ -84,7 +84,7 @@ describe('ReleaseIssues', function () {
       )
     ).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('button', {name: 'Unhandled 0'}));
+    userEvent.click(screen.getByRole('radio', {name: 'Unhandled 0'}));
     expect(
       await screen.findByText(
         textWithMarkupMatcher('No unhandled issues for the last 24 hours.')
@@ -95,18 +95,18 @@ describe('ReleaseIssues', function () {
   it('filters the issues', function () {
     render(<ReleaseIssues {...props} />);
 
-    expect(screen.getAllByRole('button')).toHaveLength(6);
+    expect(screen.getAllByRole('radio')).toHaveLength(5);
 
-    userEvent.click(screen.getByRole('button', {name: 'New Issues'}));
+    userEvent.click(screen.getByRole('radio', {name: 'New Issues'}));
     expect(newIssuesEndpoint).toHaveBeenCalledTimes(1);
 
-    userEvent.click(screen.getByRole('button', {name: 'Resolved'}));
+    userEvent.click(screen.getByRole('radio', {name: 'Resolved'}));
     expect(resolvedIssuesEndpoint).toHaveBeenCalledTimes(1);
 
-    userEvent.click(screen.getByRole('button', {name: 'Unhandled'}));
+    userEvent.click(screen.getByRole('radio', {name: 'Unhandled'}));
     expect(unhandledIssuesEndpoint).toHaveBeenCalledTimes(1);
 
-    userEvent.click(screen.getByRole('button', {name: 'All Issues'}));
+    userEvent.click(screen.getByRole('radio', {name: 'All Issues'}));
     expect(allIssuesEndpoint).toHaveBeenCalledTimes(1);
   });
 
@@ -120,19 +120,19 @@ describe('ReleaseIssues', function () {
       '/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=firstRelease%3A1.0.0&sort=freq&start=2020-03-23T01%3A02%3A00Z'
     );
 
-    userEvent.click(screen.getByRole('button', {name: 'Resolved'}));
+    userEvent.click(screen.getByRole('radio', {name: 'Resolved'}));
     expect(screen.getByRole('button', {name: 'Open in Issues'})).toHaveAttribute(
       'href',
       '/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=release%3A1.0.0&sort=freq&start=2020-03-23T01%3A02%3A00Z'
     );
 
-    userEvent.click(screen.getByRole('button', {name: 'Unhandled'}));
+    userEvent.click(screen.getByRole('radio', {name: 'Unhandled'}));
     expect(screen.getByRole('button', {name: 'Open in Issues'})).toHaveAttribute(
       'href',
       '/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=release%3A1.0.0%20error.handled%3A0&sort=freq&start=2020-03-23T01%3A02%3A00Z'
     );
 
-    userEvent.click(screen.getByRole('button', {name: 'All Issues'}));
+    userEvent.click(screen.getByRole('radio', {name: 'All Issues'}));
     expect(screen.getByRole('button', {name: 'Open in Issues'})).toHaveAttribute(
       'href',
       '/organizations/org-slug/issues/?end=2020-03-24T02%3A04%3A59Z&groupStatsPeriod=auto&query=release%3A1.0.0&sort=freq&start=2020-03-23T01%3A02%3A00Z'

static/app/views/releases/detail/overview/releaseIssues.tsx

@@ -7,11 +7,12 @@ import * as qs from 'query-string';
 
 import {Client} from 'sentry/api';
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import {Button, ButtonLabel} from 'sentry/components/button';
+import {Button} from 'sentry/components/button';
 import ButtonBar, {ButtonGrid} from 'sentry/components/buttonBar';
 import GroupList from 'sentry/components/issues/groupList';
 import Pagination from 'sentry/components/pagination';
 import QueryCount from 'sentry/components/queryCount';
+import {SegmentedControl} from 'sentry/components/segmentedControl';
 import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -393,24 +394,24 @@ class ReleaseIssues extends Component<Props, State> {
       <Fragment>
         <ControlsWrapper>
           <GuideAnchor target="release_states">
-            <StyledButtonBar active={issuesType} merged>
+            <SegmentedControl
+              aria-label={t('Issue type')}
+              size="xs"
+              value={issuesType}
+              onChange={key => this.handleIssuesTypeSelection(key)}
+            >
               {issuesTypes.map(({value, label, issueCount}) => (
-                <Button
-                  key={value}
-                  barId={value}
-                  size="xs"
-                  onClick={() => this.handleIssuesTypeSelection(value)}
-                >
-                  {label}
+                <SegmentedControl.Item key={value} textValue={label}>
+                  {label}&nbsp;
                   <QueryCount
                     count={issueCount}
                     max={99}
                     hideParens
                     hideIfEmpty={false}
                   />
-                </Button>
+                </SegmentedControl.Item>
               ))}
-            </StyledButtonBar>
+            </SegmentedControl>
           </GuideAnchor>
 
           <OpenInButtonBar gap={1}>
@@ -459,24 +460,6 @@ const OpenInButtonBar = styled(ButtonBar)`
   margin: ${space(1)} 0;
 `;
 
-const StyledButtonBar = styled(ButtonBar)`
-  grid-template-columns: repeat(4, 1fr);
-  ${ButtonLabel} {
-    white-space: nowrap;
-    gap: ${space(0.5)};
-    span:last-child {
-      color: ${p => p.theme.buttonCount};
-    }
-  }
-  .active {
-    ${ButtonLabel} {
-      span:last-child {
-        color: ${p => p.theme.buttonCountActive};
-      }
-    }
-  }
-`;
-
 const StyledPagination = styled(Pagination)`
   margin: 0;
 `;