Aria-busy causes label wrap to be messed up

[coezbek]

I am using Rails as a framework and it sets form elements to aria-busy when being submitted.

This has two unintended side-effects:

1. The whole form gets a busy indicator.
2. Label have nowarp enabled.

Example go to https://picocss.com/docs/forms - This is the way it looks by default:

Now use Chrome and add aria-busy="true" on the form. Now it looks like this:

I have been able to work around this like this:

/* Prevent loading indicator from appearing on form elements */
form[aria-busy="true"]::before, turbo-frame[aria-busy="true"]::before {
  display: none;
}

form[aria-busy="true"] label {
  white-space: normal;
}

Is this something expected or a bug in Picocss?

[troelskn]

I ran in to the same issue. Seems to be caused by this line:

pico/scss/components/_loading.scss

Line 11 in 6dc6489

white-space: nowrap;

The commit that introduced it doesn't explain much. It just says "fix: loading component". I'm sure there is a reason for it, but I don't know what that might be. Any ideas @lucaslarroche ?

[Yohn]

There was a pull request open to fix this, and I've merged that update into my fork of Pico CSS

The fix was to add the form to the line above the line you mentioned to prevent the loading from effecting the form tag.

#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html, form) {
  // ...
}