Bulk actions - action bar UI fixes (#7403)

* [fix] Fix transform transition of action bar

* [refactor] Increase spacing in action bar, consistent with the designs

* [fix] Make button width fixed, with proper notes to accessibility

* [refactor] Decrease padding and border radius, remove borders from buttons, align action bar with titles

* [refactor] Remove border from more button and decrease font weight of button label

client/scss/components/_listing.scss

@@ -497,7 +497,7 @@ ul.listing {
     }
 }
 
-.bulk-actions-choices {
+.footer.bulk-actions-choices {
     @include transition(transform 0.1s ease 0.1s);
 
     &.hidden {
@@ -506,10 +506,14 @@ ul.listing {
     }
 
     .button {
-        font-weight: 700;
+        font-weight: 600;
     }
 
     .bulk-actions-more {
+        .button {
+            border: 0;
+        }
+
         .button:not(:hover) {
             color: $color-teal;
         }
@@ -536,6 +540,21 @@ ul.listing {
     justify-content: space-around;
     width: 100%;
     align-items: center;
+    padding: 1.25em;
+    border-radius: 4px 4px 0 0;
+    margin-left: 30px;
+
+    .bulk-actions-buttons {
+        border-left: 1px solid $color-grey-2;
+        padding-left: 1.5em;
+
+        .bulk-action-btn {
+            max-width: 150px;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            border: 0;
+        }
+    }
 
     .num-objects {
         text-transform: none;
@@ -547,7 +566,7 @@ ul.listing {
         background-color: transparent;
         border: 0;
         font-family: 'Open Sans';
-        align-self: baseline;
+        padding: 0;
     }
 
     .button:not(:hover) {

wagtail/admin/templates/wagtailadmin/bulk_actions/footer.html

@@ -2,7 +2,7 @@
 <footer class="footer bulk-actions-choices hidden" data-bulk-action-footer>
     <div class="footer__container">
         <input data-bulk-action-select-all-checkbox type="checkbox" aria-label='{% trans "Select all" %}' />
-        <ul>{% bulk_action_choices bulk_action_register_hook %}</ul>
+        <ul class="bulk-actions-buttons">{% bulk_action_choices bulk_action_register_hook %}</ul>
         <span data-bulk-action-num-objects class="num-objects"></span>
         {% if select_all_obj_text and objects.has_other_pages %}
         <button data-bulk-action-num-objects-in-listing class="num-objects-in-listing u-hidden">{{ select_all_obj_text }}</button>

wagtail/admin/widgets/button.py

@@ -20,7 +20,7 @@ class Button:
         self.priority = priority
 
     def render(self):
-        attrs = {'href': self.url, 'class': ' '.join(sorted(self.classes))}
+        attrs = {'href': self.url, 'class': ' '.join(sorted(self.classes)), 'title': self.label}
         attrs.update(self.attrs)
         return format_html('<a{}>{}</a>', flatatt(attrs), self.label)