feat(Modal): impliment Dimmer shorthand

[qoalu]

Fixes #3195.

This PR adds support for shorthand API in the dimmer prop for Modal. This allows to apply callbacks or props specifically to a dimmer slot:

// Was possible before
<Modal dimmer='blurring' />
<Modal dimmer='inverted' />
// Now it's possible to do
<Modal dimmer={{ blurring: true, id: 'foo', onClick: () => console.log('onDimmerClick') }} />

<div
  class="ui page modals dimmer transition visible active"
  id="foo"
  style="display: flex !important;"
></div>

[codecov-io]

Codecov Report

Merging #1739 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1739      +/-   ##
==========================================
+ Coverage   99.83%   99.83%   +<.01%     
==========================================
  Files         172      173       +1     
  Lines        3101     3105       +4     
==========================================
+ Hits         3096     3100       +4     
  Misses          5        5

Impacted Files	Coverage Δ
src/modules/Modal/ModalDimmer.js	100% <100%> (ø)
src/modules/Modal/Modal.js	100% <100%> (ø)	⬆️
src/modules/Modal/ModalHeader.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 02b7b79...2c18613. Read the comment docs.

[levithomason]

The className prop is already used as the className for the Modal itself, here. I don't think we should apply the className to both the Modal and the Dimmer.

That said, it makes sense to allow the user to control the Dimmer. I'm thinking we should:

1. Use the actual Dimmer component within the Modal

2. Explore our shorthand conventions for controlling the Dimmer

   <Modal dimmer={{ className: 'my-dimmer' }} />

[qoalu]

Sure, setting a different prop for Dimmer className is a better solution.

1. This is a bit counterintuitive because Dimmer actually appears outside of the Modal, not inside it.
2. That would be the most flexible solution with passing all desired attributes as props to the dimmer Component. My vote for this one.

[layershifter]

Needs #2001.

[stale]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[stale]

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[codecov-commenter]

Codecov Report

Merging #1739 into master will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master    #1739   +/-   ##
=======================================
  Coverage   99.84%   99.84%           
=======================================
  Files         185      186    +1     
  Lines        3251     3255    +4     
=======================================
+ Hits         3246     3250    +4     
  Misses          5        5           

Impacted Files	Coverage Δ
src/modules/Modal/Modal.js	100.00% <100.00%> (ø)
src/modules/Modal/ModalDimmer.js	100.00% <100.00%> (ø)
src/modules/Modal/ModalHeader.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0f9c691...99471f6. Read the comment docs.