vanilla-framework 4.24.0 → 4.25.0

package/README.md

@@ -2,6 +2,7 @@
 
 [![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)
+[![Chat in #vanilla:ubuntu.com on Matrix](https://img.shields.io/badge/chat-%23vanilla:ubuntu.com-blue.svg)](https://matrix.to/#/#vanilla:ubuntu.com)
 [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io)
 
 Vanilla Framework is an extensible CSS framework, built using [Sass](http://sass-lang.com/) and is designed to be used either directly or by using themes to extend or supplement its patterns.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.24.0",
+  "version": "4.25.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -63,7 +63,7 @@
     "@testing-library/cypress": "10.0.3",
     "autoprefixer": "10.4.20",
     "cypress": "14.0.2",
-    "jest": "29.7.0",
+    "jest": "30.0.3",
     "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
     "mime": "3.0.0",
@@ -78,7 +78,7 @@
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.3",
-    "svgo": "3.3.2",
+    "svgo": "4.0.0",
     "yaml": "2.7.0"
   },
   "peerDependencies": {

package/scss/_base_forms.scss

@@ -33,8 +33,8 @@
     line-height: map-get($line-heights, default-text);
     margin-bottom: $input-margin-bottom;
     min-width: 8em;
-    padding-left: $sph--small;
-    padding-right: $sph--small;
+    padding-left: $sph--large;
+    padding-right: $sph--large;
     vertical-align: baseline;
     width: 100%;
 

package/scss/_patterns_chip.scss

@@ -2,6 +2,18 @@
 @import 'settings';
 
 @mixin vf-p-chip {
+  %vf-chip-icon {
+    @extend %icon;
+    align-self: center;
+    background-size: map-get($icon-sizes, small);
+    flex: 0 0 auto;
+    // Space chip away from the content preceding it in the chip body
+    margin-left: $sph--x-small;
+    @media (min-width: $breakpoint-x-large) {
+      background-size: math.div(map-get($icon-sizes, small), $font-size-ratio--largescreen); //ensure no rounding happens as it positions the icon off center
+    }
+  }
+
   %vf-chip {
     @extend %small-text;
     @include vf-transition(#{background-color, border-color}, snap, out);
@@ -18,6 +30,7 @@
     vertical-align: calc($input-border-thickness - map-get($nudges, p));
     white-space: nowrap;
 
+    [class*='p-icon--'],
     .p-chip__lead,
     .p-chip__value {
       color: $colors--theme--text-default;
@@ -41,17 +54,17 @@
     }
 
     .p-chip__dismiss {
-      @extend %icon;
+      @extend %vf-chip-icon;
       @include vf-icon-close-themed;
 
-      align-self: center;
-      background-size: map-get($icon-sizes, small);
       border-radius: 50%;
-      flex: 0 0 auto;
-      margin-left: $sph--x-small;
-      @media (min-width: $breakpoint-x-large) {
-        background-size: math.div(map-get($icon-sizes, small), $font-size-ratio--largescreen); //ensure no rounding happens as it positions the icon off center
-      }
+    }
+
+    & > [class*='p-icon--'] {
+      @extend %vf-chip-icon;
+
+      // Space the chip away from the content following it in the chip body
+      margin-right: $sph--x-small;
     }
 
     &.is-dense {
@@ -62,8 +75,11 @@
       margin: 0;
       vertical-align: baseline;
     }
-  }
 
+    &.is-readonly {
+      border-color: transparent;
+    }
+  }
   @include vf-chips-default;
   @include vf-chips-positive;
   @include vf-chips-caution;

package/scss/_patterns_cta.scss

@@ -5,7 +5,9 @@
       .p-cta-block:
         Main element of the CTA block.
       "&.is-borderless":
-        Borderless variant, to be used to hide top border and padding.
+        Deprecated modifier class that removed top border and padding before v4.25.0. This is now the default behavior, so this class is no longer needed.
+      "&.has-border":
+        Deprecated modifier class that adds a top border and padding.
 */
 
 @import 'settings';
@@ -13,15 +15,20 @@
 @mixin vf-p-cta-block {
   .p-cta-block {
     align-items: baseline;
-    border-top: 1px solid $colors--theme--border-low-contrast;
     display: flex;
     flex-wrap: wrap;
     padding-bottom: $spv--x-large;
-    padding-top: $spv--small;
 
+    &,
+      /** deprecated, borderless is now default behavior */
     &.is-borderless {
       border: none;
       padding-top: 0;
     }
+
+    &.has-border {
+      border-top: 1px solid $colors--theme--border-low-contrast;
+      padding-top: $spv--small;
+    }
   }
 }

package/scss/_patterns_status-label.scss

@@ -1,5 +1,11 @@
 @import 'settings';
 
+/**
+  TODO this component has been deprecated. It will be removed in the next major version / not supported in Pragma.
+  The status label has been merged into the Chip component.
+  See https://github.com/canonical/vanilla-framework/issues/5535
+ */
+
 /**
   TODO this component uses hard-coded colors that don't respond to theming, which is not ideal.
     However, it looks fine on all themes, and re-working it to support theming is a larger undertaking.