Fix styling issues from Vanilla class disordering.

legacy/src/app/directives/tests/test_call_to_action.js

@@ -77,25 +77,25 @@ describe("maasCta", function() {
 
   it("sets default title to 'Take action'", function() {
     var directive = compileDirective("items", "active");
-    expect(directive.find("button.p-cta__toggle").text().trim()).toBe("Take action");
+    expect(directive.find("button.p-contextual-menu__toggle").text().trim()).toBe("Take action");
   });
 
   it("sets default title to another name", function() {
     var name = makeName("title");
     var directive = compileDirective("items", "active", null, null, name);
-    var selector = "button.p-cta__toggle";
+    var selector = "button.p-contextual-menu__toggle";
     expect(directive.find(selector).text().trim()).toBe(name);
   });
 
   it("click link sets shown to true", function() {
     var directive = compileDirective("items", "active");
-    directive.find("button.p-cta__toggle").click();
+    directive.find("button.p-contextual-menu__toggle").click();
     expect(directive.isolateScope().shown).toBe(true);
   });
 
   it("dropdown hidden when shown is false", function() {
     var directive = compileDirective("items", "active");
-    var dropdown = directive.find("div.p-cta__dropdown");
+    var dropdown = directive.find("div.p-contextual-menu__dropdown");
     expect(dropdown.hasClass("ng-hide")).toBe(true);
   });
 
@@ -104,7 +104,7 @@ describe("maasCta", function() {
     directive.isolateScope().shown = true;
     $scope.$digest();
 
-    var dropdown = directive.find("div.p-cta__dropdown");
+    var dropdown = directive.find("div.p-contextual-menu__dropdown");
     expect(dropdown.hasClass("ng-hide")).toBe(false);
   });
 
@@ -118,7 +118,7 @@ describe("maasCta", function() {
 
   it("dropdown list options", function() {
     var directive = compileDirective("items", "active");
-    var links = directive.find("button.p-cta__link");
+    var links = directive.find("button.p-contextual-menu__link");
 
     var listItems = [];
     angular.forEach(links, function(ele, i) {
@@ -134,10 +134,10 @@ describe("maasCta", function() {
 
   it("dropdown select sets shown to false", function() {
     var directive = compileDirective("items", "active");
-    var links = directive.find("button.p-cta__link");
+    var links = directive.find("button.p-contextual-menu__link");
 
     // Open the dropdown.
-    directive.find("button.p-cta__toggle").click();
+    directive.find("button.p-contextual-menu__toggle").click();
     expect(directive.isolateScope().shown).toBe(true);
 
     // Clicking a link should close the dropdown.
@@ -147,24 +147,24 @@ describe("maasCta", function() {
 
   it("dropdown select sets model", function() {
     var directive = compileDirective("items", "active");
-    var links = directive.find("button.p-cta__link");
+    var links = directive.find("button.p-contextual-menu__link");
 
     angular.element(links[0]).click();
     expect(directive.scope().active).toBe($scope.items[0]);
   });
 
   it("dropdown select sets title", function() {
     var directive = compileDirective("items", "active");
-    var links = directive.find("button.p-cta__link");
+    var links = directive.find("button.p-contextual-menu__link");
 
     angular.element(links[0]).click();
-    var title = directive.find("button.p-cta__toggle").text();
+    var title = directive.find("button.p-contextual-menu__toggle").text();
     expect(title.trim()).toBe($scope.items[0].title);
   });
 
   it("dropdown select sets secondary", function() {
     var directive = compileDirective("items", "active");
-    var links = directive.find("button.p-cta__link");
+    var links = directive.find("button.p-contextual-menu__link");
 
     angular.element(links[0]).click();
     expect(directive.isolateScope().secondary).toBe(true);
@@ -173,7 +173,7 @@ describe("maasCta", function() {
   it("dropdown select sets selectedTitle", function() {
     $scope.items[0].selectedTitle = "Different if Selected";
     var directive = compileDirective("items", "active");
-    var links = directive.find("button.p-cta__link");
+    var links = directive.find("button.p-contextual-menu__link");
 
     var iscope = directive.isolateScope();
     expect(iscope.getTitle()).toBe("Take action");
@@ -184,7 +184,7 @@ describe("maasCta", function() {
   it("dropdown select sets other options' selectedTitle", function() {
     $scope.items[1].selectedTitle = "Different if Selected";
     var directive = compileDirective("items", "active");
-    var links = directive.find("button.p-cta__link");
+    var links = directive.find("button.p-contextual-menu__link");
 
     var iscope = directive.isolateScope();
     expect(iscope.getTitle()).toBe("Take action");
@@ -199,7 +199,7 @@ describe("maasCta", function() {
   it("clicking body will set shown to false", function() {
     var directive = compileDirective("items", "active");
     // Open the dropdown.
-    directive.find("button.p-cta__toggle").click();
+    directive.find("button.p-contextual-menu__toggle").click();
     expect(directive.isolateScope().shown).toBe(true);
 
     // Click the body.
@@ -216,7 +216,7 @@ describe("maasCta", function() {
     $scope.clicked = jasmine.createSpy("clicked");
     var directive = compileDirective("items", "active", null, "clicked()");
     // Open the dropdown.
-    directive.find("button.p-cta__toggle").click();
+    directive.find("button.p-contextual-menu__toggle").click();
     expect($scope.clicked).toHaveBeenCalled();
   });
 });

legacy/src/app/partials/directives/cta.html

@@ -1,33 +1,34 @@
-<div class="p-cta">
+<div class="p-contextual-menu">
   <button
-    class="p-cta__toggle u-no-margin--right"
+    class="p-contextual-menu__toggle p-button--positive has-icon u-no-margin--right"
     aria-controls="#cta-menu"
     aria-expanded="false"
     aria-haspopup="true"
     data-ng-click="shown=!shown"
     data-ng-class="{'p-button--positive': getTitle() === 'Take action', 'is-selected': shown}"
     data-ng-disabled="disabled"
   >
-    {$ getTitle() $}
+    <span>{$ getTitle() $}</span>
+    <i class="p-icon--contextual-menu p-contextual-menu__indicator is-light"></i>
   </button>
   <div
-    class="p-cta__dropdown"
+    class="p-contextual-menu__dropdown p-cta-dropdown"
     id="cta-menu"
     aria-hidden="false"
     aria-label="submenu"
     data-ng-show="shown"
   >
-    <span class="p-cta__group" data-ng-repeat="type in getActionTypes()">
+    <span class="p-contextual-menu__group" data-ng-repeat="type in getActionTypes()">
       <button
-        class="p-cta__link"
+        class="p-contextual-menu__link u-flex--space-between"
         data-ng-repeat="select in maasCta | filter:{ type: type }"
         data-ng-if="showAction(select)"
         data-ng-click="selectItem(select)"
         data-ng-class="{'is-unavailable': selectedItems && select.available == 0}"
       >
-        {$ getOptionTitle(select) $}
-        <div class="p-cta__count" data-ng-if="showCount(select)">
-          <span>{$ select.available $}</span>
+        <span>{$ getOptionTitle(select) $}</span>
+        <span class="p-text--muted" data-ng-if="showCount(select)">
+          {$ select.available $}
         </div>
       </button>
     </span>

legacy/src/scss/_patterns_button.scss

@@ -53,8 +53,8 @@ $vanilla-2-icon-button-side-padding: $sph-inner--small * 1.5;
   }
 
   .p-button--link {
-    @extend %p-button--base;
-
+    @extend %vf-button-base;
+    background-color: inherit;
     border: 0;
     color: $color-link;
     line-height: 1.25rem;

legacy/src/scss/_patterns_cta.scss

@@ -1,70 +1,5 @@
 @mixin maas-p-cta {
-  %p-cta-icon {
-    background-position-y: center;
-    background-repeat: no-repeat;
-    background-size: map-get($icon-sizes, default);
-    content: "";
-    height: map-get($icon-sizes, default);
-    position: absolute;
-    width: map-get($icon-sizes, default);
-  }
-
-  .p-cta {
-    @extend .p-contextual-menu;
-  }
-
-  .p-cta__toggle {
-    margin-bottom: 0;
-    padding-right: $sph-inner * 2 + map-get($icon-sizes, default);
-
-    .page-header__controls--controllers & {
-      margin-bottom: 1.2rem;
-    }
-
-    &::after {
-      @extend %p-cta-icon;
-      @include vf-icon-chevron($color-mid-dark);
-      right: $sph-inner;
-      top: calc(#{2 * $spv-nudge} - 2px);
-    }
-
-    &.p-button--positive::after {
-      @include vf-icon-chevron($color-x-light);
-    }
-
-    &.is-selected::after {
-      transform: rotate(180deg);
-    }
-  }
-
-  .p-cta__dropdown {
-    @extend .p-contextual-menu__dropdown;
-    min-width: 100%;
-    top: 100%;
-    width: auto;
-    z-index: 2;
-  }
-
-  .p-cta__group {
-    & + & .p-cta__link:first-child {
-      border-top: 1px solid $color-mid-light;
-    }
-  }
-
-  .p-cta__link {
-    @extend .p-contextual-menu__link;
-    display: flex;
-    justify-content: space-between;
-    padding: $spv-inner--x-small $sph-inner;
-    transition-duration: 0s;
-
-    &.is-unavailable {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .p-cta__count {
-    padding-left: $sph-inner;
+  .p-cta-dropdown {
+    margin-top: -$input-margin-bottom;
   }
 }

legacy/src/scss/_patterns_icons.scss

@@ -248,7 +248,8 @@
     }
 
     &--audit {
-      @extend .p-icon--information;
+      @extend %icon;
+      @include vf-icon-info($color-mid-dark);
     }
   }
 
@@ -273,11 +274,13 @@
   }
 
   .p-icon--pass {
-    @extend .p-icon--success;
+    @extend %icon;
+    @include vf-icon-success($color-positive);
   }
 
   .p-icon--info {
-    @extend .p-icon--information;
+    @extend %icon;
+    @include vf-icon-info($color-mid-dark);
   }
 
   [class^="p-icon"] {

legacy/src/scss/_patterns_numa.scss

@@ -6,10 +6,11 @@
 
   .p-numa__button {
     @include vf-icon-plus($color-mid-dark);
-    @extend %p-button--base;
+    @extend %vf-button-base;
     background-position: right center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
+    border: 0;
     margin: 0;
     padding: 0 #{$sp-unit * 5} 0 0;
     text-align: left;

legacy/src/scss/_patterns_option-selector.scss

@@ -172,7 +172,9 @@
     position: relative;
 
     .p-option-selector__options--subnets {
-      @extend %p-card--highlighted;
+      @extend %vf-card;
+      @extend %vf-has-box-shadow;
+      @extend %vf-has-round-corners;
       left: -45vw;
       padding-bottom: $spv-inner--scaleable;
       position: absolute;

legacy/src/scss/build.scss

@@ -1,15 +1,17 @@
 // Import MAAS-specific Vanilla configuration
 @import "settings";
 
-// Import Vanilla framework
+// Import and include Vanilla classes/placeholders needed for custom styling.
+// NOTE: If you add another mixin here be sure to check every instance of that
+// component as it alters the class ordering in Vanilla and may cause
+// regressions.
 @import "~vanilla-framework/scss/vanilla";
-@include vf-base;
+@include vf-b-placeholders;
+@include vf-b-grid-definitions;
+@include vf-b-typography-definitions;
+@include vf-b-button;
+@include vf-p-icons-common;
 @include vf-p-lists;
-@include vf-p-contextual-menu;
-@include vf-p-icons;
-@include vf-p-table-sortable;
-@include vf-p-buttons;
-@include vf-p-card;
 
 @import "2.0-migration";