empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI: Set form field height to $form-field-label-min-height for consistency between states, including on error (#8714)

Browse Source 
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
Jacob Shandling 2022-11-22 14:41:10 -08:00 committed by GitHub
parent a568c28124
commit 9796a15b4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/issue-8393-fix-height-discrepancy-of-input-labels-on-error-state Normal file
View File

@ -0,0 +1 @@
* Fix a discrepancy in the height of input labels when there is a validation error

2
cypress/integration/all/app/settingsflow.spec.ts
View File

@ -239,7 +239,7 @@ describe("App settings flow", () => {
// specifically targeting this one to avoid conflict
// with cypress seeing multiple "metadata" - one
// in a tooltip, the other as the actual label
cy.getAttached("[for='smtpServer']")
cy.findByLabelText(/SMTP server/)
.click({ force: true })
.type("localhost");

1
frontend/components/EnrollSecrets/EnrollSecretTable/EnrollSecretRow/_styles.scss
View File

@ -16,6 +16,7 @@
font-weight: $bold;
margin-bottom: 0;
width: 500px;
height: 0;
}
.input-field {

5
frontend/components/forms/FormField/_styles.scss
View File

@ -2,11 +2,12 @@
margin-bottom: $pad-large;
&__label {
font-size: $x-small;
font-size: $small;
font-weight: $bold;
color: $core-fleet-black;
display: block;
margin-bottom: $pad-xsmall;
margin-bottom: $pad-small;
height: $form-field-label-height;
&--error {
font-weight: $bold;

10
frontend/pages/admin/AppSettingsPage/components/OrgSettingsForm/_styles.scss
View File

@ -60,8 +60,6 @@
width: 100%;
&__label {
font-weight: $bold;
margin-bottom: $pad-xsmall;
width: 100%;
}
@ -102,7 +100,7 @@
color: $core-fleet-black;
border-bottom: solid 1px $ui-fleet-blue-15;
margin: 0 0 $pad-xxlarge;
@media(min-width: $break-990) {
@media (min-width: $break-990) {
max-width: 65%;
}
}
@ -135,19 +133,17 @@
font-size: $x-small;
color: $core-fleet-black;
width: 100%;
@media(min-width: $break-990) {
@media (min-width: $break-990) {
width: 60%;
}
}
&__inputs {
width: 100%;
float: left;
padding-right: $pad-small;
box-sizing: border-box;
@media(min-width: $break-990) {
@media (min-width: $break-990) {
width: 60%;
}

1
frontend/pages/admin/UserManagementPage/components/UserForm/_styles.scss
View File

@ -77,7 +77,6 @@
&__password {
width: 98%;
float: left;
padding: 0 $pad-medium 0 0;
box-sizing: border-box;

1
frontend/styles/var/forms.scss Normal file
View File

@ -0,0 +1 @@
$form-field-label-height: 24px;