diff --git a/changes/fix-label-height-change-on-error-in-registration-page b/changes/fix-label-height-change-on-error-in-registration-page new file mode 100644 index 0000000000..5dd59e7bf0 --- /dev/null +++ b/changes/fix-label-height-change-on-error-in-registration-page @@ -0,0 +1 @@ +- Fix an issue where the height of the label for some input fields changed when an error message is displayed diff --git a/cypress/integration/all/setup/setup.spec.ts b/cypress/integration/all/setup/setup.spec.ts index 842626ab6d..924fdedf8f 100644 --- a/cypress/integration/all/setup/setup.spec.ts +++ b/cypress/integration/all/setup/setup.spec.ts @@ -4,22 +4,22 @@ const { GOOD_PASSWORD } = CONSTANTS; const fillOutForm = () => { // Page 1 - cy.findByPlaceholderText(/full name/i).type("Test name"); + cy.findByLabelText(/full name/i).type("Test name"); - cy.findByPlaceholderText(/email/i).type("test@example.com"); + cy.findByLabelText(/email/i).type("test@example.com"); - cy.findByPlaceholderText(/^password/i) + cy.findByLabelText(/^password/i) .first() .type(GOOD_PASSWORD); - cy.findByPlaceholderText(/confirm password/i) + cy.findByLabelText(/confirm password/i) .last() .type(GOOD_PASSWORD); cy.contains("button:enabled", /next/i).click(); // Page 2 - cy.findByPlaceholderText(/organization name/i).type("Fleet Test"); + cy.findByLabelText(/organization name/i).type("Fleet Test"); cy.contains("button:enabled", /next/i).click(); diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx index 92dcc42f3a..b83595035b 100644 --- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx +++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import Form from "components/forms/Form"; import formFieldInterface from "interfaces/form_field"; import Button from "components/buttons/Button"; -import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon"; +import InputField from "components/forms/fields/InputField"; import helpers from "./helpers"; const formFields = ["name", "password", "password_confirmation", "email"]; @@ -44,9 +44,9 @@ class AdminDetails extends Component { return (
- { @@ -56,25 +56,21 @@ class AdminDetails extends Component { maxLength: "80", }} /> - - + -