vanilla-framework 3.6.0 → 3.7.1

package/README.md

@@ -1,9 +1,9 @@
 # ![vanilla](https://assets.ubuntu.com/v1/70041419-vanilla-framework.png?w=35 'Vanilla') Vanilla Framework
 
-[![CircleCI build status](https://circleci.com/gh/canonical-web-and-design/vanilla-framework.svg?style=shield)](https://circleci.com/gh/canonical-web-and-design/vanilla-framework)
+[![CircleCI build status](https://circleci.com/gh/canonical/vanilla-framework.svg?style=shield)](https://circleci.com/gh/canonical/vanilla-framework)
 [![npm version](https://badge.fury.io/js/vanilla-framework.svg)](http://badge.fury.io/js/vanilla-framework)
 [![Downloads](http://img.shields.io/npm/dm/vanilla-framework.svg)](https://www.npmjs.com/package/vanilla-framework)
-[![devDependency Status](https://david-dm.org/canonical-web-and-design/vanilla-framework/dev-status.svg)](https://david-dm.org/canonical-web-and-design/vanilla-framework#info=devDependencies)
+[![devDependency Status](https://david-dm.org/canonical/vanilla-framework/dev-status.svg)](https://david-dm.org/canonical/vanilla-framework#info=devDependencies)
 [![Chat in #vanilla-framework on Freenode](https://img.shields.io/badge/chat-%23vanilla--framework-blue.svg)](http://webchat.freenode.net/?channels=vanilla-framework)
 [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io)
 
@@ -24,7 +24,7 @@ Vanilla Framework is an extensible CSS framework, built using [Sass](http://sass
 
 ### Hotlinking
 
-You can link to the latest build to add directly into your markup like so, by replacing the x values with the [version number you wish to link](https://github.com/canonical-web-and-design/vanilla-framework/releases).
+You can link to the latest build to add directly into your markup like so, by replacing the x values with the [version number you wish to link](https://github.com/canonical/vanilla-framework/releases).
 
 ```html
 <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />

package/package.json

@@ -5,7 +5,7 @@
   },
   "bugs": {
     "email": "webteam@canonical.com",
-    "url": "http://github.com/canonical-web-and-design/vanilla-framework/issues"
+    "url": "http://github.com/canonical/vanilla-framework/issues"
   },
   "description": "A simple, extendable CSS framework.",
   "homepage": "https://vanillaframework.io/",
@@ -23,7 +23,7 @@
   "name": "vanilla-framework",
   "repository": {
     "type": "git",
-    "url": "https://github.com/canonical-web-and-design/vanilla-framework"
+    "url": "https://github.com/canonical/vanilla-framework"
   },
   "scripts": {
     "start": "yarn build && yarn serve",
@@ -32,6 +32,8 @@
     "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
     "build-class-references": "node scripts/create-class-references.js",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
     "test-spelling": "mdspell templates/docs/**/*.md -r -n -a --en-gb",
@@ -45,7 +47,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.6.0",
+  "version": "3.7.1",
   "files": [
     "_index.scss",
     "/scss",
@@ -55,20 +57,22 @@
   "dependencies": {
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.4.1",
-    "autoprefixer": "10.4.7",
+    "autoprefixer": "10.4.8",
     "postcss": "8.4.14",
     "postcss-cli": "9.1.0",
     "postcss-scss": "4.0.4",
-    "sass": "1.52.2",
+    "sass": "1.54.0",
     "yaml": "1.10.2"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
+    "@testing-library/cypress": "8.0.3",
+    "cypress": "10.6.0",
     "get-site-urls": "1.1.7",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.6.2",
-    "stylelint": "14.8.5",
+    "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/_base_button.scss

@@ -14,7 +14,7 @@
   }
 
   %vf-button-base {
-    @include vf-animation(#{background-color, border-color}, snap, in);
+    @include vf-transition(#{background-color, border-color}, snap, in);
     @include vf-focus;
 
     border-radius: $border-radius;

package/scss/_layouts_application.scss

@@ -64,13 +64,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   // Navigation panel/drawer
   // -------------------------
   .l-navigation {
-    @include vf-animation(
-      $property: (
-        transform,
-        box-shadow,
-      ),
-      $duration: fast
-    );
+    @include vf-transition($property: #{transform, box-shadow}, $duration: fast);
 
     bottom: 0;
     box-shadow: $panel-drop-shadow;
@@ -117,13 +111,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
     }
 
     .l-navigation {
-      @include vf-animation(
-        $property: (
-          width,
-          box-shadow,
-        ),
-        $duration: fast
-      );
+      @include vf-transition($property: #{width, box-shadow}, $duration: fast);
 
       box-shadow: $panel-drop-shadow-transparent;
       overflow: hidden;
@@ -182,7 +170,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   %vf-application-layout--faded-when-collapsed {
     // when app navigation panel is collapsed, fade out unnecessary elements
     @include vf-application-layout--when-collapsed() {
-      @include vf-animation($property: opacity, $duration: snap);
+      @include vf-transition($property: opacity, $duration: snap);
 
       opacity: 0;
     }
@@ -246,13 +234,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-aside {
-    @include vf-animation(
-      $property: (
-        transform,
-        box-shadow,
-      ),
-      $duration: snap
-    );
+    @include vf-transition($property: #{transform, box-shadow}, $duration: snap);
 
     box-shadow: $panel-drop-shadow;
     grid-area: main;

package/scss/_patterns_accordion.scss

@@ -28,13 +28,12 @@
     padding-right: $sph--large;
     position: relative;
     text-align: left;
-    transition-duration: 0s;
     width: 100%;
     z-index: 2;
 
     &::before {
       @include vf-icon-chevron($color-mid-dark);
-      @include vf-animation($property: transform, $duration: fast);
+      @include vf-transition($property: transform, $duration: fast);
       @extend %icon;
 
       content: '';
@@ -49,12 +48,15 @@
       &:hover {
         background-color: $colors--light-theme--background-hover;
       }
+      @include vf-transition(#{background-color, border-color});
     }
 
     &[aria-expanded='false'] {
       &::before {
         transform: rotate(-90deg);
       }
+
+      @include vf-transition(#{background-color, border-color});
     }
   }
 
@@ -88,11 +90,22 @@
   .p-accordion__panel {
     margin: 0;
     overflow: auto; // include child margins into its height
-    padding-left: $sph--large + $icon-size + $sph--large * 2;
+    padding-left: $icon-size + $sph--large * 2;
 
+    @include vf-transition(#{transform, opacity}, fast);
     // Hides panel content
     &[aria-hidden='true'] {
-      display: none;
+      height: 0;
+      opacity: 0;
+      transform: translate3d(0, -0.5rem, 0);
+      visibility: hidden;
+    }
+
+    &[aria-hidden='false'] {
+      height: auto;
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+      visibility: visible;
     }
 
     &.has-tick-elements {

package/scss/_patterns_chip.scss

@@ -4,7 +4,7 @@
 @mixin vf-p-chip {
   %vf-chip {
     @extend %small-text;
-    @include vf-animation(#{background-color, border-color}, snap, out);
+    @include vf-transition(#{background-color, border-color}, snap, out);
     @include vf-focus;
 
     align-items: baseline;

package/scss/_patterns_contextual-menu.scss

@@ -89,7 +89,7 @@
     // In cases where contextual menu toggle is a button, we do not want it to
     // have a margin, but since it is never the last child in this pattern,
     // so we need to remove the margin.
-    // https://github.com/canonical-web-and-design/vanilla-framework/pull/3584
+    // https://github.com/canonical/vanilla-framework/pull/3584
     margin-right: 0;
 
     &[aria-expanded='true'] .p-contextual-menu__indicator {

package/scss/_patterns_form-tick-elements.scss

@@ -17,7 +17,7 @@
     &::before,
     &::after {
       $properties: #{background-color, border-color};
-      @include vf-animation($properties);
+      @include vf-transition($properties);
 
       position: absolute;
     }

package/scss/_patterns_grid.scss

@@ -16,7 +16,7 @@
 
 @mixin vf-p-grid {
   // FIXME: this should be removed from framework SCSS
-  // (see https://github.com/canonical-web-and-design/vanilla-framework/issues/3199)
+  // (see https://github.com/canonical/vanilla-framework/issues/3199)
   .grid-demo [class*='#{$grid-column-prefix}'] {
     background: transparentize($color-negative, 0.9);
     margin-bottom: $spv--small;

package/scss/_patterns_lists.scss

@@ -291,12 +291,6 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     }
   }
 
-  .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
-    @media (min-width: $threshold-6-12-col) {
-      margin-left: 0;
-    }
-  }
-
   @for $i from 6 through 1 {
     // Bullet sizes for each heading level
     $bullet-width: map-get($line-heights, default-text);
@@ -307,6 +301,7 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
       $bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
     }
 
+    .p-heading--#{$i}.p-stepped-list__title,
     h#{$i}.p-stepped-list__title {
       padding-left: $bullet-width-mobile + $sph--large;
 
@@ -324,6 +319,7 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
       }
     }
 
+    .p-heading--#{$i}.p-stepped-list__title + .p-stepped-list__content,
     h#{$i}.p-stepped-list__title + .p-stepped-list__content {
       margin-left: $bullet-width-mobile + $sph--large;
 
@@ -332,6 +328,12 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
       }
     }
   }
+
+  .p-stepped-list--detailed .p-stepped-list__title + .p-stepped-list__content {
+    @media (min-width: $threshold-6-12-col) {
+      margin-left: 0;
+    }
+  }
 }
 
 @mixin vf-p-stepped-list-detailed {

package/scss/_patterns_navigation.scss

@@ -57,7 +57,7 @@ $spv-navigation-logo: 0.3125rem;
     $properties: #{background-color, color, opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
-    @include vf-animation($properties, snap);
+    @include vf-transition($properties, snap);
     @include vf-focus;
 
     // override button styles
@@ -191,12 +191,9 @@ $spv-navigation-logo: 0.3125rem;
     padding-right: 0;
 
     @media (min-width: $threshold-4-6-col) {
+      padding-left: map-get($grid-margin-widths, default);
       padding-right: 0;
     }
-
-    @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: map-get($grid-margin-widths, small);
-    }
   }
 
   // Styles for old navigation logo
@@ -443,7 +440,7 @@ $spv-navigation-logo: 0.3125rem;
     }
 
     .p-navigation__search-overlay {
-      @include vf-animation(opacity, snap);
+      @include vf-transition(opacity, snap);
 
       background-color: $colors--light-theme--background-overlay;
       display: block;

package/scss/_patterns_search-and-filter.scss

@@ -70,7 +70,7 @@
     }
 
     .p-search-and-filter__panel {
-      @include vf-animation(opacity, fast);
+      @include vf-transition(opacity, fast);
 
       background: $color-x-light;
       border-radius: $border-radius;

package/scss/_patterns_side-navigation-expandable.scss

@@ -0,0 +1,113 @@
+@import 'settings';
+
+@mixin vf-p-side-navigation-expandable {
+  .p-side-navigation__item,
+  .p-side-navigation__item--title {
+    // position relative for the absolutely positioned `.p-side-navigation__expand` button
+    position: relative;
+  }
+  .p-side-navigation__link.is-expandable,
+  .p-side-navigation__text.is-expandable {
+    // extra padding to accomodate for `.p-side-navigation__expand` button
+    padding-right: 3rem;
+  }
+
+  .p-side-navigation__expand {
+    @include vf-button-base;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding-bottom: $spv--x-small;
+    padding-top: $spv--x-small;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &::before {
+      @extend %icon;
+      @include vf-icon-chevron;
+      content: '';
+      transform: rotate(-90deg);
+      transition: transform 100ms;
+    }
+  }
+
+  .p-side-navigation__expand[aria-expanded='true']::before {
+    transform: rotate(0deg);
+  }
+
+  // transition
+  .p-side-navigation__list {
+    @include vf-animation(#{transform, opacity}, fast);
+  }
+  .p-side-navigation__expand[aria-expanded='false'] + .p-side-navigation__list {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -0.5rem, 0);
+    // disable transition on close
+    transition-duration: 0s;
+    visibility: hidden;
+  }
+
+  .p-side-navigation__expand[aria-expanded='true'] + .p-side-navigation__list {
+    height: auto;
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+
+  // Theming for the expandable variant
+  @if ($theme-default-p-side-navigation == 'dark') {
+    .p-side-navigation,
+    [class*='p-side-navigation--'] {
+      @include vf-side-navigation-expandable-theme-dark;
+
+      &.is-light {
+        @include vf-side-navigation-expandable-theme-light;
+      }
+    }
+  } @else {
+    .p-side-navigation,
+    [class*='p-side-navigation--'] {
+      @include vf-side-navigation-expandable-theme-light;
+
+      &.is-dark {
+        @include vf-side-navigation-expandable-theme-dark;
+      }
+    }
+  }
+}
+
+@mixin vf-side-navigation-expandable-theme($color-sidenav-text-active, $color-sidenav-item-background-hover, $color-sidenav-toggle-icon) {
+  .p-side-navigation__expand {
+    background-color: inherit;
+    &::before {
+      @include vf-icon-chevron($color-sidenav-toggle-icon);
+    }
+
+    &:hover {
+      background: $color-sidenav-item-background-hover;
+      color: $color-sidenav-text-active;
+    }
+  }
+}
+
+@mixin vf-side-navigation-expandable-theme-light {
+  @include vf-side-navigation-expandable-theme(
+    $color-sidenav-text-active: $colors--light-theme--text-default,
+    $color-sidenav-item-background-hover: $colors--light-theme--background-hover,
+    $color-sidenav-toggle-icon: $colors--light-theme--text-inactive
+  );
+}
+
+@mixin vf-side-navigation-expandable-theme-dark {
+  @include vf-side-navigation-expandable-theme(
+    $color-sidenav-text-active: $colors--dark-theme--text-default,
+    $color-sidenav-item-background-hover: $colors--dark-theme--background-hover,
+    // color of toggle icon - needed because of lack of rgba support in icon mixin
+    $color-sidenav-toggle-icon: #999
+  );
+}

package/scss/_patterns_side-navigation.scss

@@ -118,15 +118,19 @@
     [class*='p-side-navigation--'].is-drawer-expanded & {
       @extend %vf-has-box-shadow;
 
-      animation: vf-p-side-navigation-expand map-get($animation-duration, brisk);
-      transform: translateX(0);
+      @media (max-width: $threshold-6-12-col - 1px) {
+        animation: vf-p-side-navigation-expand map-get($animation-duration, brisk);
+        transform: translateX(0);
+      }
     }
 
     .p-side-navigation.is-collapsed &,
     .p-side-navigation.is-drawer-collapsed &,
     [class*='p-side-navigation--'].is-collapsed &,
     [class*='p-side-navigation--'].is-drawer-collapsed & {
-      animation: vf-p-side-navigation-collapse map-get($animation-duration, brisk);
+      @media (max-width: $threshold-6-12-col - 1px) {
+        animation: vf-p-side-navigation-collapse map-get($animation-duration, brisk);
+      }
     }
 
     .p-side-navigation.is-drawer-hidden &,
@@ -143,7 +147,7 @@
   }
 
   .p-side-navigation__overlay {
-    @include vf-animation(opacity);
+    @include vf-transition(opacity);
 
     bottom: 0;
     left: 0;
@@ -269,10 +273,6 @@
     @extend %side-navigation__list;
   }
 
-  .p-side-navigation__item--title {
-    font-weight: $font-weight-bold;
-  }
-
   %side-navigation__text {
     @include vf-side-navigation-spacing-left;
 
@@ -280,6 +280,10 @@
     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 {
@@ -330,6 +334,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);
 
@@ -340,6 +345,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);
 

package/scss/_patterns_switch.scss

@@ -47,7 +47,7 @@ $knob-size: $sp-unit * 2;
     &::before {
       @extend %vf-has-round-corners;
       @extend %vf-has-box-shadow;
-      @include vf-animation($duration: slow);
+      @include vf-transition($duration: slow);
 
       background: $color-x-light;
       border: 1px solid $color-mid-dark;

package/scss/_patterns_tabs.scss

@@ -55,7 +55,7 @@
 
       &::before {
         @extend %vf-pseudo-border;
-        @include vf-animation(#{background-color, border-color}, snap, in);
+        @include vf-transition(#{background-color, border-color}, snap, in);
 
         bottom: 0;
         z-index: 1;

package/scss/_settings_animations.scss

@@ -12,8 +12,16 @@ $animation-easing: (
   in: cubic-bezier(0.55, 0.055, 0.675, 0.19),
 );
 
-@mixin vf-animation($property: all, $duration: brisk, $easing: out) {
+@mixin vf-transition($property: all, $duration: brisk, $easing: out) {
+  @if (type-of($property) != string) {
+    @error "vf-transition $property must be a string";
+  }
   transition-duration: map-get($animation-duration, $duration);
-  transition-property: $property;
+  transition-property: unquote($property);
   transition-timing-function: map-get($animation-easing, $easing);
 }
+
+// DEPRECATED: vf-animation mixin is deprecated and will be removed in future version of Vanilla, please use vf-transition instead
+@mixin vf-animation($args...) {
+  @include vf-transition($args...);
+}

package/scss/_utilities_off-screen.scss

@@ -3,7 +3,7 @@
 // Positions element out of flow & off screen for screen readers
 @mixin vf-u-off-screen {
   .u-off-screen {
-    height: 1px !important;
+    height: 0 !important;
     left: -10000px !important;
     overflow: hidden !important;
     position: absolute !important;

package/scss/_vanilla.scss

@@ -38,6 +38,7 @@
 @import 'patterns_search-box';
 @import 'patterns_separator';
 @import 'patterns_side-navigation';
+@import 'patterns_side-navigation-expandable';
 @import 'patterns_slider';
 @import 'patterns_status-label';
 @import 'patterns_strip';
@@ -121,6 +122,7 @@
   @include vf-p-segmented-control;
   @include vf-p-separator;
   @include vf-p-side-navigation;
+  @include vf-p-side-navigation-expandable;
   @include vf-p-slider;
   @include vf-p-status-label;
   @include vf-p-strip;