Merge pull request #962 from basecamp/combobox-a11y

Combobox a11y
This commit is contained in:
Andy Smith
2025-08-26 16:13:10 -05:00
committed by GitHub
15 changed files with 89 additions and 161 deletions
+18 -16
View File
@@ -1,23 +1,10 @@
@layer components {
.fizzy-dialog:is(.panel) {
--panel-border-color: var(--color-selected-dark);
--panel-border-radius: 1.4em;
--panel-size: 45ch;
align-items: stretch;
box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
flex-direction: column;
gap: 2px;
}
.input:is(.fizzy-menu) {
.input:is(.fizzy-menu-trigger) {
--input-border-color: var(--color-selected-dark);
--input-padding: 0.2em 2em 0.2em 0.9em;
background-color: var(--color-canvas);
inline-size: auto;
margin-block-start: 0.1em;
::-webkit-search-cancel-button {
@@ -38,7 +25,21 @@
}
}
.fizzy-dialog__close {
.fizzy-menu:is(.panel) {
--panel-border-color: var(--color-selected-dark);
--panel-border-radius: 1.4em;
--panel-size: 45ch;
align-items: stretch;
box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
flex-direction: column;
gap: 2px;
}
.fizzy-menu__close {
@media (any-hover: hover) {
display: none;
}
@@ -52,6 +53,7 @@
flex-wrap: wrap;
gap: var(--gap);
inline-size: 100%;
list-style: none;
justify-content: center;
margin: var(--block-space) auto calc(var(--block-space-half) / 2);
max-inline-size: 100%;
+9 -1
View File
@@ -16,7 +16,7 @@ module FiltersHelper
end
def filter_place_menu_item(path, label, icon)
tag.li class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do
tag.li class: "popup__group", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do
concat icon_tag(icon)
concat(link_to(path, class: "popup__item btn") do
concat tag.span(label, class: "overflow-ellipsis")
@@ -35,4 +35,12 @@ module FiltersHelper
navigable_list_actionable_items_value: true
}, &block
end
def filter_hotkey_link(title, path, key, icon)
link_to path, class: "popup__group btn borderless", id: "filter-hotkey-#{key}", role: "listitem", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.#{key}@document->hotkey#click keydown.shift+#{key}@document->hotkey#click" } do
concat icon_tag(icon)
concat tag.span(title.html_safe)
concat tag.kbd(key)
end
end
end
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
import { nextFrame } from "helpers/timing_helpers"
export default class extends Controller {
static targets = [ "item" ]
static targets = [ "item", "input" ]
static values = {
reverseOrder: { type: Boolean, default: false },
selectionAttribute: { type: String, default: "aria-selected" },
@@ -73,6 +73,7 @@ export default class extends Controller {
async #setCurrentFrom(element) {
const selectedItem = this.#visibleItems.find(item => item.contains(element))
const id = selectedItem?.getAttribute("id")
if (selectedItem) {
this.#clearSelection()
@@ -80,6 +81,9 @@ export default class extends Controller {
this.currentItem = selectedItem
await nextFrame()
if (this.focusOnSelectionValue) { this.currentItem.focus() }
if (this.hasInputTarget && id) {
this.inputTarget.setAttribute("aria-activedescendant", id)
}
}
}
@@ -5,14 +5,14 @@
<% end %>
<% if Current.user.collections.one? %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collection-init", data: { filter_target: "item", navigable_list_target: "item" } do %>
<%= tag.div class: "popup__item btn" do %>
<span class="overflow-ellipsis"><%= Current.user.collections.first.name %></span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> </span>
<% end %>
<% end %>
<% elsif Current.user.collections.many? %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
<%= link_to cards_path(filter.as_params.except(:collection_ids)), class: "popup__group", id: "filter-collections-all", data: { filter_target: "item", navigable_list_target: "item" } do %>
<label class="popup__radio btn txt-xx-small flex-item-no-shrink">
<input type="checkbox" <%= "checked" if filter.collection_ids.empty? %>>
@@ -28,7 +28,7 @@
<% end %>
<% Current.user.collections.ordered_by_recently_accessed.each do |collection| %>
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-collection-#{collection.id}" %>">
<label class="popup__radio btn txt-xx-small flex-item-no-shrink">
<%= form.check_box "collection_ids[]", {
checked: filter.collections.include?(collection),
-70
View File
@@ -1,70 +0,0 @@
<nav class="header">
<header class="flex flex-inline flex-column center flex-shrink">
<div class="card-filter--collection flex-inline flex-column align-center center position-relative" data-controller="dialog" data-action="click@document->dialog#closeOnClickOutside keydown.esc->dialog#close">
<%= tag.button class: "fizzy-menu input input--select flex align-center txt-normal",
data: {
action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
controller: "hotkey" } do %>
<svg fill="none" height="282" viewBox="0 0 178 282" width="178" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="m14.1582 85.2218s66.3075-9.7823 75.9322-9.7823c9.6242 0 73.9516 9.7823 73.9516 9.7823-6.535 65.4602-17.171 132.0422-21.661 160.5982 0 0-16.941 11.257-51.3278 11.257s-55.9319-12.654-55.9319-12.654c-4.4901-28.557-14.4184-93.741-20.9631-159.2012z" fill="#d2edf8"/>
<path d="m14.1582 85.2218s66.3075-9.7823 75.9322-9.7823c9.6242 0 73.9516 9.7823 73.9516 9.7823-6.535 65.4602-17.171 132.0422-21.661 160.5982 0 0-16.941 11.257-51.3278 11.257s-55.9319-12.654-55.9319-12.654c-4.4901-28.557-14.4184-93.741-20.9631-159.2012z" fill="#9ee0f5"/>
<path d="m162.52 88.4775c0 4.8269-32.987 8.7398-73.6772 8.7398-40.6906 0-73.6768-3.9129-73.6768-8.7398 0-4.8268 32.9862-8.7397 73.6768-8.7397 40.6902 0 73.6772 3.9129 73.6772 8.7397z" fill="var(--color-ink-inverted)" opacity=".5"/>
<path d="m173.1 251.625c0 14.179-37.652 25.673-84.0996 25.673-46.4472 0-84.10001-11.494-84.10001-25.673s37.65281-25.673 84.10001-25.673c46.4476 0 84.0996 11.494 84.0996 25.673z" fill="#0389e7" opacity=".1"/>
<path d="m24.2217 177.256s38.4462-4.239 64.6324-4.007c26.1859.231 64.1959 4 64.1959 4l-10.523 68.435-52.3439 12.493-54.9675-12.493z" fill="#68abe9"/>
<path d="m24.2217 177.256s38.4462-4.239 64.6324-4.007c26.1859.231 64.1959 4 64.1959 4l-10.523 68.435-52.3439 12.493-54.9675-12.493z" fill="#0389e7" fill-opacity=".5"/>
<path d="m31.9728 75.6129 26.9049-2.4572 8.3153 185.5113-20.7855-7.968z" fill="var(--color-ink-inverted)" opacity=".4"/>
<g fill="var(--color-ink)">
<path d="m166.018 87.1859-29.1-7.4482-13.857 172.0003 21.825-9.873z" opacity=".4"/>
<path clip-rule="evenodd" d="m134.688 6.04931c2.622-2.02596 6.39-1.54288 8.416 1.0791 2.026 2.62197 1.543 6.38979-1.079 8.41599l-33.119 25.5928c-7.228 5.5854-9.2089 7.2942-10.2917 9.4668-1.0828 2.1727-1.2547 4.7835-1.3623 13.918l-.0694 5.8564c18.6914.3301 35.5314 1.7469 48.2624 3.7139 7.263 1.1221 13.39 2.4538 17.812 3.9404 2.173.7307 4.237 1.5967 5.866 2.669 1.262.8305 4.077 2.9626 4.077 6.6669 0 .0156-.002.0314-.002.0469 0 .016.002.0319.002.0479 0 3.7135-.923 13.4206-2.304 25.8626-1.402 12.621-3.326 28.477-5.419 44.795-4.179 32.563-9.068 67.234-11.851 81.71-.046.237-.109.468-.183.692-.032.175-.072.35-.122.524-1.229 4.292-4.359 7.657-8.069 10.23-3.752 2.601-8.563 4.727-14.062 6.419-11.014 3.389-25.643 5.296-42.3492 5.296-16.706 0-31.3348-1.907-42.3496-5.296-5.4985-1.692-10.3096-3.818-14.0615-6.419-3.71-2.573-6.8402-5.938-8.0693-10.23-.0387-.135-.0707-.271-.0987-.406-.0925-.26-.1669-.531-.2207-.81-2.783-14.476-7.674-49.147-11.8545-81.71-2.0948-16.318-4.01971-32.173-5.42185-44.794-1.3822-12.442-2.30567-22.1498-2.30567-25.8636.00001-.4033.04361-.7963.12598-1.1748.47348-3.0438 2.86076-4.8407 3.99414-5.5869 1.6287-1.0723 3.693-1.9383 5.8662-2.669 4.4217-1.4866 10.5486-2.8183 17.8115-3.9404 13.7816-2.1293 32.378-3.6122 52.9258-3.7715l.0703-5.9404c.094-7.9734.0242-13.918 2.6211-19.1289 2.597-5.2108 7.3849-8.7338 13.694-13.6094zm-45.8579 169.74969c-19.504 0-35.8061.996-47.2246 1.991-5.7088.497-10.196.994-13.25 1.366-.8757.106-1.6335.203-2.2686.286 3.2005 23.744 6.4063 45.645 8.4971 56.933l.251 1.336c.0354.102.0696.205.0996.309.2702.943 1.2026 2.441 3.7636 4.217 2.5198 1.747 6.1902 3.456 11.0284 4.945 9.6594 2.972 23.1288 4.81 39.1142 4.81 15.9852 0 29.4552-1.838 39.1142-4.81 4.838-1.489 8.509-3.198 11.028-4.945 2.561-1.776 3.494-3.274 3.764-4.217.022-.076.045-.151.069-.225.003-.013.006-.027.008-.041 2.079-10.812 5.418-33.561 8.753-58.312-.636-.083-1.395-.179-2.272-.286-3.054-.372-7.542-.869-13.25-1.366-11.419-.995-27.721-1.991-47.2249-1.991zm-73.0235-82.4509c.3681 4.4633 1.0167 10.8969 1.8907 18.7639 1.3931 12.541 3.3106 28.331 5.4004 44.608.7587 5.91 1.5387 11.876 2.3242 17.767.6532-.086 1.4316-.185 2.3301-.294 3.1063-.378 7.6495-.881 13.4189-1.384 10.5805-.922 25.2901-1.842 42.8271-1.988l.8379-71.1193c-17.783-.1251-35.3045-1.0712-48.7177-2.5948-7.1949-.8172-13.2978-1.8095-17.6455-2.957-.9507-.2509-1.8445-.5188-2.6661-.8018zm146.0444.0147c-.81.2772-1.689.5407-2.622.7871-4.348 1.1475-10.45 2.1398-17.645 2.957-12.413 1.41-28.346 2.3238-44.7471 2.5518l-.8389 71.1843c16.509.205 30.384 1.086 40.491 1.966 5.77.503 10.313 1.006 13.419 1.384.9.109 1.68.208 2.334.294.785-5.891 1.566-11.857 2.324-17.767 2.089-16.277 4.005-32.067 5.397-44.608.872-7.858 1.519-14.2865 1.888-18.7492zm-76.7983-12.042c-20.0274.1645-37.9999 1.6161-51.1162 3.6426-7.0056 1.0824-12.4271 2.2988-15.9853 3.4951-.1716.0577-.3364.1141-.4942.1699.6524.2235 1.4146.4549 2.292.6865 3.999 1.0555 9.8205 2.0164 16.9326 2.8243 13.2071 1.5001 30.5582 2.44 48.2139 2.5634zm11.8438 13.3369c16.2245-.2291 31.9375-1.1344 44.1235-2.5185 7.112-.8079 12.933-1.7688 16.932-2.8243.878-.2315 1.64-.4629 2.292-.6865-.157-.0557-.322-.1123-.493-.1699-3.558-1.1963-8.98-2.4127-15.985-3.4951-12.148-1.8768-28.46-3.2601-46.7133-3.585z" fill-rule="evenodd"/>
</g>
</svg>
<strong class="txt-medium overflow-ellipsis margin-none">Fizzy</strong>
<% end %>
<%= tag.dialog class:"fizzy-dialog filter popup popup--animated panel",
data: {
action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
controller: "filter navigable-list",
dialog_target: "dialog",
navigable_list_focus_on_selection_value: false,
navigable_list_actionable_items_value: true } do %>
<div class="flex gap">
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
<button class="fizzy-dialog__close btn borderless txt-small" data-action="dialog#close">
<%= icon_tag "close" %>
<span class="for-screen-reader">Close menu</span>
</button>
</div>
<%= render "events/filter/header" %>
<% if Current.user.collections.many? %>
<ul class="popup__list">
<li class="popup__group-title">Collections</li>
<%= render "cards/index/collections_filter", filter: filter %>
</ul>
<% end %>
<ul class="popup__list">
<li class="popup__group-title">Tags</li>
<%= render partial: "events/filter/tag", collection: Tag.all.alphabetically, as: :tag %>
</ul>
<ul class="popup__list">
<li class="popup__group-title">People</li>
<%= render partial: "events/filter/user", collection: User.active.alphabetically, as: :user %>
</ul>
<ul class="popup__list">
<li class="popup__group-title">Jump to…</li>
<%= render partial: "events/filter/places" %>
</ul>
<% if platform.desktop? %>
<footer class="popup__footer">
Press <kbd class="kbd"><%= hotkey_label(["ctrl", "J"]) -%></kbd> anytime to open this, <kbd class="kbd">esc</kbd> to close, <kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> to move, <kbd class="kbd">enter</kbd> to navigate, <kbd class="kbd">SHIFT+ENTER</kbd> to select.
</footer>
<% end %>
<% end %>
</div>
</header>
</nav>
+37 -24
View File
@@ -1,28 +1,41 @@
<nav class="header">
<header class="center">
<div class="max-width"
data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= render "filters/menu/button" %>
<nav class="header" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
<%= render "filters/menu/button" %>
<%= tag.dialog class: "fizzy-dialog filter margin-block-start-half popup popup--animated panel flex-column align-start",
<%= tag.dialog class: "fizzy-menu filter popup popup--animated panel margin-block-start-half",
data: {
action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
controller: "filter navigable-list",
dialog_target: "dialog",
navigable_list_focus_on_selection_value: false,
navigable_list_actionable_items_value: true } do %>
<div class="flex gap">
<%= text_field_tag :search, nil,
type: "search",
role: "combobox",
placeholder: "Filter…",
class: "input input--transparent txt-small",
autofocus: true,
autocorrect: "off",
autocomplete: "off",
aria: { activedescendant: "" },
data: {
action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
controller: "filter navigable-list",
dialog_target: "dialog",
navigable_list_focus_on_selection_value: false,
navigable_list_actionable_items_value: true } do %>
<%= text_field_tag :search, nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
<%= render "filters/menu/header" %>
<%= render "filters/menu/custom", user_filtering: user_filtering %>
<%= render "filters/menu/collections", user_filtering: user_filtering %>
<%= render "filters/menu/tags", user_filtering: user_filtering %>
<%= render "filters/menu/users", user_filtering: user_filtering %>
<%= render "filters/menu/places", user_filtering: user_filtering %>
<%= render "filters/menu/shortcut_notice" %>
<% end %>
"1p-ignore": "true",
filter_target: "input",
navigable_list_target: "input",
action: "input->filter#filter" } %>
<button class="fizzy-menu__close btn borderless txt-small" data-action="dialog#close">
<%= icon_tag "close" %>
<span class="for-screen-reader">Close menu</span>
</button>
</div>
</header>
<%= render "filters/menu/hotkeys" %>
<%= render "filters/menu/custom", user_filtering: user_filtering %>
<%= render "filters/menu/collections", user_filtering: user_filtering %>
<%= render "filters/menu/tags", user_filtering: user_filtering %>
<%= render "filters/menu/users", user_filtering: user_filtering %>
<%= render "filters/menu/places", user_filtering: user_filtering %>
<%= render "filters/menu/shortcut_notice" %>
<% end %>
</nav>
+1 -1
View File
@@ -1,4 +1,4 @@
<%= tag.button class:"fizzy-menu input input--select center flex-inline align-center txt-normal",
<%= tag.button class:"fizzy-menu-trigger input input--select center flex-inline align-center txt-normal",
data: {
action: "click->dialog#open:stop keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
controller: "hotkey" } do %>
-37
View File
@@ -1,37 +0,0 @@
<div class="fizzy-menu__hotkeys">
<%= link_to root_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.1@document->hotkey#click keydown.shift+1@document->hotkey#click" } do %>
<%= icon_tag "home" %>
<span>Home</span>
<kbd>1</kbd>
<% end %>
<%= link_to cards_path(assignee_ids: [Current.user.id]), class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.2@document->hotkey#click keydown.shift+2@document->hotkey#click" } do %>
<%= icon_tag "clipboard" %>
<span>Assigned to me</span>
<kbd>2</kbd>
<% end %>
<%= link_to cards_path(creator_ids: [Current.user.id]), class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.3@document->hotkey#click keydown.shift+3@document->hotkey#click" } do %>
<%= icon_tag "person-add" %>
<span>Added by me</span>
<kbd>3</kbd>
<% end %>
<%= link_to new_collection_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.4@document->hotkey#click keydown.shift+4@document->hotkey#click" } do %>
<%= icon_tag "collection-add" %>
<span>New Collection</span>
<kbd>4</kbd>
<% end %>
<%= link_to notifications_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.5@document->hotkey#click keydown.shift+5@document->hotkey#click" } do %>
<%= icon_tag "bell" %>
<span>Notifications</span>
<kbd>5</kbd>
<% end %>
<%= link_to account_settings_path, class: "popup__group btn borderless", data: { filter_target: "item", navigable_list_target: "item", controller: "hotkey", action: "keydown.6@document->hotkey#click keydown.shift+6@document->hotkey#click" } do %>
<%= icon_tag "settings" %>
<span>Account <span class="visually-hidden">Settings</span></span>
<kbd>6</kbd>
<% end %>
</div>
+8
View File
@@ -0,0 +1,8 @@
<div class="fizzy-menu__hotkeys" role="list">
<%= filter_hotkey_link "Home", root_path, 1, "home" %>
<%= filter_hotkey_link "Assigned to me", cards_path(assignee_ids: [Current.user.id]), 2, "clipboard" %>
<%= filter_hotkey_link "Added by me", cards_path(creator_ids: [Current.user.id]), 3, "person-add" %>
<%= filter_hotkey_link "New Collection", new_collection_path, 4, "collection-add" %>
<%= filter_hotkey_link "Notifications", notifications_path, 5, "bell" %>
<%= filter_hotkey_link "Account #{tag.span("Settings", class: "visually-hidden")}", account_settings_path, 6, "settings" %>
</div>
@@ -1,14 +1,14 @@
<% clear_url_path = user_filtering.self_filter_path(user_filtering.as_params.except(:collection_ids)) %>
<% if Current.user.collections.one? %>
<%= link_to clear_url_path, class: "popup__group", data: { filter_target: "item", navigable_list_target: "item" } do %>
<%= link_to clear_url_path, class: "popup__group", id: "filter-collection-init", data: { filter_target: "item", navigable_list_target: "item" } do %>
<%= tag.div class: "popup__item btn" do %>
<span class="overflow-ellipsis"><%= Current.user.collections.first.name %></span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> </span>
<% end %>
<% end %>
<% elsif Current.user.collections.many? %>
<div class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-all">
<%= link_to clear_url_path, class: "btn txt-xx-small flex-item-no-shrink" do %>
<%= check_box_tag "filter_collections", nil, user_filtering.collections.blank?, class: "form-checkbox" %>
<span class="for-screen-reader">
@@ -21,5 +21,5 @@
<span class="overflow-ellipsis">All collections</span>
<span class="txt-ink translucent flex-item-no-shrink flex-item-justify-end"><span class="txt-x-small txt-uppercase">GO TO</span> </span>
<% end %>
</div>
</li>
<% end %>
@@ -1,4 +1,4 @@
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="filter-collection-<%= collection.id %>">
<label class="btn txt-xx-small">
<%= form.check_box "collection_ids[]", {
checked: user_filtering.filter.collections.include?(collection),
@@ -1,4 +1,4 @@
<li class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item">
<li class="popup__group gap-half overflow-ellipsis" data-navigable-list-target="item" data-filter-target="item" id="filter-custom-create">
<%= link_to cards_path(expand_all: true), class: "btn popup__new popup__item" do %>
<%= icon_tag "bookmark" %>
<div class="flex flex-column txt-tight-lines min-width txt-small">
@@ -1,4 +1,4 @@
<li class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__group gap-half overflow-ellipsis" data-filter-target="item" data-navigable-list-target="item" id="filter-custom-<%= filter.id %>">
<%= link_to cards_path(filter_id: filter.id), class: "btn popup__new popup__item" do %>
<%= icon_tag "bookmark" %>
<div class="flex flex-column txt-tight-lines min-width txt-small">
+1 -1
View File
@@ -1,4 +1,4 @@
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-tag-#{tag.id}" %>">
<%= icon_tag "tag" %>
<%= link_to cards_path(tag_ids: [tag]), class: "popup__item btn" do %>
<span class="overflow-ellipsis"><%= tag.title %> (<%= tag.cards_count %>)</span>
+1 -1
View File
@@ -1,4 +1,4 @@
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item">
<li class="popup__group" data-filter-target="item" data-navigable-list-target="item" id="<%= "filter-user-#{user.id}" %>">
<%= icon_tag "person" %>
<%= link_to user, class: "popup__item btn" do %>
<span class="overflow-ellipsis"><%= user.name %></span>