SONAR-22522 Use ButtonGroup from Echoes

diff --git a/server/sonar-web/design-system/src/components/modal/ModalFooter.tsx b/server/sonar-web/design-system/src/components/modal/ModalFooter.tsx
index 5018df6b8f2b80f857d1f9c68b0f506c596a1df9..52ddd7ed1c00480b1041b5148ea29cb25be257e0 100644 (file)
--- a/server/sonar-web/design-system/src/components/modal/ModalFooter.tsx
+++ b/server/sonar-web/design-system/src/components/modal/ModalFooter.tsx
@@ -17,7 +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 styled from '@emotion/styled';
+import { ButtonGroup } from '@sonarsource/echoes-react';
 import tw from 'twin.macro';
 import { Spinner } from '../Spinner';
 
@@ -27,12 +29,15 @@ interface Props {
   secondaryButton: React.ReactNode;
 }
 
-export function ModalFooter({ loading = false, primaryButton, secondaryButton }: Props) {
+export function ModalFooter({ loading = false, primaryButton, secondaryButton }: Readonly<Props>) {
   return (
     <StyledFooter>
       <Spinner loading={loading} />
-      {primaryButton}
-      {secondaryButton}
+
+      <ButtonGroup>
+        {primaryButton}
+        {secondaryButton}
+      </ButtonGroup>
     </StyledFooter>
   );
 }

diff --git a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap
index f12e392fd28fef646216d709949faefcfe367775..630ebf4e829d298bd66d01c70f4b4a1357f5a2e5 100644 (file)
--- a/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/modal/__tests__/__snapshots__/ModalFooter-test.tsx.snap
@@ -50,6 +50,18 @@ exports[`should render with primary and secondary buttons 1`] = `
   border-radius: 625rem;
 }
 
+.emotion-4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: var(--echoes-dimension-space-100);
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -67,16 +79,20 @@ exports[`should render with primary and secondary buttons 1`] = `
         />
       </div>
     </div>
-    <button
-      type="button"
-    >
-      Primary
-    </button>
-    <button
-      type="reset"
+    <span
+      class="emotion-4 emotion-5"
     >
-      Reset
-    </button>
+      <button
+        type="button"
+      >
+        Primary
+      </button>
+      <button
+        type="reset"
+      >
+        Reset
+      </button>
+    </span>
   </div>
 </div>
 `;
@@ -131,6 +147,18 @@ exports[`should render with secondary button 1`] = `
   border-radius: 625rem;
 }
 
+.emotion-4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: var(--echoes-dimension-space-100);
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -148,11 +176,15 @@ exports[`should render with secondary button 1`] = `
         />
       </div>
     </div>
-    <button
-      type="button"
+    <span
+      class="emotion-4 emotion-5"
     >
-      Close
-    </button>
+      <button
+        type="button"
+      >
+        Close
+      </button>
+    </span>
   </div>
 </div>
 `;

diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
index 7320eb30c822a712f5529f3c7748af55ddbf97b9..266fdf17d95cd625a3b63e98957c9265a87a81ab 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
@@ -17,6 +17,8 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+
+import { ButtonGroup } from '@sonarsource/echoes-react';
 import { InputSearch, LightLabel, LightPrimary } from 'design-system';
 import * as React from 'react';
 import { RawQuery } from '~sonar-aligned/types/router';
@@ -42,7 +44,7 @@ interface Props {
 
 const MIN_SEARCH_QUERY_LENGTH = 2;
 
-export default function PageHeader(props: Props) {
+export default function PageHeader(props: Readonly<Props>) {
   const { query, total, currentUser, view } = props;
   const defaultOption = isLoggedIn(currentUser) ? 'name' : 'analysis_date';
 
@@ -53,9 +55,13 @@ export default function PageHeader(props: Props) {
   return (
     <div className="it__page-header sw-flex sw-flex-col">
       <div className="sw-flex sw-justify-end sw-mb-4">
-        <ProjectCreationMenu />
-        <ApplicationCreation className="sw-ml-2" />
+        <ButtonGroup>
+          <ProjectCreationMenu />
+
+          <ApplicationCreation />
+        </ButtonGroup>
       </div>
+
       <div className="sw-flex sw-justify-between">
         <div className="sw-flex sw-flex-1">
           <Tooltip content={translate('projects.search')}>
@@ -69,7 +75,9 @@ export default function PageHeader(props: Props) {
               searchInputAriaLabel={translate('search_verb')}
             />
           </Tooltip>
+
           <PerspectiveSelect onChange={props.onPerspectiveChange} view={view} />
+
           <ProjectsSortingSelect
             defaultOption={defaultOption}
             onChange={props.onSortChange}
@@ -77,15 +85,18 @@ export default function PageHeader(props: Props) {
             view={view}
           />
         </div>
+
         <div className="sw-flex sw-items-center">
           {total != null && (
             <>
               <LightPrimary id="projects-total" className="sw-body-sm-highlight sw-mr-1">
                 {total}
               </LightPrimary>
+
               <LightLabel className="sw-body-sm">{translate('projects_')}</LightLabel>
             </>
           )}
+
           <HomePageSelect currentPage={{ type: 'PROJECTS' }} />
         </div>
       </div>