Inline Styles, optional setElement calls,

[jackofseattle]

• Removed injectCSS in favor of inline styles that are passed on props.
• Added ability to pass in a query selector to setElement
• Made document.body the default anchor for the modal, calling setElement is now optional.

Side effect of the inline styles is that we lost the media query for small screens. I found this to be an acceptable sacrifice. If it's really a problem then we can set up a debounced resize watcher that does a window.matchMedia call and adjusts the inline styles. Optionally, use radium - though that marries this to a certain css implementation, which is not so awesome.

[jackofseattle]

I know you guys have all been busy with React Router and other such things, so I went ahead and released this as a new package for now. I'm totally down with deprecating it and merging the changes in here when everything calms down. We just were starting to have too many places that depend on this particular fork so I wanted to get it up as a properly versioned package.

https://www.npmjs.com/package/react-modal-inline

[mzabriskie]

@jackofseattle looks good. Would you mind making a couple small changes?

• Remove Chrome from package.json scripts.test. This will blow up on Travis CI.
• I think we still need appElement in the propTypes for Modal.js

Thanks for the PR!

[jackofseattle]

@mzabriskie Sure thing,
Out of curiousity, why do we need appElement ? Best I can gather is that it's for DOMless environments like React Native.

[mzabriskie]

@jackofseattle it is used for accessibility. When the modal opens ariaAppHider flags the appElement so that it's not visible to screen readers.

[jackofseattle]

@mzabriskie I have addressed your comments. Also made a small change to the new style prop type to enforce it's shape.
This is now properly rebased and ready to be merged.

[miracle2k]

I'm not entirely happy with this change. It is forcing me to use this method of setting the inline styles, or, alternatively, overwriting everything that react-modal predefines.

I want to use cssmodules, and I'm now forced to pass a custom style object to react-modal that sets all the style props to null.

I don't think the default style is all that great - or useful. I could even see it being removed entirely.

Or, how about a custom style object replaces the built in one completely?

[miracle2k]

#74 might be a case in point.

[mzabriskie]

@miracle2k styling these 3rd party components is one of my biggest frustrations. I have played around with various approaches in the different components that I have built, but am not in love with any of the solutions thus far.

I would really like to come up with an ideal way of doing this. In my mind, these are the goals:

1. Minimal default styles applied to component. This is basically providing just enough style so that the component has some structure to it. I ask myself "what would this component look like if it were a native DOM element with no custom styling?". I don't want to provide any more or less than that.
2. Default styles should be applied automatically. It's a pain to require a CSS file, and include it, etc. It should just happen.
3. Be easily overridden by developers consuming the component. The default styles shouldn't get in the way, or take priority. Component should allow passing className, or style props to provide custom styling.

If we can achieve these three things, I'm happy with whatever we can come up with.

[mzabriskie]

I think I have a solution.

I have changed it so that by default no styles are applied. This allows you to apply your custom style, or className props without needing to override the internal defaults. To make it convenient to quickly give the component default styling, an object will be exported with the default styles.

// No styles
<Modal/>

// Custom style
<Modal style={{overlay: {background: 'black'}}}/>

// Default styles
<Modal style={Modal.Styles}/>

// Default + custom styles
<Modal style={{overlay: [Modal.Styles.overlay, {background: 'rgba(0, 0, 0, 0.75)'}]}}/>

Would love to hear your thoughts @jackofseattle @miracle2k

[jackofseattle]

@mzabriskie I like the idea, though I worry about what happens when people forget to have the default styles applied as well. Maybe we should dump the inline styles to a css file that can be included by the consumer if they'd prefer not to use inline styles

[mzabriskie]

@jackofseattle I suspect people will definitely forget to set the default styles, but it will be immediately obvious, and it's an easy fix to get the default styles in place. I will update the README to use the default styles in the example, and all the example code as well.

I dislike using CSS because it requires some tooling on the consumer end. They will need to use the style-loader, and css-loader, or the CSS file needs to be copied to where ever their public files are saved.

[mzabriskie]

@jackofseattle @miracle2k I didn't get consensus in time, and went ahead a released a new version of react-modal without any changes to styles. I'm happy to do another release once we agree on the best approach.