Add TextareaWithButton directive

src/app/directives/__test__/mcTextareaWithButton.spec.js

@@ -0,0 +1,26 @@
+describe('Textarea with button directive', function() {
+  var $compile,
+    $rootScope;
+
+  // Load the myApp module, which contains the directive
+  beforeEach(module('myApp'));
+
+  // Store references to $rootScope and $compile
+  // so they are available to all tests in this describe block
+  beforeEach(inject(function(_$compile_, _$rootScope_){
+    // The injector unwraps the underscores (_) from around the parameter names when matching
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+  }));
+
+  it('Replaces the element with the appropriate content', function() {
+    // Compile a piece of HTML containing the directive
+    var element =
+      $compile("<mc-textarea-with-button><mc-button></mc-button><mc-field></mc-field></mc-textarea-with-button>")
+      ($rootScope);
+    // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
+    $rootScope.$digest();
+    // Check that the compiled element contains the templated content
+    expect(element.html()).toContain("div");
+  });
+});

src/app/directives/index.js

@@ -459,4 +459,19 @@ angular.module('ripple-ui.directives', [])
         });
       }
     };
+  })
+  .directive('mcTextareaWithButton', function () {
+    return{
+      restrict: 'E',
+      transclude: {
+        button: '?mcButton',
+        field: '?mcField'
+      },
+      template:
+      '              <div class="input-holder">\n' +
+      '                <div class="control-group right buttoned-control-group" ng-transclude="button">\n' +
+      '                </div>\n' +
+      '                <div ng-transclude="field"></div>\n' +
+      '              </div>\n'
+    }
   });

src/app/scss/components/_control.scss

@@ -2,6 +2,11 @@
   @include clearfix;
   &.hide-indent-bottom { margin-bottom: -5px; }
 }
+.buttoned-control-group {
+  z-index: 9999;
+  position: absolute;
+  right: 0;
+}
 .control-group {
   margin-right: -5px;
   & > * { margin-right: 5px; }