Merge pull request #353 from jjlangholtz/upgrade-angular-ui-bootstrap-prefixes

Add `uib` prefixes in accordance to migration guide

Author: jeff-phillips-18

src/card/basic/card-filter.html

@@ -1,8 +1,8 @@
-<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" uib-dropdown-toggle class="btn btn-default">
   {{currentFilter.label}}
   <span class="caret"></span>
 </button>
-<ul class="dropdown-menu dropdown-menu-right" role="menu">
+<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
   <li ng-repeat="item in filter.filters" ng-class="{'selected': item === currentFilter}">
     <a role="menuitem" tabindex="-1" ng-click="filterCallBackFn(item)">
       {{item.label}}

src/card/basic/card.html

@@ -1,6 +1,6 @@
 <div ng-class="showTopBorder === 'true' ? 'card-pf card-pf-accented' : 'card-pf'">
   <div ng-if="showHeader()" ng-class="shouldShowTitlesSeparator ? 'card-pf-heading' : 'card-pf-heading-no-bottom'">
-    <div ng-if="showFilterInHeader()" class="dropdown card-pf-time-frame-filter">
+    <div ng-if="showFilterInHeader()" uib-dropdown class="card-pf-time-frame-filter">
       <div ng-include="'card/basic/card-filter.html'"></div>
     </div>
     <h2 class="card-pf-title">{{headTitle}}</h2>
@@ -12,7 +12,7 @@ <h2 class="card-pf-title">{{headTitle}}</h2>
     <div ng-transclude></div>
   </div>
   <div ng-if="footer" class="card-pf-footer">
-    <div ng-if="showFilterInFooter()" class="dropdown card-pf-time-frame-filter">
+    <div ng-if="showFilterInFooter()" uib-dropdown class="card-pf-time-frame-filter">
       <div ng-include="'card/basic/card-filter.html'"></div>
     </div>
     <p>

src/charts/utilization-bar/utilization-bar-chart.html

@@ -4,13 +4,13 @@
     <div class="progress progress-label-top-right" ng-if="chartData.dataAvailable !== false">
       <div class="progress-bar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100" ng-class="{'animate': animate,
            'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
-           ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used" >
+           ng-style="{width:chartData.percentageUsed + '%'}" uib-tooltip="{{chartData.percentageUsed}}% Used" >
         <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
         <span ng-if="!chartFooter && (!footerLabelFormat || footerLabelFormat === 'actual')"><strong>{{chartData.used}} of {{chartData.total}} {{units}}</strong> Used</span>
         <span ng-if="!chartFooter && footerLabelFormat === 'percent'"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
       </div>
       <div class="progress-bar progress-bar-remaining"
-           ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
+           ng-style="{width:(100 - chartData.percentageUsed) + '%'}" uib-tooltip="{{100 - chartData.percentageUsed}}% Available">
       </div>
     </div>
   </span>
@@ -21,13 +21,13 @@
       <div class="progress" ng-if="chartData.dataAvailable !== false">
         <div class="progress-bar" aria-valuenow="{{chartData.percentageUsed}}" aria-valuemin="0" aria-valuemax="100"
              ng-class="{'animate': animate, 'progress-bar-success': isOk, 'progress-bar-danger': isError, 'progress-bar-warning': isWarn}"
-             ng-style="{width:chartData.percentageUsed + '%'}" tooltip="{{chartData.percentageUsed}}% Used">
+             ng-style="{width:chartData.percentageUsed + '%'}" uib-tooltip="{{chartData.percentageUsed}}% Used">
           <span ng-if="chartFooter" ng-bind-html="chartFooter"></span>
           <span ng-if="(!chartFooter) && (!footerLabelFormat || footerLabelFormat === 'actual')" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.used}} {{units}}</strong> Used</span>
           <span ng-if="(!chartFooter) && footerLabelFormat === 'percent'" ng-style="{'max-width':layout.footerLabelWidth}"><strong>{{chartData.percentageUsed}}%</strong> Used</span>
         </div>
         <div class="progress-bar progress-bar-remaining"
-             ng-style="{width:(100 - chartData.percentageUsed) + '%'}" tooltip="{{100 - chartData.percentageUsed}}% Available">
+             ng-style="{width:(100 - chartData.percentageUsed) + '%'}" uib-tooltip="{{100 - chartData.percentageUsed}}% Available">
         </div>
       </div>
     </div>

src/filters/filter-fields.html

@@ -2,12 +2,12 @@
   <form>
     <div class="form-group toolbar-pf-filter">
       <div class="input-group">
-        <div dropdown class="input-group-btn">
-          <button dropdown-toggle type="button" class="btn btn-default dropdown-toggle filter-fields" aria-haspopup="true" aria-expanded="false" tooltip="Filter by" tooltip-placement="top">
+        <div uib-dropdown class="input-group-btn">
+          <button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
             {{currentField.title}}
             <span class="caret"></span>
           </button>
-          <ul class="dropdown-menu">
+          <ul uib-dropdown-menu>
             <li ng-repeat="item in config.fields">
               <a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
                 {{item.title}}

src/modals/about-modal.directive.js

@@ -78,32 +78,32 @@ angular.module('patternfly.modals')
     },
     templateUrl: 'modals/about-modal.html',
     transclude: true,
-    controller: ['$scope', '$modal', '$transclude', function ($scope, $modal, $transclude) {
+    controller: ['$scope', '$uibModal', '$transclude', function ($scope, $uibModal, $transclude) {
       if ($scope.isOpen === undefined) {
         $scope.isOpen = false;
       }
 
       // The ui-bootstrap modal only supports either template or templateUrl as a way to specify the content.
-      // When the content is retrieved, it is compiled and linked against the provided scope by the $modal service.
+      // When the content is retrieved, it is compiled and linked against the provided scope by the $uibModal service.
       // Unfortunately, there is no way to provide transclusion there.
       //
       // The solution below embeds a placeholder directive (i.e., pfAboutModalTransclude) to append the transcluded DOM.
       // The transcluded DOM is from a different location than the modal, so it needs to be handed over to the
       // placeholder directive. Thus, we're passing the actual DOM, not the parsed HTML.
       $scope.openModal = function () {
-        $modal.open({
-          controller: ['$scope', '$modalInstance', 'content', function ($scope, $modalInstance, content) {
+        $uibModal.open({
+          controller: ['$scope', '$uibModalInstance', 'content', function ($scope, $uibModalInstance, content) {
             $scope.template = content;
             $scope.close = function () {
-              $modalInstance.close();
+              $uibModalInstance.close();
             };
             $scope.$watch(
               function () {
                 return $scope.isOpen;
               },
               function (newValue) {
                 if (newValue === false) {
-                  $modalInstance.close();
+                  $uibModalInstance.close();
                 }
               }
             );

src/navigation/examples/vertical-navigation-basic.js

@@ -564,4 +564,4 @@
     });
   </file>
 </example>
-*/
+*/

src/navigation/examples/vertical-navigation-router.js

@@ -156,4 +156,4 @@
     });
   </file>
 </example>
-*/
+*/

src/navigation/vertical-navigation.html

@@ -38,10 +38,19 @@
                        'mobile-secondary-item-pf': item.isMobileItem && showMobileTertiary}"
             ng-mouseenter="handlePrimaryHover(item)" ng-mouseleave="handlePrimaryUnHover(item)">
           <a ng-click="handlePrimaryClick(item, $event)">
-            <span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: hiddenIcons}" tooltip-append-to-body="true" tooltip-enable="{{navCollapsed}}" tooltip-placement="bottom" tooltip="{{item.title}}" tooltip-class="nav-pf-vertical-tooltip"></span>
+            <span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: hiddenIcons}"
+              uib-tooltip="{{item.title}}"
+              tooltip-append-to-body="true"
+              tooltip-enable="{{navCollapsed}}"
+              tooltip-placement="bottom"
+              tooltip-class="nav-pf-vertical-tooltip">
+            </span>
             <span class="list-group-item-value">{{item.title}}</span>
             <div ng-if="showBadges && item.badges" class="badge-container-pf">
-              <div class="badge {{badge.badgeClass}}" ng-repeat="badge in item.badges" tooltip-append-to-body="true" tooltip-placement="right" tooltip="{{badge.tooltip}}">
+              <div class="badge {{badge.badgeClass}}" ng-repeat="badge in item.badges"
+                uib-tooltip="{{badge.tooltip}}"
+                tooltip-append-to-body="true"
+                tooltip-placement="right">
                 <span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>
                 <span ng-if="badge.count">{{badge.count}}</span>
               </div>
@@ -62,7 +71,10 @@
                 <a ng-click="handleSecondaryClick(item, secondaryItem, $event)">
                   <span class="list-group-item-value">{{secondaryItem.title}}</span>
                   <div ng-if="showBadges && secondaryItem.badges" class="badge-container-pf">
-                    <div class="badge {{badge.badgeClass}}" ng-repeat="badge in secondaryItem.badges" tooltip-append-to-body="true" tooltip-placement="right" tooltip="{{badge.tooltip}}">
+                    <div class="badge {{badge.badgeClass}}" ng-repeat="badge in secondaryItem.badges"
+                      uib-tooltip="{{badge.tooltip}}"
+                      tooltip-append-to-body="true"
+                      tooltip-placement="right">
                       <span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>
                       <span ng-if="badge.count">{{badge.count}}</span>
                     </div>
@@ -78,7 +90,10 @@
                       <a ng-click="handleTertiaryClick(item, secondaryItem, tertiaryItem, $event)">
                         <span class="list-group-item-value">{{tertiaryItem.title}}</span>
                         <div ng-if="showBadges && tertiaryItem.badges" class="badge-container-pf">
-                          <div class="badge {{badge.badgeClass}}" ng-repeat="badge in tertiaryItem.badges" tooltip-append-to-body="true" tooltip-placement="right" tooltip="{{badge.tooltip}}">
+                          <div class="badge {{badge.badgeClass}}" ng-repeat="badge in tertiaryItem.badges"
+                            uib-tooltip="{{badge.tooltip}}"
+                            tooltip-append-to-body="true"
+                            tooltip-placement="right">
                             <span ng-if="badge.count && badge.iconClass" class="{{badge.iconClass}}"></span>
                             <span ng-if="badge.count">{{badge.count}}</span>
                           </div>

src/notification/toast-notification.html

@@ -1,10 +1,10 @@
 <div class="toast-pf alert alert-{{notificationType}}" ng-class="{'alert-dismissable': showCloseButton}"
      ng-mouseenter="handleEnter()" ng-mouseleave="handleLeave()">
-  <div class="dropdown pull-right dropdown-kebab-pf" ng-if="menuActions && menuActions.length > 0">
-    <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+  <div uib-dropdown class="pull-right dropdown-kebab-pf" ng-if="menuActions && menuActions.length > 0">
+    <button uib-dropdown-toggle class="btn btn-link" type="button" id="dropdownKebabRight">
       <span class="fa fa-ellipsis-v"></span>
     </button>
-    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <ul uib-dropdown-menu class="dropdown-menu-right" aria-labelledby="dropdownKebabRight">
       <li ng-repeat="menuAction in menuActions"
           role="{{menuAction.isSeparator === true ? 'separator' : 'menuitem'}}"
           ng-class="{'divider': menuAction.isSeparator === true, 'disabled': menuAction.isDisabled === true}">

src/sort/sort.html

@@ -1,12 +1,12 @@
 <div class="sort-pf">
   <form>
     <div class="form-group">
-      <div class="dropdown btn-group">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <div uib-dropdown class="btn-group">
+        <button uib-dropdown-toggle type="button" class="btn btn-default">
           {{config.currentField.title}}
           <span class="caret"></span>
         </button>
-        <ul class="dropdown-menu">
+        <ul uib-dropdown-menu>
           <li ng-repeat="item in config.fields" ng-class="{'selected': item === config.currentField}">
             <a href="javascript:void(0);" class="sort-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
               {{item.title}}