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

Merge pull request #4452 from appsmithorg/fix--color-picker-in-form-widget

Browse Source 
fix: add color picker to form component
This commit is contained in:
Somangshu Goswami 2021-06-07 18:15:15 +05:30 committed by GitHub
commit 5bca743790
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
View File

@ -1,5 +1,6 @@
const testdata = require("../../../../fixtures/testdata.json"); const testdata = require("../../../../fixtures/testdata.json");
const apiwidget = require("../../../../locators/apiWidgetslocator.json"); const apiwidget = require("../../../../locators/apiWidgetslocator.json");
const widgetsPage = require("../../../../locators/Widgets.json");
const explorer = require("../../../../locators/explorerlocators.json"); const explorer = require("../../../../locators/explorerlocators.json");
const commonlocators = require("../../../../locators/commonlocators.json"); const commonlocators = require("../../../../locators/commonlocators.json");
const formWidgetsPage = require("../../../../locators/FormWidgets.json"); const formWidgetsPage = require("../../../../locators/FormWidgets.json");
@ -30,10 +31,13 @@ describe("Entity explorer Drag and Drop widgets testcases", function() {
/** /**
* @param{Text} Random Colour * @param{Text} Random Colour
*/ */
cy.testCodeMirror(this.data.colour); cy.get(widgetsPage.backgroundcolorPicker)
.first()
.click({ force: true });
cy.xpath(widgetsPage.greenColor).click();
cy.get(formWidgetsPage.formD) cy.get(formWidgetsPage.formD)
.should("have.css", "background-color") .should("have.css", "background-color")
.and("eq", this.data.rgbValue); .and("eq", "rgb(3, 179, 101)");
/** /**
* @param{toggleButton Css} Assert to be checked * @param{toggleButton Css} Assert to be checked
*/ */

10
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js
View File

@ -3,6 +3,7 @@ const formWidgetsPage = require("../../../../locators/FormWidgets.json");
const publish = require("../../../../locators/publishWidgetspage.json"); const publish = require("../../../../locators/publishWidgetspage.json");
const dsl = require("../../../../fixtures/formdsl.json"); const dsl = require("../../../../fixtures/formdsl.json");
const pages = require("../../../../locators/Pages.json"); const pages = require("../../../../locators/Pages.json");
const widgetsPage = require("../../../../locators/Widgets.json");
describe("Form Widget Functionality", function() { describe("Form Widget Functionality", function() {
before(() => { before(() => {
@ -23,10 +24,13 @@ describe("Form Widget Functionality", function() {
/** /**
* @param{Text} Random Colour * @param{Text} Random Colour
*/ */
cy.testCodeMirror(this.data.colour); cy.get(widgetsPage.backgroundcolorPicker)
.first()
.click({ force: true });
cy.xpath(widgetsPage.greenColor).click();
cy.get(formWidgetsPage.formD) cy.get(formWidgetsPage.formD)
.should("have.css", "background-color") .should("have.css", "background-color")
.and("eq", this.data.rgbValue); .and("eq", "rgb(3, 179, 101)");
/** /**
* @param{toggleButton Css} Assert to be checked * @param{toggleButton Css} Assert to be checked
*/ */
@ -40,7 +44,7 @@ describe("Form Widget Functionality", function() {
it("Form Widget Functionality To Verify The Colour", function() { it("Form Widget Functionality To Verify The Colour", function() {
cy.get(formWidgetsPage.formD) cy.get(formWidgetsPage.formD)
.should("have.css", "background-color") .should("have.css", "background-color")
.and("eq", this.data.rgbValue); .and("eq", "rgb(3, 179, 101)");
}); });
it("Form Widget Functionality To Unchecked Visible Widget", function() { it("Form Widget Functionality To Unchecked Visible Widget", function() {
cy.get(publish.backToEditor).click(); cy.get(publish.backToEditor).click();

2
app/client/src/widgets/FormWidget.tsx
View File

@ -19,7 +19,7 @@ class FormWidget extends ContainerWidget {
label: "Background Color", label: "Background Color",
helpText: "Use a html color name, HEX, RGB or RGBA value", helpText: "Use a html color name, HEX, RGB or RGBA value",
placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)", placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
controlType: "INPUT_TEXT", controlType: "COLOR_PICKER",
isBindProperty: true, isBindProperty: true,
isTriggerProperty: false, isTriggerProperty: false,
validation: VALIDATION_TYPES.TEXT, validation: VALIDATION_TYPES.TEXT,