vanilla-framework 3.11.0 → 3.12.1

package/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "vanilla-framework",
+  "version": "3.12.1",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -20,7 +22,6 @@
     "module"
   ],
   "license": "LGPL-3.0",
-  "name": "vanilla-framework",
   "repository": {
     "type": "git",
     "url": "https://github.com/canonical/vanilla-framework"
@@ -47,7 +48,6 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.11.0",
   "files": [
     "_index.scss",
     "/scss",
@@ -61,19 +61,19 @@
     "postcss": "8.4.21",
     "postcss-cli": "9.1.0",
     "postcss-scss": "4.0.6",
-    "sass": "1.57.1",
+    "sass": "1.58.3",
     "yaml": "1.10.2"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
-    "@testing-library/cypress": "8.0.7",
-    "cypress": "10.11.0",
+    "@testing-library/cypress": "9.0.0",
+    "cypress": "12.7.0",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.8.2",
+    "prettier": "2.8.4",
     "stylelint": "14.16.1",
-    "stylelint-config-prettier": "9.0.4",
+    "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",

package/scss/_base_fontfaces.scss

@@ -7,7 +7,7 @@
         font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
         font-style: normal;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}f3b9cc97-Ubuntu[wdth,wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}15be2ffe-UbuntuBeta0.865[wdth,wght]-latin.woff2') format('woff2-variations');
       }
 
       @font-face {
@@ -15,14 +15,14 @@
         font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
         font-style: italic;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}c1b12cdf-Ubuntu-Italic[wdth,wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}a84821f4-UbuntuBeta0.865-Italic[wdth,wght]-latin.woff2') format('woff2-variations');
       }
 
       @font-face {
         font-family: 'Ubuntu Mono variable';
         font-style: normal;
         font-weight: 100 800; /*  min and max value for the weight axis */
-        src: url('#{$assets-path}0bd4277a-UbuntuMono[wght]-latin.woff2') format('woff2-variations');
+        src: url('#{$assets-path}ec568c8f-UbuntuMonoBeta0.865[wght]-latin.woff2') format('woff2-variations');
       }
 
       @if $font-allow-cyrillic-greek-latin {
@@ -32,7 +32,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}7d55b1fc-Ubuntu[wdth,wght]-cyrillic-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}929e5b64-UbuntuBeta0.865[wdth,wght]-cyrillic-extended.woff2') format('woff2-variations');
           unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
         }
 
@@ -42,7 +42,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}086e42aa-Ubuntu[wdth,wght]-cyrillic.woff2') format('woff2-variations');
+          src: url('#{$assets-path}ec29c093-UbuntuBeta0.865[wdth,wght]-cyrillic.woff2') format('woff2-variations');
           unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
         }
 
@@ -52,7 +52,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}77e5f6a2-Ubuntu[wdth,wght]-greek-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}0a8276a6-UbuntuBeta0.865[wdth,wght]-greek-extended.woff2') format('woff2-variations');
           unicode-range: U+1F00-1FFF;
         }
 
@@ -62,7 +62,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}57fdffc1-Ubuntu[wdth,wght]-greek.woff2') format('woff2-variations');
+          src: url('#{$assets-path}16acdbb4-UbuntuBeta0.865[wdth,wght]-greek.woff2') format('woff2-variations');
           unicode-range: U+0370-03FF;
         }
 
@@ -72,7 +72,7 @@
           font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
           font-style: normal;
           font-weight: 100 800; /*  min and max value for the weight axis */
-          src: url('#{$assets-path}a312a7ed-Ubuntu[wdth,wght]-latin-extended.woff2') format('woff2-variations');
+          src: url('#{$assets-path}c81d0142-UbuntuBeta0.865[wdth,wght]-latin-extended.woff2') format('woff2-variations');
           unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
         }
       }

package/scss/_base_hr.scss

@@ -6,7 +6,7 @@
   hr {
     @extend %hr;
 
-    margin-bottom: calc($spv--small - $input-border-thickness);
+    margin-bottom: calc($spv--small - 1px);
 
     &.u-no-margin--bottom {
       // compensate for hr thickness, to make sure it doesn't drift from baseline grid

package/scss/_base_typography-definitions.scss

@@ -76,7 +76,7 @@
   %vf-heading-4 {
     font-size: #{map-get($font-sizes, h4-mobile)}rem;
     font-style: normal;
-    font-weight: $font-weight-regular-text;
+    font-weight: $font-weight-thin;
     line-height: map-get($line-heights, h4-mobile);
     margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, h4-mobile);
     margin-top: 0;
@@ -146,6 +146,8 @@
 
   %default-text {
     @extend %common-default-text-properties;
+    font-size: 1rem;
+    font-weight: $font-weight-regular-text;
 
     margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
   }
@@ -203,19 +205,36 @@
     color: $colors--light-theme--text-muted;
   }
 
+  %small-caps-text {
+    @extend %default-text;
+    font-variant-caps: all-small-caps;
+    letter-spacing: 0.05em;
+    margin-bottom: map-get($sp-after, default-text) - map-get($nudges, p);
+
+    &.u-no-margin--bottom {
+      @extend %u-no-margin--bottom--small;
+    }
+
+    // deprecated: the use of .u-align-text--x-small-to-default on small caps text is deprecated
+    // previously small caps was implemented as x-small text variant requiring .u-align-text--x-small-to-default compensations
+    // but now it's implemented with default text size not requiring any compensations,
+    // so we need to reset the padding-top to the default value
+    &.u-align-text--x-small-to-default {
+      padding-top: map-get($nudges, p) + map-get($browser-rounding-compensations, p);
+    }
+  }
+
   %table-header-label {
+    // TODO: table header should use %small-caps-text,
+    // but we need to test it in the context of MAAS dense tables first
     @extend %x-small-text;
 
     text-transform: uppercase;
   }
 
+  // deprecated: %muted-text is deprecated, use %small-caps-text instead
   %muted-heading {
-    @extend %muted-text;
-    @extend %table-header-label;
-
-    &.u-no-margin--bottom {
-      @extend %u-no-margin--bottom--small;
-    }
+    @extend %small-caps-text;
   }
 
   %bold {

package/scss/_base_typography.scss

@@ -78,11 +78,10 @@
     @extend %x-small-text;
   }
 
+  .p-text--small-caps,
+  // deprecated: .p-text--x-small-capitalised is deprecated, use .p-text--small-caps instead
   .p-text--x-small-capitalised {
-    @extend %x-small-text;
-
-    font-weight: $font-weight-bold;
-    text-transform: uppercase;
+    @extend %small-caps-text;
   }
 
   //@section Adjusted spacing for headings (or a p) following a paragraph

package/scss/_layouts_application.scss

@@ -223,18 +223,18 @@ $application-layout--side-nav-width-expanded: 15rem !default;
 
   // Other panels
   // --------------
-  .l-main {
+  .l-application .l-main {
     grid-area: main;
     overflow-y: auto;
   }
 
-  .l-status {
+  .l-application .l-status {
     border-top: 1px solid $colors--light-theme--border-low-contrast;
     grid-area: status;
     z-index: 102;
   }
 
-  .l-aside {
+  .l-application .l-aside {
     @include vf-transition($property: #{transform, box-shadow, visibility}, $duration: snap);
 
     box-shadow: $panel-drop-shadow;

package/scss/_layouts_full-width.scss

@@ -11,6 +11,11 @@
   // like: https://github.com/canonical/jaas-dashboard/blob/b9ca3876d054c48dc2da74df0080cd14a0f15740/src/scss/index.scss#L28
 
   @media (min-width: $breakpoint-large) {
+    // stylelint-disable-next-line selector-max-type
+    body {
+      position: relative;
+    }
+
     .l-full-width__sidebar {
       background: $color-light;
 

package/scss/_patterns_article-pagination.scss

@@ -2,11 +2,12 @@
 
 @mixin vf-p-article-pagination {
   %chevron-icon {
-    color: $color-mid-dark;
-    content: '\203A';
-    font-size: 2em;
+    @extend %icon;
+    @include vf-icon-chevron($color-mid-dark);
+
+    content: '';
     position: absolute;
-    top: 1rem;
+    top: calc($spv--large + $spv--x-small);
   }
 
   .p-article-pagination {
@@ -74,7 +75,7 @@
       @extend %chevron-icon;
 
       left: $sp-small;
-      transform: scaleX(-1);
+      transform: rotate(90deg);
     }
   }
 
@@ -96,6 +97,7 @@
       @extend %chevron-icon;
 
       right: $sp-small;
+      transform: rotate(-90deg);
     }
   }
 }

package/scss/_patterns_lists.scss

@@ -64,33 +64,23 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 
   %vf-list-item-state-base {
     @extend %vf-list;
-
-    background-position-y: $spv--x-small + $list-status-icon-nudge;
     background-repeat: no-repeat;
     background-size: $list-status-icon-height;
-    padding-left: 2rem;
+    content: '';
+    display: inline-block;
+    height: $sph--large;
+    margin-right: $sph--large;
+    position: relative;
+    top: $sph--x-small;
+    width: $sph--large;
   }
 }
 
 @mixin vf-list-item-divided {
-  position: relative;
-
-  &::after {
-    border-bottom: 1px solid $color-mid-light;
-    bottom: 0;
-    content: '';
-    height: 1px;
-    left: 0;
-    position: absolute;
-    right: 0;
-  }
-
-  &:last-of-type,
-  .last-item {
-    &::after {
-      border-bottom: 0;
-    }
-  }
+  box-shadow: inset 0px 1px 0px 0rem $color-mid-x-light;
+  margin: 0;
+  padding-bottom: $sph--large;
+  padding-top: $sph--small;
 }
 
 // Mixin for inline list items
@@ -125,6 +115,22 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   }
 }
 
+%vf-list-item-ordered {
+  &::marker {
+    content: none;
+    display: none;
+  }
+
+  &::before {
+    color: $color-dark;
+    content: counters(list-item, '.') '. ';
+    display: inline-block;
+    margin-right: $sph--large;
+    text-align: right;
+    width: $sph--large;
+  }
+}
+
 // A list with separators between items
 @mixin vf-p-list-divided {
   .p-list--divided {
@@ -138,22 +144,61 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     &.is-split .p-list__item:last-of-type {
       border-bottom: 1px solid $color-mid-light;
     }
+
+    & & {
+      margin-bottom: 0;
+      margin-left: $sp-x-large;
+      padding-top: $sph--large;
+
+      .p-list__item:last-child {
+        padding-bottom: 0;
+      }
+    }
   }
+
+  // stylelint-disable selector-max-type -- we want to target ordered lists
+  ol.p-list--divided {
+    list-style: none;
+    .p-list__item {
+      @extend %vf-list-item-ordered;
+    }
+  }
+  // stylelint-enable selector-max-type -- we want to target ordered lists
 }
 
 // Displays item with a state icon
 @mixin vf-p-list-item-state {
   .is-ticked {
-    @extend %vf-list-item-state-base;
-    @include vf-icon-success;
+    &::before {
+      @extend %vf-list-item-state-base;
+      @include vf-icon-success;
+    }
   }
 
   .is-crossed {
-    @extend %vf-list-item-state-base;
-    @include vf-icon-error;
+    &::before {
+      @extend %vf-list-item-state-base;
+      @include vf-icon-error;
+    }
+  }
+}
+
+%vf-list-item-bullet {
+  &::before {
+    color: $color-dark;
+    content: '•';
+    display: inline-block;
+    margin-right: $sph--large;
+    text-align: right;
+    width: $sph--large;
   }
 }
 
+// Displays item with a bullet
+.has-bullet {
+  @extend %vf-list-item-bullet;
+}
+
 // Displays a list inline with spacing
 @mixin vf-p-inline-list {
   .p-inline-list {
@@ -288,6 +333,10 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
         width: $bullet-width;
       }
     }
+    .p-strip--dark &::before {
+      background-color: $color-x-dark;
+      border: 1px solid $color-x-light;
+    }
   }
 
   .p-stepped-list__title + .p-stepped-list__content {

package/scss/_patterns_logo-section.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
 
-@mixin vf-p-set-logo-section-item-width($breakpoint: small) {
+@mixin vf-p-set-logo-section-item-width($breakpoint: small, $column-span: 1) {
   // This mixin calculates the width of an individual logo.
 
   $grid-column-count: $grid-columns-small;
@@ -26,7 +26,7 @@
     $gutter: map-get($grid-gutter-widths, default);
     $media-query-keyword: min-width;
     $media-query-width: $threshold-6-12-col;
-    $logo-column-span: 2;
+    $logo-column-span: $column-span;
   }
 
   @media ($media-query-keyword: #{$media-query-width}) {
@@ -141,7 +141,11 @@
 
     @include vf-p-set-logo-section-item-width($breakpoint: small);
     @include vf-p-set-logo-section-item-width($breakpoint: medium);
-    @include vf-p-set-logo-section-item-width($breakpoint: large);
+    @include vf-p-set-logo-section-item-width($breakpoint: large, $column-span: 2);
+
+    .p-logo-section--dense & {
+      @include vf-p-set-logo-section-item-width($breakpoint: large);
+    }
   }
 
   .p-logo-section__logo {

package/scss/_patterns_muted-heading.scss

@@ -1,5 +1,6 @@
+// deprecated: .p-muted-heading and vf-p-muted-heading is deprecated, use .p-text--small-caps instead
 @mixin vf-p-muted-heading {
   .p-muted-heading {
-    @extend %muted-heading;
+    @extend %small-caps-text;
   }
 }

package/scss/_patterns_navigation.scss

@@ -66,7 +66,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     border-radius: 0;
 
     display: block;
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, default-text);
     margin: 0;
     overflow: hidden;

package/scss/_patterns_search-and-filter.scss

@@ -72,7 +72,7 @@
     .p-search-and-filter__panel {
       @include vf-transition(opacity, fast);
 
-      background-color: $colors--light-theme--background-inputs;
+      background-color: $color-x-light;
       border-radius: $border-radius;
       box-shadow: $box-shadow;
       opacity: 1;

package/scss/_settings_font.scss

@@ -12,6 +12,7 @@ $base-font-sizes: (
   large: $font-size-largescreen,
 ) !default;
 $font-weight-display-heading: 100 !default;
+$font-weight-thin: 300 !default;
 $font-weight-regular-text: 400 !default;
 $font-weight-bold: 550 !default;
 

package/scss/_settings_spacing.scss

@@ -18,7 +18,7 @@ $font-sizes: (
   h4-mobile: 1.22176,
   small: pow($ms-ratio, -1),
   x-small: pow($ms-ratio, -2),
-);
+) !default;
 
 $line-heights: (
   h1: 7 * $sp-unit,

package/scss/_utilities_has-icon.scss

@@ -0,0 +1,6 @@
+@mixin vf-u-has-icon {
+  .u-has-icon [class*='p-icon--']:first-child {
+    margin-right: $sph--small;
+    margin-top: $spv--small;
+  }
+}

package/scss/_utilities_layout.scss

@@ -3,7 +3,8 @@
     @extend %fixed-width-container;
 
     & &,
-    .row & {
+    .row &,
+    & .row {
       @include vf-b-row-reset;
     }
   }

package/scss/_utilities_off-screen.scss

@@ -2,12 +2,12 @@
 
 // Positions element out of flow & off screen for screen readers
 @mixin vf-u-off-screen {
-  .u-off-screen {
-    height: 0 !important;
-    left: -10000px !important;
-    overflow: hidden !important;
-    position: absolute !important;
-    top: auto !important;
-    width: 1px !important;
+  .u-off-screen:not(:focus):not(:active) {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
 }

package/scss/_vanilla.scss

@@ -67,6 +67,7 @@
 @import 'utilities_equal-height';
 @import 'utilities_floats';
 @import 'utilities_font-metrics';
+@import 'utilities_has-icon';
 @import 'utilities_hide';
 @import 'utilities_image-position';
 @import 'utilities_layout';
@@ -150,6 +151,7 @@
   @include vf-u-embedded-media;
   @include vf-u-equal-height;
   @include vf-u-floats;
+  @include vf-u-has-icon;
   @include vf-u-image-position;
   @include vf-u-layout;
   @include vf-u-margin-collapse;