Header no longer has rounded corners (regression)

[romaninsh]

Bug Report

After switching our project from Semantic to Fomantic, we noticed that dialog top edges are no longer rounded. After some digging we noticed that "header" had rounded corners before, but it is no longer the case:

/*******************************
             Modal
*******************************/

.ui.modal > :first-child:not(.icon),
.ui.modal > .icon:first-child + * {
  border-top-left-radius: 0.28571429rem;
  border-top-right-radius: 0.28571429rem;
}

Image before:

And after:

This affects all the dialogs.

Steps to reproduce

1. TBA

Testcase

http://ui.agiletoolkit.org/demos/modal2.php

Version

2.6.4

[romaninsh]

Looks like it's caused by "ui inverted dimmer" which is now inserted as a first div inside a modal, and therefore breaks selector:

https://github.com/fomantic/Fomantic-UI/blob/master/src/definitions/modules/modal.less#L43

Perhaps .ui.modal > :first-child:not(.icon,.dimmer) could fix it?

[romaninsh]

Possibly that's a bug of atkjs, created related issue there, although strange that it appeared after the switch.

[y0hami]

@romaninsh I reckon it is https://fomantic-ui.com/modules/modal.html#/examples all those examples seem fine

[lubber-de]

Please adjust your (backend/atk)-code to not insert an additional manual dimmer div when working with modals.
Creating the Dimmer-tag for modals is handled by the module itself and is not positioned in the dom as shown.

[romaninsh]

There is no example with a closing "X" and dimmer.

[romaninsh]

@lubber-de here is the modal creation code: https://github.com/atk4/ui/blob/develop/js/src/plugins/createModal.js

I don't see any tampering with the DOM.

[lubber-de]

There is no example with a closing "X" and dimmer.

😕 A modal always creates an internal dimmer and an example having a close icon can be found here https://fomantic-ui.com/modules/modal.html#full-screen

The created dom has the close icon as its first div child and the dimmer itself is surrounded

[lubber-de]

I found it. it's used in the innerDimmer method of modal.js which creates the dimmer div you mentioned when allowMultiple is set to true.Please try if setting this to false basically solves the issue.
In the meantime i'll prepare a fiddle to reproduce this

[lubber-de]

@romaninsh It's fixed in #310 and supposed to be part of the next release.
See http://jsfiddle.net/co3gaj8q/
Sorry for the misunderstanding 🙂

[romaninsh]

@lubber-de no worries. My investigation was also missleading. Thanks for addressing it so promptly.