From 21e048436dce0144c2e7266085286eec8f517dce Mon Sep 17 00:00:00 2001 From: stanislavh Date: Wed, 24 Apr 2024 15:01:18 +0200 Subject: [PATCH] SONAR-22049 Align buttons components --- server/sonar-web/design-system/jest.config.js | 1 + .../src/components/Accordion.tsx | 2 +- .../src/components/BorderlessAccordion.tsx | 2 +- .../src/components/BubbleChart.tsx | 2 +- .../src/components/ExecutionFlowAccordion.tsx | 2 +- .../design-system/src/components/FacetBox.tsx | 2 +- .../src/components/FacetItem.tsx | 2 +- .../src/components/FailedQGConditionLink.tsx | 2 +- .../components/IlllustredSelectionCard.tsx | 2 +- .../src/components/SpotlightTour.tsx | 3 +- .../design-system/src/components/Tabs.tsx | 2 +- .../src/components/TextAccordion.tsx | 2 +- .../src/components/ToggleButton.tsx | 2 +- .../components/__tests__/Dropdown-test.tsx | 2 +- .../src/components/buttons/BareButtons.tsx | 10 +------ .../src/components/buttons/ButtonLink.tsx | 2 +- .../src/components/buttons/DownloadButton.tsx | 3 +- .../src/components/buttons/WrapperButton.tsx | 2 +- .../src/components/buttons/index.ts | 6 ---- .../src/components/clipboard.tsx | 2 +- .../src/components/code-line/LineFinding.tsx | 2 +- .../src/components/input/FileInput.tsx | 2 +- .../src/components/input/InputMultiSelect.tsx | 3 +- .../src/components/modal/Modal.tsx | 2 +- .../subnavigation/SubnavigationAccordion.tsx | 2 +- .../components/buttons/BareButton.tsx | 30 +++++++++++++++++++ .../components/buttons/Button.tsx | 9 +++--- .../components/buttons/ButtonPrimary.tsx | 4 +-- .../components/buttons/ButtonSecondary.tsx | 2 +- .../buttons/DangerButtonPrimary.tsx | 2 +- .../buttons/DangerButtonSecondary.tsx | 2 +- .../components/buttons/ThirdPartyButton.tsx | 4 +-- .../buttons/__tests__/ButtonPrimary-test.tsx | 0 .../sonar-aligned/components/buttons/index.ts | 27 +++++++++++++++++ .../src/sonar-aligned/components/index.ts | 1 + 35 files changed, 96 insertions(+), 49 deletions(-) create mode 100644 server/sonar-web/design-system/src/sonar-aligned/components/buttons/BareButton.tsx rename server/sonar-web/design-system/src/{ => sonar-aligned}/components/buttons/Button.tsx (95%) rename server/sonar-web/design-system/src/{ => sonar-aligned}/components/buttons/ButtonPrimary.tsx (95%) rename server/sonar-web/design-system/src/{ => sonar-aligned}/components/buttons/ButtonSecondary.tsx (97%) rename server/sonar-web/design-system/src/{ => sonar-aligned}/components/buttons/DangerButtonPrimary.tsx (97%) rename server/sonar-web/design-system/src/{ => sonar-aligned}/components/buttons/DangerButtonSecondary.tsx (97%) rename server/sonar-web/design-system/src/{ => sonar-aligned}/components/buttons/ThirdPartyButton.tsx (92%) rename server/sonar-web/design-system/src/{ => sonar-aligned}/components/buttons/__tests__/ButtonPrimary-test.tsx (100%) create mode 100644 server/sonar-web/design-system/src/sonar-aligned/components/buttons/index.ts diff --git a/server/sonar-web/design-system/jest.config.js b/server/sonar-web/design-system/jest.config.js index 317814650ab..7201800d75c 100644 --- a/server/sonar-web/design-system/jest.config.js +++ b/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'], diff --git a/server/sonar-web/design-system/src/components/Accordion.tsx b/server/sonar-web/design-system/src/components/Accordion.tsx index 73fc773fdea..f5f464b7fa1 100644 --- a/server/sonar-web/design-system/src/components/Accordion.tsx +++ b/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 { diff --git a/server/sonar-web/design-system/src/components/BorderlessAccordion.tsx b/server/sonar-web/design-system/src/components/BorderlessAccordion.tsx index 9242060befb..1fae58315d6 100644 --- a/server/sonar-web/design-system/src/components/BorderlessAccordion.tsx +++ b/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 { diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx index 9f2e0dee405..5fa8237f4c9 100644 --- a/server/sonar-web/design-system/src/components/BubbleChart.tsx +++ b/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; diff --git a/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx b/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx index cc37544272a..04d8c44f668 100644 --- a/server/sonar-web/design-system/src/components/ExecutionFlowAccordion.tsx +++ b/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 { diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx index beab0da8021..8b13dc4cac8 100644 --- a/server/sonar-web/design-system/src/components/FacetBox.tsx +++ b/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'; diff --git a/server/sonar-web/design-system/src/components/FacetItem.tsx b/server/sonar-web/design-system/src/components/FacetItem.tsx index 7661f355be8..91e258c9f3e 100644 --- a/server/sonar-web/design-system/src/components/FacetItem.tsx +++ b/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 & { active?: boolean; diff --git a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx b/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx index c0095d098a7..bf35fcfd35d 100644 --- a/server/sonar-web/design-system/src/components/FailedQGConditionLink.tsx +++ b/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)` diff --git a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx b/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx index c2efbfab10d..b4cb668ec0d 100644 --- a/server/sonar-web/design-system/src/components/IlllustredSelectionCard.tsx +++ b/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; diff --git a/server/sonar-web/design-system/src/components/SpotlightTour.tsx b/server/sonar-web/design-system/src/components/SpotlightTour.tsx index de47b27411b..62bc70df15b 100644 --- a/server/sonar-web/design-system/src/components/SpotlightTour.tsx +++ b/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'; diff --git a/server/sonar-web/design-system/src/components/Tabs.tsx b/server/sonar-web/design-system/src/components/Tabs.tsx index 959691a5ab4..21a7fa765c8 100644 --- a/server/sonar-web/design-system/src/components/Tabs.tsx +++ b/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; diff --git a/server/sonar-web/design-system/src/components/TextAccordion.tsx b/server/sonar-web/design-system/src/components/TextAccordion.tsx index c8580e418a7..cbb65f6d803 100644 --- a/server/sonar-web/design-system/src/components/TextAccordion.tsx +++ b/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 { diff --git a/server/sonar-web/design-system/src/components/ToggleButton.tsx b/server/sonar-web/design-system/src/components/ToggleButton.tsx index abe8d4d2b30..4c6b266b91d 100644 --- a/server/sonar-web/design-system/src/components/ToggleButton.tsx +++ b/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; diff --git a/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx index 14447b7cb4a..eb3c7cfd4d7 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Dropdown-test.tsx +++ b/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 () => { diff --git a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx b/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx index b444499a7dc..bcdf9f50b08 100644 --- a/server/sonar-web/design-system/src/components/buttons/BareButtons.tsx +++ b/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'; diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx b/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx index 3f55184e764..bf52f03599a 100644 --- a/server/sonar-web/design-system/src/components/buttons/ButtonLink.tsx +++ b/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')}; diff --git a/server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx b/server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx index 626556d1d86..e367df53622 100644 --- a/server/sonar-web/design-system/src/components/buttons/DownloadButton.tsx +++ b/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} diff --git a/server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx b/server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx index 26139624a3d..30e1bdd2d05 100644 --- a/server/sonar-web/design-system/src/components/buttons/WrapperButton.tsx +++ b/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> = styled(Button)` --background: none; diff --git a/server/sonar-web/design-system/src/components/buttons/index.ts b/server/sonar-web/design-system/src/components/buttons/index.ts index 59968d556b2..723fd19cf7f 100644 --- a/server/sonar-web/design-system/src/components/buttons/index.ts +++ b/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'; diff --git a/server/sonar-web/design-system/src/components/clipboard.tsx b/server/sonar-web/design-system/src/components/clipboard.tsx index 1f5767d5a33..a5c30188f6b 100644 --- a/server/sonar-web/design-system/src/components/clipboard.tsx +++ b/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'; diff --git a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx b/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx index f2f613c3820..0d5eda10f6d 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineFinding.tsx +++ b/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; diff --git a/server/sonar-web/design-system/src/components/input/FileInput.tsx b/server/sonar-web/design-system/src/components/input/FileInput.tsx index 17082a3f4ac..8ac68f29e77 100644 --- a/server/sonar-web/design-system/src/components/input/FileInput.tsx +++ b/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; diff --git a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx b/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx index 1dc57196c19..39fbfece029 100644 --- a/server/sonar-web/design-system/src/components/input/InputMultiSelect.tsx +++ b/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 { diff --git a/server/sonar-web/design-system/src/components/modal/Modal.tsx b/server/sonar-web/design-system/src/components/modal/Modal.tsx index d7654dbce00..9b1a05caa56 100644 --- a/server/sonar-web/design-system/src/components/modal/Modal.tsx +++ b/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'; diff --git a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx b/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx index 4c1d230c57a..ded1108c55f 100644 --- a/server/sonar-web/design-system/src/components/subnavigation/SubnavigationAccordion.tsx +++ b/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'; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/BareButton.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/BareButton.tsx new file mode 100644 index 00000000000..02b49e3f53d --- /dev/null +++ b/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')}; + } +`; diff --git a/server/sonar-web/design-system/src/components/buttons/Button.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx similarity index 95% rename from server/sonar-web/design-system/src/components/buttons/Button.tsx rename to server/sonar-web/design-system/src/sonar-aligned/components/buttons/Button.tsx index 6d17cd784f2..db5693e7f63 100644 --- a/server/sonar-web/design-system/src/components/buttons/Button.tsx +++ b/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, @@ -38,10 +38,11 @@ export interface ButtonProps extends AllowedButtonAttributes { icon?: React.ReactNode; innerRef?: React.Ref; isExternal?: LinkProps['isExternal']; - onClick?: (event: React.MouseEvent) => unknown; + onClick?: (event: React.MouseEvent) => unknown; preventDefault?: boolean; reloadDocument?: LinkProps['reloadDocument']; + showExternalIcon?: boolean; stopPropagation?: boolean; target?: LinkProps['target']; to?: LinkProps['to']; diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx similarity index 95% rename from server/sonar-web/design-system/src/components/buttons/ButtonPrimary.tsx rename to server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx index 498a144b3f7..a3355135482 100644 --- a/server/sonar-web/design-system/src/components/buttons/ButtonPrimary.tsx +++ b/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` diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx similarity index 97% rename from server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx rename to server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx index bd898e1e4ed..3ee6c5f2892 100644 --- a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx +++ b/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> = styled(Button)` diff --git a/server/sonar-web/design-system/src/components/buttons/DangerButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx similarity index 97% rename from server/sonar-web/design-system/src/components/buttons/DangerButtonPrimary.tsx rename to server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx index ba8e2df5bb4..b0770cdfce1 100644 --- a/server/sonar-web/design-system/src/components/buttons/DangerButtonPrimary.tsx +++ b/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> = styled(Button)` diff --git a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx similarity index 97% rename from server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx rename to server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx index 94935bf0bf0..8815ab12de9 100644 --- a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx +++ b/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> = styled(Button)` diff --git a/server/sonar-web/design-system/src/components/buttons/ThirdPartyButton.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx similarity index 92% rename from server/sonar-web/design-system/src/components/buttons/ThirdPartyButton.tsx rename to server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx index 4f85fb6f50e..9239e4ab209 100644 --- a/server/sonar-web/design-system/src/components/buttons/ThirdPartyButton.tsx +++ b/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 { diff --git a/server/sonar-web/design-system/src/components/buttons/__tests__/ButtonPrimary-test.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/__tests__/ButtonPrimary-test.tsx similarity index 100% rename from server/sonar-web/design-system/src/components/buttons/__tests__/ButtonPrimary-test.tsx rename to server/sonar-web/design-system/src/sonar-aligned/components/buttons/__tests__/ButtonPrimary-test.tsx diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/index.ts b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/index.ts new file mode 100644 index 00000000000..6ee90cb4fa7 --- /dev/null +++ b/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'; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/index.ts b/server/sonar-web/design-system/src/sonar-aligned/components/index.ts index 4aff4e3e703..2dd07df0a9c 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/index.ts +++ b/server/sonar-web/design-system/src/sonar-aligned/components/index.ts @@ -20,3 +20,4 @@ export * from './Card'; export * from './MetricsRatingBadge'; +export * from './buttons'; -- 2.39.5