vanilla-framework icon indicating copy to clipboard operation
vanilla-framework copied to clipboard

Adjust p-nudge to better align text to the baseline grid

Open dgtlntv opened this issue 1 year ago • 2 comments

Done

  • changed all text nudges that previously had a nudge of 0.4rem to 0.375rem to align default text (and some headings) better to the baseline grid
  • I tried to test most of the things that depend on p-nudge
    • While doing that I found a couple of misalignments to the baseline grid (that also existed for the previous nudges)
  • One small drive-by typo fix

QA

  • Check out all the components that depend on p-nudge and see if they align properly to the baseline grid.
    • eg. default text, some headings, input fields, buttons etc.

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:

  • [x] 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
  • [x] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

Before

Screenshot 2024-01-24 at 11 44 57

After

Screenshot 2024-01-24 at 11 44 26

dgtlntv avatar Jan 24 '24 11:01 dgtlntv

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

webteam-app avatar Jan 24 '24 11:01 webteam-app

The problem of 1.5px being subtracted from the padding at lower pixel density screens could be circumvented by subtracting either 1.5px or 1px, depending on whether the device supports the display of a 1.5px border, by checking the pixel density of the device. I am not sure if that'd be too hacky though.

padding-bottom: calc($input-vertical-padding - $input-border-thickness);
@media only screen and (max-resolution: 1.99dppx) {
   padding-bottom: calc($input-vertical-padding - 1px);
}

dgtlntv avatar Jan 25 '24 16:01 dgtlntv

Fine by me, @bartaz please review

lyubomir-popov avatar Apr 29 '24 12:04 lyubomir-popov