[4.0][WIP] BS5 JS #31990

dgrammatiko · 2021-01-10T17:54:46Z

Pull Request for Issue # .

Summary of Changes

This PR changes the JS to Bootstrap V5. Although it's a work in progress after d96ee24 all the components are functional so help by testing and pointing out what is BROKEN will be invaluable. Thanks!

Testing Instructions

Check everything backend/front end

What's broken:

[FIXED] Field Modals (the extra buttons for editing/creating new Item in various forms, Modals are mostly ok)
Side by Side Editing com Associations
The Toolbar dropdown buttons have wrong html the dropdown needs to be the next sibling element to the button (who did this? )
[FIXED] Also Multilingual Status broken (empty popup)
Frontend Editing
Please fix Copy Template, Manage Folders and New File modals under System>SiteTemplates>Cassiopeia Details and Files.
Other things that I haven't tested yet

Documentation Changes Required

There is a component that validates what's working at https://github.com/dgrammatiko/bs5/blob/main/BS5Tests.zip This can act as your DEV documentation (also it can act as part of the e2e tests)...

# Conflicts: # administrator/components/com_banners/tmpl/tracks/default.php # layouts/joomla/toolbar/modal.php

ghost · 2021-01-10T20:40:26Z

dgrammatiko thank you

ceford · 2021-01-11T10:07:20Z

This seems a bit short on explanation to be in the Patchtester!

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31990.}

brianteeman · 2021-01-11T10:11:28Z

It's clearly labelled as a work in progress

ghost · 2021-01-11T10:47:51Z

@ceford

wilsonge · 2021-01-11T10:50:32Z

package.json

@@ -56,6 +56,7 @@
    "short-and-sweet": "^1.0.2",
    "skipto": "^2.1.1",
    "tinymce": "^5.6.1",
+    "ttc-bs5": "^1.0.1",


I'll sucker up and ask the question - why your custom build of BS?

Basically I didnt want to swap the bootstrap from 4 to 5 in the main repo. Probably you can have a dependency on the same package with different versions but I have no clue how to do that and it was way easier to work on clean slate than messing around with the rest of the build tools in the main repo. I guess if both JS and CSS are moving to v5 then you can import that and move the building process in the main repo (1 file). FWIW this is just me showcasing that it's not either hard or requiring a month or so to be done no strings attached here (or to put it in another way: I don't mind if the PD closes this PR, if it is already decided to roll with v4, but would be nice to not drag this too long, eg me spending time here instead of finishing the child templates)

wilsonge · 2021-01-11T19:43:44Z

So I just tried a partial migration of the SCSS given the popularity of the origin discussion - branch here: https://github.com/wilsonge/joomla-cms/tree/bs5

So far it's taken over 2 hours to just get the scss to compile with all the deprecations and I have something looking like the above. It's going to take months to migrate things. Various form CSS classes have changed which means it's not just months of core development work. It's additional months after that for extension developers who have worked to get their extensions beta ready to adapt. It also means it's now or never for the 4.x Joomla series.

This is going to be discussed in the production meeting tomorrow. I think it's very very unlikely that we'll use bs5 though

dgrammatiko · 2021-01-11T19:50:51Z

It's going to take months to migrate things

@wilsonge just @extend the replaced classes to bring back the dropped ones. Mark them as deprecated and give it a year for both the Core to adjust but also the Devs (or for the backend keep them here tor all the v4 lifetime). Don't patch (for the time being) the markup... That was my take on the issue, not pure or optimal but totally doable, in few days (sorry can't help here I've dropped SCSS for some time now)

EDIT: The JS part can go even if the SCSS is V4, the classes for all the components are the same and the other change is the data attributes but those are not used for styling. There are some limitations, eg the dropdown in v5 supports, left, right etc but for those the styles are missing (these are new features in v5).

wilsonge · 2021-01-11T20:04:31Z

It's not just the custom select classes - that's just what took most the work for the SCSS to compile - as you say for extension devs I can backport. I improved it again just now by removing the prefix BS was adding to the CSS Vars which adds back most colours. I can probably even fix the fact the entire admin now thinks it's in perpetual mobile view without screwing things up super hard.

But all the elements still don't fit padding/margin wise. For example:

Nothing that can't be fixed. But doing it on every page all over the CMS and for the extension devs is going to be super time consuming

dgrammatiko · 2021-01-11T20:29:12Z

It's the renaming of the padding, margin, etc. Basically the old classes now reflect to the browsers own default styling (the css is referring to other classnames). Also I think they dropped completely the inline forms (wise choice as it's something that's against any sensible best practices) and all forms are basically inline since the multi column... Good times...

wilsonge · 2021-01-11T21:22:51Z

I mean it’s the padding and margins things that will screw up most extension devs. Like it’s not forever and ever but it means going back through every page. It also invalidates any templates people have made compatible already

dgrammatiko · 2021-01-11T21:33:42Z

I'll repeat myself, use extend to bring back the missing classes. Thus not breaking anything and people that want BS5 will have it. The extra baggage can be dropped in a given future date (in 2 years maybe there's a BS6 or BS is totally irrelevant, who knows). @ciar4n what do you think about all these?

ciar4n · 2021-01-11T22:56:28Z

Personally, I would sooner put the work in now and make the jump to BS5. I converted the core views to BS4 for J4 originally and I am pretty sure it only took me an hour or two each day for about a week.

BS5 is a very viable excuse to push the release date out a couple of months.

ciar4n · 2021-01-11T23:32:28Z

Extending classes is a bit messy. My preference would be update the views.

dgrammatiko · 2021-01-11T23:34:46Z

My preference would be update the views.

My preference is NO bootstrap at all 🤣

brianteeman · 2021-01-11T23:57:34Z

isnt the original discussion about bs5 for the site template
everything @wilsonge has done is for the admin

wilsonge · 2021-01-12T01:08:15Z

My stuff covered all 3 clients - installation, admin + site. I just picked screenshots from installation + admin because they looked more broken visually because I can't actually install sample data to show frontend views easily.

The biggest break to my mind right now is two things. First the form group class is removed - they want to use mb-3 or similar going forwards - just utility classes for padding - so all our form styling is way out (possibly fixable with @extends). Second we need to refactor every media query in the system because their scss mixin changed per their docs.

Magnytu2 · 2021-01-12T17:23:08Z

Hello, to support the project. I think a lot of us think you can't miss the bootstrap 5 switch now. Joomla needs to take a step ahead and not stay in the back of the train. I can understand that technically it is complicated. But strategically, choosing Bootstrap 5 would be great for the future of Joomla. I love Joomla!

kawshar · 2021-01-12T17:24:15Z

+1 for BS5 (Y)

dgrammatiko · 2021-01-12T18:15:35Z

ciar4n · 2021-01-12T20:47:22Z

The biggest break to my mind right now is two things. First the form group class is removed - they want to use mb-3 or similar going forwards - just utility classes for padding - so all our form styling is way out (possibly fixable with @extends).

The only reason the .form-group class was removed from BS5 was that it did nothing more than add a bottom margin. It was a duplicated class so its removal makes sense. No reason not to add it back in let's say a system.css (presuming that's still a thing)

Second we need to refactor every media query in the system because their scss mixin changed per their docs.

I haven't examined it closely but seems like nothing more than a find n replace. Maybe I'm missing something.

ciar4n · 2021-01-12T20:49:56Z

I honestly don't think the template developers will have an issue here. If they already override everything they likely will continue doing so. If they don't then the changes are minimal

If there is an overall commitment to this then I'll throw my hat in and commit to help converting the core views.

frostmakk · 2021-01-23T15:04:03Z

Something broken in Joomla Update.
The Pre-Update tab is missing, and Reinstall Joomla core files is missing in Live Update.
Console error: Uncaught ReferenceError: $ is not defined

wilsonge · 2021-01-23T15:49:02Z

You can ignore joomla update - it’s been broken for a few weeks. It’s unrelated to this PR - but is something I need to look into probably with @dgrammatiko

frostmakk · 2021-01-23T15:53:46Z

But it seems ok in the latest nightly build.
?
Edit:
In the latest nightly the pre-update tab and reinstall core is visible. With this PR it is not, so something is different.

dgrammatiko · 2021-01-23T16:02:52Z

@wilsonge I had a PR for that #18912
I'll clean things up and do a PR

frostmakk · 2021-01-23T16:12:18Z

Open Options for whatever.
Console error: Uncaught TypeError: items is null

- Checks for dispose - Checks that we have an array with elements - Add the missing options for scrollspy

dgrammatiko · 2021-01-23T19:05:21Z

Console error: Uncaught TypeError: items is null

Fixed with 43e64a2

Thanks @frostmakk

astridx · 2021-01-23T19:47:04Z

i just run (after 43e64a2) git pull origin pull/31990/head:4.0-dev__BS5, composer i and npm i.
After that I created an contact. While saving the contact, i get the error

Uncaught TypeError: this._menu is undefined
    show http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:129
    toggle http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:125
    _addEventListeners http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:233
    handler http://localhost/joomla-cms4/media/vendor/bootstrap/js/dom-8eef6b5f.js:355
    addHandler http://localhost/joomla-cms4/media/vendor/bootstrap/js/dom-8eef6b5f.js:449
    on http://localhost/joomla-cms4/media/vendor/bootstrap/js/dom-8eef6b5f.js:477
    _addEventListeners http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:230
    Dropdown http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:93
    Dropdown http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:511
    <anonymous> http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:532
    <anonymous> http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:532
    <anonymous> http://localhost/joomla-cms4/media/vendor/bootstrap/js/dropdown.es6.js?dc7caea91fbb3738e28bbb84ba49f1d7:523

# Conflicts: # package-lock.json # package.json

dgrammatiko · 2021-01-23T20:58:47Z

After that I created an contact. While saving the contact, i get the error

@astridx should been fixed with e620922

Thanks

astridx · 2021-01-23T22:06:01Z

@dgrammatiko

@astridx should been fixed with e620922

Yes, now it is fine. Thanks.

wilsonge · 2021-01-23T22:16:14Z

I think this is good to go to get testing going. Thankyou very much @dgrammatiko !

brianteeman · 2021-01-23T23:04:36Z

woohoo - thanks

dgrammatiko added 3 commits January 10, 2021 00:14

bs5 js

b761d8a

Init

a357501

Merge remote-tracking branch 'Joomla/4.0-dev' into 4.0-dev__BS5

b55846b

# Conflicts: # administrator/components/com_banners/tmpl/tracks/default.php # layouts/joomla/toolbar/modal.php

joomla-cms-bot added the PR-4.0-dev label Jan 10, 2021

wilsonge reviewed Jan 11, 2021

View reviewed changes

C-Lodder mentioned this pull request Jan 11, 2021

BS5 Update C-Lodder/joomla4-backend-template#132

Closed

dgrammatiko added 2 commits January 12, 2021 17:31

Clean up the mess

2937636

remove test code

a5c48eb

dgrammatiko added 2 commits January 12, 2021 19:21

Add Toast support

dfd9abf

version correction

480cd8c

dgrammatiko force-pushed the 4.0-dev__BS5 branch from 41c8029 to 12290a8 Compare January 23, 2021 15:32

revert search tools add missing jQuery

b8480ac

dgrammatiko force-pushed the 4.0-dev__BS5 branch from b6a3b33 to b8480ac Compare January 23, 2021 15:41

dgrammatiko added 2 commits January 23, 2021 16:47

CS

841458f

revert codeception changes

5467b0d

- Add some comments

43e64a2

- Checks for dispose - Checks that we have an array with elements - Add the missing options for scrollspy

dgrammatiko added 2 commits January 23, 2021 21:43

Fix the console error for dropdowns

e620922

Merge branch '4.0-dev' of github.com:joomla/joomla-cms into __BS5_all

4a40f75

# Conflicts: # package-lock.json # package.json

dgrammatiko and others added 5 commits January 23, 2021 22:11

Fix modal initialisation for subform fields

f68486b

Comment about security

a4b7669

JSCS

3ae078d

JSCS

a716fc4

JSCS

4f1ac70

wilsonge merged commit 88c498b into joomla:4.0-dev Jan 23, 2021

wilsonge added this to the Joomla 4.0 milestone Jan 23, 2021

This was referenced Jan 30, 2021

[4.0] Toolbar spacing #32197

Closed

[4.0] Toolbar spacing #32209

Merged

dgrammatiko mentioned this pull request Feb 26, 2021

[4.0] Deliver ES2015+ javascript #32315

Merged

dgrammatiko deleted the 4.0-dev__BS5 branch April 1, 2021 21:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.0][WIP] BS5 JS #31990

[4.0][WIP] BS5 JS #31990

dgrammatiko commented Jan 10, 2021 •

edited

Loading

ghost commented Jan 10, 2021

ceford commented Jan 11, 2021

brianteeman commented Jan 11, 2021

ghost commented Jan 11, 2021

wilsonge Jan 11, 2021

dgrammatiko Jan 11, 2021

wilsonge commented Jan 11, 2021

dgrammatiko commented Jan 11, 2021 •

edited

Loading

wilsonge commented Jan 11, 2021 •

edited

Loading

dgrammatiko commented Jan 11, 2021

wilsonge commented Jan 11, 2021

dgrammatiko commented Jan 11, 2021

ciar4n commented Jan 11, 2021

ciar4n commented Jan 11, 2021

dgrammatiko commented Jan 11, 2021

brianteeman commented Jan 11, 2021

wilsonge commented Jan 12, 2021 •

edited

Loading

Magnytu2 commented Jan 12, 2021

kawshar commented Jan 12, 2021

dgrammatiko commented Jan 12, 2021 •

edited

Loading

ciar4n commented Jan 12, 2021

ciar4n commented Jan 12, 2021

frostmakk commented Jan 23, 2021

wilsonge commented Jan 23, 2021

frostmakk commented Jan 23, 2021 •

edited

Loading

dgrammatiko commented Jan 23, 2021

frostmakk commented Jan 23, 2021

dgrammatiko commented Jan 23, 2021

astridx commented Jan 23, 2021 •

edited

Loading

dgrammatiko commented Jan 23, 2021

astridx commented Jan 23, 2021

wilsonge commented Jan 23, 2021

brianteeman commented Jan 23, 2021

[4.0][WIP] BS5 JS #31990

[4.0][WIP] BS5 JS #31990

Conversation

dgrammatiko commented Jan 10, 2021 • edited Loading

Summary of Changes

Testing Instructions

What's broken:

Documentation Changes Required

ghost commented Jan 10, 2021

ceford commented Jan 11, 2021

brianteeman commented Jan 11, 2021

ghost commented Jan 11, 2021

wilsonge Jan 11, 2021

Choose a reason for hiding this comment

dgrammatiko Jan 11, 2021

Choose a reason for hiding this comment

wilsonge commented Jan 11, 2021

dgrammatiko commented Jan 11, 2021 • edited Loading

wilsonge commented Jan 11, 2021 • edited Loading

dgrammatiko commented Jan 11, 2021

wilsonge commented Jan 11, 2021

dgrammatiko commented Jan 11, 2021

ciar4n commented Jan 11, 2021

ciar4n commented Jan 11, 2021

dgrammatiko commented Jan 11, 2021

brianteeman commented Jan 11, 2021

wilsonge commented Jan 12, 2021 • edited Loading

Magnytu2 commented Jan 12, 2021

kawshar commented Jan 12, 2021

dgrammatiko commented Jan 12, 2021 • edited Loading

ciar4n commented Jan 12, 2021

ciar4n commented Jan 12, 2021

frostmakk commented Jan 23, 2021

wilsonge commented Jan 23, 2021

frostmakk commented Jan 23, 2021 • edited Loading

dgrammatiko commented Jan 23, 2021

frostmakk commented Jan 23, 2021

dgrammatiko commented Jan 23, 2021

astridx commented Jan 23, 2021 • edited Loading

dgrammatiko commented Jan 23, 2021

astridx commented Jan 23, 2021

wilsonge commented Jan 23, 2021

brianteeman commented Jan 23, 2021

dgrammatiko commented Jan 10, 2021 •

edited

Loading

dgrammatiko commented Jan 11, 2021 •

edited

Loading

wilsonge commented Jan 11, 2021 •

edited

Loading

wilsonge commented Jan 12, 2021 •

edited

Loading

dgrammatiko commented Jan 12, 2021 •

edited

Loading

frostmakk commented Jan 23, 2021 •

edited

Loading

astridx commented Jan 23, 2021 •

edited

Loading