Skip to content

Flatten every form button, not only the submit input - #53

Merged
Fivell merged 1 commit into
masterfrom
fix/form-button-style
Oct 2, 2026
Merged

Fivell merged 1 commit into
masterfrom
fix/form-button-style

Conversation

@Fivell

@Fivell Fivell commented Oct 2, 2026

Copy link
Copy Markdown
Member

The defect

A custom button placed in an ActiveAdmin form keeps ActiveAdmin's stock
gradient, bevelled border and text shadow, sitting next to a flat themed
submit button. Reported in #25.

Cause

ActiveAdmin applies its dark-button mixin to three form elements at once:

form { input[type=submit], input[type=button], button { @include dark-button; } }

The theme's flat override named only form input[type=submit], plus the very
narrow fieldset.actions > ol > li.button_action > button. Anything else —
a plain <button>, an <input type="button"> — fell through to ActiveAdmin's
rule.

The change

One selector list, mirroring ActiveAdmin's own:

-form input[type=submit], a.button, a:link.button, a:visited.button, fieldset.actions > ol > li.button_action > button {
+form input[type=submit], form input[type=button], form button, a.button, a:link.button, a:visited.button {

The button_action selector is dropped because it is a strict subset of
form button, which now wins by source order.

Buttons outside a form are deliberately left alone: those are the dropdown
and table-tool controls the theme styles separately, not what the report is
about.

Before / after

A form whose fieldset.actions holds the normal submit next to a
<button type="button"> and an <input type="button">, neither carrying a
theme class.

Before:

before

After:

after

Screenshots are taken against a generated ActiveAdmin 3.5 admin. Of sixteen
scenarios shot across the two revisions, only the two form cases changed;
menu, title bar, index table, table tools, pagination, filter sidebar and
show page are byte-identical.

rake css passes: 8 override configurations compile clean, 6 bad ones
rejected.

Fixes #25

ActiveAdmin applies its gradient `dark-button` mixin to three form
elements at once:

    form { input[type=submit], input[type=button], button { ... } }

The theme's flat override named only `input[type=submit]`, plus the very
narrow `fieldset.actions > ol > li.button_action > button`. A custom
`<button>` or `<input type="button">` placed in a form therefore fell
through to ActiveAdmin's rule and kept the gradient, the bevelled border
and the text shadow, next to a flat submit button.

Mirror ActiveAdmin's own selector list so the override covers the same
three elements. The narrow `button_action` selector is dropped: it is a
strict subset of `form button`, which now wins by source order.

Buttons outside a form are left alone on purpose — those are the
dropdown and table-tool controls the theme styles deliberately
elsewhere, not the ones the report is about.

Fixes #25
@Fivell
Fivell merged commit 9ff1d69 into master Oct 2, 2026
2 checks passed
Fivell added a commit to yeti-switch/active_admin_theme that referenced this pull request Oct 2, 2026
Brings in activeadmin-plugins#53: the flat button rule now covers form input[type=button] and
form button, not only the submit input. No conflict — this branch does not
touch that selector.
@Fivell
Fivell deleted the fix/form-button-style branch October 2, 2026 17:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Form buttons style bug

1 participant