Merge pull request #1648 from marshmalien/ux-hit-list/add-buttons

UX Hit List - Add Buttons
2024-11-01 16:51:11 +03:00 · 2018-05-03 01:27:24 -04:00 · 2018-05-03 01:27:24 -04:00 · 2abf959d84
commit 2abf959d84
parent 771dbe2ffe 2140daf11e
61 changed files with 142 additions and 129 deletions
--- a/awx/ui/client/features/_index.less
+++ b/awx/ui/client/features/_index.less
@ -1,3 +1,2 @@
-@import 'credentials/_index';
@import 'output/_index';
@import 'users/tokens/_index';
--- a/awx/ui/client/features/applications/applications.strings.js
+++ b/awx/ui/client/features/applications/applications.strings.js
@ -16,6 +16,10 @@ function ApplicationsStrings (BaseString) {
        USERS: t.s('Tokens')
    };

+    ns.tooltips = {
+        ADD: t.s('Create a new Application')
+    };
+
    ns.add = {
        PANEL_TITLE: t.s('NEW APPLICATION')
    };
--- a/awx/ui/client/features/applications/list-applications.controller.js
+++ b/awx/ui/client/features/applications/list-applications.controller.js
@ -38,6 +38,10 @@ function ListApplicationsController (
        vm.applicationsCount = dataset.count;
    });

+    vm.tooltips = {
+        add: strings.get('tooltips.ADD')
+    };
+
    vm.getModified = app => {
        const modified = _.get(app, 'modified');

--- a/awx/ui/client/features/applications/list-applications.view.html
+++ b/awx/ui/client/features/applications/list-applications.view.html
@ -23,6 +23,9 @@
                    type="button"
                    ui-sref="applications.add"
                    class="at-Button--add"
+                    id="button-add"
+                    aw-tool-tip="{{vm.tooltips.add}}"
+                    data-placement="top"
                    aria-haspopup="true"
                    aria-expanded="false">
                </button>
--- a/awx/ui/client/features/credentials/_index.less
+++ b/awx/ui/client/features/credentials/_index.less
@ -1,3 +0,0 @@
-.at-CredentialsPermissions {
-    margin-top: 50px;
-}
--- a/awx/ui/client/features/credentials/legacy.credentials.js
+++ b/awx/ui/client/features/credentials/legacy.credentials.js
@ -69,8 +69,8 @@ function LegacyCredentialsService () {
                        ngClick: '$state.go(\'.add\')',
                        label: 'Add',
                        awToolTip: N_('Add a permission'),
-                        actionClass: 'btn List-buttonSubmit',
-                        buttonContent: `&#43; ${N_('ADD')}`,
+                        actionClass: 'at-Button--add',
+                        actionId: 'button-add',
                        ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
                    }
                },
--- a/awx/ui/client/features/templates/templates.strings.js
+++ b/awx/ui/client/features/templates/templates.strings.js
@ -10,7 +10,6 @@ function TemplatesStrings (BaseString) {

    ns.list = {
        PANEL_TITLE: t.s('TEMPLATES'),
-        ADD_BUTTON_LABEL: t.s('ADD'),
        ADD_DD_JT_LABEL: t.s('Job Template'),
        ADD_DD_WF_LABEL: t.s('Workflow Template'),
        ROW_ITEM_LABEL_ACTIVITY: t.s('Activity'),
--- a/awx/ui/client/features/templates/templatesList.view.html
+++ b/awx/ui/client/features/templates/templatesList.view.html
@ -14,13 +14,12 @@
        <div class="at-List-toolbarAction" ng-show="canAdd">
            <button
                type="button"
-                class="at-List-toolbarActionButton at-Button--success"
+                class="at-Button--add"
+                id="button-add"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
-                    &#43; {{:: vm.strings.get('list.ADD_BUTTON_LABEL') }}
-                    <span class="at-List-toolbarDropdownCarat"></span>
-                    <span class="sr-only">Toggle Dropdown</span>
+                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu at-List-toolbarActionDropdownMenu">
                <li>
--- a/awx/ui/client/features/users/tokens/users-tokens-list.partial.html
+++ b/awx/ui/client/features/users/tokens/users-tokens-list.partial.html
@ -14,6 +14,7 @@
            type="button"
            ui-sref=".add"
            class="at-Button--add"
+            id="button-add"
            aria-haspopup="true"
            aria-expanded="false">
        </button>
--- a/awx/ui/client/legacy/styles/ansible-ui.less
+++ b/awx/ui/client/legacy/styles/ansible-ui.less
@ -883,9 +883,11 @@ input[type="checkbox"].checkbox-no-label {

 /* Display list actions next to search widget */
 .list-actions {
-    text-align: right;
-    margin-bottom: -34px;
+    display: flex;
    height: 34px;
+    justify-content: flex-end;
+    margin-bottom: -34px;
+    text-align: right;

    .fa-lg {
        vertical-align: -8%;
--- a/awx/ui/client/legacy/styles/lists.less
+++ b/awx/ui/client/legacy/styles/lists.less
@ -220,6 +220,7 @@ table, tbody {
 }

 .List-actions {
+    align-items: center;
    display: flex;
    margin-bottom: -34px;
 }
@ -235,10 +236,6 @@ table, tbody {
    width: 200px;
 }

-.List-action:not(.ng-hide) ~ .List-action:not(.ng-hide) {
-    margin-left: 20px;
-}
-
 .List-buttonSubmit {
    background-color: @submit-button-bg;
    color: @submit-button-text;
@ -254,6 +251,8 @@ table, tbody {
    background-color: @btn-bg;
    color: @btn-txt;
    border-color: @b7grey;
+    height: 30px;
+    line-height: 14px;
 }

 .List-buttonDefault:hover,
@ -465,16 +464,6 @@ table, tbody {
    background-color: @submit-button-bg-hov;
 }

-.List-dropdownCarat {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    vertical-align: middle;
-    border-top: 4px dashed;
-    border-right: 4px solid transparent;
-    border-left: 4px solid transparent;
-}
-
 .List-infoCell {
    display: flex;
    justify-content: flex-end;
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@ -45,21 +45,13 @@
    min-width: 80px;
 }

-.at-List-toolbarDropdownCarat {
-    margin-left: @at-margin-left-toolbar-carat;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    vertical-align: middle;
-    border-top: 4px dashed;
-    border-right: 4px solid transparent;
-    border-left: 4px solid transparent;
-}
-
 .at-List-toolbarActionDropdownMenu {
+    border-top-right-radius: 0;
+    border: 1px solid @at-gray-d7;
    float: right;
-    right: 0;
    left: auto;
+    margin: 0;
+    right: 0;
 }

 .at-List-container {
--- a/awx/ui/client/lib/theme/_global.less
+++ b/awx/ui/client/lib/theme/_global.less
@ -23,8 +23,14 @@
        content: "+";
        font-size: 20px;
    }
-    border-color: transparent;
-    margin-left: @at-space-2x;
+    border: none;
+    display: inline-flex;
+    margin-left: @at-space-4x;
+
+    &[aria-expanded="true"] {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 }

 .at-Button--info {
--- a/awx/ui/client/src/credential-types/credential-types.list.js
+++ b/awx/ui/client/src/credential-types/credential-types.list.js
@ -40,8 +40,8 @@ export default ['i18n', function(i18n){
                mode: 'all', // One of: edit, select, all
                ngClick: 'addCredentialType()',
                awToolTip: i18n._('Create a new credential type'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd'
            }
        },
--- a/awx/ui/client/src/credentials/credentials.form.js
+++ b/awx/ui/client/src/credentials/credentials.form.js
@ -442,11 +442,12 @@ export default ['i18n', function(i18n) {
                    open: false,
                    actions: {
                        add: {
+                            mode: 'all',
                            ngClick: "$state.go('.add')",
                            label: 'Add',
                            awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(credential_obj.summary_fields.user_capabilities.edit || canAdd)'
                        }
                    },
--- a/awx/ui/client/src/credentials/credentials.list.js
+++ b/awx/ui/client/src/credentials/credentials.list.js
@ -50,8 +50,8 @@ export default ['i18n', function(i18n) {
                mode: 'all', // One of: edit, select, all
                ngClick: 'addCredential()',
                awToolTip: i18n._('Create a new credential'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: "true"
            }
        },
--- a/awx/ui/client/src/instance-groups/instance-groups.strings.js
+++ b/awx/ui/client/src/instance-groups/instance-groups.strings.js
@ -19,6 +19,11 @@ function InstanceGroupsStrings (BaseString) {
        JOBS: t.s('JOBS')
    };

+    ns.tooltips = {
+        ADD_INSTANCE_GROUP: t.s('Create a new Instance Group'),
+        ASSOCIATE_INSTANCES: t.s('Associate an existing Instance')
+    };
+
    ns.instance = {
        PANEL_TITLE: t.s('SELECT INSTANCE')
    };
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@ -27,7 +27,10 @@
                    type="button"
                    ng-click="$state.go('instanceGroups.instances.modal.add')"
                    class="at-Button--add"
+                    id="button-add"
                    ng-show="vm.isSuperuser"
+                    aw-tool-tip="{{vm.tooltips.add}}"
+                    data-placement="top"
                    aria-expanded="false">
                </button>
                <div ui-view="modal"></div>
--- a/awx/ui/client/src/instance-groups/instances/instances.controller.js
+++ b/awx/ui/client/src/instance-groups/instances/instances.controller.js
@ -48,6 +48,10 @@ function InstancesController ($scope, $state, $http, models, Instance, strings,
        }
    };

+    vm.tooltips = {
+        add: strings.get('tooltips.ASSOCIATE_INSTANCES')
+    };
+
    vm.rowAction = {
        toggle: {
            _disabled: !vm.isSuperuser
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js
+++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.controller.js
@ -33,6 +33,10 @@ export default ['$scope', '$filter', '$state', 'Alert', 'resolvedModels', 'Datas
            vm.activeId = parseInt($state.params.instance_group_id);
        });

+        vm.tooltips = {
+            add: strings.get('tooltips.ADD_INSTANCE_GROUP')
+        };
+
        vm.rowAction = {
            trash: instance_group => {
                return vm.isSuperuser && instance_group.name !== 'tower';
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
@ -23,7 +23,10 @@
                    type="button"
                    ui-sref="instanceGroups.add"
                    class="at-Button--add"
+                    id="button-add"
                    ng-show="vm.isSuperuser"
+                    aw-tool-tip="{{vm.tooltips.add}}"
+                    data-placement="top"
                    aria-haspopup="true"
                    aria-expanded="false">
                </button>
--- a/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/hosts/related/groups/hosts-related-groups.list.js
@ -49,8 +49,8 @@ export default ['i18n', function(i18n) {
                mode: 'all',
                ngClick: "associateGroup()",
                awToolTip: i18n._("Associate this host with a new group"),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ASSOCIATE GROUP'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd',
                dataPlacement: "top",
            }
--- a/awx/ui/client/src/inventories-hosts/inventories/inventory.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/inventory.list.js
@ -73,8 +73,8 @@ export default ['i18n', function(i18n) {
                type: 'buttonDropdown',
                basePaths: ['inventories'],
                awToolTip: i18n._('Create a new inventory'),
-                actionClass: 'btn List-dropdownSuccess',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                options: [
                    {
                        optionContent: i18n._('Inventory'),
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/groups/groups.list.js
@ -67,8 +67,8 @@
                mode: 'all',
                ngClick: "createGroup()",
                awToolTip: i18n._("Create a new group"),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD GROUP'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd',
                dataPlacement: "top",
            }
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-groups/group-nested-groups.list.js
@ -67,8 +67,8 @@
                mode: 'all',
                type: 'buttonDropdown',
                awToolTip: i18n._("Add a group"),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd',
                dataPlacement: "top",
                options: [
--- a/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/groups/related/nested-hosts/group-nested-hosts.list.js
@ -116,8 +116,8 @@ export default ['i18n', function(i18n) {
                mode: 'all',
                type: 'buttonDropdown',
                awToolTip: i18n._("Add a host"),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd',
                dataPlacement: "top",
                options: [
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js
@ -121,8 +121,8 @@ export default ['i18n', function(i18n) {
                mode: 'all',
                ngClick: "createHost()",
                awToolTip: i18n._("Create a new host"),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD HOST'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd',
                dataPlacement: "top",
            }
--- a/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/hosts/related/nested-groups/host-nested-groups.list.js
@ -67,8 +67,8 @@
                mode: 'all',
                ngClick: 'associateGroup()',
                awToolTip: i18n._("Associate an existing group"),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ASSOCIATE GROUP'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd',
                dataPlacement: "top",
            }
--- a/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js
@ -66,8 +66,8 @@
                mode: 'all',
                ngClick: "createSource()",
                awToolTip: i18n._("Create a new source"),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD SOURCE'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd',
                dataPlacement: "top",
            }
--- a/awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/smart-inventory/smart-inventory.form.js
@ -113,8 +113,8 @@ export default ['i18n', function(i18n) {
                            label: i18n._('Add'),
                            ngClick: "$state.go('.add')",
                            awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ADD',
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(inventory_obj.summary_fields.user_capabilities.edit || canAdd)'

                        }
--- a/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/standard-inventory/inventory.form.js
@ -115,8 +115,8 @@ function(i18n) {
                        label: i18n._('Add'),
                        ngClick: "$state.go('.add')",
                        awToolTip: i18n._('Add a permission'),
-                        actionClass: 'btn List-buttonSubmit',
-                        buttonContent: '&#43; ADD',
+                        actionClass: 'at-Button--add',
+                        actionId: 'button-add',
                        ngShow: '(inventory_obj.summary_fields.user_capabilities.edit || canAdd)'

                    }
--- a/awx/ui/client/src/inventory-scripts/inventory-scripts.list.js
+++ b/awx/ui/client/src/inventory-scripts/inventory-scripts.list.js
@ -38,8 +38,8 @@ export default ['i18n', function(i18n){
                mode: 'all', // One of: edit, select, all
                ngClick: 'addCustomInv()',
                awToolTip: i18n._('Create a new custom inventory'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd'
            }
        },
--- a/awx/ui/client/src/notifications/notificationTemplates.list.js
+++ b/awx/ui/client/src/notifications/notificationTemplates.list.js
@ -50,8 +50,8 @@ export default ['i18n', function(i18n){
                mode: 'all', // One of: edit, select, all
                ngClick: 'addNotification()',
                awToolTip: i18n._('Create a new notification template'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd'
            }
        },
--- a/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js
+++ b/awx/ui/client/src/organizations/linkout/organizations-linkout.route.js
@ -63,9 +63,9 @@ let lists = [{
            list.basePath = `${GetBasePath('organizations')}${$stateParams.organization_id}/users`;
            list.searchRowActions = {
                add: {
-                    buttonContent: '&#43; ADD user',
                    awToolTip: 'Add existing user to organization',
-                    actionClass: 'btn List-buttonSubmit',
+                    actionClass: 'at-Button--add',
+                    actionId: 'button-add',
                    ngClick: 'addUsers()'
                }
            };
@ -273,9 +273,8 @@ let lists = [{
            list.basePath = `${GetBasePath('organizations')}${$stateParams.organization_id}/admins`;
            list.searchRowActions = {
                add: {
-                    buttonContent: '&#43; ADD administrator',
                    awToolTip: 'Add existing user to organization as administrator',
-                    actionClass: 'btn List-buttonSubmit',
+                    actionClass: 'at-Button--add',
                    ngClick: 'addUsers()'
                }
            };
--- a/awx/ui/client/src/organizations/list/organizations-list.partial.html
+++ b/awx/ui/client/src/organizations/list/organizations-list.partial.html
@ -16,12 +16,11 @@
        <div class="List-well">
            <div class="List-actionHolder">
                <div class="List-actions">
-                    <!-- &#43; ADD -->
-                    <button class="btn List-buttonSubmit"
+                    <button class="at-Button--add"
+                        id="button-add"
                        aw-tool-tip="{{'Create a new organization'|translate}}"
                        ng-show="canAdd"
-                        ng-click="addOrganization()" translate>
-                        + ADD
+                        ng-click="addOrganization()">
                    </button>
                </div>
            </div>
--- a/awx/ui/client/src/organizations/organizations.form.js
+++ b/awx/ui/client/src/organizations/organizations.form.js
@ -92,8 +92,8 @@ export default ['NotificationsList', 'i18n',
                            ngClick: "$state.go('.add')",
                            label: i18n._('Add'),
                            awToolTip: i18n._('Add Users to this organization.'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(organization_obj.summary_fields.user_capabilities.edit || canAdd)'
                        }
                    },
--- a/awx/ui/client/src/organizations/organizations.list.js
+++ b/awx/ui/client/src/organizations/organizations.list.js
@ -33,8 +33,8 @@ export default [function() {
                ngClick: 'addOrganization()',
                awToolTip: 'Create a new organization',
                awFeature: 'multiple_organizations',
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ADD'
+                actionClass: 'at-Button--add',
+                actionId: 'button-add'
            }
        },

--- a/awx/ui/client/src/projects/projects.form.js
+++ b/awx/ui/client/src/projects/projects.form.js
@ -253,8 +253,8 @@ export default ['i18n', 'NotificationsList', 'TemplateList',
                        ngClick: "$state.go('.add')",
                        label: 'Add',
                        awToolTip: i18n._('Add a permission'),
-                        actionClass: 'btn List-buttonSubmit',
-                        buttonContent: '&#43; ' + i18n._('ADD'),
+                        actionClass: 'at-Button--add',
+                        actionId: 'button-add',
                        ngShow: '(project_obj.summary_fields.user_capabilities.edit || canAdd)'
                    }
                },
--- a/awx/ui/client/src/projects/projects.list.js
+++ b/awx/ui/client/src/projects/projects.list.js
@ -74,8 +74,8 @@ export default ['i18n', function(i18n) {
                mode: 'all', // One of: edit, select, all
                ngClick: 'addProject()',
                awToolTip: i18n._('Create a new project'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: "canAdd"
            }
        },
--- a/awx/ui/client/src/scheduler/schedules.list.js
+++ b/awx/ui/client/src/scheduler/schedules.list.js
@ -72,8 +72,8 @@ export default ['i18n', function(i18n) {
                mode: 'all',
                ngClick: 'addSchedule()',
                awToolTip: i18n._('Add a new schedule'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd'
            }
        },
--- a/awx/ui/client/src/shared/generator-helpers.js
+++ b/awx/ui/client/src/shared/generator-helpers.js
@ -751,6 +751,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
        html += (options.dataPlacement) ? "data-placement=\"" + options.dataPlacement + "\" " : "";
        html += (options.dataContainer) ? "data-container=\"" + options.dataContainer + "\" " : "";
        html += (options.actionClass) ? "class=\"" + options.actionClass + "\" " : "";
+        html += (options.actionId) ? "id=\"" + options.actionId + "\" " : "";
        html += (options.dataTitle) ? "data-title=\"" + options.dataTitle + "\" " : "";
        html += (options.ngDisabled) ? "ng-disabled=\"" + options.ngDisabled + "\" " : "";
        html += (options.ngClick) ? "ng-click=\"$eval(" + options.ngClick + ")\" " : "";
--- a/awx/ui/client/src/shared/list-generator/list-actions.partial.html
+++ b/awx/ui/client/src/shared/list-generator/list-actions.partial.html
@ -4,9 +4,8 @@
    <div ng-if="options.type && options.type === 'template'" ng-include="options.template" ng-show="{{options.ngShow}}"></div>
    <div class="List-action--showTooltipOnDisabled" ng-if="options.showTipWhenDisabled" aw-tool-tip="{{options.awToolTip}}" data-tip-watch="{{options.dataTipWatch}}" data-placement="{{options.dataPlacement}}" data-container="{{options.dataContainer}}" data-title="{{options.dataTitle}}" data-tooltip-inner-class="{{options.tooltipInnerClass}}">
        <div class="btn-group" ng-if="options.type === 'buttonDropdown'" ng-disabled="{{options.ngDisabled}}">
-            <button type="button" class="{{options.actionClass}} List-dropdownButton" ng-bind-html="options.buttonContent" translate></button>
-            <button type="button" class="{{options.actionClass}} List-dropdownButton List-dropdownCaratButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="List-dropdownCarat"></span>
+            <button type="button" class="{{options.actionClass}} List-dropdownButton" id="{{options.actionId}}" ng-bind-html="options.buttonContent" translate></button>
+            <button type="button" class="List-dropdownButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu pull-right">
@ -20,6 +19,7 @@
                toolbar-button
                mode="options.mode"
                class="{{options.actionClass}}"
+                id="{{options.actionId}}"
                ng-disabled="{{options.ngDisabled}}"
                ng-show="{{options.ngShow}}"
                ng-click="$eval(options.ngClick)"
@ -31,12 +31,11 @@
    </div>
    <span ng-if="!options.showTipWhenDisabled">
        <div class="btn-group" ng-if="options.type === 'buttonDropdown'" ng-disabled="{{options.ngDisabled}}" aw-tool-tip="{{options.awToolTip}}" data-tip-watch="{{options.dataTipWatch}}" data-placement="{{options.dataPlacement}}" data-container="{{options.dataContainer}}" ng-show="{{options.ngShow}}">
-            <button type="button" class="{{options.actionClass}} List-dropdownButton dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button type="button" class="{{options.actionClass}} List-dropdownButton dropdown-toggle" id="{{options.actionId}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span  ng-bind-html="options.buttonContent" translate></span>
-                <span class="List-dropdownCarat"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
-            <ul class="dropdown-menu pull-right">
+            <ul class="dropdown-menu at-List-toolbarActionDropdownMenu">
                <li ng-repeat="option in options.options">
                    <a ui-sref="{{option.optionSref}}" ng-bind-html="option.optionContent" ng-show="{{option.ngShow}}"></a>
                </li>
@ -51,13 +50,14 @@
                data-placement="{{options.dataPlacement}}"
                data-container="{{options.dataContainer}}"
                class="{{options.actionClass}}"
+                id="{{options.actionId}}"
                data-title="{{options.dataTitle}}"
                ng-disabled="{{options.ngDisabled}}"
                ng-click="$eval(options.ngClick)"
                ng-show="{{options.ngShow}}"
                toolbar="true"
                aw-feature="{{options.awFeature}}">
-                <span ng-bind-html="options.buttonContent" translate></span>
+                <span ng-if="options.buttonContent" ng-bind-html="options.buttonContent" translate></span>
            </button>
        </span>
    </span>
--- a/awx/ui/client/src/teams/teams.form.js
+++ b/awx/ui/client/src/teams/teams.form.js
@ -84,8 +84,8 @@ export default ['i18n', function(i18n) {
                            ngClick: "$state.go('.add')",
                            label: i18n._('Add'),
                            awToolTip: i18n._('Add User'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(team_obj.summary_fields.user_capabilities.edit || canAdd)'
                        }
                    },
@ -156,8 +156,8 @@ export default ['i18n', function(i18n) {
                            ngClick: "$state.go('.add')",
                            label: 'Add',
                            awToolTip: i18n._('Grant Permission'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ' + i18n._('ADD PERMISSIONS'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(team_obj.summary_fields.user_capabilities.edit || canAdd)'
                        }
                    }
--- a/awx/ui/client/src/teams/teams.list.js
+++ b/awx/ui/client/src/teams/teams.list.js
@ -41,8 +41,8 @@ export default ['i18n', function(i18n) {
                mode: 'all', // One of: edit, select, all
                ngClick: 'addTeam()',
                awToolTip: i18n._('Create a new team'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd && canEdit'
            }
        },
--- a/awx/ui/client/src/templates/job_templates/job-template.form.js
+++ b/awx/ui/client/src/templates/job_templates/job-template.form.js
@ -403,8 +403,8 @@ function(NotificationsList, i18n) {
                            ngClick: "$state.go('.add')",
                            label: 'Add',
                            awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ' + i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
                        }
                    },
--- a/awx/ui/client/src/templates/templates.list.js
+++ b/awx/ui/client/src/templates/templates.list.js
@ -54,8 +54,8 @@ export default ['i18n', function(i18n) {
                type: 'buttonDropdown',
                basePaths: ['templates'],
                awToolTip: i18n._('Create a new template'),
-                actionClass: 'btn List-dropdownSuccess',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                options: [
                    {
                        optionContent: i18n._('Job Template'),
--- a/awx/ui/client/src/templates/workflows.form.js
+++ b/awx/ui/client/src/templates/workflows.form.js
@ -147,8 +147,8 @@ export default ['NotificationsList', 'i18n', function(NotificationsList, i18n) {
                            ngClick: "$state.go('.add')",
                            label: i18n._('Add'),
                            awToolTip: i18n._('Add a permission'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; '+ i18n._('ADD'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(workflow_job_template_obj.summary_fields.user_capabilities.edit || canAddWorkflowJobTemplate)'
                        }
                    },
--- a/awx/ui/client/src/users/users.form.js
+++ b/awx/ui/client/src/users/users.form.js
@ -215,8 +215,8 @@ export default ['i18n', function(i18n) {
                            ngClick: "$state.go('.add')",
                            label: 'Add',
                            awToolTip: i18n._('Grant Permission'),
-                            actionClass: 'btn List-buttonSubmit',
-                            buttonContent: '&#43; ' + i18n._('ADD PERMISSIONS'),
+                            actionClass: 'at-Button--add',
+                            actionId: 'button-add',
                            ngShow: '(!is_superuser && (user_obj.summary_fields.user_capabilities.edit || canAdd))'
                        }
                    },
--- a/awx/ui/client/src/users/users.list.js
+++ b/awx/ui/client/src/users/users.list.js
@ -46,8 +46,8 @@ export default ['i18n', function(i18n) {
                ngClick: 'addUser()',
                basePaths: ['organizations', 'users'], // base path must be in list, or action not available
                awToolTip: i18n._('Create a new user'),
-                actionClass: 'btn List-buttonSubmit',
-                buttonContent: '&#43; ' + i18n._('ADD'),
+                actionClass: 'at-Button--add',
+                actionId: 'button-add',
                ngShow: 'canAdd && canEdit'
            }
        },
--- a/awx/ui/test/e2e/objects/credentialTypes.js
+++ b/awx/ui/test/e2e/objects/credentialTypes.js
@ -28,7 +28,7 @@ const addEditPanel = {
 const listPanel = {
    selector: 'div[ui-view="list"]',
    elements: {
-        add: '.List-buttonSubmit',
+        add: '#button-add',
        badge: 'div[class="List-titleBadge]',
        titleText: 'div[class="List-titleText"]',
        noitems: 'div[class="List-noItems"]'
--- a/awx/ui/test/e2e/objects/credentials.js
+++ b/awx/ui/test/e2e/objects/credentials.js
@ -251,7 +251,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
--- a/awx/ui/test/e2e/objects/inventories.js
+++ b/awx/ui/test/e2e/objects/inventories.js
@ -121,9 +121,9 @@ module.exports = {
            return this.navigate();
        },
        selectAdd (name) {
-            this.api.waitForElementVisible('button span[class="List-dropdownCarat"]');
-            this.expect.element('button span[class="List-dropdownCarat"]').enabled;
-            this.api.click('button span[class="List-dropdownCarat"]');
+            this.api.waitForElementVisible('#button-add');
+            this.expect.element('#button-add').enabled;
+            this.api.click('#button-add');

            this.api.useXpath();
            this.api.waitForElementVisible(`.//a[normalize-space(text())="${name}"]`);
--- a/awx/ui/test/e2e/objects/inventoryScripts.js
+++ b/awx/ui/test/e2e/objects/inventoryScripts.js
@ -59,7 +59,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
--- a/awx/ui/test/e2e/objects/notificationTemplates.js
+++ b/awx/ui/test/e2e/objects/notificationTemplates.js
@ -64,7 +64,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
--- a/awx/ui/test/e2e/objects/organizations.js
+++ b/awx/ui/test/e2e/objects/organizations.js
@ -61,7 +61,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
--- a/awx/ui/test/e2e/objects/projects.js
+++ b/awx/ui/test/e2e/objects/projects.js
@ -60,7 +60,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
--- a/awx/ui/test/e2e/objects/sections/permissions.js
+++ b/awx/ui/test/e2e/objects/sections/permissions.js
@ -6,7 +6,7 @@ import search from './search';
 const permissions = {
    selector: 'div[ui-view="related"]',
    elements: {
-        add: 'button[class="btn List-buttonSubmit"]',
+        add: '#button-add',
        badge: 'div[class="List-titleBadge]',
        titleText: 'div[class="List-titleText"]',
        noitems: 'div[class="List-noItems"]'
--- a/awx/ui/test/e2e/objects/teams.js
+++ b/awx/ui/test/e2e/objects/teams.js
@ -58,7 +58,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
--- a/awx/ui/test/e2e/objects/templates.js
+++ b/awx/ui/test/e2e/objects/templates.js
@ -94,7 +94,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
@ -127,7 +127,7 @@ module.exports = {
            return this;
        },
        selectAdd (name) {
-            this.clickWhenEnabled('button span[class="at-List-toolbarDropdownCarat"]');
+            this.clickWhenEnabled('#button-add');

            this.api
                .useXpath()
--- a/awx/ui/test/e2e/objects/users.js
+++ b/awx/ui/test/e2e/objects/users.js
@ -58,7 +58,7 @@ module.exports = {
            elements: {
                badge: 'span[class~="badge"]',
                title: 'div[class="List-titleText"]',
-                add: 'button[class~="List-buttonSubmit"]'
+                add: '#button-add'
            },
            sections: {
                search,
--- a/awx/ui/test/e2e/tests/smoke.js
+++ b/awx/ui/test/e2e/tests/smoke.js
@ -124,7 +124,7 @@ module.exports = {
        inventories.waitForElementNotVisible('div.spinny');
    },
    'create host': client => {
-        const addHost = './/span[text()="+ ADD HOST"]';
+        const addHost = '.hostsList #button-add';

        client.expect.element('#hosts_tab').enabled;
        client.expect.element('#hosts_tab').css('opacity').equal('1');
@ -136,11 +136,10 @@ module.exports = {

        client.expect.element('#hosts_tab').css('background-color').contain('132, 137, 146');

-        client.useXpath();
+        client.useCss();
        client.waitForElementVisible(addHost);
        client.expect.element(addHost).enabled;
        client.click(addHost);
-        client.useCss();

        client.waitForElementVisible('#host_name');
        client.sendKeys('#host_name', 'localhost');