Example color theme improvements

[jmuzina]

Done

More limited version of #5086 that achieves #5086 goals without modifying the back-end or modifying example templates.

Fixes #5069, WD-11110

QA

• Open demo
• Open a themed component e.g., table
  • Verify that the color theme switcher is present and uses Segmented Control component.
  • Verify that the baseline grid toggler works.
  • Inspect the element containing the theme switcher & baseline grid control. Verify that the element (div.u-example-controls) is positioned to the bottom right of the page, not its contents.
  • Switch color themes. Verify that the theme has been changed for the example, segmented control state has been updated to reflect the active theme, and the URL query parameter theme has been set to your selected theme.
  • Refresh the browser. Verify that the theme you previously had selected is still active.
  • Small/Medium breakpoints:
    • Verify that the theme switcher & baseline grid control are neatly positioned in the same element & both visible on screen.
    • Verify that the segmented control segments (color themes) are all on the same horizontal line (do not wrap).
• Open a non-themed component, e.g., Article Pagination.
  • Verify that the color theme switcher is not present & no theme query parameter is present in your URL.
  • Verify that the baseline grid switcher is still present & functional.

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.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

There are some unexpected Percy changes, it looks like something I changed in the SCSS has had some unintended consequences. Investigating now

[jmuzina]

Removed example sass from vanilla bundle and now there are no percy diffs.

[bartaz]

I think there are some leftovers from previous implementation that may be not needed anymore.

[bartaz]

Nit picking a bit (as it doesn't matter that much in an internal tool), but it seems more like "component" than "utility", so we could go with p-… prefix instead (because I guess there is no point yet to introduce any internal vanilla prefix that would be different).

[bartaz]

Is this class needed at all? It doesn't seem to be used to attach functionality.

[bartaz]

@jmuzina any need for that still? You seem to be attaching click event via u-theme-toggle__button class name (which is debatable by itself), but seems like we don't really use this js- classes anywhere?

[jmuzina]

@lyubomir-popov Your feedback is now in the demo; see button for example

[bartaz]

If we need a class for it, I guess it would be good to follow the convention of BEM and call it p-example-controls__button, not pretend it's a "utility".

Also, as the label is set in JS, maybe we can remove it alltogether and capitalise the first letter in JS (although it's nice to keep this presentational code in CSS).