SONAR-22616 Fix Activity graph dropdown/select buttons

2 files changed, 23 insertions, 20 deletions

diff --git a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
index 709fd8f98ea..d8dda386b12 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
@@ -17,8 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { Button } from '@sonarsource/echoes-react';
-import { ChevronDownIcon, Dropdown, TextMuted } from 'design-system';
+
+import { Button, IconChevronDown } from '@sonarsource/echoes-react';
+import { Dropdown, TextMuted } from 'design-system';
 import { sortBy } from 'lodash';
 import * as React from 'react';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
@@ -152,14 +153,11 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
           />
         }
       >
-        <Button
-          className={
-            'sw-ml-2 sw-body-sm sw-flex sw-flex-row sw-justify-between sw-pl-3 sw-pr-2 sw-w-32 ' +
-            'sw-z-normal' // needed because the legends overlap part of the button
-          }
-        >
-          <TextMuted text={translate('project_activity.graphs.custom.add')} />
-          <ChevronDownIcon className="sw-ml-1 sw-mr-0 sw-pr-0" />
+        <Button suffix={<IconChevronDown />}>
+          <TextMuted
+            className="sw-body-sm sw-flex"
+            text={translate('project_activity.graphs.custom.add')}
+          />
         </Button>
       </Dropdown>
     );
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
index 84838048d91..8390f89174f 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
@@ -18,8 +18,14 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { Button, DropdownMenu, DropdownMenuAlign } from '@sonarsource/echoes-react';
-import { ChevronDownIcon, TextMuted } from 'design-system';
+import {
+  Button,
+  ButtonGroup,
+  DropdownMenu,
+  DropdownMenuAlign,
+  IconChevronDown,
+} from '@sonarsource/echoes-react';
+import { TextMuted } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { GraphType } from '../../types/project-activity';
@@ -76,17 +82,16 @@ export default function GraphsHeader(props: Props) {
 
   return (
     <div className={className}>
-      <div className="sw-flex">
+      <ButtonGroup>
         <DropdownMenu.Root align={DropdownMenuAlign.Start} id="activity-graph-type" items={options}>
           <Button
             aria-label={translate('project_activity.graphs.choose_type')}
-            className={
-              'sw-body-sm sw-flex sw-flex-row sw-justify-between sw-pl-3 sw-pr-2 sw-w-32 ' +
-              'sw-z-normal' // needed because the legends overlap part of the button
-            }
+            suffix={<IconChevronDown />}
           >
-            <TextMuted text={translate('project_activity.graphs', graph)} />
-            <ChevronDownIcon className="sw-ml-1 sw-mr-0 sw-pr-0" />
+            <TextMuted
+              className="sw-body-sm sw-flex"
+              text={translate('project_activity.graphs', graph)}
+            />
           </Button>
         </DropdownMenu.Root>
 
@@ -101,7 +106,7 @@ export default function GraphsHeader(props: Props) {
               selectedMetrics={selectedMetrics}
             />
           )}
-      </div>
+      </ButtonGroup>
     </div>
   );
 }