Skip to content

Prep Tailwind CSS migration part 7#8155

Merged
javierjulio merged 13 commits into
masterfrom
tailwind-part-7
Dec 6, 2023
Merged

Prep Tailwind CSS migration part 7#8155
javierjulio merged 13 commits into
masterfrom
tailwind-part-7

Conversation

@javierjulio

@javierjulio javierjulio commented Dec 3, 2023

Copy link
Copy Markdown
Member

This updates component styles after testing in both desktop and mobile. The Component class will add a default CSS class name only if one is provided through the default_class_name protected method, otherwise there is no default. Arbre v2 will no longer add a default class name either. This also requires Arbre v2+ now. Flash messages has been extracted into a partial since it's used in both Devise and ActiveAdmin templates. This bumps Flowbite to 2.2.0 and addresses a breaking change with modal init.

When publishing our NPM package, it's critical that the root plugin.js file is included otherwise it's not there (did a dry-run). From testing, we'll need to rely on plugin.js from the NPM package as the gem path trick doesn't work in the wild.

@javierjulio javierjulio self-assigned this Dec 3, 2023
@codecov

codecov Bot commented Dec 4, 2023

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (8a64a5e) 99.00% compared to head (8369ffc) 99.00%.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #8155   +/-   ##
=======================================
  Coverage   99.00%   99.00%           
=======================================
  Files         175      175           
  Lines        4603     4625   +22     
=======================================
+ Hits         4557     4579   +22     
  Misses         46       46           

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

@javierjulio javierjulio force-pushed the tailwind-part-7 branch 3 times, most recently from f278e2b to c2fc09b Compare December 4, 2023 23:27
Adds new ids for main and user menus.
Tested that this file would not be included by default by running `npm publish --dry-run` which lists the files in the tarball contents. After updating the files array and rerunning the command, the file is now included.
This updates our Component base class to only apply a default CSS class name if present.

This also resolves the issue around the switch_index_view feature test so we can re-enable that.
If this div element is there an empty, it will affect the flex layout since we use gap property to control spacing at the parent level.
Still some problems with the width defaulting to the size of the button when considering desktop and mobile viewports. This is the best we can do for now. One consideration is we can apply a custom class for batch actions and (table) actions so we can set a default width. That will render a bit nicer and more inline with how frameworks style dropdowns.
The comments component is now just a plain div component and no longer relies on panel. The styles are further cleaned up.
By default Formtastic disables form client side validation with novalidate="novalidate" boolean attribute, regardless if we set input html with required boolean.
This updates the icons used as well. The notice type now uses a checkmark, the alert type uses an info icon and the error type uses the exclamation mark icon.

Added a flash_error CSS class for error type since used by Devise and a few places in our code base too.

This simplifies the layout spec as it was failing intermittently with the flash_messages partial extraction. Since we only have 2 unit tests for a simple method. We don't need to create a whole admin app. The lang attributes test is safe to remove as we have an integration test (cucumber) to ensure it works as expected.

Updates the page base test to add and remove the necessary constant so we clean up properly.
Also adds overflow hidden to for the rounded corners. We'll have to readjust.
This now requires Arbre v2 as the minimum since a key change was a bad commit around handling empty attributes. We can now use an empty attributes safely as it will be output to HTML as expected. This act as boolean/presence attributes.
@javierjulio javierjulio merged commit ec2a75e into master Dec 6, 2023
@javierjulio javierjulio deleted the tailwind-part-7 branch December 6, 2023 22:10
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.

1 participant