vanilla-framework 3.2.0 → 3.3.0

package/package.json

@@ -44,7 +44,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.2.0",
+  "version": "3.3.0",
   "files": [
     "_index.scss",
     "/scss",

package/scss/_patterns_accordion.scss

@@ -16,48 +16,45 @@
   }
 
   .p-accordion__tab {
-    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
-    // and offset to align it with baseline of accordion tab text element
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, default-text) - $icon-size) * 0.5});
-
     @extend %single-border-text-vpadding--scaling;
     @include vf-focus;
 
-    background: {
-      color: inherit;
-      position: top $icon-top-position left $sph--large;
-      repeat: no-repeat;
-    }
-
+    background-color: inherit;
     border: 0;
     border-radius: 0;
     font-size: inherit;
     justify-content: flex-start;
     margin-bottom: 0;
-    padding-left: $sph--large + $icon-size + $sph--large;
     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);
+      @extend %icon;
+
+      content: '';
+      margin-right: $sph--large;
+    }
+
     // aria-selected controls the open and closed state for the accordion tab
     &[aria-expanded='true'] {
-      @include vf-icon-minus($color-mid-dark);
-
       // override base expanded button styles
       background-color: inherit;
+
       &:hover {
         background-color: $colors--light-theme--background-hover;
       }
-
-      background-size: $icon-size;
     }
 
     &[aria-expanded='false'] {
-      @include vf-icon-plus($color-mid-dark);
-
-      background-size: $icon-size;
+      &::before {
+        transform: rotate(-90deg);
+      }
     }
   }
 
@@ -74,25 +71,17 @@
   }
 
   // stylelint-disable selector-max-type
-  h2.p-accordion__heading > .p-accordion__tab,
-  .p-heading--2 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h2) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
+  .p-heading--2 > .p-accordion__tab::before,
+  h2.p-accordion__heading > .p-accordion__tab::before {
+    @include vf-icon-size($x-height);
+    vertical-align: 0;
   }
 
-  h3.p-accordion__heading > .p-accordion__tab,
-  .p-heading--3 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h3) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
-  }
-
-  h4.p-accordion__heading > .p-accordion__tab,
-  .p-heading--4 > .p-accordion__tab {
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, h4) - $icon-size) * 0.5});
-
-    background-position-y: $icon-top-position;
+  .p-heading--3 > .p-accordion__tab::before,
+  .p-heading--4 > .p-accordion__tab::before,
+  h3.p-accordion__heading > .p-accordion__tab::before,
+  h4.p-accordion__heading > .p-accordion__tab::before {
+    vertical-align: 0;
   }
   // stylelint-enable selector-max-type
 

package/scss/{_patterns_tab-buttons.scss → _patterns_segmented-control.scss}

@@ -1,9 +1,14 @@
-@mixin vf-p-tab-buttons {
+@mixin vf-p-segmented-control {
+  .p-segmented-control,
+  // p-tab-buttons is deprecated,
+  // please use p-segmented-control instead 
   .p-tab-buttons {
+    .p-segmented-control__list,
     .p-tab-buttons__list {
       display: flex;
     }
 
+    .p-segmented-control__button,
     .p-tab-buttons__button {
       @extend %vf-button-has-icon;
 
@@ -41,8 +46,14 @@
       }
     }
 
+    &.is-dense .p-segmented-control__button,
     &.is-dense .p-tab-buttons__button {
       @extend %vf-button-dense-vertical-padding;
     }
   }
 }
+
+// Deprecated mixin kept for compatibility
+@mixin vf-p-tab-buttons {
+  @include vf-p-segmented-control;
+}

package/scss/_patterns_side-navigation.scss

@@ -35,8 +35,11 @@
 
     .p-side-navigation:target &,
     [class*='p-side-navigation--']:target &,
+    // is-expanded and is-collapsed are deprecated and replaced by is-drawer-expanded and is-drawer-collapsed
     .p-side-navigation.is-expanded &,
-    [class*='p-side-navigation--'].is-expanded & {
+    .p-side-navigation.is-drawer-expanded &,
+    [class*='p-side-navigation--'].is-expanded &,
+    [class*='p-side-navigation--'].is-drawer-expanded & {
       @extend %vf-has-box-shadow;
 
       animation: vf-p-side-navigation-expand map-get($animation-duration, brisk);
@@ -44,10 +47,20 @@
     }
 
     .p-side-navigation.is-collapsed &,
-    [class*='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);
     }
 
+    .p-side-navigation.is-drawer-hidden &,
+    [class*='p-side-navigation--'].is-drawer-hidden & {
+      display: none;
+      @media (min-width: $threshold-6-12-col) {
+        display: block;
+      }
+    }
+
     @media (min-width: $breakpoint-x-small) {
       max-width: 20rem;
     }
@@ -68,7 +81,9 @@
     .p-side-navigation:target &,
     [class*='p-side-navigation--']:target &,
     .p-side-navigation.is-expanded &,
-    [class*='p-side-navigation--'].is-expanded & {
+    .p-side-navigation.is-drawer-expanded &,
+    [class*='p-side-navigation--'].is-expanded &,
+    [class*='p-side-navigation--'].is-drawer-expanded & {
       opacity: 1;
       pointer-events: all;
     }
@@ -134,7 +149,9 @@
     .p-side-navigation:target .p-side-navigation__drawer,
     [class*='p-side-navigation--']:target .p-side-navigation__drawer,
     .p-side-navigation.is-expanded .p-side-navigation__drawer,
-    [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer {
+    .p-side-navigation.is-drawer-expanded .p-side-navigation__drawer,
+    [class*='p-side-navigation--'].is-expanded .p-side-navigation__drawer,
+    [class*='p-side-navigation--'].is-drawer-expanded .p-side-navigation__drawer {
       box-shadow: none;
       display: block;
       max-width: none;
@@ -416,6 +433,15 @@
     &::before {
       @include vf-icon-chevron($color-sidenav-toggle-icon);
     }
+
+    &[aria-expanded='true'] {
+      background-color: $color-transparent;
+
+      &:hover {
+        background: $color-sidenav-item-background-hover;
+        color: $color-sidenav-text-active;
+      }
+    }
   }
 
   .p-side-navigation__drawer {

package/scss/_patterns_status-label.scss

@@ -55,3 +55,8 @@
     color: $color-x-light;
   }
 }
+
+// Deprecated mixin kept for compatibility
+@mixin vf-p-label {
+  @include vf-p-status-label;
+}

package/scss/_vanilla.scss

@@ -41,7 +41,7 @@
 @import 'patterns_status-label';
 @import 'patterns_strip';
 @import 'patterns_switch';
-@import 'patterns_tab-buttons';
+@import 'patterns_segmented-control';
 @import 'patterns_table-icons';
 @import 'patterns_table-expanding';
 @import 'patterns_table-of-contents';
@@ -116,13 +116,13 @@
   @include vf-p-pull-quotes;
   @include vf-p-search-and-filter;
   @include vf-p-search-box;
+  @include vf-p-segmented-control;
   @include vf-p-separator;
   @include vf-p-side-navigation;
   @include vf-p-slider;
   @include vf-p-status-label;
   @include vf-p-strip;
   @include vf-p-switch;
-  @include vf-p-tab-buttons;
   @include vf-p-table-icons;
   @include vf-p-table-expanding;
   @include vf-p-table-of-contents;