vanilla-framework 3.5.0 → 3.7.0

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.5.0",
+  "version": "3.7.0",
   "files": [
     "_index.scss",
     "/scss",
@@ -54,21 +56,23 @@
   ],
   "dependencies": {
     "@canonical/cookie-policy": "3.4.0",
-    "@canonical/latest-news": "1.3.0",
-    "autoprefixer": "10.4.7",
+    "@canonical/latest-news": "1.4.1",
+    "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_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_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

@@ -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,
@@ -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
@@ -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);
     }
 
@@ -443,7 +443,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

@@ -143,7 +143,7 @@
   }
 
   .p-side-navigation__overlay {
-    @include vf-animation(opacity);
+    @include vf-transition(opacity);
 
     bottom: 0;
     left: 0;
@@ -269,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;
 
@@ -280,6 +276,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 +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);
 
@@ -340,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);
 

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

@@ -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;
@@ -52,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/_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';
@@ -37,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';
@@ -88,6 +90,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;
@@ -119,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;