[changed] use object className and overlayClassName prop to override …

[nikmilson]

Changes proposed:

• use object className and overlayClassName prop to override the default content and overlay classes;
• use bodyOpenClassName to override body class name when modal opened.

Upgrade Path (for changed or removed APIs):
For overriding default content and overlay classes you can pass object
with three required properties: base, afterOpen, beforeClose.

<Modal
  ...
  className={{
    base: 'myClass',
    afterOpen: 'myClass_after-open',
    beforeClose: 'myClass_before-close'
  }}
  overlayClassName={{
    base: 'myOverlayClass',
    afterOpen: 'myOverlayClass_after-open',
    beforeClose: 'myOverlayClass_before-close'
  }}
  ...
>

Old behavior is saved, when passed a string.

Acceptance Checklist:

• All commits have been squashed to one.
• The commit message follows the guidelines in CONTRIBUTING.md.
• Documentation (README.md) and examples have been updated as needed.
• If this is a code change, a spec testing the functionality has been added.
• If the commit message has [changed] or [removed], there is an upgrade path above.

[coveralls]

Coverage increased (+0.5%) to 81.185% when pulling 9719ff5 on cassln:master into a8b7aa0 on reactjs:master.

[diasbruno]

hey @cassln, this PR looks good, but why would you want to replace the class names?
what if we could have something like this:

sass or less style (replace react-modal-* with the actual classes, sorry for been lazy :)).

.{my-class}.react-modal-base { ... }
.{my-class}.react-modal {
  .react-modal-overlay { ... }
  .react-modal-content { ... }
}

[nikmilson]

Hey @diasbruno. I want to replace the class names because of I'm sticking BEM notation. And cascades like .{my-class}.react-modal-base { ... } are working, but it is wrong for BEM.

Also, this feature makes possible getting clean markup for react-modal in result. :)

[nikmilson]

What about merge the feature? :) I really need this in working project.

[diasbruno]

@cassln don't wait, use it from your fork. :)

[diasbruno]

Be patient. I do think this PR is good. there is some work going on to get a version in between 1.6.5 and 2.0.

[diasbruno]

It seems that only the base of the classes change. Maybe we can short this changes by keeping the suffixes unchanged like {ReactModal}_before-open and {ReactModal}_after-open. Any thoughts?

[nikmilson]

The suffixes are not flexible. There are BEM alternative naming schemes. The suffixes make impossible of using them. Also, we can pass props like this (without BEM example):

{
  base: 'modal',
  afterOpen: 'open',
  beforeClose: 'close'
}

[nikmilson]

there is some work going on to get a version in between 1.6.5 and 2.0

Do you have ability to release version between 1.6.5 and 2.0. This It would be very helpful. 👍

[claydiffrient]

@cassln 1.7.0, 1.7.1, and 1.7.2 have been released.

[nikmilson]

The branch has been rebased.

[viniciusffj]

@cassln @diasbruno Is there a chance to this get merged? I really need the bodyOpenClassName funcionality

[diasbruno]

cc @claydiffrient @cassln

[pamelipluas]

@cassln @diasbruno Hi everyone! Any update about this pl? In my project we are using this lib and we really need can change the body classname

[abdennour]

Why this PR is not merged yet ?