SONAR-22049 Align buttons components

server/sonar-web/design-system/jest.config.js

@@ -30,6 +30,7 @@ module.exports = {
     'src/components/**/*.{ts,tsx,js}',
     'src/helpers/**/*.{ts,tsx,js}',
     'src/hooks/**/*.{ts,tsx,js}',
+    'src/sonar-aligned/**/*.{ts,tsx,js}',
     '!src/helpers/{keycodes,testUtils}.{ts,tsx}',
   ],
   coverageReporters: ['lcovonly', 'text'],

server/sonar-web/design-system/src/components/Accordion.tsx

@@ -24,8 +24,8 @@ import { uniqueId } from 'lodash';
 import React from 'react';
 import tw from 'twin.macro';
 import { themeBorder, themeColor, themeContrast } from '../helpers';
+import { BareButton } from '../sonar-aligned/components/buttons';
 import { ThemedProps } from '../types';
-import { BareButton } from './buttons';
 import { OpenCloseIndicator } from './icons/OpenCloseIndicator';
 
 interface AccordionProps {

server/sonar-web/design-system/src/components/BorderlessAccordion.tsx

@@ -20,7 +20,7 @@
 import classNames from 'classnames';
 import { uniqueId } from 'lodash';
 import * as React from 'react';
-import { BareButton } from './buttons';
+import { BareButton } from '../sonar-aligned/components/buttons';
 import { OpenCloseIndicator } from './icons/OpenCloseIndicator';
 
 interface AccordionProps {

server/sonar-web/design-system/src/components/BubbleChart.tsx

@@ -29,10 +29,10 @@ import * as React from 'react';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import tw from 'twin.macro';
 import { themeColor, themeContrast } from '../helpers';
+import { ButtonSecondary } from '../sonar-aligned/components/buttons';
 import { BubbleColorVal } from '../types/charts';
 import { Note } from './Text';
 import { Tooltip } from './Tooltip';
-import { ButtonSecondary } from './buttons';
 
 const TICKS_COUNT = 5;
 

server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx

@@ -22,7 +22,7 @@ import classNames from 'classnames';
 import { ReactNode } from 'react';
 import tw from 'twin.macro';
 import { themeBorder, themeColor, themeContrast } from '../helpers/theme';
-import { BareButton } from './buttons';
+import { BareButton } from '../sonar-aligned/components/buttons';
 import { OpenCloseIndicator } from './icons/OpenCloseIndicator';
 
 interface Props {

server/sonar-web/design-system/src/components/FacetBox.tsx

@@ -23,11 +23,11 @@ import { uniqueId } from 'lodash';
 import * as React from 'react';
 import tw from 'twin.macro';
 import { themeColor } from '../helpers';
+import { BareButton } from '../sonar-aligned/components/buttons';
 import { Badge } from './Badge';
 import { DestructiveIcon } from './InteractiveIcon';
 import { Spinner } from './Spinner';
 import { Tooltip as SCTooltip } from './Tooltip';
-import { BareButton } from './buttons';
 import { OpenCloseIndicator } from './icons';
 import { CloseIcon } from './icons/CloseIcon';
 

server/sonar-web/design-system/src/components/FacetItem.tsx

@@ -23,7 +23,7 @@ import * as React from 'react';
 import tw from 'twin.macro';
 import { themeBorder, themeColor, themeContrast } from '../helpers';
 import { isDefined } from '../helpers/types';
-import { ButtonProps, ButtonSecondary } from './buttons';
+import { ButtonProps, ButtonSecondary } from '../sonar-aligned/components/buttons';
 
 export type FacetItemProps = Omit<ButtonProps, 'name' | 'onClick'> & {
   active?: boolean;

server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx

@@ -20,7 +20,7 @@
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { themeColor } from '../helpers/theme';
-import { ButtonProps, DangerButtonSecondary } from './buttons';
+import { ButtonProps, DangerButtonSecondary } from '../sonar-aligned/components/buttons';
 import { ChevronRightIcon } from './icons/ChevronRightIcon';
 
 const StyledFailedQGConditionLink = styled(DangerButtonSecondary)`

server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx

@@ -22,7 +22,7 @@ import classNames from 'classnames';
 import { ReactNode } from 'react';
 import tw from 'twin.macro';
 import { themeBorder, themeColor } from '../helpers/theme';
-import { BareButton } from './buttons';
+import { BareButton } from '../sonar-aligned/components/buttons';
 
 interface Props {
   className?: string;

server/sonar-web/design-system/src/components/SpotlightTour.tsx

@@ -29,7 +29,8 @@ import ReactJoyride, {
 import tw from 'twin.macro';
 import { GLOBAL_POPUP_Z_INDEX, PopupZLevel, themeColor } from '../helpers';
 import { findAnchor } from '../helpers/dom';
-import { ButtonLink, ButtonPrimary, WrapperButton } from './buttons';
+import { ButtonPrimary } from '../sonar-aligned/components/buttons';
+import { ButtonLink, WrapperButton } from './buttons';
 import { CloseIcon } from './icons';
 import { PopupWrapper } from './popups';
 

server/sonar-web/design-system/src/components/Tabs.tsx

@@ -22,8 +22,8 @@ import { PropsWithChildren } from 'react';
 import tw from 'twin.macro';
 import { OPACITY_20_PERCENT, themeBorder, themeColor } from '../helpers';
 import { getTabId, getTabPanelId } from '../helpers/tabs';
+import { BareButton } from '../sonar-aligned/components/buttons';
 import { Badge } from './Badge';
-import { BareButton } from './buttons';
 
 type TabValueType = string | number | boolean;
 

server/sonar-web/design-system/src/components/TextAccordion.tsx

@@ -23,8 +23,8 @@ import { uniqueId } from 'lodash';
 import React, { ReactNode } from 'react';
 import tw from 'twin.macro';
 import { themeColor } from '../helpers';
+import { BareButton } from '../sonar-aligned/components/buttons';
 import { Note } from './Text';
-import { BareButton } from './buttons';
 import { OpenCloseIndicator } from './icons';
 
 interface Props {

server/sonar-web/design-system/src/components/ToggleButton.tsx

@@ -21,8 +21,8 @@ import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { getTabId, getTabPanelId } from '../helpers/tabs';
 import { themeBorder, themeColor, themeContrast } from '../helpers/theme';
+import { ButtonSecondary } from '../sonar-aligned/components/buttons';
 import { Badge } from './Badge';
-import { ButtonSecondary } from './buttons';
 
 type ToggleButtonValueType = string | number | boolean;
 

server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx

@@ -19,8 +19,8 @@
  */
 import { screen } from '@testing-library/react';
 import { renderWithRouter } from '../../helpers/testUtils';
+import { ButtonSecondary } from '../../sonar-aligned/components/buttons';
 import { ActionsDropdown, Dropdown } from '../Dropdown';
-import { ButtonSecondary } from '../buttons';
 
 describe('Dropdown', () => {
   it('renders', async () => {

server/sonar-web/design-system/src/components/buttons/BareButtons.tsx

@@ -20,15 +20,7 @@
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { themeBorder, themeColor, themeContrast } from '../../helpers';
-
-export const BareButton = styled.button`
-  all: unset;
-  cursor: pointer;
-
-  &:focus-visible {
-    background-color: ${themeColor('dropdownMenuHover')};
-  }
-`;
+import { BareButton } from '../../sonar-aligned/components/buttons';
 
 interface CodeViewerExpanderProps {
   direction: 'UP' | 'DOWN';

server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx

@@ -20,7 +20,7 @@
 import styled from '@emotion/styled';
 import tw from 'twin.macro';
 import { themeBorder, themeColor } from '../../helpers';
-import { BareButton } from './BareButtons';
+import { BareButton } from '../../sonar-aligned/components/buttons';
 
 export const ButtonLink = styled(BareButton)`
   color: ${themeColor('linkDefault')};

server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx

@@ -18,8 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { buttonStyle } from './Button';
-import { PrimaryStyle } from './ButtonPrimary';
+import { buttonStyle, PrimaryStyle } from '../../sonar-aligned/components/buttons';
 
 export const DownloadButton = styled.a`
   ${buttonStyle}

server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx

@@ -19,7 +19,7 @@
  */
 import styled from '@emotion/styled';
 import { OPACITY_20_PERCENT, themeColor } from '../../helpers';
-import { Button, ButtonProps } from './Button';
+import { Button, ButtonProps } from '../../sonar-aligned/components/buttons';
 
 export const WrapperButton: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
   --background: none;

server/sonar-web/design-system/src/components/buttons/index.ts

@@ -18,12 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 export * from './BareButtons';
-export * from './Button';
 export * from './ButtonLink';
-export * from './ButtonPrimary';
-export * from './ButtonSecondary';
-export * from './DangerButtonPrimary';
-export * from './DangerButtonSecondary';
 export * from './DownloadButton';
-export * from './ThirdPartyButton';
 export * from './WrapperButton';

server/sonar-web/design-system/src/components/clipboard.tsx

@@ -21,9 +21,9 @@ import classNames from 'classnames';
 import Clipboard from 'clipboard';
 import React from 'react';
 import { INTERACTIVE_TOOLTIP_DELAY } from '../helpers/constants';
+import { ButtonSecondary } from '../sonar-aligned/components/buttons';
 import { DiscreetInteractiveIcon, InteractiveIcon, InteractiveIconSize } from './InteractiveIcon';
 import { Tooltip } from './Tooltip';
-import { ButtonSecondary } from './buttons';
 import { CopyIcon } from './icons/CopyIcon';
 import { IconProps } from './icons/Icon';
 

server/sonar-web/design-system/src/components/code-line/LineFinding.tsx

@@ -21,7 +21,7 @@ import styled from '@emotion/styled';
 import { forwardRef, Ref } from 'react';
 import tw from 'twin.macro';
 import { themeBorder, themeColor, themeContrast, themeShadow } from '../../helpers/theme';
-import { BareButton } from '../buttons';
+import { BareButton } from '../../sonar-aligned/components/buttons';
 
 interface Props {
   className?: string;

server/sonar-web/design-system/src/components/input/FileInput.tsx

@@ -19,8 +19,8 @@
  */
 import classNames from 'classnames';
 import { useCallback, useRef, useState } from 'react';
+import { ButtonSecondary } from '../../sonar-aligned/components/buttons/ButtonSecondary';
 import { Note } from '../Text';
-import { ButtonSecondary } from '../buttons/ButtonSecondary';
 
 interface Props {
   chooseLabel: string;

server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx

@@ -20,9 +20,10 @@
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 import { themeBorder } from '../../helpers';
+import { ButtonProps } from '../../sonar-aligned/components/buttons';
 import { Badge } from '../Badge';
 import { LightLabel } from '../Text';
-import { ButtonProps, WrapperButton } from '../buttons';
+import { WrapperButton } from '../buttons';
 import { ChevronDownIcon } from '../icons';
 
 interface Props extends Pick<ButtonProps, 'onClick'> {

server/sonar-web/design-system/src/components/modal/Modal.tsx

@@ -25,8 +25,8 @@ import ReactModal from 'react-modal';
 import tw from 'twin.macro';
 import { themeColor } from '../../helpers';
 import { REACT_DOM_CONTAINER } from '../../helpers/constants';
+import { ButtonSecondary } from '../../sonar-aligned/components/buttons';
 import { Theme } from '../../types/theme';
-import { ButtonSecondary } from '../buttons';
 import { ModalBody } from './ModalBody';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';

server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx

@@ -21,7 +21,7 @@ import styled from '@emotion/styled';
 import { ReactNode, useCallback, useState } from 'react';
 import tw from 'twin.macro';
 import { themeColor, themeContrast } from '../../helpers/theme';
-import { BareButton } from '../buttons';
+import { BareButton } from '../../sonar-aligned/components/buttons';
 import { OpenCloseIndicator } from '../icons/OpenCloseIndicator';
 import { SubnavigationGroup } from './SubnavigationGroup';
 

server/sonar-web/design-system/src/sonar-aligned/components/buttons/BareButton.tsx

@@ -0,0 +1,30 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * 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 { themeColor } from '../../../helpers';
+
+export const BareButton = styled.button`
+  all: unset;
+  cursor: pointer;
+
+  &:focus-visible {
+    background-color: ${themeColor('dropdownMenuHover')};
+  }
+`;

server/sonar-web/design-system/src/components/buttons/Button.tsx → server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx

@@ -21,9 +21,9 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import React from 'react';
 import tw from 'twin.macro';
-import { themeBorder, themeColor, themeContrast } from '../../helpers/theme';
-import { ThemedProps } from '../../types/theme';
-import { BaseLink, LinkProps } from '../Link';
+import { BaseLink, LinkProps } from '../../../components/Link';
+import { themeBorder, themeColor, themeContrast } from '../../../helpers/theme';
+import { ThemedProps } from '../../../types/theme';
 
 type AllowedButtonAttributes = Pick<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -38,10 +38,11 @@ export interface ButtonProps extends AllowedButtonAttributes {
   icon?: React.ReactNode;
   innerRef?: React.Ref<HTMLButtonElement>;
   isExternal?: LinkProps['isExternal'];
-  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown;
 
+  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown;
   preventDefault?: boolean;
   reloadDocument?: LinkProps['reloadDocument'];
+  showExternalIcon?: boolean;
   stopPropagation?: boolean;
   target?: LinkProps['target'];
   to?: LinkProps['to'];

server/sonar-web/design-system/src/components/buttons/ButtonPrimary.tsx → server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx

@@ -19,8 +19,8 @@
  */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers';
-import { ThemedProps } from '../../types';
+import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
+import { ThemedProps } from '../../../types';
 import { Button, ButtonProps } from './Button';
 
 export const PrimaryStyle = (props: ThemedProps) => css`

server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx → server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers';
+import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
 import { Button, ButtonProps } from './Button';
 
 export const ButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`

server/sonar-web/design-system/src/components/buttons/DangerButtonPrimary.tsx → server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers';
+import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
 import { Button, ButtonProps } from './Button';
 
 export const DangerButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`

server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx → server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx

@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../helpers';
+import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
 import { Button, ButtonProps } from './Button';
 
 export const DangerButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`

server/sonar-web/design-system/src/components/buttons/ThirdPartyButton.tsx → server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx

@@ -19,8 +19,8 @@
  */
 import styled from '@emotion/styled';
 import React from 'react';
-import { OPACITY_20_PERCENT } from '../../helpers/constants';
-import { themeBorder, themeColor, themeContrast } from '../../helpers/theme';
+import { OPACITY_20_PERCENT } from '../../../helpers/constants';
+import { themeBorder, themeColor, themeContrast } from '../../../helpers/theme';
 import { Button, ButtonProps } from './Button';
 
 interface ThirdPartyProps extends Omit<ButtonProps, 'Icon'> {

server/sonar-web/design-system/src/sonar-aligned/components/buttons/index.ts

@@ -0,0 +1,27 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2024 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+export * from './BareButton';
+export * from './Button';
+export * from './ButtonPrimary';
+export * from './ButtonSecondary';
+export * from './DangerButtonPrimary';
+export * from './DangerButtonSecondary';
+export * from './ThirdPartyButton';

server/sonar-web/design-system/src/sonar-aligned/components/index.ts

@@ -20,3 +20,4 @@
 
 export * from './Card';
 export * from './MetricsRatingBadge';
+export * from './buttons';