Align help text and labels for tick elements

[carkod]

Done

Align help text with tick elements

Fixes #3402
Fixes #3966

QA

• Open https://vanilla-framework-3965.demos.haus/docs/examples/patterns/forms/checkbox

• Open and check help text https://vanilla-framework-3965.demos.haus/docs/examples/patterns/forms/radio

• Check standalon versions also look the same
  https://vanilla-framework-3965.demos.haus/docs/examples/patterns/forms/checkbox
  https://vanilla-framework-3965.demos.haus/docs/examples/standalone/patterns/forms/checkbox
  https://vanilla-framework-3965.demos.haus/docs/examples/patterns/forms/radio
  https://vanilla-framework-3965.demos.haus/docs/examples/standalone/patterns/forms/radio

• Review updated documentation:

  • Added example https://vanilla-framework-3965.demos.haus/docs/base/forms#checkbox

• Also fixed checkbox alignment issue
  

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

[webteam-app]

Demo starting at https://vanilla-framework-3965.demos.haus

[lyubomir-popov]

Hi @carkod the alignment of the secoind line of text looks good, but there's another problem - compare ot the Baseline grid toggle in this screenshot:

The checkbox box sits slightly higher in the actual example - is this issue introduced here or present in master as well?

[bartaz]

@carkod Did you approve Percy on this PR? There is a lot of unexpected changes in screenshots that shouldn't be approved. Many of checkbox/radio examples are broken because of style changes, such as:

Unfortunately I don't see the option in percy to 'unapprove' them, but you should review all the checkbox related examples and see how they are affected by the change.

[lyubomir-popov]

@carkod you should not approve percy yourself, this is another form of visual review that should be done by someone reviewing the pr.

[lyubomir-popov]

@carkod @bartaz just push one fix and it will regenerate percy, then please do not approve yourself - just consult it for things that got broken

[carkod]

Hi @carkod the alignment of the secoind line of text looks good, but there's another problem - compare ot the Baseline grid toggle in this screenshot:

The checkbox box sits slightly higher in the actual example - is this issue introduced here or present in master as well?

Sorry, which checkbox is slightly higher?
What's currently in master is here https://vanillaframework.io/docs/examples/patterns/forms/checkbox

[lyubomir-popov]

@carkod
the box drops a little under the text baseline, so it looks properly centered compared to the text:

in this branch, it is aligned to the baseline, making it look a bit raised:

When you change from block to inline context, you need to take care of vertical-align to ensure nothing moves.

[bartaz]

Sorry, still not working, now the "required" asterisk disapeared, probably because of the padding I suggested... I will try to have a look how to fix this.

[bartaz]

LGTM

[carkod]

LGTM @lyubomir-popov final design review? Bartek made some changes to the required icon

[lyubomir-popov]

+1'd :)