Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: updated Box shadow UI (#23795)

Browse Source 
Updated box shadow UI from property pane. Removed tooltip and other
css class. And added the text Small, Medium, Large as proposed UI change
This commit is contained in:
Harshit Pandey 2023-06-08 06:53:28 +05:30 committed by GitHub
parent 3945fc3140
commit 9ca5204109
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 45 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Basic_spec.js
View File

@ -777,27 +777,14 @@ describe("App Theming funtionality", function () {
});
//Change Shadow & verify
cy.get(".ads-v2-segmented-control-value-0").eq(2).click({ force: true });
cy.get(".ads-v2-segmented-control-value-0 div")
.eq(2)
.invoke("css", "box-shadow")
.then((boxshadow) => {
cy.get(".t--widget-button2 button").should(
"have.css",
"box-shadow",
boxshadow, //rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
);
cy.get(widgetsPage.iconWidgetBtn).should(
"have.css",
"box-shadow",
"none",
);
cy.get(".t--widget-button1 button").should(
"have.css",
"box-shadow",
"none",
);
});
cy.contains(".ads-v2-segmented-control-value-0", "Large").click();
cy.get(widgetsPage.iconWidgetBtn).should("have.css", "box-shadow", "none");
cy.get(".t--widget-button1 button").should(
"have.css",
"box-shadow",
"none",
);
cy.assertPageSave();
cy.wait(2000);
@ -1004,29 +991,15 @@ describe("App Theming funtionality", function () {
});
//Change Shadow & verify
cy.get(".ads-v2-segmented-control-value-0").eq(0).click({ force: true });
cy.get(".ads-v2-segmented-control-value-0 div")
.eq(0)
.invoke("css", "box-shadow")
.then((boxshadow) => {
cy.get(".t--widget-button1 button").should(
"have.css",
"box-shadow",
boxshadow, //rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
);
cy.get(widgetsPage.iconWidgetBtn).should(
"have.css",
"box-shadow",
"none",
);
cy.get(".t--widget-button2 button").should(
"have.css",
"box-shadow",
//same value as previous box shadow selection
//since revertion is not possible for box shadow - hence this widget maintains the same value
"rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
);
});
cy.contains(".ads-v2-segmented-control-value-0", "Small").click();
cy.get(widgetsPage.iconWidgetBtn).should("have.css", "box-shadow", "none");
cy.get(".t--widget-button2 button").should(
"have.css",
"box-shadow",
//same value as previous box shadow selection
//since revertion is not possible for box shadow - hence this widget maintains the same value
"rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
);
cy.assertPageSave();

4
app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Default_spec.js
View File

@ -40,10 +40,6 @@ describe("Theme validation for default data", function () {
//Shadow validation
//cy.contains("Shadow").click({ force: true });
cy.wait(2000);
cy.shadowMouseover("none");
cy.shadowMouseover("S");
cy.shadowMouseover("M");
cy.shadowMouseover("L");
cy.contains("Shadow").click({ force: true });
//Font

5
app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_FormWidget_spec.js
View File

@ -47,11 +47,6 @@ describe("Theme validation usecases", function () {
cy.contains("Border").click({ force: true });
//Shadow validation
//cy.contains("Shadow").click({ force: true });
cy.shadowMouseover("none");
cy.shadowMouseover("S");
cy.shadowMouseover("M");
cy.shadowMouseover("L");
cy.xpath(theme.locators._boxShadow("L")).click({ force: true });
cy.wait("@updateTheme").should(
"have.nested.property",

4
app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js
View File

@ -34,10 +34,6 @@ describe("Theme validation usecase for multi-select widget", function () {
//Shadow validation
//cy.contains("Shadow").click({ force: true });
cy.wait(2000);
cy.shadowMouseover("none");
cy.shadowMouseover("S");
cy.shadowMouseover("M");
cy.shadowMouseover("L");
cy.xpath(theme.locators._boxShadow("L")).click({ force: true });
cy.wait("@updateTheme").should(
"have.nested.property",

26
app/client/src/components/propertyControls/BoxShadowOptionsControl.tsx
View File

@ -2,8 +2,8 @@ import * as React from "react";
import type { ControlData, ControlProps } from "./BaseControl";
import BaseControl from "./BaseControl";
import { Icon, SegmentedControl, Tooltip } from "design-system";
import { boxShadowOptions } from "constants/ThemeConstants";
import { Icon, SegmentedControl } from "design-system";
import { boxShadowOptions, sizeMappings } from "constants/ThemeConstants";
import type { DSEventDetail } from "utils/AppsmithUtils";
import {
DSEventTypes,
@ -13,23 +13,13 @@ import {
export interface BoxShadowOptionsControlProps extends ControlProps {
propertyValue: string | undefined;
}
const options = Object.keys(boxShadowOptions).map((optionKey) => ({
label: (
<Tooltip content={optionKey} key={optionKey}>
{optionKey === "none" ? (
<div className="flex items-center justify-center w-5 h-5">
<Icon name="close-line" size="md" />
</div>
) : (
<div
className="flex items-center justify-center w-5 h-5 bg-white"
style={{ boxShadow: boxShadowOptions[optionKey] }}
/>
)}
</Tooltip>
),
label:
optionKey === "none" ? (
<Icon name="close-line" size="md" />
) : (
sizeMappings[optionKey]
),
value: boxShadowOptions[optionKey],
}));

9
app/client/src/constants/ThemeConstants.tsx
View File

@ -143,6 +143,15 @@ export const boxShadowOptions: Record<string, string> = {
L: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
};
/**
* box shadow size mapping for the size name to displayed in property pane
*/
export const sizeMappings: Record<string, string> = {
S: "Small",
M: "Medium",
L: "Large",
};
export const invertedBoxShadowOptions: Record<string, string> =
invert(boxShadowOptions);

27
app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeShadowControl.tsx
View File

@ -1,7 +1,10 @@
import React, { useCallback } from "react";
import type { AppTheme } from "entities/AppTheming";
import { Icon, Tooltip } from "design-system";
import { invertedBoxShadowOptions } from "constants/ThemeConstants";
import { Icon } from "design-system";
import {
invertedBoxShadowOptions,
sizeMappings,
} from "constants/ThemeConstants";
import { SegmentedControl } from "design-system";
interface ThemeBoxShadowControlProps {
@ -41,20 +44,12 @@ function ThemeBoxShadowControl(props: ThemeBoxShadowControlProps) {
: "";
const buttonGroupOptions = Object.keys(options).map((optionKey) => ({
label: (
<Tooltip content={optionKey} key={optionKey}>
{optionKey === "none" ? (
<div className="flex items-center justify-center w-5 h-5">
<Icon name="close-line" size="md" />
</div>
) : (
<div
className="flex items-center justify-center w-5 h-5 bg-white"
style={{ boxShadow: options[optionKey] }}
/>
)}
</Tooltip>
),
label:
optionKey === "none" ? (
<Icon name="close-line" size="md" />
) : (
sizeMappings[optionKey]
),
value: optionKey,
}));