Merge pull request #2611 from basecamp/mobile/tweak-bridge-buttons

app/javascript/initializers/bridge/bridge_element.js

@@ -3,7 +3,9 @@ import { BridgeElement } from "@hotwired/hotwire-native-bridge"
 BridgeElement.prototype.getButton = function() {
   return {
     title: this.title,
-    icon: this.getIcon()
+    icon: this.getIcon(),
+    displayTitle: this.getDisplayTitle(),
+    displayAsPrimaryAction: this.getDisplayAsPrimaryAction()
   }
 }
 
@@ -16,3 +18,11 @@ BridgeElement.prototype.getIcon = function() {
 
   return null
 }
+
+BridgeElement.prototype.getDisplayTitle = function() {
+  return !!this.bridgeAttribute(`display-title`)
+}
+
+BridgeElement.prototype.getDisplayAsPrimaryAction = function() {
+  return !!this.bridgeAttribute(`display-as-primary-action`)
+}

app/views/cards/container/_closure_buttons.html.erb

@@ -7,7 +7,7 @@
   <% end %>
 
   <%= button_to card_closure_path(card), class: "btn btn--circle-mobile borderless",
-        data: { controller: "hotkey", form_target: "submit", bridge__buttons_target: "button", bridge_title: "Mark as Done", bridge_icon_url: bridge_icon("check"), action: "keydown.d@document->hotkey#click" },
+        data: { controller: "hotkey", form_target: "submit", bridge__buttons_target: "button", bridge_title: "Mark done", bridge_display_as_primary_action: true, bridge_display_title: true, bridge_icon_url: bridge_icon("check"), action: "keydown.d@document->hotkey#click" },
         form: { data: { controller: "form" } } do %>
     <%= icon_tag "check", class: "icon--mobile-only" %>
     <span class="overflow-ellipsis">Mark as Done</span>

app/views/columns/show/_add_card_button.html.erb

@@ -1,7 +1,7 @@
 <div class="board-tools card">
   <%= button_to board_cards_path(board), method: :post, class: "btn btn--link",
         form: { data: { turbo_frame: "_top" } },
-        data: { controller: "hotkey", action: "keydown.c@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add card", bridge_icon_url: bridge_icon("add") } do %>
+        data: { controller: "hotkey", action: "keydown.c@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add card", bridge_display_as_primary_action: true, bridge_display_title: true, bridge_icon_url: bridge_icon("add") } do %>
     <%= icon_tag "add", class: "show-on-touch" %>
     <span>Add a card</span>
     <kbd class="hide-on-touch">C</kbd>

app/views/events/index/_add_board_button.html.erb

@@ -1,7 +1,7 @@
 <div class="header__actions header__actions--end">
   <div>
     <%= link_to new_board_path, class: "btn btn--link btn--circle-mobile",
-          data: { controller: "hotkey", action: "keydown.b@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add a board", bridge_icon_url: bridge_icon("board") } do %>
+          data: { controller: "hotkey", action: "keydown.b@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add board", bridge_display_title: true, bridge_icon_url: bridge_icon("board") } do %>
       <%= icon_tag "board" %>
       <span class="overflow-ellipsis">Add a board</span>
       <kbd class="hide-on-touch">B</kbd>

app/views/events/index/_add_card_button.html.erb

@@ -1,7 +1,7 @@
 <div class="header__actions header__actions--start">
   <% if board = user_filtering.single_board_or_first %>
     <%= button_to board_cards_path(board), method: :post, class: "btn btn--link btn--circle-mobile",
-          data: { controller: "hotkey", action: "keydown.c@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add a card", bridge_icon_url: bridge_icon("add") } do %>
+          data: { controller: "hotkey", action: "keydown.c@document->hotkey#click", bridge__buttons_target: "button", bridge_title: "Add card", bridge_display_as_primary_action: true, bridge_display_title: true, bridge_icon_url: bridge_icon("add") } do %>
       <%= icon_tag "add" %>
       <span class="overflow-ellipsis">Add a card</span>
       <kbd class="hide-on-touch">C</kbd>