vanilla-framework 3.4.0 → 3.6.1

package/package.json

@@ -45,7 +45,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.4.0",
+  "version": "3.6.1",
   "files": [
     "_index.scss",
     "/scss",
@@ -54,12 +54,12 @@
   ],
   "dependencies": {
     "@canonical/cookie-policy": "3.4.0",
-    "@canonical/latest-news": "1.3.0",
+    "@canonical/latest-news": "1.4.1",
     "autoprefixer": "10.4.7",
-    "postcss": "8.4.13",
+    "postcss": "8.4.14",
     "postcss-cli": "9.1.0",
-    "postcss-scss": "4.0.3",
-    "sass": "1.51.0",
+    "postcss-scss": "4.0.4",
+    "sass": "1.53.0",
     "yaml": "1.10.2"
   },
   "devDependencies": {
@@ -67,8 +67,8 @@
     "get-site-urls": "1.1.7",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.6.2",
-    "stylelint": "14.8.2",
+    "prettier": "2.7.1",
+    "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",

package/scss/_patterns_badge.scss

@@ -0,0 +1,34 @@
+@import 'settings';
+
+@mixin vf-p-badge {
+  %vf-badge {
+    @extend %x-small-text;
+    background-color: $color-dark;
+    border-radius: 1rem;
+    box-sizing: content-box;
+    color: $color-x-light;
+    margin-bottom: 0;
+    max-width: 4ch;
+    overflow: hidden;
+    padding: 0 $spv--x-small;
+  }
+
+  .p-badge,
+  .p-badge--negative {
+    @extend %vf-badge;
+  }
+
+  .p-badge--negative {
+    background-color: $color-negative;
+  }
+
+  .p-chip,
+  [class*='p-chip--'] {
+    .p-badge,
+    .p-badge--negative {
+      align-self: center;
+      margin-left: $sph--small;
+      margin-right: -0.15rem;
+    }
+  }
+}

package/scss/_patterns_lists.scss

@@ -171,14 +171,14 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 
     .p-inline-list__item {
       @include vf-inline-list-item;
-
+      margin-right: $sph--small;
       position: relative;
 
       &::after {
         content: '\2022';
         line-height: map-get($line-heights, default-text);
-        position: absolute;
-        right: -$sp-unit;
+        position: relative;
+        right: -0.25rem;
       }
 
       &:last-of-type,

package/scss/_patterns_navigation.scss

@@ -245,7 +245,7 @@ $spv-navigation-logo: 0.3125rem;
 
     .p-navigation__logo-title {
       @extend %vf-heading-4;
-
+      font-size: #{map-get($font-sizes, h4)}rem;
       line-height: map-get($line-heights, x-small);
     }
 

package/scss/_patterns_side-navigation.scss

@@ -41,6 +41,12 @@
         .p-side-navigation__toggle--in-drawer:
             Side navigation toggle button in drawer (to close navigation on small screens).
 
+    Items list heading:
+        .p-side-navigation__heading:
+            Heading for side navigation items group (text only).
+        .p-side-navigation__heading--linked:
+            Heading for side navigation items group that contains a link (`.p-side-navigation__link`).
+
     Items list:
         .p-side-navigation__list:
             Group of side navigation items (usually a `<ul>` element).
@@ -263,10 +269,6 @@
     @extend %side-navigation__list;
   }
 
-  .p-side-navigation__item--title {
-    font-weight: $font-weight-bold;
-  }
-
   %side-navigation__text {
     @include vf-side-navigation-spacing-left;
 
@@ -274,6 +276,22 @@
     padding-bottom: $spv--x-small;
     padding-right: $sph--large;
     padding-top: $spv--x-small;
+
+    .p-side-navigation__item--title > & {
+      font-weight: $font-weight-bold;
+    }
+  }
+
+  %side-navigation__heading {
+    @extend %side-navigation__text;
+
+    // reset heading styles
+    @extend %common-default-text-properties;
+    @extend %bold;
+
+    display: block;
+    font-size: map-get($base-font-sizes, base);
+    margin: 0;
   }
 
   %side-navigation__link {
@@ -300,6 +318,7 @@
     @extend %side-navigation__link;
   }
 
+  .p-side-navigation__heading,
   .p-side-navigation__text,
   .p-side-navigation__link {
     @extend %side-navigation__text;
@@ -311,6 +330,7 @@
     }
 
     // nested 2nd level of navigation
+    .p-side-navigation__item--title .p-side-navigation__item &,
     .p-side-navigation__item .p-side-navigation__item & {
       @include vf-side-navigation-spacing-left($multiplier: 2);
 
@@ -321,6 +341,7 @@
     }
 
     // nested 3rd level of navigation
+    .p-side-navigation__item--title .p-side-navigation__item .p-side-navigation__item &,
     .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
       @include vf-side-navigation-spacing-left($multiplier: 3);
 
@@ -345,6 +366,15 @@
     padding-left: $spv--small;
   }
 
+  .p-side-navigation__heading,
+  .p-side-navigation__heading--linked {
+    @extend %side-navigation__heading;
+  }
+
+  .p-side-navigation__heading--linked {
+    padding: 0; // padding will come from the link in heading
+  }
+
   // Styles for markup in raw HTML docs variant
   .p-side-navigation--raw-html {
     // stylelint-disable selector-max-type -- we support raw HTML markup for discourse-generated side nav
@@ -353,14 +383,7 @@
     h4,
     h5,
     h6 {
-      @extend %side-navigation__text;
-
-      // reset heading styles
-      @extend %common-default-text-properties;
-      @extend %bold;
-
-      font-size: map-get($base-font-sizes, base);
-      margin: 0;
+      @extend %side-navigation__heading;
     }
 
     ul {
@@ -558,6 +581,8 @@
     }
   }
 
+  .p-side-navigation__heading,
+  .p-side-navigation__heading--linked .p-side-navigation__link,
   .p-side-navigation__item--title,
   .p-side-navigation__item--title .p-side-navigation__link {
     color: $color-sidenav-text-active;

package/scss/_patterns_tabs.scss

@@ -42,9 +42,12 @@
       );
       @include vf-highlight-bar(transparent, bottom, false);
 
+      align-items: center;
       border: none;
       color: $color-dark;
-      display: block;
+      display: flex;
+      gap: $sph--small;
+      height: 100%;
       line-height: map-get($line-heights, default-text);
       margin-bottom: 0;
       padding: $spv--medium $sph--large;

package/scss/_vanilla.scss

@@ -8,6 +8,7 @@
 @import 'patterns_buttons';
 @import 'patterns_card';
 @import 'patterns_chip';
+@import 'patterns_badge';
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
 @import 'patterns_divider';
@@ -88,6 +89,7 @@
   @include vf-p-buttons;
   @include vf-p-card;
   @include vf-p-chip;
+  @include vf-p-badge;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
   @include vf-p-divider;