diff options
Diffstat (limited to 'server/sonar-web/design-system/src')
21 files changed, 40 insertions, 41 deletions
diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx index bb30a36052b..5d981c9ce65 100644 --- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx +++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx @@ -117,9 +117,9 @@ export function Breadcrumbs(props: Props) { if (isLastBreadcrumb && breadcrumbSize > maxWidth) { onlyVisibleBreadcrumbs.push( <Tooltip - key={modifiedChildren[index].key} // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - overlay={modifiedChildren[index].props.children as React.ReactNode} + content={modifiedChildren[index].props.children as React.ReactNode} + key={modifiedChildren[index].key} > {modifiedChildren[index]} </Tooltip>, diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx index 61bdbd22b86..108527dbb93 100644 --- a/server/sonar-web/design-system/src/components/BubbleChart.tsx +++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx @@ -365,7 +365,7 @@ export function BubbleChart<T>(props: BubbleChartProps<T>) { return ( <div> <div className="sw-flex sw-items-center sw-justify-end sw-h-control sw-mb-4"> - <Tooltip overlay={zoomTooltipText}> + <Tooltip content={zoomTooltipText}> <span> <Note className="sw-body-sm-highlight">{zoomLabel}</Note> {': '} @@ -423,7 +423,7 @@ function Bubble<T>(props: BubbleProps<T>) { </a> ); - return <Tooltip overlay={tooltip}>{circle}</Tooltip>; + return <Tooltip content={tooltip}>{circle}</Tooltip>; } const BubbleStyled = styled.circle` diff --git a/server/sonar-web/design-system/src/components/ColorsLegend.tsx b/server/sonar-web/design-system/src/components/ColorsLegend.tsx index 19abcdc298b..43f7c415241 100644 --- a/server/sonar-web/design-system/src/components/ColorsLegend.tsx +++ b/server/sonar-web/design-system/src/components/ColorsLegend.tsx @@ -49,7 +49,7 @@ export function ColorsLegend(props: ColorLegendProps) { <ColorsLegendWrapper className={className}> {colors.map((color, idx) => ( <li className="sw-ml-4" key={color.value}> - <Tooltip overlay={color.overlay}> + <Tooltip content={color.overlay}> <div> <Checkbox checked={color.selected} diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx index 162b11f9c0b..335f28f434e 100644 --- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx +++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx @@ -213,7 +213,7 @@ export function ItemCopy(props: ItemCopyProps) { return ( <ClipboardBase> {({ setCopyButton, copySuccess }) => ( - <Tooltip overlay={tooltipOverlay} visible={copySuccess}> + <Tooltip content={tooltipOverlay} visible={copySuccess}> <li role="none"> <ItemButtonStyled className={className} diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx index 8b13dc4cac8..792eb273123 100644 --- a/server/sonar-web/design-system/src/components/FacetBox.tsx +++ b/server/sonar-web/design-system/src/components/FacetBox.tsx @@ -50,7 +50,7 @@ export interface FacetBoxProps { onClear?: () => void; onClick?: (isOpen: boolean) => void; open?: boolean; - tooltipComponent?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>; + tooltipComponent?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>; } export function FacetBox(props: FacetBoxProps) { @@ -105,7 +105,7 @@ export function FacetBox(props: FacetBoxProps) { {expandable && <OpenCloseIndicator aria-hidden open={open} />} {disabled ? ( - <Tooltip overlay={disabledHelper}> + <Tooltip content={disabledHelper}> <HeaderTitle aria-disabled aria-label={`${name}, ${disabledHelper ?? ''}`} @@ -130,7 +130,7 @@ export function FacetBox(props: FacetBoxProps) { </Badge> {Boolean(clearable) && ( - <Tooltip overlay={clearIconLabel}> + <Tooltip content={clearIconLabel}> <ClearIcon Icon={CloseIcon} aria-label={clearIconLabel ?? ''} diff --git a/server/sonar-web/design-system/src/components/FavoriteButton.tsx b/server/sonar-web/design-system/src/components/FavoriteButton.tsx index 5782c37de92..ef31b04fcb7 100644 --- a/server/sonar-web/design-system/src/components/FavoriteButton.tsx +++ b/server/sonar-web/design-system/src/components/FavoriteButton.tsx @@ -28,7 +28,7 @@ interface Props { innerRef?: React.Ref<HTMLButtonElement>; overlay: string; toggleFavorite: VoidFunction; - tooltip?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>; + tooltip?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>; } export function FavoriteButton(props: Props) { @@ -36,7 +36,7 @@ export function FavoriteButton(props: Props) { const Tooltip = tooltip ?? React.Fragment; return ( - <Tooltip overlay={overlay}> + <Tooltip content={overlay}> <InteractiveIcon Icon={favorite ? StarFillIcon : StarIcon} aria-label={overlay} diff --git a/server/sonar-web/design-system/src/components/Histogram.tsx b/server/sonar-web/design-system/src/components/Histogram.tsx index 197cc263d28..b054114ef41 100644 --- a/server/sonar-web/design-system/src/components/Histogram.tsx +++ b/server/sonar-web/design-system/src/components/Histogram.tsx @@ -67,7 +67,7 @@ export class Histogram extends React.PureComponent<Props> { const y = Math.round((yScale(index) ?? 0) + yScale.bandwidth() / 2 + BAR_HEIGHT / 2); return ( - <Tooltip overlay={this.props.yTooltips && this.props.yTooltips[index]}> + <Tooltip content={this.props.yTooltips && this.props.yTooltips[index]}> <HistogramTick dx="1em" dy="0.3em" textAnchor="start" x={x} y={y}> {value} </HistogramTick> diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx index ab3286ec0cf..590cb913605 100644 --- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx +++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx @@ -75,7 +75,7 @@ export function NavBarTabLink(props: NavBarTabLinkProps) { export function DisabledTabLink(props: { label: string; overlay: React.ReactNode }) { return ( <NavBarTabLinkWrapper> - <Tooltip overlay={props.overlay}> + <Tooltip content={props.overlay}> <a aria-disabled="true" className="disabled-link" role="link"> {props.label} </a> diff --git a/server/sonar-web/design-system/src/components/Tags.tsx b/server/sonar-web/design-system/src/components/Tags.tsx index 3444f6af034..9fd333135b6 100644 --- a/server/sonar-web/design-system/src/components/Tags.tsx +++ b/server/sonar-web/design-system/src/components/Tags.tsx @@ -40,7 +40,7 @@ interface Props { tags: string[]; tagsClassName?: string; tagsToDisplay?: number; - tooltip?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>; + tooltip?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>; } export function Tags({ @@ -63,7 +63,7 @@ export function Tags({ const Tooltip = tooltip || React.Fragment; const displayedTagsContent = (open = false) => ( - <Tooltip overlay={open ? undefined : tags.join(', ')}> + <Tooltip content={open ? undefined : tags.join(', ')}> <span className="sw-inline-flex sw-items-center sw-gap-1"> {/* Display first 3 (tagsToDisplay) tags */} {displayedTags.map((tag) => ( diff --git a/server/sonar-web/design-system/src/components/Tooltip.tsx b/server/sonar-web/design-system/src/components/Tooltip.tsx index 053c54d9033..bf17f07979f 100644 --- a/server/sonar-web/design-system/src/components/Tooltip.tsx +++ b/server/sonar-web/design-system/src/components/Tooltip.tsx @@ -37,11 +37,11 @@ const MILLISECONDS_IN_A_SECOND = 1000; interface TooltipProps { children: React.ReactElement; + content: React.ReactNode; mouseEnterDelay?: number; mouseLeaveDelay?: number; onHide?: VoidFunction; onShow?: VoidFunction; - overlay: React.ReactNode; placement?: BasePlacement; visible?: boolean; } @@ -84,7 +84,7 @@ export function Tooltip(props: TooltipProps) { // overlay is a ReactNode, so it can be a boolean, `undefined` or `null` // this allows to easily render a tooltip conditionally // more generaly we avoid rendering empty tooltips - return props.overlay ? <TooltipInner {...props}>{props.children}</TooltipInner> : props.children; + return props.content ? <TooltipInner {...props}>{props.children}</TooltipInner> : props.children; } export class TooltipInner extends React.Component<TooltipProps, State> { @@ -404,7 +404,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> { role="tooltip" style={style} > - <TooltipWrapperInner>{this.props.overlay}</TooltipWrapperInner> + <TooltipWrapperInner>{this.props.content}</TooltipWrapperInner> <TooltipWrapperArrow style={ isMeasured(this.state) diff --git a/server/sonar-web/design-system/src/components/TreeMapRect.tsx b/server/sonar-web/design-system/src/components/TreeMapRect.tsx index 066d861f1c6..45ece8b7fe5 100644 --- a/server/sonar-web/design-system/src/components/TreeMapRect.tsx +++ b/server/sonar-web/design-system/src/components/TreeMapRect.tsx @@ -83,7 +83,7 @@ export function TreeMapRect(props: Props) { const isIconVisible = width >= ICON_VISIBLE_AT_WIDTH && height >= ICON_VISIBLE_AT_HEIGHT; return ( - <Tooltip overlay={tooltip} placement={placement ?? PopupPlacement.Left}> + <Tooltip content={tooltip} placement={placement ?? PopupPlacement.Left}> <StyledCell style={cellStyles}> <StyledCellLink href="#" onClick={handleRectClick}> <StyledCellLabel width={width}> diff --git a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx index 5e2aebceb65..8f855b319b2 100644 --- a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx @@ -43,7 +43,7 @@ it('should render a full menu correctly', () => { it('menu items should work with tooltips', async () => { render( - <Tooltip overlay="test tooltip"> + <Tooltip content="test tooltip"> <ItemButton onClick={jest.fn()}>button</ItemButton> </Tooltip>, {}, diff --git a/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx index 487d1bbf5cf..2d0882b1c3f 100644 --- a/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx +++ b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx @@ -96,7 +96,7 @@ describe('TooltipInner', () => { children = <div role="note" />, ) { return render( - <TooltipInner mouseLeaveDelay={0} overlay={<span id="overlay" />} {...props}> + <TooltipInner content={<span id="overlay" />} mouseLeaveDelay={0} {...props}> {children} </TooltipInner>, ); @@ -105,19 +105,19 @@ describe('TooltipInner', () => { describe('Tooltip', () => { it('should not render tooltip without overlay', async () => { - const { user } = setupWithProps({ overlay: undefined }); + const { user } = setupWithProps({ content: undefined }); await user.hover(screen.getByRole('note')); expect(screen.queryByRole('tooltip')).not.toBeInTheDocument(); }); it('should not render undefined tooltips', async () => { - const { user } = setupWithProps({ overlay: undefined, visible: true }); + const { user } = setupWithProps({ content: undefined, visible: true }); await user.hover(screen.getByRole('note')); expect(screen.queryByRole('tooltip')).not.toBeInTheDocument(); }); it('should not render empty tooltips', async () => { - const { user } = setupWithProps({ overlay: '', visible: true }); + const { user } = setupWithProps({ content: '', visible: true }); await user.hover(screen.getByRole('note')); expect(screen.queryByRole('tooltip')).not.toBeInTheDocument(); }); @@ -127,7 +127,7 @@ describe('Tooltip', () => { children = <div role="note" />, ) { return render( - <Tooltip overlay={<span id="overlay" />} {...props}> + <Tooltip content={<span id="overlay" />} {...props}> {children} </Tooltip>, ); diff --git a/server/sonar-web/design-system/src/components/clipboard.tsx b/server/sonar-web/design-system/src/components/clipboard.tsx index a5c30188f6b..ffe88b4a045 100644 --- a/server/sonar-web/design-system/src/components/clipboard.tsx +++ b/server/sonar-web/design-system/src/components/clipboard.tsx @@ -116,12 +116,12 @@ export function ClipboardButton({ return ( <ClipboardBase> {({ setCopyButton, copySuccess }) => ( - <Tooltip overlay={copiedLabel} visible={copySuccess}> + <Tooltip content={copiedLabel} visible={copySuccess}> <ButtonSecondary className={classNames('sw-select-none', className)} data-clipboard-text={copyValue} icon={icon} - innerRef={setCopyButton} + ref={setCopyButton} > {children ?? copyLabel} </ButtonSecondary> @@ -159,12 +159,12 @@ export function ClipboardIconButton(props: IconButtonProps) { {({ setCopyButton, copySuccess }) => { return ( <Tooltip - mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY} - overlay={ + content={ <div className="sw-w-abs-150 sw-text-center"> {copySuccess ? copiedLabel : copyLabel} </div> } + mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY} {...(copySuccess ? { visible: copySuccess } : undefined)} > <InteractiveIconComponent diff --git a/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx b/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx index 718c040d874..35e60f2a6b2 100644 --- a/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx +++ b/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx @@ -50,7 +50,7 @@ function LineCoverageFunc({ lineNumber, coverageStatus, status, scrollToUncovere } return ( - <Tooltip overlay={status} placement={PopupPlacement.Right}> + <Tooltip content={status} placement={PopupPlacement.Right}> <LineMeta data-line-number={lineNumber} ref={coverageMarker}> {coverageStatus === 'covered' && <CoveredBlock aria-label={status} />} {coverageStatus === 'uncovered' && <UncoveredBlock aria-label={status} />} diff --git a/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx b/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx index 2df004a3c6a..2336dd914a3 100644 --- a/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx +++ b/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx @@ -56,7 +56,7 @@ export function MultiSelectMenuOption(props: MultiSelectOptionProps) { const label = renderLabel(element); return ( - <Tooltip overlay={renderTooltip?.(element, disabled)} placement={PopupPlacement.Right}> + <Tooltip content={renderTooltip?.(element, disabled)} placement={PopupPlacement.Right}> <ItemCheckbox checked={Boolean(selected)} className={classNames('sw-flex sw-py-2 sw-px-4', { active })} diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx index a3355135482..8931442ebc9 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx @@ -21,7 +21,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers'; import { ThemedProps } from '../../../types'; -import { Button, ButtonProps } from './Button'; +import { Button } from './Button'; export const PrimaryStyle = (props: ThemedProps) => css` --background: ${themeColor('button')(props)}; @@ -31,6 +31,6 @@ export const PrimaryStyle = (props: ThemedProps) => css` --border: ${themeBorder('default', 'transparent')(props)}; `; -export const ButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` +export const ButtonPrimary = styled(Button)` ${PrimaryStyle} `; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx index 3ee6c5f2892..f513c5f803a 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx @@ -19,9 +19,9 @@ */ import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers'; -import { Button, ButtonProps } from './Button'; +import { Button } from './Button'; -export const ButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` +export const ButtonSecondary = styled(Button)` --background: ${themeColor('buttonSecondary')}; --backgroundHover: ${themeColor('buttonSecondaryHover')}; --color: ${themeContrast('buttonSecondary')}; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx index b0770cdfce1..ca701d8944e 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx @@ -19,9 +19,9 @@ */ import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers'; -import { Button, ButtonProps } from './Button'; +import { Button } from './Button'; -export const DangerButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` +export const DangerButtonPrimary = styled(Button)` --background: ${themeColor('dangerButton')}; --backgroundHover: ${themeColor('dangerButtonHover')}; --color: ${themeContrast('dangerButton')}; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx index 8815ab12de9..81cfc90010b 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx @@ -19,9 +19,9 @@ */ import styled from '@emotion/styled'; import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers'; -import { Button, ButtonProps } from './Button'; +import { Button } from './Button'; -export const DangerButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` +export const DangerButtonSecondary = styled(Button)` --background: ${themeColor('dangerButtonSecondary')}; --backgroundHover: ${themeColor('dangerButtonSecondaryHover')}; --color: ${themeContrast('dangerButtonSecondary')}; diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx index 9239e4ab209..afc27b57f1c 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import styled from '@emotion/styled'; -import React from 'react'; import { OPACITY_20_PERCENT } from '../../../helpers/constants'; import { themeBorder, themeColor, themeContrast } from '../../../helpers/theme'; import { Button, ButtonProps } from './Button'; @@ -43,7 +42,7 @@ export function ThirdPartyButton({ ); } -const ThirdPartyButtonStyled: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)` +const ThirdPartyButtonStyled = styled(Button)` --background: ${themeColor('thirdPartyButton')}; --backgroundHover: ${themeColor('thirdPartyButtonHover')}; --color: ${themeContrast('thirdPartyButton')}; |