dgrammatiko thank you

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

It's clearly labelled as a work in progress

@ceford

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

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).

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

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...

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

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?

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.

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

My preference would be update the views.

My preference is NO bootstrap at all ?

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

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.

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!

+1 for BS5 (Y)

Almost there:

Bootstrap components done:

• alert
• button
• carousel
• collapse
• dropdown
• modal
• popover
• scrollspy
• tab
• toast
• tooltip

Joomla PHP side:

• toast

Joomla JS modification side:

• Field Modals
• Side by Side Editing com Associations
• Other things that I haven't tested yet

For anyone that wants to actually help you could download the installable from the GitHub PR and then do some testing to figure out what IS NOT WORKING and report back.

PS: There is a component that validates what's working at https://github.com/dgrammatiko/bs5/blob/main/BS5Tests.zip

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.

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.

Will wait to test for side by side in com_associations.

Finally an improvement that all CMS's "market audiences" can understand and use as a leverage in the choice of the CMS.
Great job @dgrammatiko! I will go to try and check if something is missing.

Also

instead of

@infograf768 that the 3rd bullet:

The Toolbar dropdown buttons have wrong html the dropdown needs to be the next sibling element to the button (who did this? )

FWIW the produced HTML for the actions/etc dropdown buttons is totally wrong. It was pure luck that this was working in the first place...

Also Multilingual Status broken (empty popup).

@infograf768 can you please point me any breaks in com associations, I'm not familiar with the workflow. Side by side seems ok (-ish ?):

I found some JavaScript errors.
I have installed Blog Sample Data which includes the workflows.

Smart Search Statistics

There is an error when click on the button "Statistics"

Create or Edit an item

There is an error when open a page for editing or adding new item.

Articles & Featured Articles

There is an error in admin-items-workflow-buttons.min.js on the pages Articles and Featured Articles.

Button for editing a module on the front-end

An error occurs when you place the mouse on the button.

+1 for BS5

There is an error when click on the button "Statistics"

Should be fixed

There is an error when open a page for editing or adding new item.

Should be fixed

There is an error in admin-items-workflow-buttons.min.js on the pages Articles and Featured Articles.

Toolbar Dropdowns are a mess

An error occurs when you place the mouse on the button.

Noted

Please fix Copy Template, Manage Folders and New File modals under System>SiteTemplates>Cassiopeia Details and Files.

Errors when click on buttons "Versions" and "Preview"

Errors on banners tracks when click on the button "Export"

Errors on Joomla Update page

Site Information links on Dashboard

Errors when you click on the links in the module Site Information.

Joomla Update is generally broken. It's unrelated to anything

@infograf768 can you please point me any breaks in com associations, I'm not familiar with the workflow. Side by side seems ok (-ish ?):

The Select Target should display a popup with the list of items to select from.
Popup is empty.

EDIT

No more error in present branch.

Console error:

The com_associations issue looks like it is solved in this updated present branch.

Question: Fontawesome icons or Bootstrap icons - any opinions?

Question: Fontawesome icons or Bootstrap icons - any opinions?

Bootstrap 5 has its own open source SVG icon library, could be "very clean" use these icons without load other libraries. IMHO.
But I don't know what kind of effect it might have on the admin template ...

@ceford @simbus82 please take this icons conversation to the discussion thread #3176 , let's keep this JS related only. Thanks

Also Multilingual Status broken (empty popup).

@infograf768 this should be fixed now

@ITPrism I think I fixed all the reported errors (apart the Joomla update as the errors are irrelevant)

@Quy still broken Copy Template, Manage Folders and New File

PS. Please keep in mind that some Toolbar Buttons are still Broken, will get there, eventually

@dgrammatiko what still we need to test for Bootstrap 5 #31990 ?

@dgrammatiko what still we need to test for Bootstrap 5 #31990 ?

yes ready to help

There is an error when we click on the button "Actions".

There is an error when we click on the button "Actions".

Thanks @ITPrism this is a known problem (many toolbar buttons are still broken)

@dgrammatiko what still we need to test for Bootstrap 5 #31990 ?

@chnnst @micker please try all the components frontend/backend. Basically we need to test every possible view

hello i check many many thing in backend all seems works no error in console

• adding/modify menu ok
• adding/modify item ok
• adding/modify category ok
• testing banner ok
• testing smart search ok
• testing tag ok
• testing user ok
• testing system component (checking ...)
• testing language ok
• testing custom atum
• impressiv works... all works no change (that good !)

mobile admin works good

The popovers on the page Articles are broken.

Expected result

Actual result

Testing front office

• dropdown menu ok
• responsive ok
• module edition ok
• item edition ok
• backtotop ok
• versionning ok

The popovers on the page Articles are broken.

for me its ok

@micker Are you sure you are testing the right branch?!? :)

I install bs5 component over a fresh install on beta7

@ITPrism workflow popups fixed

@micker I guess you have to download the version from the Github PR at the bottom there's a download (with a green tick) you have to click on the details to take you to the downloads page

i will check i can just update the component ?

I've built the release from the branch dgrammatiko:4.0-dev__BS5, installed it from scratch and test the general management of a site. It is working in the same way than the latest J4 b6 and I couldn't find bugs. ?

@dgrammatiko Now Drone is happy with PHP CS, but it reports javascript linter errors here https://ci.joomla.org/joomla/joomla-cms/39245/1/21:

/********/src/build/media_source/com_menus/js/admin-menus-default.es6.js
  20:65  error  Array.prototype.map() expects a return value from arrow function  array-callback-return

Please fix Copy Template, Manage Folders and New File modals under System>SiteTemplates>Cassiopeia Details and Files.

Fixed, @Quy can you confirm it?

One note about Frontend editing the popup is triggered (although misplaced probably due to CSS differences between V4 and V5) so I will take that as a fixed atm. Also @brianteeman is refactoring the code to be plain css so it really doesn't make any sense to spent time on this.

So, atm all the reported issues have been fixed

That popup is already css only and already misplaced before this pr

That popup is already css only and already misplaced before this pr

That's weird, the code initialises a popup here:

That's the popover for the module and menu links
The edit article link has never used that script

That's the popover for the module and menu links

I'm an idiot, testing the wrong thing here ?

Please fix Copy Template, Manage Folders and New File modals under System>SiteTemplates>Cassiopeia Details and Files.

Fixed, @Quy can you confirm it?

Confirmed fix. Thanks.

@dgrammatiko Are you sure that the frontend metismenu needs bootstrap collapse?

Update: Forgive me if it's a silly question, I just like to better understand what it does.

Hello just question de need to test 2 pr for bs5 or just this ?

Are you sure that the frontend metismenu needs bootstrap collapse?

So, it turns out I did this wrong. Both the default and the dropdown (metismenu) are becoming collapsible (burger icon) in the template. FWIW this is extremely opinionated as a menu with very few, one level menu items could just be using the flex css (eg always visible). The part that is controlling this is hardcoded in the template (you cannot do anything about unless you clone the template and remove the hardcoded parts there). Anyways this is just a note as I revisited the burger menu interactivity (it's on the template level not on the menu layouts as I thought). Hope this explanation makes sense, not enough coffee yet...

Hello just question de need to test 2 pr for bs5 or just this ?

@micker I really have no clue but I understand that the production team needs to decide first and then it's up to @wilsonge how that's gonna be handled

So, it turns out I did this wrong. Both the default and the dropdown (metismenu) are becoming collapsible (burger icon) in the template. FWIW this is extremely opinionated as a menu with very few, one level menu items could just be using the flex css (eg always visible). The part that is controlling this is hardcoded in the template (you cannot do anything about unless you clone the template and remove the hardcoded parts there).

So it was good that I've asked. Do you think we should (with another PR of course) fix the template to be more flexible at this point?

@micker I really have no clue but I understand that the production team needs to decide first and then it's up to @wilsonge how that's gonna be handled

I think he just wanted to know if he can test the 2 PR separately, or if they should be tested together.

@richard67 yes that my question sorry for my bad english lol

So it was good that I've asked. Do you think we should (with another PR of course) fix the template to be more flexible at this point?

Yup, good catch. I think wrapping the collapsible into an if/else on a template param (a simple switch defaults to true, always burger menu for b/C) it's not a lot of work. The reason is that maybe people have a simple site with very few menu items so the js behaviour could be useless in that case (a JS guy evangelising no-js solution ?)

@micker so the 2 PRs are doing different things, George's PR is all about the visual consistency, this PR is all about the JS driven interactivity. So in that sense both PRs need some extensible testing. I think if there's a positive decision on these then maybe merging them and then releasing a Beta so people could test it more broadly is a good way forward (but I'm not making the rules here ?)

So what's broken now?

Only Frontend Editing is not fixed, or enything else we should test?

What is still in WIP ?

What is still in WIP ?

ATM all the reported bugs are fixed (apart the frontend editing) but you're welcome to test yourself and report back if something is broken

@dgrammatiko I'm not a developer, and Github remains a big mystery to me. How to try and test it all? There are several github pages and I doubt each time. # 31990 # 32037 # 31765

@Magnytu2 These links are informative about how to test Joomla issues:

https://docs.joomla.org/Testing_Joomla!_patches
https://docs.joomla.org/Portal:Bug_Squad

In particular, for this issue, I tried to use the Patch Tester, but it didn't apply it. So, I downloaded the ZIP file for this branch of the @dgrammatiko repo and build it to test it. https://docs.joomla.org/Special:MyLanguage/J4.x:Setting_Up_Your_Local_Environment

So this is not enough?

So this is not enough?

Sure just make sure you're using the Full package

Frontend

There is JavaScript error when you place the cursor on a link .

JS error when you click on the button Versions.

The tooltip should be over the label "Unpublished" and the icon next to the link "Edit" should be "icon-edit".

Backend

JS error when you click on the buttons "Save and Close" on the view "Edit Article".

The buttons for changing states of an article to published and featured do not work.

@dgrammatiko The system tests (mysql test, but this just because it comes first, the problem is not related to the database) systematically fail now at the same place when trying to delete a custom field with following error message:

1) ContentFieldListCest: Field
 Test  tests/Codeception/acceptance/administrator/components/com_content/ContentFieldListCest.php:Field
                                                                                                                                                  
  [Facebook\WebDriver\Exception\JavascriptErrorException] javascript error: jQuery is not defined

see log here: https://ci.joomla.org/joomla/joomla-cms/39376/1/22.

Maybe it needs to make a similar adjustment to the tests as @wilsonge has done in his PR #32037 for the tests? Or maybe some jQuery dependency left?

If I'm not mistaken, bootstrap 5 allows for a different layout of containers. With a maximum width of 1320px which is more suitable for accessibility. I cannot find this width on my local test in Cassiopeia.

It does not add tag to mail template body.

It does not add tag to mail template body.

@ITPrism fixed 948998f

JS error when you click on the button Versions.

@ITPrism fixed with 973849a

There is JavaScript error when you place the cursor on a link .

@ITPrism fixed with 05f454e

A note here: @brianteeman 's PR that eliminates the need for JS is way better but I did this just for the shake of consistency (everything works as before)

Thanks for the compliment

Restarted drone.

@dgrammatiko
please see #32101 (comment)

1. It looks like bootstrap5 rtl is not loaded.
2. I have no idea where that css comes from as I don't see an equivalent in scss.

Tried to apply this patch on 4.-dev
I have an error

> joomla@4.0.0 build:bs5 /Applications/MAMP/htdocs/newfolder/joomla40
> node build/build-modules-js/build-bootstrap-js.es6.js

Building ES6 Components...
(node:4181) ExperimentalWarning: The fs.promises API is experimental
TypeError: rm is not a function
    at /Applications/MAMP/htdocs/newfolder/joomla40/build/build-modules-js/build-bootstrap-js.es6.js:122:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! joomla@4.0.0 build:bs5: `node build/build-modules-js/build-bootstrap-js.es6.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the joomla@4.0.0 build:bs5 script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mac/.npm/_logs/2021-01-23T08_36_48_733Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! joomla@4.0.0 install: `node build/build.js --copy-assets && node build/build.js --build-pages && npm run build:bs5`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the joomla@4.0.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

line is
await rm(resolve(outputFolder, 'index.es6.js'));

@infograf768 what's you node -v and npm -v ? Probably you need to get a newser version

joomla40 mac$ node -v
v10.15.3
imac-2:joomla40 mac$ npm -v
6.4.1

Can you d/l the current version: https://nodejs.org/dist/v14.15.4/node-v14.15.4.pkg
FWIW it should work also with v12

Can you d/l the current version: https://nodejs.org/dist/v14.15.4/node-v14.15.4.pkg

That worked, thanks.

@brianteeman can you confirm that npm install in this branch works fine on your side (windows)?

I can confirm that there were no errors reported when running npm i on windows

Open Manage Extensions.
Try to sort by clicking on the column description.
Nothing happens.

Try to sort by clicking on the column description.

Sorry, that was me trying to fix the tests. Should be fine with:
12290a8

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

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

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.

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

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

Console error: Uncaught TypeError: items is null

Fixed with 43e64a2

Thanks @frostmakk

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

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

@astridx should been fixed with e620922

Thanks

@dgrammatiko

@astridx should been fixed with e620922

Yes, now it is fine. Thanks.

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

woohoo - thanks