Skip to content

Make small icon buttons square (32px) instead of 44px wide #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thomasgallagher merged 2 commits into from
Jun 7, 2026
Merged

Make small icon buttons square (32px) instead of 44px wide #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
360286d
Make small icon buttons square (32px) instead of 44px wide
thomasgallagher Jun 7, 2026
126c791
Use small icon button for panel close
thomasgallagher Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .claude/skills/layered-ui-rails/references/CSS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,8 @@ Always combine the `l-ui-button` base class with a colour modifier (e.g. `l-ui-b
Icon variants (combine with the `l-ui-button` base):

```
.l-ui-button--icon Icon-only button (fixed size, no text)
.l-ui-button--icon Icon-only button (44px square, no text)
Add --small (l-ui-button--icon l-ui-button--small) for a 32px square icon button
.l-ui-button--navigation-toggle Mobile navigation toggle
```

Expand Down
5 changes: 5 additions & 0 deletions app/assets/tailwind/layered_ui/engine.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,11 @@
text-xs;
}

.l-ui-button--icon.l-ui-button--small {
@apply min-w-[32px]
p-1.5;
}

.l-ui-button:disabled {
@apply opacity-50
cursor-not-allowed;
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/layered_ui/_panel.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

<div class="l-ui-panel__header-actions">
<button type="button"
class="l-ui-button l-ui-button--primary l-ui-button--icon"
class="l-ui-button l-ui-button--primary l-ui-button--icon l-ui-button--small"
aria-label="Hide panel"
aria-controls="panel"
title="Toggle panel (Ctrl+i / ⌘i)"
Expand Down
30 changes: 30 additions & 0 deletions test/dummy/app/views/pages/buttons.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,36 @@
</dialog>
</div>

<h2 class="mt-8">Small icon button</h2>

<p class="mt-4">Combine <code>l-ui-button--icon</code> with <code>l-ui-button--small</code> for a compact 32px square icon button, useful in dense areas like panel actions or comment toolbars. The 32px hit area comfortably exceeds the WCAG 2.2 AA 24px target size minimum.</p>

<div class="l-ui-spread mt-4">
<button class="l-ui-button l-ui-button--icon l-ui-button--small" aria-label="Close">
<%= image_tag "layered_ui/icon_close.svg", alt: "", class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true } %>
</button>
<button class="l-ui-button l-ui-button--primary l-ui-button--icon l-ui-button--small" aria-label="Toggle dark mode">
<%= image_tag "layered_ui/icon_moon.svg", alt: "", class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true } %>
</button>
</div>

<div class="mt-6" data-controller="l-ui--modal">
<button class="l-ui-button l-ui-button--outline l-ui-button--small" data-action="l-ui--modal#open">View code</button>
<dialog class="l-ui-modal" data-l-ui--modal-target="dialog" data-action="click->l-ui--modal#closeOnBackdrop" aria-labelledby="modal-buttons-small-icon-heading">
<div class="l-ui-modal__header">
<h3 id="modal-buttons-small-icon-heading">Small icon button</h3>
<button class="l-ui-button l-ui-button--icon" data-action="l-ui--modal#close" aria-label="Close">
<%= image_tag "layered_ui/icon_close.svg", alt: "", class: "l-ui-icon l-ui-icon--sm", aria: { hidden: true } %>
</button>
</div>
<div class="l-ui-modal__body">
<pre class="l-ui-surface"><code>&lt;button class="l-ui-button l-ui-button--icon l-ui-button--small" aria-label="Close"&gt;
&lt;svg class="l-ui-icon l-ui-icon--sm"&gt;...&lt;/svg&gt;
&lt;/button&gt;</code></pre>
</div>
</dialog>
</div>

<h2 class="mt-8">Full width</h2>

<div class="mt-4">
Expand Down
Loading