Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add paper background support to side navigation #4881

Merged
merged 4 commits into from Oct 3, 2023

Conversation

bartaz
Copy link
Contributor

@bartaz bartaz commented Oct 2, 2023

Done

As part one building block of new documentation layout this PR updates side navigation component by adding new paper background colour support to the light theme.

QA

  • Open demo
  • Make sure side navigation looks fine on paper background (check mobile view as well).
    • example contains 3 variants (standard, with icons and sticky)

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.

@webteam-app
Copy link

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

@bartaz bartaz added the Feature 馃巵 New feature or request label Oct 2, 2023
@@ -539,7 +539,7 @@
.p-side-navigation--raw-html {
@include vf-side-navigation-raw-html-theme-light;

&.is-light {
&.is-dark {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drive-by: fixed a broken class name when switching from light theme to dark theme in raw HTML variant.

@@ -12,7 +12,7 @@ function generateMetrics(file, metricsArray) {
{
name: 'Stylesheet size',
benchmark: 150000,
threshold: 380000,
threshold: 430000,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding more themes to side navigation increases the size of CSS noticeably.
It's OK, because in the end this additional CSS is quite repetitive and will GZIP nicely, so doesn't affect performance too much.

But we need to increase our allowed thresholds so that the tests pass.

@bartaz bartaz marked this pull request as ready for review October 2, 2023 12:33
@andesol
Copy link
Contributor

andesol commented Oct 3, 2023

@bartaz Looks like the second one (with icons) has a transparent background on mobile

image

@bartaz
Copy link
Contributor Author

bartaz commented Oct 3, 2023

@bartaz Looks like the second one (with icons) has a transparent background on mobile

Thanks @andesol, good catch. I messed up some overrides in example HTML. Should be good now.

Copy link
Contributor

@andesol andesol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 馃憤

@bartaz bartaz merged commit 1c00859 into canonical:main Oct 3, 2023
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants