Giters

notiflix / Notiflix

Notiflix is a pure JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.

Home Page:https://notiflix.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

className option not setting as expected?

eduardocmoreno opened this issue · comments

commented

Hello! I tried to set the className option on the "Block" module, but I have no clue why it is adding '-position' to it. And it persists even when the module is "removed".

Config:

Notiflix.Block.standard('.form', { 
  className: 'myClass'
});

Result:

<form class="form myClass-position">...</form>

I`ve tried the same on the Report module, but this time it sets "myClass-content". Is that behavior correct? Or Am I doing something wrong? 🤔

I`m building a web application with Nextjs v12 btw.

commented

Hi @eduardocmoreno

Let's go one by one.

1- The Block module is not setting the className correctly.
This is true, there are a few class names with some suffixes(with reasons, they should be in there) but yes, the className itself also has to be set. (e.g. "myclass myclass-position") I will fix it.

2- (PREFIX-position) the className was not removed even though the Block module was removed.
I will investigate this.
Yes, this is also happening, because reversing the option-based settings to init settings is not waiting for the CSS transition durations and the other delays. I will fix this too.

3- What are these suffixes? (-position, -content, -wrapper)
There should be. But there is always a specific class name as we expected without any suffix or prefix. (Except for the Block module, the number 1 above, I will fix it.)

4- There are these kinds of prefixes or suffixes in all other modules (e.g. Report). But as I've mentioned on number 3, there is always the class name itself in there as well.

I will keep you posted after my investigation has been done.

Thank you,
Furkan.

commented

Hi @eduardocmoreno

Notiflix v3.2.3 has been released and the issues have been fixed.

I want to explain a bit about the "PREFIX-position" situation for the reference element.

When we want to use the Block module with a static positioned reference element; the Block module is creating a temporary internal style for the reference element to set a temporary CSS position as "relative". Because the Block module HTML content is positioned as absolute. Otherwise, the content(absolute) would be looking for a parent element, which has a non-static position. In addition, it would be easy to set an inline style to the reference element itself by the same scenario but, I don't want to manipulate any kind of existing element or its styles, which is not created by Notiflix. This is the number one rule of this library: "Don't touch anything if it is not created by you." 😊

Also, setting a custom class name and/or all the other options are just for the Block module HTML content. So, the reference element, will not get a class name from the Block module except the -position class name as I have explained above. And this temporary class name will be removed by the .remove() method from the reference element itself. (This was also not working if we're using a custom class name but it is fixed with this release too.)

So,

  • The class name will be set to the Block module HTML content as we expected. ("-wrap" suffix has been removed from the Block module HTML content => from "myClass-wrap" to "myClass")
  • The temporary "myClass-position" class name will be removed from the reference element as we expected.

Thank you,
Furkan.