vanilla-framework 2.34.0 → 2.37.1

package/package.json

@@ -43,31 +43,29 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "2.34.0",
+  "version": "2.37.1",
   "files": [
     "/scss",
     "!/scss/docs"
   ],
-  "dependencies": {
+  "devDependencies": {
     "@canonical/cookie-policy": "3.3.0",
     "@canonical/latest-news": "1.2.0",
-    "autoprefixer": "10.3.1",
-    "node-sass": "6.0.1",
-    "postcss": "8.3.6",
-    "postcss-cli": "8.3.1"
-  },
-  "devDependencies": {
     "@percy/script": "1.1.0",
+    "autoprefixer": "10.4.0",
     "get-site-urls": "1.1.7",
     "markdown-spellcheck": "1.3.1",
+    "node-sass": "6.0.1",
     "parker": "0.0.10",
-    "prettier": "2.3.2",
+    "postcss": "8.3.11",
+    "postcss-cli": "8.3.1",
+    "prettier": "2.4.1",
     "stylelint": "13.13.1",
     "stylelint-config-prettier": "8.0.2",
     "stylelint-config-standard": "22.0.0",
     "stylelint-order": "4.1.0",
     "stylelint-prettier": "1.2.0",
-    "stylelint-scss": "3.20.1",
-    "svgo": "2.4.0"
+    "stylelint-scss": "3.21.0",
+    "svgo": "2.7.0"
   }
 }

package/scss/_base_forms-tick-elements.scss

@@ -141,7 +141,9 @@ $box-offsets-top: (
       @extend %vf-tick-in-label;
     }
 
-    & + label {
+    & + label,
+    //Ensuring the required labels don't break on base checkbox
+    & + label.is-required {
       @extend %vf-pseudo-tick-box;
 
       // Align with different text styles

package/scss/_base_forms.scss

@@ -100,9 +100,8 @@
     padding-top: map-get($nudges, nudge--p);
     width: fit-content;
 
-    &.is-required::after {
-      color: $color-negative;
-      content: ' *';
+    &.is-required::before {
+      content: '* ';
       position: relative;
     }
 
@@ -163,6 +162,12 @@
     }
   }
 
+  input[list] {
+    &::-webkit-calendar-picker-indicator {
+      opacity: 0;
+    }
+  }
+
   // Select styles
   select {
     @include vf-icon-chevron;

package/scss/_base_placeholders.scss

@@ -33,12 +33,20 @@
     color: $color-dark;
   }
 
+  %vf-card-padding {
+    overflow: auto;
+    padding: $spv-inner--large;
+  }
+
   %vf-card {
     @extend %vf-bg--x-light;
+    @extend %vf-card-padding;
 
     margin-bottom: $spv-outer--scaleable;
-    overflow: auto; // prevent overflow of child margins
-    padding: $spv-inner--large;
+  }
+
+  %vf-card-inner {
+    @extend %vf-card-padding;
   }
 
   //accordion, table

package/scss/_patterns_accordion.scss

@@ -51,6 +51,10 @@
 
       // override base expanded button styles
       background-color: inherit;
+      &:hover {
+        background-color: $colors--light-theme--background-hover;
+      }
+
       background-size: $icon-size;
     }
 
@@ -156,5 +160,9 @@
     &[aria-hidden='true'] {
       display: none;
     }
+
+    &.has-tick-elements {
+      padding-left: 1em;
+    }
   }
 }

package/scss/_patterns_card.scss

@@ -57,8 +57,8 @@
   // If possible, please consider adding a modifier to a base pattern, so it can be used elsewhere too.
 
   .p-card__image {
+    display: block;
     margin-bottom: $spv-inner--small;
-    vertical-align: top;
     width: 100%;
   }
 
@@ -72,6 +72,10 @@
     }
   }
 
+  .p-card__inner {
+    @extend %vf-card-inner;
+  }
+
   .p-card__content {
     @extend %u-no-margin--bottom--default-text;
   }

package/scss/_patterns_form-help-text.scss

@@ -6,5 +6,9 @@
 
     color: $color-mid-dark;
     margin-top: $sp-unit * 2 - $spv-outer--scaleable; // negate the effect of scaling, as we don't want helper text position to change when the density multiplier changes
+
+    &.is-tick-element {
+      margin-left: $sph-inner + $form-tick-box-size;
+    }
   }
 }

package/scss/_patterns_form-tick-elements.scss

@@ -8,7 +8,35 @@
   .p-radio,
   .p-radio--heading,
   .p-radio--inline {
+    $asterisk-width: 1ch;
+
     position: relative;
+    // repositioning asterisk in front of the label
+    &.is-required {
+      &::before {
+        display: block;
+        left: $sph-inner + $form-tick-box-size;
+        position: absolute;
+        width: $asterisk-width;
+      }
+      .p-radio__label,
+      .p-checkbox__label {
+        padding-left: calc(#{$sph-inner + $form-tick-box-size} + #{$asterisk-width});
+      }
+    }
+  }
+
+  // Fix label alignment when text drops to new line
+  .p-checkbox,
+  .p-radio {
+    padding-left: $sph-inner + $form-tick-box-size;
+    text-indent: -1 * ($sph-inner + $form-tick-box-size);
+
+    &.is-required {
+      &::before {
+        left: $sph-inner + $form-tick-box-size + $sph-inner + $form-tick-box-size;
+      }
+    }
   }
 
   // specify both [type] and class to fight specificity of base `label [type]` styles

package/scss/_patterns_form-validation.scss

@@ -1,23 +1,14 @@
 @import 'settings';
 
-@mixin vf-validation-wrapper {
-  color: $color-dark;
-  position: relative;
-}
-
 // form validation styling for form inputs
 @mixin vf-p-form-validation {
   $icon-size: map-get($icon-sizes, default);
 
-  .p-form-validation {
-    @include vf-validation-wrapper;
-
-    // stylelint-disable-next-line selector-max-type -- selector type is acceptable in this case
-    :not(select).p-form-validation__input {
-      // Not using parent selector here as two classes are required to override atribute selectors in reset
-      background-position: calc(100% - #{$sph-inner--small}) 50%;
-      background-repeat: no-repeat;
-    }
+  %vf-validation-wrapper {
+    background-position: left, center;
+    background-repeat: no-repeat;
+    padding-left: calc(#{$icon-size} + #{$sph-inner--small});
+    padding-top: 0;
   }
 
   .p-form-validation__message {
@@ -26,57 +17,16 @@
     margin-top: $sp-unit * 2 - $spv-outer--scaleable; // negate the effect of scaling, as we don't want helper text position to change when the density multiplier changes
   }
 
-  .p-form-validation__icon {
-    position: relative;
-
-    &::after {
-      position: absolute;
-      right: $sp-small;
-      top: calc(50% - #{$sp-x-small});
-    }
-  }
-
-  .is-success,
-  .is-error,
-  .is-caution {
-    .p-form-validation__input {
-      padding-right: $sph-inner--small * 2 + $icon-size;
-    }
-  }
-
-  .is-error .p-form-validation__select-wrapper,
-  .is-caution .p-form-validation__select-wrapper,
-  .is-success .p-form-validation__select-wrapper {
-    min-width: 10em;
-    position: relative;
-
-    &::after {
-      background-repeat: no-repeat;
-      background-size: contain;
-      content: ' ';
-      display: block;
-      height: $icon-size;
-      pointer-events: none;
-      position: absolute;
-      right: $sp-x-large;
-      top: calc(50% - (#{$icon-size} / 2) - (#{$input-margin-bottom} / 2));
-      width: $icon-size;
-    }
-
-    .p-form-validation__input {
-      padding-right: $sph-inner--small * 2 + $icon-size * 2;
-    }
-  }
-
   .is-success {
     .p-form-validation__input {
       border-color: $color-positive;
     }
 
-    // stylelint-disable-next-line selector-max-type
-    :not(select).p-form-validation__input,
-    .p-form-validation__select-wrapper::after {
+    .p-form-validation__message {
       @include vf-icon-success($color-positive);
+      @extend %vf-validation-wrapper;
+
+      color: $color-positive;
     }
   }
 
@@ -85,10 +35,9 @@
       border-color: $color-caution;
     }
 
-    // stylelint-disable-next-line selector-max-type
-    :not(select).p-form-validation__input,
-    .p-form-validation__select-wrapper::after {
+    .p-form-validation__message {
       @include vf-icon-warning($color-caution);
+      @extend %vf-validation-wrapper;
     }
   }
 
@@ -97,10 +46,11 @@
       border-color: $color-negative;
     }
 
-    // stylelint-disable-next-line selector-max-type
-    :not(select).p-form-validation__input,
-    .p-form-validation__select-wrapper::after {
+    .p-form-validation__message {
       @include vf-icon-error($color-negative);
+      @extend %vf-validation-wrapper;
+
+      color: $color-negative;
     }
   }
 }

package/scss/_patterns_modal.scss

@@ -25,15 +25,14 @@
     @extend %vf-has-box-shadow;
     @extend %vf-has-round-corners;
 
-    bottom: $spv-inner--large;
     left: $sph-inner--large;
     margin-bottom: 0;
     max-height: calc(100% - #{2 * $spv-inner--large});
     max-width: $grid-max-width;
     overflow: auto;
+    padding-top: 0;
     position: absolute;
     right: $sph-inner--large;
-    top: $spv-inner--large;
     width: auto;
 
     @media (min-width: $breakpoint-medium) {
@@ -48,11 +47,16 @@
   .p-modal__header {
     @extend %vf-pseudo-border--bottom;
 
+    background: $color-x-light;
     display: flex;
     justify-content: space-between;
     margin-bottom: $spv-inner--small;
     // add padding to accommodate the width of p-modal__close
     padding-right: $icon-size + $sph-inner--small * 2;
+    padding-top: $spv-inner--large;
+    position: sticky;
+    top: 0;
+    z-index: 10;
   }
 
   .p-modal__title {
@@ -73,6 +77,7 @@
     box-sizing: content-box;
     height: $icon-size;
     margin: 0;
+    margin-top: $spv-inner--large;
     padding: $sp-unit;
     position: absolute;
     right: 0;

package/scss/_patterns_notifications.scss

@@ -74,6 +74,7 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
       @extend %common-default-text-properties;
 
       margin-bottom: $notification-text-margin-bottom;
+      max-width: unset;
       padding-right: 2 * $sph-inner;
     }
 
@@ -87,6 +88,7 @@ $notification-text-margin-bottom: $spv-outer--medium - $spv-nudge;
 
     .p-notification__message {
       margin: 0;
+      max-width: unset;
       padding: 0;
     }
 

package/scss/standalone/patterns_accordion.scss

@@ -1,4 +1,6 @@
 @import '../vanilla';
 @include vf-base;
 
+// needed for the example with checkboxes
+@include vf-p-form-tick-elements;
 @include vf-p-accordion;

package/scss/standalone/patterns_card.scss

@@ -6,3 +6,4 @@
 @include vf-p-strip;
 
 @include vf-u-vertical-spacing;
+@include vf-u-align;

package/scss/standalone/patterns_form-tick-elements.scss

@@ -8,5 +8,6 @@
 @include vf-p-buttons;
 @include vf-p-muted-heading;
 @include vf-p-form-tick-elements;
+@include vf-p-form-help-text;
 
 @include vf-u-layout;

package/scss/standalone/patterns_forms.scss

@@ -11,6 +11,7 @@
 @include vf-p-forms;
 @include vf-p-form-help-text;
 @include vf-p-form-validation;
+@include vf-p-form-tick-elements;
 
 // float utilities used to position buttons in some examples
 @include vf-u-floats;