Fix font size of all caps text component

[bartaz]

Done

• Make sure small caps text always has correct font size.
• Make sure muted heading uses new small caps style.
• Rename p-text--x-small-capitalised to p-text--small-caps.
• Deprecate old name (comments in the code and documentation).
• Fix the u-align-text--x-small-to-default usage on new style of small caps

Fixes #4662 #4664

QA

Demo:

• Open demo
  • make sure it looks ok
  • change the element to header (like h2) and make sure the font size is not affected
  • add u-align-text--x-small-to-default and make sure the style is not affected
• Make sure muted heading uses same small caps style:
  • https://vanilla-framework-4665.demos.haus/docs/examples/patterns/headings/muted
• Review updated documentation:
  • https://vanilla-framework-4665.demos.haus/docs/base/typography#small-caps-text
  • https://vanilla-framework-4665.demos.haus/docs/whats-new

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.

Screenshots

[webteam-app]

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

[bartaz]

@lyubomir-popov could you review percy and see if that's what we want?

I aligned p-muted-heading and p-text-x-small-capitalised (name change will be next), but in terms of text styles they are both the same now, same font size, spacings, margins, colour. This means p-muted-heading has bit more spacing from the top than before (judging on percy), and is not "muted" anymore (uses default text colour).

Do we want these two to align in such exact way?

Percy: https://percy.io/bb49709b/vanilla-framework/builds/25319749/changed/1411902602

Demo: https://vanilla-framework-4665.demos.haus/docs/examples/patterns/headings/muted

[lyubomir-popov]

@bartaz that's fine we have p-text--muted which just sets the text colour to grey where needed. Maybe mention that in the release notes for anyone surprised who wants to make a heading grey again.

[lyubomir-popov]

Percy looks good to me

[lyubomir-popov]

I gave a design +1

[ClementChaumel]

I'm confused here, if .u-align-text--x-small-to-default is deprecated, why do we need styles for it?

[bartaz]

Before we changed the font small caps style used to use p-text--x-small-capitalised class, that had x-small font size and uppercase letters to fake small caps. Because it was using x-small font size it required u-align-text--x-small-to-default if someone wanted to align it with standard text.

Now, small caps uses real small caps font, on default font size. So this util is not needed when used with p-text--small-caps, but people already use it in their projects. When they use it in their projects we need to "reset" it to correct value.

I see 2 ways of doing it. Either the way that is here, saying .p-text--small-caps.u-align-text--x-small-to-default reset padding top back to default (it has a benefit that we can do it together with small caps styles, but has downside that we have to hardcode the padding value to reset it back), or when where we define u-align-text--x-small-to-default add :not(.p-text--small-caps):not(.p-text--x-small-capitalised) so it doesn't work on these class names, but work on anything else as it should.

Let me know if it's clearer now, we can jump on a call to discuss it as well. Because indeed it is a bit dirty and confusing.

[ClementChaumel]

Ah ok no yeah I get it! I think it's sensible the way you did it. Do we have any strategy for handling backward compatibility like this? I mean do we drop these kinds of rules in the next major version or does it stay here "forever"?

[bartaz]

We drop them in major version, because that's when we can break things and write a proper migration guide.

[bartaz]

That's why I try to mark them with // deprecated comment in SCSS so it is easier to find. Technically there is also a @deprecated mixin, but TBH, I haven't seen a great value in it, and it complicates the code by nesting everything one more level.

[lyubomir-popov]

Please note the .u-align-text--x-small-to-default utility might still be useful because we are still using the small size for table headers.

[bartaz]

Yes, I'm only deprecating it when used on p-text--x-small-capitalised (and its new name p-text--small-caps), it is still valid utility to use with other x-small text.

[ClementChaumel]

Perfect 👍️