add more ellipsis for pillbox

Author: anthonyettinger

client/less/ui/text.less

@@ -78,7 +78,7 @@ small {
     .name {
       display: block;
       color: @grey-1;
-      padding: .2rem 1.5rem;
+      padding: 0 1.5rem;
       text-transform: uppercase;
       font-weight: 400;
       line-height: 1.9;
@@ -95,11 +95,15 @@ small {
     .delete-pill {
       position: absolute;
       top: 50%;
-      right: 0;
-      margin-top: -1.5rem;
-      height: 3rem;
+      right: .1rem;
+      margin-top: -1.2rem;
+      height: 2.4rem;
       cursor: pointer;
       display: inline-block;
+
+      .ui-icon {
+        width: 2.4rem;
+      }
     }
   }
 }

client/www/scripts/modules/styleguide/styleguide.directives.js

@@ -33,8 +33,6 @@ Styleguide.directive('slStyleguideModuleText', [
         $scope.pills1 = ['Pill 1', 'Pill 2', 'Pill 3'];
         $scope.pills2 = ['Pill 1', 'Pill 2', 'Pill 3'];
         $scope.pills3 = ['Pill 1', 'Pill 2', 'Pill 3'];
-        $scope.pills4 = ['Pill 1', 'Pill 2', 'Pill 3'];
-        $scope.pills5 = ['Pill 1', 'Pill 2', 'Pill 3'];
         $scope.clickedCrumb = null;
         $scope.activeTab = null;
 
@@ -53,12 +51,6 @@ Styleguide.directive('slStyleguideModuleText', [
         $scope.onClickCrumb = function(i, crumb, len){
           $scope.clickedCrumb = crumb;
         };
-
-        $scope.deletePill = function(pill){
-          var idx = _.findIndex($scope.pills4, pill);
-
-          $scope.pills4.splice(idx, 1);
-        };
       }
     };
   }

client/www/scripts/modules/styleguide/templates/styleguide.module.text.html

@@ -65,7 +65,6 @@ <h5>Close link</h5>
         <a href="javascript:void(0)" class="ui-close">x</a>
       </li>
       <li>
-
         <h5>Pillbox directive (with delete icon)</h5>
         <sl-ui-pillbox list="pills1" has-delete="true"></sl-ui-pillbox>
 
@@ -74,22 +73,6 @@ <h5>Pillbox directive (with more elipsis)</h5>
 
         <h5>Pillbox directive (read only)</h5>
         <sl-ui-pillbox list="pills3"></sl-ui-pillbox>
-
-        <h5>Pillbox manual implementation (with delete icon)</h5>
-        <div class="pillbox">
-          <div ng-repeat="pill in pills4" class="pill has-delete">
-            <span class="name">{{pill}}</span>
-            <span class="delete-pill" ng-click="deletePill(pill)">
-              <ui-icon name="circle-x" classes="dark-circle-x"></ui-icon>
-            </span>
-          </div>
-        </div>
-        <h5>Pillbox manual implementation</h5>
-        <div class="pillbox">
-          <div ng-repeat="pill in pills5" class="pill">
-            <span class="name">{{pill}}</span>
-          </div>
-        </div>
       </li>
       <li>
         <h4 class="module-subheading">SVG Icons (.small, .medium, .large)</h4>

client/www/scripts/modules/ui/templates/ui.pillbox.html

@@ -1,15 +1,11 @@
 <span class="pillbox {{classes}}">
-  <span ng-repeat="item in list" class="pill" ng-class="{'has-delete': hasDelete, 'has-more': showMore }">
+  <span ng-repeat="item in list | limitTo: showMore ? 1 : list.length" class="pill" ng-class="{'has-delete': hasDelete, 'has-more': showMore }">
     <span class="name">
       {{item}}
     </span>
     <span ng-show="showMore" class="more">...</span>
     <span ng-show="hasDelete" class="delete-pill" ng-click="deletePill(item)">
       <ui-icon name="circle-x" classes="dark-circle-x"></ui-icon>
     </span>
-  <!--<button ng-show="scopes.length > 0" class="scopes-pill"  dropdown-toggle>{{scopes[0]}}<span ng-show="scopes.length > 1">...</span></button>-->
-  <!--<ul class="dropdown-menu">-->
-    <!--<li ng-repeat="tScope in scopes track by $index">{{tScope}}</li>-->
-  <!--</ul>-->
   </span>
 </span>