scttcper / ngx-toastr

🍞 Angular Toastr
https://ngx-toastr.vercel.app
MIT License
2.52k stars 358 forks source link

Bootstrap 5 Support #887

Closed FrancescoBorzi closed 1 year ago

FrancescoBorzi commented 3 years ago

My app is running with ngx-toastr version 14.0.0 and Bootstrap 4.

I use toastr-bs4-alert.scss and it works nicely.

If I try to update it to Bootstrap 5, I get:

./src/assets/scss/main.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: SassError: $color: theme-color-level("success", 6) is not a color.
    ╷
151 │     rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E";
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/ngx-toastr/toastr-bs4-alert.scss 151:5  svg-factory()
  node_modules/ngx-toastr/toastr-bs4-alert.scss 159:5  @import
  src/assets/scss/main.scss 13:9                       root stylesheet

More info about my system:

Angular CLI: 12.0.1
Node: 14.15.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4
scttcper commented 3 years ago

yeah thats a good idea. they have a toast component now too...

NiteshSukalikar commented 3 years ago

@FrancescoBorzi got any solution for rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E"; ? if you got any alternative kindly please share !

leifjones commented 3 years ago

~The answer may be to replace theme-color-level() with color-level(). I see that listed as a Bootstrap 5 breaking change under Sass: https://getbootstrap.com/docs/5.0/migration/#sass~

EDIT: Upon further digging, it seems we have to further switch to: https://github.com/twbs/bootstrap/pull/30622

So it seems, we've got to edit code like theme-color-level('success', 6) to shift-color($success, 6). Explicitly:

EDIT 2: Please also see @gabrie-allaigre's comment below.

EDIT 3: @golayp's comment below about using !important may be helpful if there are conflicting css rules in your situation.

FaabLondon commented 3 years ago

Hello,

I was wondering if you had an update on the bug above?

Thanks a lot for your help

Fabienne

FrancescoBorzi commented 3 years ago

hi @FaabLondon , I haven't tried it recently so no updates from my side

Eonasdan commented 3 years ago

Hello. I made this work with BS5. I created a gist of my setup. I should write a small blog post with more details but I hope this helps people.

I wrote a post and have a github repo of this working.

wwarby commented 2 years ago

This is still broken. Would be great if support for Bootstrap 5 could be prioritised - it's been out for quite a few months now and it looks like the fix is relatively straightforward.

Eonasdan commented 2 years ago

@wwarby see if my blog post helps you

wwarby commented 2 years ago

@Eonasdan thanks - I had actually looked at your gist (not the blog post) - I can see I'd be able to get it working using your approach but I really don't want to add bloat to my project to work around an incompatibility issue - I don't actually have any pressing need to upgrade from Bootstrap 4 to 5 right now, it's just concerning when I'm locked into an old version of a major library like Bootstrap. If it doesn't get fixed in the next few months I'll probably make use of your approach.

gabrie-allaigre commented 2 years ago

@mrsegen Thanks

You have to add a multiplication to the level shift-color($success, 6 * $theme-color-interval)

I create a gist file for toastr-bs5-alert.scss

CodersExpo commented 2 years ago

Thanks for doing that @gabrie-allaigre but I agree with @wwarby not so much on "bloat" but more of a Band-Aid approach here since we have to add the file to the node_modules folder and/or edit the package.json to include a reference to the file:

"./toastr-bs5-alert": {
  "default": "./toastr-bs5-alert.scss"
},

I was able to resolve the build issue. However, our build pipeline fails as do each of our devs because they don't have the change in their node_modules folder. So, I would have to keep this file in the project and figure out a way to point to it without having to change toastrs package.json. I haven't tested yet to see if we get what we need from these styles but we'll see. Just hoping an update is done soon so we don't have to keep managing these patched fixes. Thanks!

Does anyone here have any idea when this will get resolved? We don't have the option to use Bootstrap < 5. I have "ngx-toastr": "^14.2.1" and "@angular/animations": "^13.2.3" in an angular 13.2.3 project and getting:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: $color: theme-color-level("success", 6) is not a color. ╷ 151 │ rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\ngx-toastr\toastr-bs4-alert.scss 151:5 svg-factory() node_modules\ngx-toastr\toastr-bs4-alert.scss 159:5 @import src\styles.scss 26:9 root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: $color: theme-color-level("success", 6) is not a color. ╷ 151 │ rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\ngx-toastr\toastr-bs4-alert.scss 151:5 svg-factory() node_modules\ngx-toastr\toastr-bs4-alert.scss 159:5 @import src\styles.scss 26:9

golayp commented 2 years ago

@mrsegen Thanks

You have to add a multiplication to the level shift-color($success, 6 * $theme-color-interval)

I create a gist file for toastr-bs5-alert.scss

I found a small issue on your code, you should add !important to all color of text in toastr since they are not apply correctly and reder as white text Here an updated version in gist: https://gist.github.com/golayp/cd6f5c7ab8b23096f8a9cc422d34d9cf

leifjones commented 2 years ago

@golayp thanks for sharing that that helped!

My limited understanding is that there are cases when it is considered an unhealthy practice and that there are cases when !important seems to be necessary. I'll update my comment to reference your suggestion either way

golayp commented 2 years ago

I've update my gist : https://gist.github.com/golayp/cd6f5c7ab8b23096f8a9cc422d34d9cf to ensure links are colored correctly according to the type of toast

golayp commented 2 years ago

Hi @scttcper my feeling about new bootstrap toast component is that it is too UX heavy (lots of borders), maybe to ensure a maximum features compatibility, but in most case a simple box with the correct color is sufficient. It's why I used ngx-toastr for a while with complet user adherence.

XhmikosR commented 2 years ago

Hey, @scttcper. Could you please let me know what's left here so that we have a toastr-bs5-alert.scss officially included in the package?

I'm personally interested in this, so I could have a look as long as someone sums up the issues.

Nabeeh-AlSawaf commented 2 years ago

any new updates on this ? i'm interested as well since this package is always in my projects

grozandrei commented 2 years ago

I am also interested in fixing this issue, any news about this?

yildiraymeric commented 2 years ago

We have the same problem, hoping a fix coming soon..

XhmikosR commented 2 years ago

@scttcper do you need something from us to land this? Bootstrap 4 is close to EOL.

siovene commented 2 years ago

Adding my voice to the chorus.

scttcper commented 1 year ago

:tada: This issue has been resolved in version 16.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

XhmikosR commented 1 year ago

@scttcper would it be possible to backport the bootstrap5 support in v14.x and v15.x too?

siovene commented 1 year ago

@scttcper thanks! Something must've gone wrong with the NPM release tho.

I installed 16.0.0 and toastr-bs5-alert.scss doesn't exist.

To be sure, I removed my node_modules, did npm install, checked that node_modules/ngx-toastr/package.json mentions version 16.0.0, and toastr-bs5-alert.scss doesn't exist.

Could you have missed something? I would reopen the issue but it looks like I can't.

$ grep toastr package.json
    "ngx-toastr": "16.0.0",
$ grep version node_modules/ngx-toastr/package.json 
  "version": "16.0.0",
$ find node_modules/ngx-toastr -name '*.scss'
node_modules/ngx-toastr/toastr-bs4-alert.scss

Thank you!

siovene commented 1 year ago

Thanks, I see now that it's fixed in 16.0.1.

mikeandtherest commented 1 year ago

@siovene @scttcper The issue is indeed fixed in 16.0.1, but on the other hand ngx-toastr 16.0.1 throws errors when used with angular versions prior to v15. Does it work for you on angular v13 or v14 projects?


Steps to reproduce:

  1. create a new angular 14 project (I'm on angular 14.2.10)
  2. add ngx-toastr to it (npm i ngx-toastr which installs ngx-toastr 16.0.1)
  3. add ToastrModule to AppModule: ToastrModule.forRoot({ preventDuplicates: true }),
  4. use ToastrService inside AppComponent
  5. when running npm start we'll get the errors below:

image

scttcper commented 1 year ago

latest version only works with 15 see the table https://github.com/scttcper/ngx-toastr#dependencies @mikeandtherest

mikeandtherest commented 1 year ago

@scttcper That's what I figured before the table was updated. But still, ngx-toastr 15.2.2 doesn't have this issue fixed, i.e. toastr-bs4-alert.scss is still with errors and I can't import toastr-bs5-alert.scss, since it's not found.

So unless I'm migrating to angular 15 (which is not possible unfortunately on our project), I'm out of ideas on how I can use the fix from ngx-toastr 16.0.1 on an angular 14 project.

scttcper commented 1 year ago

Just copy paste the css

Hetvip17 commented 1 month ago

🎉 This issue has been resolved in version 16.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

hey @scttcper, I am still facing the same issue even after updating to version 16.0.0 . I am using angular 15