cleanup data reference tooltips (#47747)

* cleanup data reference tooltips * update test # Conflicts: # frontend/src/metabase/components/ListItem/ListItem.styled.tsx
metabase · Sep 12, 2024 · aad7417 · aad7417
1 parent e7db719
commit aad7417
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 19 deletions.
diff --git a/e2e/test/scenarios/admin/datamodel/datamodel.cy.spec.js b/e2e/test/scenarios/admin/datamodel/datamodel.cy.spec.js
@@ -813,7 +813,9 @@ describe("scenarios > admin > datamodel > segments", () => {
       cy.wait(["@metadata", "@metadata", "@metadata"]);
 
       cy.get("@emptyStateMessage").should("not.exist");
-      cy.findByRole("heading", { name: "Foo" }).should("be.visible");
+      cy.findByTestId("data-reference-list-item")
+        .findByText("Foo")
+        .should("be.visible");
     });
 
     it("should update that segment", () => {

diff --git a/frontend/src/metabase/components/List/List.module.css b/frontend/src/metabase/components/List/List.module.css
@@ -49,17 +49,22 @@
   position: relative;
   align-items: center;
   display: flex;
+  gap: var(--padding-1);
 }
 
 .itemBody {
-  max-width: 100%;
-  flex: 1 0 auto;
+  display: flex 1 1 auto;
+  overflow: hidden;
 }
 
 .itemTitle {
   composes: textBold from "style";
   max-width: 100%;
-  overflow: hidden;
+  font-size: 1rem;
+
+  &:hover {
+    color: var(--mb-color-brand);
+  }
 }
 
 .itemSubtitle {
@@ -69,7 +74,6 @@
 }
 
 .leftIcons {
-  composes: mr2 from "style";
   align-self: flex-start;
   flex-shrink: 0;
   flex-direction: row;

diff --git a/frontend/src/metabase/components/ListItem/ListItem.jsx b/frontend/src/metabase/components/ListItem/ListItem.jsx
@@ -5,10 +5,11 @@ import { memo } from "react";
 
 import Card from "metabase/components/Card";
 import S from "metabase/components/List/List.module.css";
+import { Ellipsified } from "metabase/core/components/Ellipsified";
 import CS from "metabase/css/core/index.css";
 import { Icon } from "metabase/ui";
 
-import { ListItemLink, ListItemName, Root } from "./ListItem.styled";
+import { ListItemLink, Root } from "./ListItem.styled";
 
 const ListItem = ({
   "data-testid": dataTestId,
@@ -23,16 +24,15 @@ const ListItem = ({
     <Card
       hoverable
       className={cx(CS.mb2, CS.p3, CS.bgWhite, CS.rounded, CS.bordered)}
+      data-testid="data-reference-list-item"
     >
       <div className={cx(S.item)}>
         <div className={S.itemIcons}>
           {icon && <Icon className={S.chartIcon} name={icon} size={16} />}
         </div>
         <div className={S.itemBody}>
           <div className={S.itemTitle}>
-            <ListItemName tooltip={name} tooltipMaxWidth="100%">
-              <h3>{name}</h3>
-            </ListItemName>
+            <Ellipsified tooltip={name}>{name}</Ellipsified>
           </div>
           {(description || placeholder) && (
             <div className={cx(S.itemSubtitle)}>

diff --git a/frontend/src/metabase/components/ListItem/ListItem.styled.tsx b/frontend/src/metabase/components/ListItem/ListItem.styled.tsx
@@ -2,7 +2,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Link } from "react-router";
 
-import { Ellipsified } from "metabase/core/components/Ellipsified";
 import { color } from "metabase/lib/colors";
 
 interface Props {
@@ -25,12 +24,3 @@ export const ListItemLink = styled(Link)`
     color: ${color("brand")};
   }
 `;
-
-export const ListItemName = styled(Ellipsified)`
-  max-width: 100%;
-  overflow: hidden;
-
-  &:hover {
-    color: ${color("brand")};
-  }
-`;