-
Dalton authored
* add tippy and react-is * add tippy styles to vendor.css we'll probably override most things but it handles apply the triangle to tooltips * reimplement Tooltip using tippy * reimplement ChartTooltip using Tooltip * add tooltip theme styling * fix StoreLink styling * remove TooltipPopover * add util for easy mapping to innerRef * use innerRef util with StoreLink target * react-is type defs * convert Tooltip into tsx * convert styled-components util into typescript * fix Tooltip fallback return * use Tooltip in Icon over Tooltipify * remove Tooltipify * pass ref all the way through Icon * fix DimensionListItem styling caused by missing ref * fix ChartTooltip event target bug * fix unit test by making Icon.tsx grosser * replace popover() util with tooltip() in cy tests * fix random broken e2e test * improve types in Tooltip * move everything to a separate folder + add tests * add more examples * rmv accidental deps * fix run button styling * add Link tooltip prop to avoid tooltip on icon * wrap MetabotLogo in forwardRef * support reduced motion * remove flow type from dom.js so we can use in ts files * pass isEnabled prop to tippy's disabled prop once you've activated "control mode" in tippy you can't turn it off so using "visible" as a toggle doesn't work. instead, use disabled. * fix uncentered tooltip the right way tippy includes padding/margin in its centering calculations, unlike tether, so we will need to be careful about adding one-sides padding/margins to a tooltip target, otherwise the tooltip will appear offcenter * workaround for absolutely positioned element the tooltip appeared on the far end of the target because of a child div that is absolutely positioned. quick fix is to instead target the icon * fix positioning of HintIcon tooltip * lint fix * add placement prop * fix styled component tooltip target styling * place QuestionNotebookButton tooltip below * Make the NativeQueryButton an actual button * set tooltip placement to bottom * lint fix warning
Dalton authored* add tippy and react-is * add tippy styles to vendor.css we'll probably override most things but it handles apply the triangle to tooltips * reimplement Tooltip using tippy * reimplement ChartTooltip using Tooltip * add tooltip theme styling * fix StoreLink styling * remove TooltipPopover * add util for easy mapping to innerRef * use innerRef util with StoreLink target * react-is type defs * convert Tooltip into tsx * convert styled-components util into typescript * fix Tooltip fallback return * use Tooltip in Icon over Tooltipify * remove Tooltipify * pass ref all the way through Icon * fix DimensionListItem styling caused by missing ref * fix ChartTooltip event target bug * fix unit test by making Icon.tsx grosser * replace popover() util with tooltip() in cy tests * fix random broken e2e test * improve types in Tooltip * move everything to a separate folder + add tests * add more examples * rmv accidental deps * fix run button styling * add Link tooltip prop to avoid tooltip on icon * wrap MetabotLogo in forwardRef * support reduced motion * remove flow type from dom.js so we can use in ts files * pass isEnabled prop to tippy's disabled prop once you've activated "control mode" in tippy you can't turn it off so using "visible" as a toggle doesn't work. instead, use disabled. * fix uncentered tooltip the right way tippy includes padding/margin in its centering calculations, unlike tether, so we will need to be careful about adding one-sides padding/margins to a tooltip target, otherwise the tooltip will appear offcenter * workaround for absolutely positioned element the tooltip appeared on the far end of the target because of a child div that is absolutely positioned. quick fix is to instead target the icon * fix positioning of HintIcon tooltip * lint fix * add placement prop * fix styled component tooltip target styling * place QuestionNotebookButton tooltip below * Make the NativeQueryButton an actual button * set tooltip placement to bottom * lint fix warning
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
ModerationReviewBanner.styled.jsx 855 B
import styled from "styled-components";
import { color } from "metabase/lib/colors";
import Button from "metabase/components/Button";
import Icon from "metabase/components/Icon";
export const Container = styled.div`
padding: 1rem;
background-color: ${props => props.backgroundColor};
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 0.5rem;
border-radius: 8px;
`;
export const Text = styled.span`
flex: 1;
font-size: 14px;
font-weight: 700;
`;
export const Time = styled.time`
color: ${color("text-medium")};
font-size: 12px;
`;
export const IconButton = styled(Button)`
padding: 0 !important;
border: none;
background-color: transparent;
&:hover {
background-color: transparent;
color: ${color("danger")};
}
`;
export const StatusIcon = styled(Icon)`
padding: 0 0.5rem;
`;