diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox2_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox2_spec.js new file mode 100644 index 000000000000..fb9f426180f2 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox2_spec.js @@ -0,0 +1,27 @@ +import * as _ from "../../../../../support/Objects/ObjectsCore"; + +describe( + "Checkbox Widget Functionality", + { tags: ["@tag.Widget", "@tag.Checkbox"] }, + function () { + before(() => { + _.agHelper.AddDsl("emptyDSL"); + }); + it("Add new widget", () => { + cy.dragAndDropToCanvas("checkboxwidget", { x: 300, y: 300 }); + cy.get(".t--widget-checkboxwidget").should("exist"); + }); + it("Checkbox and it's label should be aligned in center", function () { + cy.openPropertyPane("checkboxwidget"); + const checkboxLabel = ".sc-hINMOq"; + const triggerStyle = "#radix-61-trigger-style > .sc-bcXHqe"; + cy.get(checkboxLabel).click({ force: true }); + cy.get(triggerStyle).click({ force: true }); + _.propPane.EnterJSContext("Font size", ""); + _.propPane.EnterJSContext("Font size", "4rem"); + const checkboxControl = ".bp3-control"; + cy.get(checkboxControl).should("have.css", "align-items", "center"); + cy.get(checkboxControl).should("exist"); + }); + }, +); \ No newline at end of file diff --git a/app/client/src/widgets/CheckboxWidget/component/index.test.tsx b/app/client/src/widgets/CheckboxWidget/component/index.test.tsx new file mode 100644 index 000000000000..c7a522c03aa9 --- /dev/null +++ b/app/client/src/widgets/CheckboxWidget/component/index.test.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import "jest-styled-components"; +import CheckboxComponent from "."; +import { Colors } from "constants/Colors"; +import { LabelPosition } from "components/constants"; +import { AlignWidgetTypes } from "WidgetProvider/constants"; + +describe("CheckboxComponent", () => { + it("should render the StyledCheckbox with align-items set to center", () => { + const { container } = render( + {}} + accentColor={Colors.GREEN_SOLID} + borderRadius="0" + labelPosition={LabelPosition.Left} + alignWidget={AlignWidgetTypes.LEFT} + isDynamicHeightEnabled={false} + isLabelInline={false} + isRequired={false} + isValid={true} + minHeight={50} + isFullWidth={true} + inputRef={() => {}} + />, + ); + const styledCheckbox = container.querySelector(".bp3-checkbox"); + expect(styledCheckbox).toHaveStyleRule("align-items", "center"); + }); +}); diff --git a/app/client/src/widgets/CheckboxWidget/component/index.tsx b/app/client/src/widgets/CheckboxWidget/component/index.tsx index 9105c41a5bb6..19cae3230ca0 100644 --- a/app/client/src/widgets/CheckboxWidget/component/index.tsx +++ b/app/client/src/widgets/CheckboxWidget/component/index.tsx @@ -76,6 +76,10 @@ export const CheckboxLabel = styled.div<{ export const StyledCheckbox = styled(Checkbox)` &.bp3-control.bp3-align-right { padding-right: 0px; + }; + align-items: center; + &.bp3-control.bp3-checkbox .bp3-control-indicator { + margin-top: -0.05rem; } `;