Skip to content
Snippets Groups Projects
Unverified Commit 50ba9b32 authored by Alexander Polyankin's avatar Alexander Polyankin Committed by GitHub
Browse files

Fix text overflow issues in events (#21154)

parent 0e63aa00
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 33 additions and 22 deletions
frontend/src/metabase/timelines/collections/components/EventCard/EventCard.styled.tsx
+ 3
− 0
View file @ 50ba9b32
......@@ -39,6 +39,7 @@ export const CardThreadStroke = styled.div`
export const CardBody = styled.div`
flex: 1 1 auto;
padding: 0.25rem 0.75rem 0.5rem;
min-width: 0;
`;
export const CardTitle = styled.div`
......@@ -46,11 +47,13 @@ export const CardTitle = styled.div`
font-size: 1rem;
line-height: 1.25rem;
font-weight: bold;
word-wrap: break-word;
`;
export const CardDescription = styled.div`
color: ${color("text-dark")};
margin-top: 0.25rem;
word-wrap: break-word;
`;
export const CardDateInfo = styled.div`
......
frontend/src/metabase/timelines/collections/components/TimelineCard/TimelineCard.styled.tsx
+ 5
− 1
View file @ 50ba9b32
......@@ -7,12 +7,13 @@ export const CardIcon = styled(Icon)`
color: ${color("text-light")};
width: 1.375rem;
height: 1.375rem;
margin-right: 1.75rem;
`;
export const CardBody = styled.span`
display: block;
flex: 1 1 auto;
margin: 0 1.75rem;
min-width: 0;
`;
export const CardTitle = styled.span`
......@@ -20,11 +21,13 @@ export const CardTitle = styled.span`
color: ${color("text-dark")};
font-weight: bold;
margin-bottom: 0.125rem;
word-wrap: break-word;
`;
export const CardDescription = styled.span`
display: block;
color: ${color("text-dark")};
word-wrap: break-word;
`;
export interface CardAsideProps {
......@@ -33,6 +36,7 @@ export interface CardAsideProps {
export const CardAside = styled.span<CardAsideProps>`
display: block;
flex: 0 0 auto;
color: ${color("text-dark")};
align-self: ${props => (props.isTopAligned ? "flex-start" : "")};
`;
......
frontend/src/metabase/timelines/common/components/ModalHeader/ModalHeader.styled.tsx
+ 1
− 0
View file @ 50ba9b32
......@@ -15,6 +15,7 @@ export const HeaderTitle = styled.div`
line-height: 1.5rem;
font-weight: bold;
margin-right: 1rem;
min-width: 0;
`;
export const HeaderActions = styled.div`
......
frontend/src/metabase/timelines/common/components/ModalHeader/ModalHeader.tsx
+ 4
− 1
View file @ 50ba9b32
import React, { ReactNode } from "react";
import Icon from "metabase/components/Icon";
import Ellipsified from "metabase/components/Ellipsified";
import {
HeaderActions,
HeaderBackButton,
......@@ -28,7 +29,9 @@ const ModalHeader = ({
<Icon name="chevronleft" />
</HeaderBackButton>
)}
<HeaderTitle>{title}</HeaderTitle>
<HeaderTitle>
<Ellipsified tooltipMaxWidth="100%">{title}</Ellipsified>
</HeaderTitle>
{children && <HeaderActions>{children}</HeaderActions>}
{onClose && (
<HeaderCloseButton onClick={onClose}>
......
frontend/src/metabase/timelines/questions/components/EventCard/EventCard.styled.tsx
+ 3
− 0
View file @ 50ba9b32
......@@ -35,6 +35,7 @@ export const CardIconContainer = styled.div`
export const CardBody = styled.div`
flex: 1 1 auto;
padding: 0.25rem 0.75rem 0;
min-width: 0;
`;
export const CardTitle = styled.div`
......@@ -42,11 +43,13 @@ export const CardTitle = styled.div`
font-size: 1rem;
line-height: 1.25rem;
font-weight: bold;
word-wrap: break-word;
`;
export const CardDescription = styled.div`
color: ${color("text-dark")};
margin-top: 0.25rem;
word-wrap: break-word;
`;
export const CardDateInfo = styled.div`
......
frontend/src/metabase/timelines/questions/components/TimelineCard/TimelineCard.styled.tsx
+ 2
− 1
View file @ 50ba9b32
......@@ -21,10 +21,11 @@ export const CardCheckbox = styled(CheckBox)`
export const CardLabel = styled.span`
flex: 1 1 auto;
margin-left: 0.5rem;
margin: 0 0.5rem;
color: ${color("text-dark")};
font-weight: bold;
font-size: 0.875rem;
min-width: 0;
`;
export const CardIcon = styled(Icon)`
......
frontend/src/metabase/timelines/questions/components/TimelineCard/TimelineCard.tsx
+ 4
− 1
View file @ 50ba9b32
......@@ -7,6 +7,7 @@ import React, {
useEffect,
} from "react";
import _ from "underscore";
import Ellipsified from "metabase/components/Ellipsified";
import { Collection, Timeline, TimelineEvent } from "metabase-types/api";
import EventCard from "../EventCard";
import {
......@@ -72,7 +73,9 @@ const TimelineCard = ({
onChange={handleCheckboxChange}
onClick={handleCheckboxClick}
/>
<CardLabel>{timeline.name}</CardLabel>
<CardLabel>
<Ellipsified tooltipMaxWidth="100%">{timeline.name}</Ellipsified>
</CardLabel>
<CardIcon name={isExpanded ? "chevronup" : "chevrondown"} />
</CardHeader>
{isExpanded && (
......
frontend/test/metabase/scenarios/collections/timelines.cy.spec.js
+ 11
− 18
View file @ 50ba9b32
......@@ -100,7 +100,7 @@ describe("scenarios > collections > timelines", () => {
cy.createTimelineWithEvents({ events: [{ name: "RC1" }] });
cy.visit("/collection/root/timelines");
openEventMenu("RC1");
openMenu("RC1");
cy.findByText("Edit event").click();
cy.findByLabelText("Event name")
.clear()
......@@ -118,7 +118,7 @@ describe("scenarios > collections > timelines", () => {
cy.visit("/collection/root/timelines");
openEventMenu("RC1");
openMenu("RC1");
cy.findByText("Edit event").click();
cy.findByText("Archive event").click();
......@@ -134,7 +134,7 @@ describe("scenarios > collections > timelines", () => {
cy.visit("/collection/root/timelines");
openEventMenu("RC1");
openMenu("RC1");
cy.findByText("Archive event").click();
cy.findByText("RC1").should("not.exist");
cy.findByText("Undo").click();
......@@ -148,11 +148,11 @@ describe("scenarios > collections > timelines", () => {
});
cy.visit("/collection/root/timelines");
openTimelineMenu("Releases");
openMenu("Releases");
cy.findByText("View archived events").click();
cy.findByText("Archived events");
openEventMenu("RC1");
openMenu("RC1");
cy.findByText("Unarchive event").click();
cy.findByText("No events found");
......@@ -167,11 +167,11 @@ describe("scenarios > collections > timelines", () => {
});
cy.visit("/collection/root/timelines");
openTimelineMenu("Releases");
openMenu("Releases");
cy.findByText("View archived events").click();
cy.findByText("Archived events");
openEventMenu("RC1");
openMenu("RC1");
cy.findByText("Delete event").click();
cy.findByText("Delete").click();
cy.findByText("No events found");
......@@ -184,7 +184,7 @@ describe("scenarios > collections > timelines", () => {
});
cy.visit("/collection/root/timelines");
openTimelineMenu("Releases");
openMenu("Releases");
cy.findByText("New timeline").click();
cy.findByLabelText("Timeline name").type("Launches");
cy.findByText("Create").click();
......@@ -200,7 +200,7 @@ describe("scenarios > collections > timelines", () => {
});
cy.visit("/collection/root/timelines");
openTimelineMenu("Releases");
openMenu("Releases");
cy.findByText("Edit timeline details").click();
cy.findByLabelText("Timeline name")
.clear()
......@@ -217,7 +217,7 @@ describe("scenarios > collections > timelines", () => {
});
cy.visit("/collection/root/timelines");
openTimelineMenu("Releases");
openMenu("Releases");
cy.findByText("Edit timeline details").click();
cy.findByText("Archive timeline and all events").click();
cy.findByText("Our analytics events");
......@@ -257,17 +257,10 @@ describe("scenarios > collections > timelines", () => {
});
});
const openEventMenu = name => {
const openMenu = name => {
return cy
.findByText(name)
.parent()
.parent()
.within(() => cy.findByLabelText("ellipsis icon").click());
};
const openTimelineMenu = name => {
return cy
.findByText(name)
.parent()
.within(() => cy.findByLabelText("ellipsis icon").click());
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment