From: Jeremy Davis Date: Thu, 7 Mar 2024 13:57:28 +0000 (+0100) Subject: SONAR-21656 Remove legacy buttons X-Git-Tag: 10.5.0.89998~148 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c0dae13e030edba13bf325e852ad858a8c44b0c0;p=sonarqube.git SONAR-21656 Remove legacy buttons --- diff --git a/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx b/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx index 8191401ce61..6ee818fdb16 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/NewCodeDefinition.tsx @@ -17,12 +17,12 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Spinner } from '@sonarsource/echoes-react'; import classNames from 'classnames'; -import { Spinner } from 'design-system'; +import { ButtonPrimary, ButtonSecondary } from 'design-system'; import React, { useCallback, useEffect } from 'react'; import { FormattedMessage } from 'react-intl'; import DocumentationLink from '../../../components/common/DocumentationLink'; -import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons'; import NewCodeDefinitionDaysOption from '../../../components/new-code-definition/NewCodeDefinitionDaysOption'; import NewCodeDefinitionPreviousVersionOption from '../../../components/new-code-definition/NewCodeDefinitionPreviousVersionOption'; import { NewCodeDefinitionLevels } from '../../../components/new-code-definition/utils'; @@ -117,7 +117,7 @@ export default function NewCodeDefinition() {
- +

{translate('baseline.next_analysis_notice')}

- + {!isSaving && ( <> - + {translate('save')} - - + {translate('cancel')} - + )}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForFormattedText.tsx b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForFormattedText.tsx index de9029a0241..81310536cc7 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForFormattedText.tsx +++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForFormattedText.tsx @@ -18,11 +18,17 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { InputTextArea } from 'design-system'; +import styled from '@emotion/styled'; +import { + ButtonSecondary, + HtmlFormatter, + InputTextArea, + PencilIcon, + themeBorder, + themeColor, +} from 'design-system'; import * as React from 'react'; import FormattingTipsWithLink from '../../../../components/common/FormattingTipsWithLink'; -import { Button } from '../../../../components/controls/buttons'; -import EditIcon from '../../../../components/icons/EditIcon'; import { translate } from '../../../../helpers/l10n'; import { sanitizeUserInput } from '../../../../helpers/sanitize'; import { DefaultSpecializedInputProps, getPropertyName } from '../../utils'; @@ -53,15 +59,26 @@ export default function InputForFormattedText(props: DefaultSpecializedInputProp
) : ( <> -
- + ); } + +const FormattedPreviewBox = styled.div` + width: 450px; + background-color: ${themeColor('infoBackground')}; + border: ${themeBorder('default', 'infoBorder')}; + border-radius: 2px; + padding: 16px; + overflow-wrap: break-word; + line-height: 1.5; +`; diff --git a/server/sonar-web/src/main/js/apps/settings/styles.css b/server/sonar-web/src/main/js/apps/settings/styles.css index 2eaca9065a9..130b9aff0dc 100644 --- a/server/sonar-web/src/main/js/apps/settings/styles.css +++ b/server/sonar-web/src/main/js/apps/settings/styles.css @@ -230,12 +230,3 @@ justify-content: space-between; margin: 0px -16px; } - -.markdown-preview { - width: 450px; - background-color: var(--info50); - border: 1px solid var(--info200); - border-radius: 2px; - padding: 16px; - overflow-wrap: break-word; -} diff --git a/server/sonar-web/src/main/js/components/controls/buttons.css b/server/sonar-web/src/main/js/components/controls/buttons.css deleted file mode 100644 index fb4a5dbb6a7..00000000000 --- a/server/sonar-web/src/main/js/components/controls/buttons.css +++ /dev/null @@ -1,272 +0,0 @@ -/* - * 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. - */ -.button { - display: inline-flex; - align-items: center; - justify-content: center; - vertical-align: middle; - height: var(--controlHeight); - line-height: calc(var(--controlHeight) - 2px); - padding: 0 var(--gridSize); - border: 1px solid var(--darkBlue); - border-radius: 2px; - box-sizing: border-box; - background: transparent; - color: var(--darkBlue); - font-weight: 600; - font-size: var(--smallFontSize); - text-decoration: none; - cursor: pointer; - transition: - border-color 0.2s ease, - box-shadow 0.2s ease, - background-color 0.2s ease; -} - -.button:hover, -.button.selected { - background: var(--darkBlue); - color: var(--white); -} - -.button-primary { - background: var(--darkBlue); - border-color: var(--darkBlue); - color: var(--white); -} - -.button-primary:hover { - background: var(--veryDarkBlue); - border-color: var(--veryDarkBlue); -} - -.button-primary.button-light { - background: var(--blue); - border-color: var(--blue); - color: var(--white); -} - -.button-primary.button-light:hover { - background: var(--darkBlue); - border-color: var(--darkBlue); -} - -.button.disabled { - color: var(--disableGrayText) !important; - border-color: var(--disableGrayBorder) !important; - background: var(--disableGrayBg) !important; - cursor: not-allowed !important; -} - -/* #region .button-red */ -.button-red { - border-color: var(--red); - color: var(--red); -} - -.button-red:hover, -.button-red.active { - background: var(--red); - color: var(--white); -} - -/* #endregion */ - -/* #region .button-success */ -.button-success { - border-color: var(--green); - color: var(--green); -} - -.button-success:hover, -.button-success.active { - background: var(--green); - color: var(--white); -} - -/* #endregion */ - -/* #region .button-plain */ -.button-plain { - box-sizing: border-box; - background: inherit; - color: inherit; - cursor: pointer; - border: 0; -} - -.button-plain:disabled { - color: var(--disableGrayText) !important; - cursor: not-allowed !important; -} - -/* #endregion */ - -/* #region .button-link */ -.button-link { - display: inline-flex; - height: auto; - /* Keep this to not inherit the height from .button */ - line-height: 1; - margin: 0; - padding: 0; - border: none; - border-radius: 0; - background: transparent; - color: var(--darkBlue); - border-bottom: 1px solid var(--primarya40); - font-weight: 400; - font-size: inherit; - transition: - border-color 0.2s ease, - box-shadow 0.2s ease, - color 0.2s ease, - border-bottom 0.2s ease; -} - -.dropdown .button-link { - border-bottom: none; -} - -.button-link:hover { - background: transparent; - color: var(--darkBlue); - border-bottom-color: var(--primary); -} - -.button-link.disabled { - color: var(--secondFontColor) !important; - background: transparent !important; - cursor: default; -} - -/* #endregion */ - -.button-small { - height: var(--smallControlHeight); - line-height: 18px; - padding: 0 6px; - font-size: 11px; -} - -.button-tiny { - height: var(--tinyControlHeight); - line-height: var(--tinyControlHeight); - padding: 0 calc(var(--gridSize) / 2); -} - -.button-large { - height: var(--largeControlHeight); - padding: 0 16px; - font-size: var(--mediumFontSize); -} - -.button-huge { - flex-direction: column; - padding: calc(2 * var(--gridSize)) var(--gridSize); - width: 180px; - height: 180px; - background-color: var(--white); - border: solid 1px var(--white); - border-radius: 3px; - transition: all 0.2s ease; -} - -.button-huge:hover, -.button-huge:focus, -.button-huge:active { - background-color: var(--white); - color: var(--darkBlue); - transform: translateY(-2px); -} - -/* #region .button-icon */ -.button-icon { - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: middle; - width: var(--controlHeight); - height: var(--controlHeight); - padding: 0; - border: none; - color: inherit; -} - -.button-icon.button-small { - width: var(--smallControlHeight); - height: var(--smallControlHeight); - padding: 0; -} - -.button-icon.button-small svg { - margin-top: 0; -} - -.button-icon.button-tiny { - width: var(--tinyControlHeight); - height: var(--tinyControlHeight); - padding: 0; -} - -.button-icon.button-tiny svg { - margin-top: 0; -} - -.button-icon:hover, -.button-icon:focus-visible { - background-color: currentColor; -} - -.button-icon:not(.disabled):hover svg, -.button-icon:not(.disabled):focus-visible svg { - color: var(--white); -} - -.button.button-icon.disabled { - background: transparent !important; -} - -/* #endregion */ - -.button-list { - display: inline-flex; - justify-content: space-between; - height: auto; - border: 1px solid var(--barBorderColor); - padding: var(--gridSize); - margin: calc(var(--gridSize) / 2); - color: var(--secondFontColor); - font-weight: normal; -} - -.button-list:hover { - background-color: white; - border-color: var(--blue); - color: var(--darkBlue); -} - -.no-select { - user-select: none !important; -} - -a[download].button.disabled { - pointer-events: none; -} diff --git a/server/sonar-web/src/main/js/components/controls/buttons.tsx b/server/sonar-web/src/main/js/components/controls/buttons.tsx deleted file mode 100644 index 249395a4beb..00000000000 --- a/server/sonar-web/src/main/js/components/controls/buttons.tsx +++ /dev/null @@ -1,188 +0,0 @@ -/* - * 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 classNames from 'classnames'; -import * as React from 'react'; -import { colors } from '../../app/theme'; -import ChevronRightIcon from '../icons/ChevronRightIcon'; -import ClearIcon, { ClearIconProps } from '../icons/ClearIcon'; -import DeleteIcon from '../icons/DeleteIcon'; -import EditIcon from '../icons/EditIcon'; -import { IconProps } from '../icons/Icon'; -import './buttons.css'; -import Tooltip, { TooltipProps } from './Tooltip'; - -type AllowedButtonAttributes = Pick< - React.ButtonHTMLAttributes, - | 'aria-label' - | 'className' - | 'disabled' - | 'id' - | 'style' - | 'title' - | 'onFocus' - | 'onBlur' - | 'onMouseOver' - | 'onMouseLeave' - | 'tabIndex' - | 'role' ->; - -interface ButtonProps extends AllowedButtonAttributes { - autoFocus?: boolean; - children?: React.ReactNode; - innerRef?: React.Ref; - name?: string; - onClick?: () => void; - preventDefault?: boolean; - stopPropagation?: boolean; - type?: 'button' | 'submit' | 'reset'; -} - -export class Button extends React.PureComponent { - handleClick = (event: React.MouseEvent) => { - const { disabled, onClick, preventDefault = true, stopPropagation = false } = this.props; - - if (preventDefault || disabled) { - event.preventDefault(); - } - if (stopPropagation) { - event.stopPropagation(); - } - - if (onClick && !disabled) { - onClick(); - } - }; - - render() { - const { - className, - disabled, - innerRef, - onClick, - preventDefault, - stopPropagation, - type = 'button', - ...props - } = this.props; - - // Instead of undoing button style we simply not apply the class. - const isPlain = className && className.indexOf('button-plain') !== -1; - return ( - - ); -} diff --git a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx index 7fa2d76ab28..2023eead139 100644 --- a/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx +++ b/server/sonar-web/src/main/js/components/rules/MoreInfoRuleDescription.tsx @@ -18,12 +18,11 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import { FlagMessage, SubTitle, themeBorder, themeColor } from 'design-system'; +import { ButtonSecondary, FlagMessage, SubTitle, themeBorder, themeColor } from 'design-system'; import * as React from 'react'; import { RuleDescriptionSection } from '../../apps/coding-rules/rule'; import { translate } from '../../helpers/l10n'; import { Dict } from '../../types/types'; -import { ButtonLink } from '../controls/buttons'; import RuleDescription from './RuleDescription'; import DefenseInDepth from './educationPrinciples/DefenseInDepth'; import NeverTrustUserInput from './educationPrinciples/NeverTrustUserInput'; @@ -63,17 +62,16 @@ export default class MoreInfoRuleDescription extends React.PureComponent
{displayEducationalPrinciplesNotification && ( -

- {translate('coding_rules.more_info.notification_message')} -

+

{translate('coding_rules.more_info.notification_message')}

- { this.handleNotificationScroll(); }} > {translate('coding_rules.more_info.scroll_message')} - + )} diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx index f248732cddd..f4f9f5bb0a4 100644 --- a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx @@ -17,15 +17,15 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { IconProps, InteractiveIcon } from 'design-system'; import * as React from 'react'; import { DraggableCore, DraggableData } from 'react-draggable'; -import { ButtonIcon } from '../../components/controls/buttons'; import ClearIcon from '../../components/icons/ClearIcon'; import CollapseIcon from '../../components/icons/CollapseIcon'; import ExpandIcon from '../../components/icons/ExpandIcon'; -import { IconProps } from '../../components/icons/Icon'; import MinimizeIcon from '../../components/icons/MinimizeIcon'; import { translate } from '../../helpers/l10n'; +import Tooltip from '../controls/Tooltip'; export interface Props { children: React.ReactNode; @@ -55,27 +55,27 @@ export default class WorkspaceHeader extends React.PureComponent { {this.props.maximized ? ( ) : ( )}
@@ -84,21 +84,22 @@ export default class WorkspaceHeader extends React.PureComponent { } interface WorkspaceHeaderButtonProps { - icon: React.FC>; + icon: React.ComponentType>; onClick: () => void; - tooltip: string; + tooltipContent: string; } -function WorkspaceHeaderButton({ icon: Icon, onClick, tooltip }: WorkspaceHeaderButtonProps) { +function WorkspaceHeaderButton({ icon, onClick, tooltipContent }: WorkspaceHeaderButtonProps) { return ( - - - + + + ); } diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx index 12402c2029c..d687959befc 100644 --- a/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx +++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceNavItem.tsx @@ -17,8 +17,10 @@ * 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 { CloseIcon, InteractiveIcon } from 'design-system'; import * as React from 'react'; -import { ClearButton } from '../../components/controls/buttons'; +import { translate } from '../../helpers/l10n'; export interface Props { children: React.ReactNode; @@ -35,17 +37,23 @@ export default class WorkspaceNavItem extends React.PureComponent { render() { return ( -
  • + {this.props.children} - -
    • + ); } } + +const StyledWorkspaceNavItem = styled.li` + color: white; +`;