mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Tooltip / Toggletip content link styling: Remove global a element selector inside tooltips (#84353)
* fix: remove global a tag styles inside tooltips * corret inside / outside button references in toggletip test * Remove code and pre styling rules from tooltipUtils
This commit is contained in:
parent
19159a89a2
commit
b4ed72f1b6
@ -2,7 +2,7 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '../Button';
|
||||
import { Button, LinkButton } from '../Button';
|
||||
|
||||
import { Toggletip } from './Toggletip';
|
||||
|
||||
@ -234,4 +234,30 @@ describe('Toggletip', () => {
|
||||
expect(afterButton).toHaveFocus();
|
||||
});
|
||||
});
|
||||
|
||||
it(`should render LinkButtons correctly with no additional styles`, () => {
|
||||
const identicalProps = {
|
||||
children: 'Click me!',
|
||||
href: 'https://grafana.com',
|
||||
};
|
||||
|
||||
const outsideLinkButton = <LinkButton {...identicalProps} data-testid="outside" />;
|
||||
const insideLinkButton = <LinkButton {...identicalProps} data-testid="inside" />;
|
||||
|
||||
render(
|
||||
<>
|
||||
<Toggletip placement="auto" content={insideLinkButton} show>
|
||||
<Button type="button" data-testid="myButton">
|
||||
Click me!
|
||||
</Button>
|
||||
</Toggletip>
|
||||
{outsideLinkButton}
|
||||
</>
|
||||
);
|
||||
|
||||
const outsideButton = screen.getByTestId('outside');
|
||||
const insideButton = screen.getByTestId('inside');
|
||||
|
||||
expect(getComputedStyle(outsideButton).cssText).toStrictEqual(getComputedStyle(insideButton).cssText);
|
||||
});
|
||||
});
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { Placement } from '@floating-ui/react';
|
||||
|
||||
import { colorManipulator, GrafanaTheme2 } from '@grafana/data';
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
|
||||
import { TooltipPlacement } from '../components/Tooltip';
|
||||
|
||||
@ -45,28 +45,6 @@ export function buildTooltipTheme(
|
||||
"&[data-popper-interactive='false']": {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
code: {
|
||||
border: 'none',
|
||||
display: 'inline',
|
||||
background: colorManipulator.darken(tooltipBg, 0.1),
|
||||
color: tooltipText,
|
||||
whiteSpace: 'normal',
|
||||
},
|
||||
|
||||
pre: {
|
||||
background: colorManipulator.darken(tooltipBg, 0.1),
|
||||
color: tooltipText,
|
||||
},
|
||||
|
||||
a: {
|
||||
color: tooltipText,
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
|
||||
'a:hover': {
|
||||
textDecoration: 'none',
|
||||
},
|
||||
}),
|
||||
headerClose: css({
|
||||
color: theme.colors.text.secondary,
|
||||
|
Loading…
Reference in New Issue
Block a user