From b303580b587818ea36724f4db80f352e00a6daa8 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Mon, 19 Jun 2023 19:08:06 +0300
Subject: [PATCH] Bottom corner radius on buttons looks weird on new dashboard
grid (#31647)
---
...om-corner-radius-action-buttons.cy.spec.js | 70 +++++++++++++++++++
.../actions/components/ActionViz/Action.tsx | 2 +-
.../ActionViz/ActionButton.styled.tsx | 2 +
3 files changed, 73 insertions(+), 1 deletion(-)
create mode 100644 e2e/test/scenarios/actions/reproductions/31587-bottom-corner-radius-action-buttons.cy.spec.js
diff --git a/e2e/test/scenarios/actions/reproductions/31587-bottom-corner-radius-action-buttons.cy.spec.js b/e2e/test/scenarios/actions/reproductions/31587-bottom-corner-radius-action-buttons.cy.spec.js
new file mode 100644
index 00000000000..609405942fa
--- /dev/null
+++ b/e2e/test/scenarios/actions/reproductions/31587-bottom-corner-radius-action-buttons.cy.spec.js
@@ -0,0 +1,70 @@
+import {
+ editDashboard,
+ restore,
+ saveDashboard,
+ setActionsEnabledForDB,
+ visitDashboard,
+} from "e2e/support/helpers";
+import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
+
+const viewports = [
+ [768, 800],
+ [1024, 800],
+ [1440, 800],
+];
+describe("metabase#31587", () => {
+ viewports.forEach(([width, height]) => {
+ describe(`Testing on resolution ${width} x ${height}`, () => {
+ beforeEach(() => {
+ restore();
+ cy.signInAsAdmin();
+ setActionsEnabledForDB(SAMPLE_DB_ID);
+ cy.viewport(width, height);
+ });
+ it("should not allow action buttons to overflow when editing dashboard", () => {
+ visitDashboard(1);
+ editDashboard();
+ cy.button("Add action").click();
+
+ cy.findByTestId("dashboard-parameters-and-cards").within(() => {
+ const actionButtonContainer = cy.findByTestId(
+ "action-button-full-container",
+ );
+ const dashCard = cy.contains(".DashCard", "Click Me");
+
+ actionButtonContainer.then(actionButtonElem => {
+ dashCard.then(dashCardElem => {
+ expect(actionButtonElem[0].scrollHeight).to.eq(
+ dashCardElem[0].scrollHeight,
+ );
+ });
+ });
+ });
+ });
+
+ it("should not allow action buttons to overflow when viewing info sidebar", () => {
+ visitDashboard(1);
+ editDashboard();
+ cy.findByLabelText("Add action").click();
+
+ saveDashboard();
+ cy.icon("info").click();
+
+ cy.findByTestId("dashboard-parameters-and-cards").within(() => {
+ const actionButtonContainer = cy.findByTestId(
+ "action-button-full-container",
+ );
+ const dashCard = cy.contains(".DashCard", "Click Me");
+
+ actionButtonContainer.then(actionButtonElem => {
+ dashCard.then(dashCardElem => {
+ expect(actionButtonElem[0].scrollHeight).to.eq(
+ dashCardElem[0].scrollHeight,
+ );
+ });
+ });
+ });
+ });
+ });
+ });
+});
diff --git a/frontend/src/metabase/actions/components/ActionViz/Action.tsx b/frontend/src/metabase/actions/components/ActionViz/Action.tsx
index 3cf8f06ddcf..5f5ce47d717 100644
--- a/frontend/src/metabase/actions/components/ActionViz/Action.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/Action.tsx
@@ -145,7 +145,7 @@ function ActionFn(props: ActionProps) {
return (
<Tooltip tooltip={tooltip}>
- <FullContainer>
+ <FullContainer data-testid="action-button-full-container">
<ActionButtonView
disabled
icon="bolt"
diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx
index 98a7006dcc6..1dfc29d15ef 100644
--- a/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx
+++ b/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx
@@ -7,7 +7,9 @@ export const StyledButton = styled(Button)<{
isFullHeight?: boolean;
focus?: boolean;
}>`
+ padding: 0;
height: ${({ isFullHeight }) => (isFullHeight ? "100%" : "auto")};
+
${({ focus }) =>
focus
? `
--
GitLab