m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fixing tooltip theming by enforcing default theme (#14992)

Browse Source 
* Fixing tooltip theming by enforcing background color

* Removing wide prop
This commit is contained in:
George Marshall 2022-06-21 09:50:44 -07:00 committed by GitHub
parent 085126d275
commit 051254dffd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 139 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/app/edit-gas-fee-popover/network-statistics/tooltips.js
View File

@ -11,7 +11,7 @@ import {
} from '../../../../helpers/constants/design-system';
const NetworkStatusTooltip = ({ children, html, title }) => (
<Tooltip position="top" html={html} title={title} theme="tippy-tooltip-info">
<Tooltip position="top" html={html} title={title}>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
{children}
</Box>

54
ui/components/ui/info-tooltip/index.scss
View File

@ -11,58 +11,10 @@
}
}
.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-top-color: var(--color-background-default);
}
.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-right-color: var(--color-background-default);
}
.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-left-color: var(--color-background-default);
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-bottom-color: var(--color-background-default);
}
.tippy-tooltip {
&#{&}-info-theme,
&#{&}-wideInfo-theme {
background: var(--color-background-default);
color: var(--color-text-default);
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
border-radius: 8px;
max-width: 203px;
&#{&}-info-theme {
max-width: 200px;
padding: 16px;
padding-bottom: 15px;
.tippy-tooltip-content {
@include H7;
text-align: left;
color: var(--color-text-alternative);
a {
color: var(--color-primary-default);
}
p {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0;
}
}
}
}
&#{&}-wideInfo-theme {
max-width: 260px;
padding-bottom: 16px;
}
}

7
ui/components/ui/info-tooltip/info-tooltip.js
View File

@ -16,7 +16,6 @@ export default function InfoTooltip({
position = '',
containerClassName,
wrapperClassName,
wide,
iconFillColor = 'var(--color-icon-alternative)',
}) {
return (
@ -32,7 +31,7 @@ export default function InfoTooltip({
tooltipInnerClassName="info-tooltip__tooltip-content"
tooltipArrowClassName={positionArrowClassMap[position]}
html={contentText}
theme={wide ? 'tippy-tooltip-wideInfo' : 'tippy-tooltip-info'}
theme="tippy-tooltip-info"
>
<InfoTooltipIcon fillColor={iconFillColor} />
</Tooltip>
@ -49,10 +48,6 @@ InfoTooltip.propTypes = {
* Shows position of the tooltip
*/
position: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
/**
* Set if the tooltip wide
*/
wide: PropTypes.bool,
/**
* Add custom CSS class for container
*/

1
ui/components/ui/info-tooltip/info-tooltip.stories.js
View File

@ -17,7 +17,6 @@ export default {
control: 'select',
options: ['top', 'left', 'bottom', 'right'],
},
wide: { control: 'boolean' },
containerClassName: { control: 'text' },
wrapperClassName: { control: 'text' },
iconFillColor: { control: 'text' },

66
ui/components/ui/tooltip/index.scss
View File

@ -1,30 +1,44 @@
.tippy-tooltip.white-theme {
background: var(--color-background-default);
color: var(--color-text-default);
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
padding: 12px 16px;
padding-bottom: 11px;
.tippy-popper {
.tippy-tooltip.tippy-tooltip--mm-custom-theme {
background: var(--color-background-default);
color: var(--color-text-default);
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
padding: 12px 16px;
padding-bottom: 11px;
.tippy-tooltip-content {
@include H7;
.tippy-tooltip-content {
@include H7;
text-align: left;
color: var(--color-text-alternative);
text-align: left;
color: var(--color-text-alternative);
a {
color: var(--color-primary-default);
}
p {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
}
}
}
&[x-placement^=top] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
border-top-color: var(--color-background-default);
}
&[x-placement^=right] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
border-right-color: var(--color-background-default);
}
&[x-placement^=left] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
border-left-color: var(--color-background-default);
}
&[x-placement^=bottom] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] {
border-bottom-color: var(--color-background-default);
}
}
.tippy-popper[x-placement^=top] .white-theme [x-arrow] {
border-top-color: var(--color-background-default);
}
.tippy-popper[x-placement^=right] .white-theme [x-arrow] {
border-right-color: var(--color-background-default);
}
.tippy-popper[x-placement^=left] .white-theme [x-arrow] {
border-left-color: var(--color-background-default);
}
.tippy-popper[x-placement^=bottom] .white-theme [x-arrow] {
border-bottom-color: var(--color-background-default);
}

2
ui/components/ui/tooltip/tooltip.js
View File

@ -82,7 +82,7 @@ export default class Tooltip extends PureComponent {
style={style}
title={disabled ? '' : title}
trigger={trigger}
theme={theme}
theme={`tippy-tooltip--mm-custom ${theme}`} // Required for correct theming
tabIndex={tabIndex || 0}
tag={tag}
>

92
ui/components/ui/tooltip/tooltip.stories.js Normal file
View File

@ -0,0 +1,92 @@
import React from 'react';
import Box from '../box/box';
import Typography from '../typography/typography';
import Tooltip from '.';
export default {
title: 'Components/UI/Tooltip',
id: __filename,
argTypes: {
containerClassName: {
control: 'text',
},
disabled: {
control: 'boolean',
},
html: {
control: 'html',
},
interactive: {
control: 'boolean',
},
onHidden: {
action: 'onHidden',
},
position: {
control: 'select',
options: ['top', 'right', 'bottom', 'left'],
},
size: {
control: 'select',
options: ['small', 'regular', 'big'],
},
title: {
control: 'text',
},
trigger: {
control: 'any',
},
wrapperClassName: {
control: 'text',
},
style: {
control: 'object',
},
tabIndex: {
control: 'number',
},
tag: {
control: 'text',
},
},
args: {
position: 'top',
title: 'Title of the tooltip',
trigger: 'mouseenter',
},
};
export const DefaultStory = (args) => (
<Box display="flex">
<Typography>Hover over the info icon to see the tooltip</Typography>
<Tooltip {...args}>
<i
className="fa fa-sm fa-info-circle"
style={{ color: 'var(--color-icon-alternative)' }}
/>
</Tooltip>
</Box>
);
DefaultStory.storyName = 'Default';
export const HTML = (args) => (
<Box display="flex">
<Typography>This tooltips content is html</Typography>
<Tooltip {...args}>
<i
className="fa fa-sm fa-info-circle"
style={{ color: 'var(--color-icon-alternative)' }}
/>
</Tooltip>
</Box>
);
HTML.args = {
interactive: true,
html: (
<Box>
And includes a <a href="#">link</a>
</Box>
),
};

1
ui/pages/swaps/fee-card/fee-card.js
View File

@ -109,7 +109,6 @@ export default function FeeCard({
}
containerClassName="fee-card__info-tooltip-content-container"
wrapperClassName="fee-card__row-label fee-card__info-tooltip-container"
wide
/>
</>
}

1
ui/pages/swaps/main-quote-summary/main-quote-summary.js
View File

@ -93,7 +93,6 @@ export default function MainQuoteSummary({
position="bottom"
html={amountToDisplay}
disabled={ellipsedAmountToDisplay === amountToDisplay}
theme="white"
>
<span
className="main-quote-summary__quote-large-number"

6
ui/pages/swaps/view-quote/view-quote-price-difference.js
View File

@ -73,11 +73,7 @@ export default function ViewQuotePriceDifference(props) {
<div className="view-quote__price-difference-warning-contents-title">
{priceDifferenceTitle}
</div>
<Tooltip
position="bottom"
theme="white"
title={t('swapPriceImpactTooltip')}
>
<Tooltip position="bottom" title={t('swapPriceImpactTooltip')}>
<i className="fa fa-info-circle" />
</Tooltip>
</Box>