Merge pull request #1559 from basecamp/andy-11-nov

Update maximize column icon and add focus ring for assignees

app/assets/images/grid.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m8 13c1.65685 0 3 1.3431 3 3v3c0 1.6569-1.34315 3-3 3h-4c-1.60511 0-2.91579-1.2606-2.99609-2.8457l-.00391-.1543v-3c0-1.6569 1.34315-3 3-3zm-4 2c-.55228 0-1 .4477-1 1v3l.00488.1025c.05133.5042.47744.8975.99512.8975h4c.55228 0 1-.4477 1-1v-3c0-.5523-.44772-1-1-1z"/><path d="m20 13c1.6569 0 3 1.3431 3 3v3c0 1.6569-1.3431 3-3 3h-4c-1.6051 0-2.9158-1.2606-2.9961-2.8457l-.0039-.1543v-3c0-1.6569 1.3431-3 3-3zm-4 2c-.5523 0-1 .4477-1 1v3l.0049.1025c.0513.5042.4774.8975.9951.8975h4c.5523 0 1-.4477 1-1v-3c0-.5523-.4477-1-1-1z"/><path d="m8 2c1.65685 0 3 1.34315 3 3v3c0 1.65685-1.34315 3-3 3h-4c-1.60511 0-2.91579-1.26055-2.99609-2.8457l-.00391-.1543v-3c0-1.65685 1.34315-3 3-3zm-4 2c-.55228 0-1 .44772-1 1v3l.00488.10254c.05133.50413.47744.89746.99512.89746h4c.55228 0 1-.44772 1-1v-3c0-.55228-.44772-1-1-1z"/><path d="m20 2c1.6569 0 3 1.34315 3 3v3c0 1.65685-1.3431 3-3 3h-4c-1.6051 0-2.9158-1.26055-2.9961-2.8457l-.0039-.1543v-3c0-1.65685 1.3431-3 3-3zm-4 2c-.5523 0-1 .44772-1 1v3l.0049.10254c.0513.50413.4774.89746.9951.89746h4c.5523 0 1-.44772 1-1v-3c0-.55228-.4477-1-1-1z"/></g></svg>

app/assets/stylesheets/cards.css

@@ -258,6 +258,14 @@
     border: none;
     padding: 0;
     display: flex;
+
+    &:focus-visible {
+      outline: none;
+
+      .btn {
+        box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
+      }
+    }
   }
 
   .card__meta-text {

app/assets/stylesheets/icons.css

@@ -54,6 +54,7 @@
   .icon--everyone { --svg: url("everyone.svg "); }
   .icon--expand { --svg: url("expand.svg "); }
   .icon--gear { --svg: url("gear.svg "); }
+  .icon--grid { --svg: url("grid.svg "); }
   .icon--filter { --svg: url("filter.svg "); }
   .icon--globe { --svg: url("globe.svg "); }
   .icon--golden-ticket { --svg: url("golden-ticket.svg "); }

app/views/boards/show/_column.html.erb

@@ -14,7 +14,7 @@
       <%= render "boards/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) %>
 
       <%= link_to board_column_path(column.board, column), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
-        <%= icon_tag "maximize", class: "translucent" %>
+        <%= icon_tag "grid", class: "translucent" %>
         <span class="for-screen-reader">Maximize column</span>
       <% end %>
     </header>

app/views/boards/show/_stream.html.erb

@@ -9,7 +9,7 @@
         <h2 class="cards__expander-title" data-collapsible-columns-target="title">Maybe?</h2>
       </div>
       <%= link_to board_columns_stream_path(board), class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
-        <%= icon_tag "maximize", class: "translucent" %>
+        <%= icon_tag "grid", class: "translucent" %>
         <span class="for-screen-reader">Expand column</span>
       <% end %>
     </header>

app/views/boards/show/menu/_maximize.html.erb

@@ -1,4 +1,4 @@
 <%= link_to column_path, class: "cards__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
-  <%= icon_tag "maximize", class: "translucent" %>
+  <%= icon_tag "grid", class: "translucent" %>
   <span class="for-screen-reader">Expand column</span>
 <% end %>