Prep Tailwind CSS migration part 6#8139
Merged
Merged
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8139 +/- ##
==========================================
- Coverage 99.05% 99.04% -0.01%
==========================================
Files 184 182 -2
Lines 4746 4721 -25
==========================================
- Hits 4701 4676 -25
Misses 45 45 ☔ View full report in Codecov by Sentry. |
This is no longer needed now since we removed the initial selector that added default padding.
Since this adds top and bottom padding, this would be the equal spacing as using gap-6 but using spacing around the container. The overall spacing here is nicer and easier to call out the grouped inputs.
We need more variety for UI testing so some of these filters instead of select's use check boxes instead.
Use the label class here so when using check boxes for a filter, this only applies to the filter label (group), not the label for each checkbox.
This changes "Login" text to "Sign in". We have other places in the locale (links) where we actually use "Sign in" so we should stay consistent. Also apparent with "Log out" instead of "Sign out". Devise is consistent with using both "sign in/out" in its messages so we should be consistent as well.
Using latest value per HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/main/src/index.html
c1d18af to
809f812
Compare
This is helpful when testing the local dev app on a mobile device.
This resolves a few issues with date inputs on Mac and iOS. Defaults to left alignment (inherit). tailwindlabs/tailwindcss-forms#144 Removes top and bottom padding on each of the datetime edit fields so with this the field will now match the same height as other inputs. tailwindlabs/tailwindcss-forms#146 tailwindlabs/tailwindcss-forms#95 tailwindlabs/tailwindcss-forms#109
This is redundant with the page title above it. Common to see admins without this redundant title. This makes it better as a default and also to accommodate others that want to customize the layout.
809f812 to
22a3c20
Compare
The form actions styles overlapped with the Devise page updates so I've applied these here. The login button (and for other Devise pages) is full width but because of Formtastic's semantic structure, the actions were laid out horizontally using flex. We only apply flex now if there are multiple actions. This way, on the Devise pages, the action can go full width.
I prefer the original input+label layout but since Formtastic enforces the nested input within label which we already have styled (despite it being more problematic) this now looks much better.
d80c383 to
f63a9b4
Compare
I've decided that there is no point in keeping this and with the move to making the admin more mobile friendly, its just all around easier to replace these with div's and Tailwind classes for the right columns at the right viewport.
f63a9b4 to
0813d25
Compare
Now just a simple div component with a default CSS class. The content provided can be anything now and isn't built using html_safe, unless given in that form.
Even if it's a single column, we always want to use grid here so we can apply the gap if a sidebar is added which is conditional.
Easiest to just space these out at the container level for a suitable default.
This sets the list to a min full width which will at least match the size of the button if the list content is shorter which is often the case with our defaults. Add a larger shadow to separate popup from content underneath. Add text color styles to offset the default anchor color.
This includes an update to a feature test because it was using an old CSS class name for a negated test.
This no longer works since we removed jQuery UI. Our upgrade guide will call out that has-many-sortable isn't implemented in v4 and will require community contribution.
This has been fully migrated now. From here we can remove sass all together.
48ef9c3 to
f5d8fe9
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This migrates all the form styles, including Devise templates and has-many forms, to TailwindCSS. The viewport meta tag is now set for the logged out layout file for mobile support. This also removes the default
panelfrom the show pageattributes_tablefor easier customization. Thecolumnscomponent has been removed.After this change, we will be able to remove the old SCSS files and sassc-rails gem.