Experimental/feature/remove flowbite by tagliala · Pull Request #8953 · activeadmin/activeadmin

tagliala · 2026-02-25T16:49:36Z

Remove the Flowbite dependency (~80KB) and replace its three JS
components (dropdown, drawer, modal) with focused, minimal modules
that follow the existing Rails.delegate event delegation pattern.

Dropdown positioning uses @floating-ui/dom (~22KB vendored ESM).
Drawer and modal are pure JS with CSS transitions, no external
dependencies.

Data attributes are preserved (data-dropdown-toggle, data-drawer-show,
data-modal-show, data-modal-hide) for backward compatibility with
existing user templates and batch action partials.

Modal backdrop click is detected via event.target === activeModal
since the backdrop div sits behind the modal container in z-order.

Add app/javascript/active_admin/features/dropdown.js
Add app/javascript/active_admin/features/drawer.js
Add app/javascript/active_admin/features/modal.js
Vendor @floating-ui/dom@1.7.5 as self-contained ESM bundle
Remove flowbite from package.json, importmap, vendor, content scan
Update dependencies.rake to bundle @floating-ui/dom
Add features/javascript_components.feature with 7 @javascript scenarios
covering dropdown, modal open/close, Escape key, and backdrop click
Add features/step_definitions/component_steps.rb with supporting steps

codecov · 2026-02-25T16:53:28Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.08%. Comparing base (8fb982f) to head (654570a).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #8953   +/-   ##
=======================================
  Coverage   99.08%   99.08%           
=======================================
  Files         139      140    +1     
  Lines        4046     4059   +13     
=======================================
+ Hits         4009     4022   +13     
  Misses         37       37

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

tagliala · 2026-02-25T17:12:26Z

to be dropped

Copilot

Pull request overview

This PR removes the Flowbite dependency (~80KB) from Active Admin and replaces its three JS components (dropdown, drawer, modal) with focused, minimal modules using @floating-ui/dom (~22KB vendored ESM) for dropdown positioning and pure JS/CSS for drawer and modal. Data attributes are preserved for backward compatibility.

Changes:

Replace Flowbite with three new JS feature modules (dropdown.js, drawer.js, modal.js) and vendor @floating-ui/dom + @floating-ui/core ESM bundles
Remove all Flowbite-related dependencies from package.json, yarn.lock, config/importmap.rb, vendor/javascript/, and Tailwind content scanning
Add Cucumber feature tests and a planning document, and update documentation references

Reviewed changes

Copilot reviewed 14 out of 19 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
app/javascript/active_admin/features/dropdown.js	New dropdown module using Floating UI for positioning
app/javascript/active_admin/features/drawer.js	New pure-JS drawer module with CSS transitions
app/javascript/active_admin/features/modal.js	New pure-JS modal module with backdrop and Escape handling
app/javascript/active_admin.js	Replace flowbite import with new feature module imports
vendor/javascript/@floating-ui--core.js	Vendored ESM bundle for `@floating-ui/core`
vendor/javascript/@floating-ui--dom.js	Vendored ESM bundle for `@floating-ui/dom`
vendor/javascript/floating-ui--dom.js	Vendored UMD bundle (appears unused by importmap)
vendor/javascript/flowbite.js	Deleted Flowbite vendor file
config/importmap.rb	Replace flowbite pin with `@floating-ui/core` and `@floating-ui/dom` pins
package.json	Replace flowbite dependency with `@floating-ui/dom`
yarn.lock	Updated lockfile reflecting dependency changes
tasks/dependencies.rake	Updated vendor task to copy floating-ui instead of flowbite
lib/generators/active_admin/assets/templates/tailwind.config.js	Remove flowbite.js from Tailwind content scanning
features/javascript_components.feature	New Cucumber feature with 7 scenarios for JS components
features/step_definitions/component_steps.rb	New step definitions for component interaction
docs/plan-remove-flowbite.md	Planning document for the Flowbite removal
UPGRADING.md	Update batch action modal references
README.md	Replace Flowbite credit with Floating UI
.github/copilot-instructions.md	Update technology stack documentation

Copilot · 2026-03-06T09:35:45Z

+## Summary of data attribute changes
+
+| Current (Flowbite) | New (ActiveAdmin) | Component |
+|---|---|---|
+| `data-dropdown-toggle` | `data-aa-dropdown-toggle` | Dropdown |
+| `data-dropdown-placement` | `data-aa-dropdown-placement` | Dropdown |
+| `data-dropdown-offset-distance` | `data-aa-dropdown-offset` | Dropdown |
+| `data-drawer-target` | `data-aa-drawer-target` | Drawer |
+| `data-drawer-show` | `data-aa-drawer-show` | Drawer |
+| `data-modal-target` | `data-aa-modal-target` | Modal |
+| `data-modal-show` | `data-aa-modal-show` | Modal |
+| `data-modal-hide` | `data-aa-modal-hide` | Modal |
+
+> **Note**: Namespacing with `aa-` prevents conflicts with other libraries users may have. Alternatively, keep short names without prefix — decision needed.


The plan document states that data attributes will be renamed with an aa- prefix (e.g., data-aa-dropdown-toggle, data-aa-modal-show), but the actual implementation keeps the original Flowbite attribute names (data-dropdown-toggle, data-modal-show, etc.) for backward compatibility. The "Summary of data attribute changes" table is now inaccurate and will confuse anyone reading this planning doc. Either update the table to reflect the decision to keep original names, or add a note that the aa- prefix was not adopted in favor of backward compatibility.

Copilot · 2026-03-06T20:23:29Z

@tagliala I've opened a new pull request, #8961, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2026-03-06T23:25:43Z

@tagliala I've opened a new pull request, #8963, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot

Pull request overview

Copilot reviewed 15 out of 19 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 15 out of 19 changed files in this pull request and generated 1 comment.

Copilot · 2026-03-08T13:25:47Z

+}
+
+const escapeKey = function(event) {
+  if (event.key === "Escape") { close() }


The escapeKey handler in drawer.js, modal.js, and dropdown.js all listen on document for keydown with event.key === "Escape". When a modal is open, pressing Escape will fire all three handlers — the modal closes, the drawer closes (if any), and the dropdown closes (if any). While these components are unlikely to be open simultaneously in normal usage, the lack of event.stopPropagation() or any coordination means a single Escape press leaks through all modules. This could matter if a modal were opened from within a dropdown action without first closing the dropdown. Consider having the modal and drawer escapeKey handlers call event.stopPropagation() (or at least check that their respective component is active before stopping propagation) to prevent unintended cascade.

Suggested change

if (event.key === "Escape") { close() }

if (!activeModal) { return }

if (event.key === "Escape") {

event.stopPropagation()

close()

}

Remove the Flowbite dependency (~80KB) and replace its three JS components (dropdown, drawer, modal) with focused, minimal modules that follow the existing Rails.delegate event delegation pattern. Dropdown positioning uses @floating-ui/dom (~22KB vendored ESM). Drawer and modal are pure JS with CSS transitions, no external dependencies. Data attributes are preserved (data-dropdown-toggle, data-drawer-show, data-modal-show, data-modal-hide) for backward compatibility with existing user templates and batch action partials. Modal backdrop click is detected via `event.target === activeModal` since the backdrop div sits behind the modal container in z-order. - Add app/javascript/active_admin/features/dropdown.js - Add app/javascript/active_admin/features/drawer.js - Add app/javascript/active_admin/features/modal.js - Vendor @floating-ui/dom@1.7.5 as self-contained ESM bundle - Remove flowbite from package.json, importmap, vendor, content scan - Update dependencies.rake to bundle `@floating-ui/dom` - Add features/javascript_components.feature with 7 @javascript scenarios covering dropdown, modal open/close, Escape key, and backdrop click - Add features/step_definitions/component_steps.rb with supporting steps

tagliala · 2026-03-08T19:06:42Z

+  drawer.setAttribute("aria-modal", "true")
+  drawer.setAttribute("role", "dialog")
+
+  document.body.classList.add("overflow-hidden", "xl:overflow-auto")


Copilot:

Short answer: xl:overflow-auto applies overflow-auto only at the xl breakpoint and up, whereas applying overflow on the body would affect every viewport size. It's a responsive change to avoid global side-effects on smaller screens.

Why this is done (concise):

Breakpoint scope: xl:overflow-auto → only on extra‑large screens; body { overflow: auto } → always.

Prevents unwanted scroll behavior on mobile: a global body overflow can create double scrollbars or allow background scrolling when modals/drawers are shown.

Keeps smaller-screen UX native (touch/scroll) while enabling an internal scroller for large desktop layouts (e.g., fixed sidebars, content columns).

Helps contain scrollable regions (drawers, dropdowns, modals) to a specific layout at large widths without breaking responsive stacking at smaller widths.

I think this does not apply here, because we have a backdrop.

There is actually a difference in behavior, but it only happens if you are at small window size, you open the drawer, you resize the window to xl screen, you try to scroll

Copilot

Pull request overview

Copilot reviewed 15 out of 19 changed files in this pull request and generated 2 comments.

tagliala force-pushed the experimental/feature/remove-flowbite branch from e18afaa to e09b0c4 Compare February 25, 2026 17:11

tagliala added the do not merge A PR will have a failed check until this label is removed label Feb 25, 2026

tagliala commented Feb 25, 2026

View reviewed changes

Comment thread docs/plan-remove-flowbite.md

Copy link
Copy Markdown

Contributor Author

tagliala Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to be dropped

tagliala force-pushed the experimental/feature/remove-flowbite branch from e09b0c4 to 707648f Compare February 25, 2026 17:14

tagliala force-pushed the experimental/feature/remove-flowbite branch from 707648f to f1b9a55 Compare March 5, 2026 10:27

tagliala marked this pull request as ready for review March 5, 2026 10:28

tagliala marked this pull request as draft March 5, 2026 10:28

tagliala force-pushed the experimental/feature/remove-flowbite branch from f1b9a55 to fcf631e Compare March 5, 2026 12:52

tagliala requested a review from Copilot March 6, 2026 09:28

Copilot started reviewing on behalf of tagliala March 6, 2026 09:28 View session

Copilot AI reviewed Mar 6, 2026

View reviewed changes

Copilot AI mentioned this pull request Mar 6, 2026

Clarify why Cucumber tests pass for JS component steps #8961

Closed

tagliala force-pushed the experimental/feature/remove-flowbite branch from e31e55a to 345a2b1 Compare March 6, 2026 23:16

Copilot AI mentioned this pull request Mar 6, 2026

Fix dependencies rake task to vendor correct ESM files for importmap #8963

Merged

tagliala force-pushed the experimental/feature/remove-flowbite branch 4 times, most recently from 1ba25c0 to c5fa716 Compare March 7, 2026 16:52

tagliala requested a review from Copilot March 7, 2026 20:17

Copilot started reviewing on behalf of tagliala March 7, 2026 20:18 View session

Copilot AI reviewed Mar 7, 2026

View reviewed changes

tagliala force-pushed the experimental/feature/remove-flowbite branch 4 times, most recently from 96f1c7b to cf46523 Compare March 8, 2026 13:14

tagliala requested a review from Copilot March 8, 2026 13:21

Copilot started reviewing on behalf of tagliala March 8, 2026 13:21 View session

Copilot AI reviewed Mar 8, 2026

View reviewed changes

tagliala force-pushed the experimental/feature/remove-flowbite branch from cf46523 to d73214e Compare March 8, 2026 18:56

tagliala force-pushed the experimental/feature/remove-flowbite branch from d73214e to 6442b08 Compare March 8, 2026 18:57

tagliala commented Mar 8, 2026

View reviewed changes

tagliala requested a review from Copilot March 8, 2026 19:07

Copilot started reviewing on behalf of tagliala March 8, 2026 19:08 View session

Copilot AI reviewed Mar 8, 2026

View reviewed changes

Comment thread config/importmap.rb

Comment thread features/step_definitions/component_steps.rb

cleanup

654570a

tagliala force-pushed the experimental/feature/remove-flowbite branch from e11df66 to 654570a Compare March 8, 2026 23:14

Uh oh!

Conversation

tagliala commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

tagliala Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Mar 6, 2026

Uh oh!

Copilot AI commented Mar 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

tagliala Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tagliala commented Feb 25, 2026 •

edited

Loading

codecov bot commented Feb 25, 2026 •

edited

Loading

tagliala Mar 8, 2026 •

edited

Loading