Skip to content
Snippets Groups Projects
Unverified Commit 4ac74859 authored by Mahatthana (Kelvin) Nomsawadi's avatar Mahatthana (Kelvin) Nomsawadi Committed by GitHub
Browse files

Migrate frontend/src/metabase/components/Popover/Popover.module.css (#40730) 

* Migrated .PopoverContainer, .PopoverBody

* Make global CSS more prominent

* Migrate 2 classes

* Remove unused class

* Migrate .PopoverBodyWithArrow

* Remove unused class

* Migrate .PopoverBodyMarginBottom

* Remove unused class

* Migrate .PopoverFooter

* Remove unused class

* Preserve classes order for easier review

* Fix unit tests
parent 28640cfd
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 49 additions and 154 deletions
e2e/support/helpers/e2e-ui-elements-helpers.js
+ 1
− 1
View file @ 4ac74859
......@@ -8,7 +8,7 @@ export function popover() {
}
export function mantinePopover() {
const MANTINE_POPOVER = "[data-popover=mantine-popover]";
const MANTINE_POPOVER = "[data-element-id=mantine-popover]";
return cy.get(MANTINE_POPOVER).should("be.visible");
}
......
frontend/src/metabase/admin/datamodel/components/FilterPopover/FilterPopover.styled.tsx
+ 1
− 1
View file @ 4ac74859
......@@ -27,7 +27,7 @@ export const FilterPopoverSeparator = styled.hr`
border-top: 1px solid ${color("border")};
`;
// Mimics the .PopoverBody--marginBottom class in Popover.css that the other
// Mimics the PopoverS.PopoverBodyMarginBottom class in Popover.css that the other
// filter pickers use to keep the PopoverFooter from overlapping with the
// content of the picker.
export const EmptyFilterPickerPlaceholder = styled.div`
......
frontend/src/metabase/admin/datamodel/components/FilterPopover/FilterPopoverFooter.tsx
+ 2
− 1
View file @ 4ac74859
import cx from "classnames";
import { t } from "ttag";
import PopoverS from "metabase/components/Popover/Popover.module.css";
import Button from "metabase/core/components/Button";
import CS from "metabase/css/core/index.css";
import type Filter from "metabase-lib/v1/queries/structured/Filter";
......@@ -29,7 +30,7 @@ export function FilterPopoverFooter({
className,
CS.flex,
CS.alignCenter,
"PopoverFooter",
PopoverS.PopoverFooter,
);
return (
<div className={containerClassName}>
......
frontend/src/metabase/admin/datamodel/components/filters/pickers/DefaultPicker/DefaultPicker.tsx
+ 2
− 1
View file @ 4ac74859
......@@ -4,6 +4,7 @@ import type { ReactElement } from "react";
import { t } from "ttag";
import FieldValuesWidget from "metabase/components/FieldValuesWidget";
import PopoverS from "metabase/components/Popover/Popover.module.css";
import CS from "metabase/css/core/index.css";
import { getCurrencySymbol } from "metabase/lib/formatting";
import {
......@@ -194,7 +195,7 @@ export function DefaultPicker({
return (
<DefaultPickerContainer
data-testid="default-picker-container"
className={cx(className, "PopoverBody--marginBottom")}
className={cx(className, PopoverS.PopoverBodyMarginBottom)}
>
{layout}
</DefaultPickerContainer>
......
frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/DatePicker.jsx
+ 2
− 1
View file @ 4ac74859
......@@ -7,6 +7,7 @@ import { t } from "ttag";
import _ from "underscore";
import Calendar from "metabase/components/Calendar";
import PopoverS from "metabase/components/Popover/Popover.module.css";
import CS from "metabase/css/core/index.css";
import { FieldDimension } from "metabase-lib/v1/Dimension";
......@@ -336,7 +337,7 @@ export default class DatePicker extends Component {
return (
<div
// apply flex to align the operator selector and the "Widget" if necessary
className={cx(className, "PopoverBody--marginBottom", {
className={cx(className, PopoverS.PopoverBodyMarginBottom, {
[cx(CS.flex, CS.alignCenter)]: Widget && Widget.horizontalLayout,
})}
style={{ minWidth: 300 }}
......
frontend/src/metabase/admin/datamodel/components/filters/pickers/SelectPicker.jsx
+ 2
− 1
View file @ 4ac74859
......@@ -4,6 +4,7 @@ import { Component } from "react";
import { t } from "ttag";
import ListSearchField from "metabase/components/ListSearchField";
import PopoverS from "metabase/components/Popover/Popover.module.css";
import CheckBox from "metabase/core/components/CheckBox";
import CS from "metabase/css/core/index.css";
import { capitalize } from "metabase/lib/formatting";
......@@ -103,7 +104,7 @@ export default class SelectPicker extends Component {
</div>
)}
<div
className="px1 pt1 PopoverBody--marginBottom"
className={cx("px1 pt1", PopoverS.PopoverBodyMarginBottom)}
style={{ maxHeight: "400px", overflowY: "scroll" }}
>
{placeholder ? <h5>{placeholder}</h5> : null}
......
frontend/src/metabase/components/Popover/Popover.jsx
+ 13
− 7
View file @ 4ac74859
......@@ -8,7 +8,7 @@ import OnClickOutsideWrapper from "metabase/components/OnClickOutsideWrapper";
import CS from "metabase/css/core/index.css";
import { isCypressActive } from "metabase/env";
import "./Popover.module.css";
import PopoverS from "./Popover.module.css";
// space we should leave between page edge and popover edge
const PAGE_PADDING = 10;
......@@ -97,7 +97,10 @@ export default class Popover extends Component {
if (!this._popoverElement && isOpen) {
this._popoverElement = document.createElement("span");
this._popoverElement.className = `PopoverContainer ${this.props.containerClassName}`;
this._popoverElement.className = cx(
PopoverS.PopoverContainer,
this.props.containerClassName,
);
this._popoverElement.dataset.testid = "popover";
document.body.appendChild(this._popoverElement);
......@@ -230,13 +233,14 @@ export default class Popover extends Component {
const content = (
<div
id={this.props.id}
data-element-id="legacy-popover"
className={cx(
"PopoverBody",
PopoverS.PopoverBody,
{
"PopoverBody--withBackground": this.props.hasBackground,
"PopoverBody--withArrow":
[PopoverS.PopoverBodyWithBackground]: this.props.hasBackground,
[PopoverS.PopoverBodyWithArrow]:
this.props.hasArrow && this.props.hasBackground,
"PopoverBody--autoWidth": this.props.autoWidth,
[PopoverS.PopoverBodyAutoWidth]: this.props.autoWidth,
},
// TODO kdoh 10/16/2017 we should eventually remove this
this.props.className,
......@@ -384,7 +388,9 @@ export default class Popover extends Component {
}
constrainPopoverToBetweenViewportAndTarget(tetherOptions, direction) {
const body = tetherOptions.element.querySelector(".PopoverBody");
const body = tetherOptions.element.querySelector(
"[data-element-id=legacy-popover]",
);
const target = this._getTargetElement();
const bodyHeight = body.getBoundingClientRect().height;
const space =
......
frontend/src/metabase/components/Popover/Popover.module.css
+ 23
− 140
View file @ 4ac74859
/* afaik popover needs a positioning context to be able to calculate the transform */
:global(.PopoverContainer) {
.PopoverContainer {
position: absolute;
z-index: 4;
}
:global(.PopoverBody) {
.PopoverBody {
pointer-events: auto;
min-width: 1em; /* ewwwwwwww */
display: flex;
......@@ -15,7 +15,7 @@
max-width: 500px;
}
:global(.PopoverBody.PopoverBody--withBackground) {
.PopoverBody.PopoverBodyWithBackground {
border: 1px solid #edf2f5;
box-shadow: 0 4px 10px var(--color-shadow);
background-color: var(--color-bg-white);
......@@ -23,6 +23,7 @@
overflow: auto;
}
/* Global classes from tippy.js */
:global(.tippy-box),
:global(.tippy-content) {
max-height: inherit;
......@@ -68,28 +69,13 @@
* initially added for date pickers so the dual date picker can fully
* expand as necessary - metabase#5971
*/
:global(.PopoverBody.PopoverBody--autoWidth) {
.PopoverBody.PopoverBodyAutoWidth {
max-width: none;
}
:global(.PopoverBody.PopoverBody--tooltip) {
color: white;
font-weight: bold;
background-color: var(--color-bg-black);
border: none;
pointer-events: none;
line-height: 1.26;
padding: 10px 12px;
}
:global(.PopoverBody.PopoverBody--tooltip.PopoverBody--tooltipConstrainedWidth) {
font-size: 12px;
max-width: 200px;
}
/* shared arrow styles */
:global(.PopoverBody--withArrow::before),
:global(.PopoverBody--withArrow::after) {
.PopoverBodyWithArrow::before,
.PopoverBodyWithArrow::after {
position: absolute;
content: "";
display: block;
......@@ -104,68 +90,15 @@
* to stick to bottom, options lists and other
* middle content need extra margin-bottom
*/
:global(.PopoverBody--marginBottom) {
.PopoverBodyMarginBottom {
margin-bottom: 60px;
}
:global(.PopoverBody) .FormField {
.PopoverBody .FormField {
margin-bottom: 0.75rem;
}
:global(.PopoverHeader) {
display: flex;
border-bottom: 1px solid var(--color-border);
min-width: 400px;
}
:global(.PopoverHeader-item) {
flex: 1;
position: relative;
top: 1px; /* to overlap bottom border */
text-align: center;
padding: 1em;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 700;
color: var(--color-text-medium);
border-bottom: 2px solid transparent;
}
:global(.PopoverHeader-item.selected) {
color: currentcolor;
border-color: currentcolor;
}
:global(.PopoverHeader-item--withArrow) {
margin-right: 8px;
}
:global(.PopoverHeader-item--withArrow::before),
:global(.PopoverHeader-item--withArrow::after) {
position: absolute;
content: "";
display: block;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
top: 50%;
margin-top: -8px;
}
/* create a slightly larger arrow on the right for border purposes */
:global(.PopoverHeader-item--withArrow::before) {
right: -16px;
border-left-color: var(--color-border);
}
/* create a smaller inset arrow on the right */
:global(.PopoverHeader-item--withArrow::after) {
right: -15px;
border-left-color: var(--color-bg-white);
}
:global(.PopoverFooter) {
.PopoverFooter {
background: white;
position: absolute;
bottom: 0;
......@@ -179,79 +112,51 @@
z-index: 1;
}
:global(.PopoverBody--withBackground .PopoverFooterWhenIsNotEqualOps),
:global(.popover .PopoverFooterWhenIsNotEqualOps) {
bottom: 0;
padding-bottom: 12px;
padding-top: 10px;
width: calc(100% - 26px);
}
:global(.PopoverParameterFieldWidgetFooter) {
position: fixed;
bottom: -7px;
}
/* Global tether (tippy.js dependency) classes */
/* create a slightly larger arrow on the top for border purposes */
:global(.tether-element-attached-top .PopoverBody--withArrow::before) {
:global(.tether-element-attached-top) .PopoverBodyWithArrow::before {
top: -20px;
border-bottom-color: var(--color-border);
}
:global(.tether-element-attached-top .PopoverBody--tooltip::before) {
border-bottom: none;
}
/* create a smaller inset arrow on the top */
:global(.tether-element-attached-top .PopoverBody--withArrow::after) {
:global(.tether-element-attached-top) .PopoverBodyWithArrow::after {
top: -18px;
border-bottom-color: var(--color-bg-white);
}
:global(.tether-element-attached-top .PopoverBody--tooltip::after) {
border-bottom-color: var(--color-bg-black);
}
/* create a slightly larger arrow on the bottom for border purposes */
:global(.tether-element-attached-bottom .PopoverBody--withArrow::before) {
:global(.tether-element-attached-bottom) .PopoverBodyWithArrow::before {
bottom: -20px;
border-top-color: var(--color-border);
}
:global(.tether-element-attached-bottom .PopoverBody--tooltip::before) {
border-top: none;
}
/* create a smaller inset arrow on the bottom */
:global(.tether-element-attached-bottom .PopoverBody--withArrow::after) {
:global(.tether-element-attached-bottom) .PopoverBodyWithArrow::after {
bottom: -18px;
border-top-color: var(--color-bg-white);
}
:global(.tether-element-attached-bottom .PopoverBody--tooltip::after) {
border-top-color: var(--color-bg-black);
}
/* if the tether element is attached right, move our arrows right */
:global(.tether-target-attached-right .PopoverBody--withArrow::before),
:global(.tether-target-attached-right .PopoverBody--withArrow::after) {
:global(.tether-target-attached-right) .PopoverBodyWithArrow::before,
:global(.tether-target-attached-right) .PopoverBodyWithArrow::after {
right: 12px;
}
/* if the tether element is attached center, move our arrows to the center */
:global(.tether-element-attached-center .PopoverBody--withArrow::before),
:global(.tether-element-attached-center .PopoverBody--withArrow::after) {
:global(.tether-element-attached-center) .PopoverBodyWithArrow::before,
:global(.tether-element-attached-center) .PopoverBodyWithArrow::after {
margin-left: 50%;
left: -10px;
}
:global(.tether-element-attached-right .PopoverBody--withArrow::before),
:global(.tether-element-attached-right .PopoverBody--withArrow::after) {
:global(.tether-element-attached-right) .PopoverBodyWithArrow::before,
:global(.tether-element-attached-right) .PopoverBodyWithArrow::after {
right: 12px;
}
:global(.tether-element-attached-left .PopoverBody--withArrow::before),
:global(.tether-element-attached-left .PopoverBody--withArrow::after) {
:global(.tether-element-attached-left) .PopoverBodyWithArrow::before,
:global(.tether-element-attached-left) .PopoverBodyWithArrow::after {
left: 12px;
}
......@@ -261,25 +166,3 @@
height: 6px;
pointer-events: none;
}
/* transition classes */
:global(.Popover-appear),
:global(.Popover-enter) {
opacity: 0.01;
}
:global(.Popover-appear.Popover-appear-active),
:global(.Popover-enter.Popover-enter-active) {
opacity: 1;
transition: opacity 100ms ease-in;
}
:global(.Popover-leave) {
opacity: 1;
}
:global(.Popover-leave.Popover-leave-active) {
opacity: 0.01;
transition: opacity 100ms ease-in;
}
frontend/src/metabase/ui/components/overlays/Popover/index.tsx
+ 3
− 1
View file @ 4ac74859
......@@ -9,7 +9,9 @@ const MantinePopoverDropdown = Popover.Dropdown;
const PopoverDropdown = Object.assign(function PopoverDropdown(
props: PopoverDropdownProps,
) {
return <MantinePopoverDropdown {...props} data-popover="mantine-popover" />;
return (
<MantinePopoverDropdown {...props} data-element-id="mantine-popover" />
);
},
MantinePopoverDropdown);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment