modalFactory propTypes directly accesses the PropTypes via the React Package rather than using the npm prop-types package causing console errors. Accessing them directly is now deprecated.

When I try to provide callback for handling escape key press using keyboard I get back warning complaing about Failed prop type. I tried to use onKeyPress, but none of the approaches work as expected, function that I provided as callback doesn't get called.

`

Edit Modal

Currently relying on react@>=0.14.0

Unable to use with typescript
error TS2339: Property 'show' does not exist on type 'ReactInstance'. Property 'show' does not exist on type 'Component<any, any>'.

No definitelytyped repo available :(

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of BillSummaryContainer

I get the error on the console but the UI works well and the modal shows.

Any ideas why it's doing this?

Hi 👋,

I'm Romuald from the Lsos, an organization that develops financial solutions for open source projects, and we are currently doing outreach to projects we like.

One of our solutions is the Lsos Commons which I believe could fit; is that something Boron would be interested in?

If not I'm sorry for having opened this ticket and I'll close it :).

For some reason animations stop triggering on iOS after the browser or page loses focus (switching apps or tabs) and since its waiting for the transitionend event to execute the show/hide callbacks, it makes all modals stop working.
Tried adding a delay to all animations but it didn't seem to fix the problem.

This is the workaround I ended up implementing:
iwano@f0737ae

Warning shows up on console.

When placing refs within modal the inner refs are not registered. Consider the example below.

<Modal ref="modal">
  <h2 ref="heading">A heading</h2>
  <MyCustomFormComponent ref="form" onSubmitted={this.onSubmitted} />
</Modal>

The modal reference is found, but any reference placed within are not found, i.e. the "heading" and "form" refs are not registered.

It's actually a bigger bug that hasn't been resolved in the spec yet:

http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform/15251226#15251226

With a fixed width of 500px, the modals aren't very mobile-friendly.

I've resolved this by adding a selector to the 'modal-body'
and overwritten it with width: 90% !important; as a default.
On desktop-viewport added the width: 500px !important;.

Even though it's really easy to do this yourself,
it would be nice if the modals are more mobile-friendly by default.

Hi, I'm not sure if I'm missing something simple, but is it possible to change the opacity for the overlay?

Thanks!

Hi.Is it possible to make blue border not show when clicked on Modal.

Hey,
Awesome tool. However I'm having some trouble trying to work with the styling of the Drop Modal. In particular, could someone differentiate the three styles -- modal, backdrop, and content? The backdrop the clearest of the 3 -- I don't think I'll be touching it much. But what's the difference between the modal style and the content style? Thanks!

I included a signup form in the modal and in small (HD) screens and below it goes beyond the screen and I can't scroll it. How to fix it?

i would like control opening and closing of modal using state in react

executing the hide method produces the following error:

Warning: A component is accessing getDOMNode or findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.

using: React v 15.2.1 (latest as of now)

warning.js:44 Warning: Unknown prop xmlns on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in svg (created by Constructor)
in div (created by Constructor)
in div (created by Constructor)
in span (created by Constructor)

A well-known issues with translate3d is that it causes text to be blurred. See : http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d

Unfortunately, it seems that all of the transition modals, even if they don't need a 3d translate, have one. You can see a noticeable difference when I unchecked the transform style in one of these screenshots.

Could you please provide any information about supporting React 16?

Noticed that there's no 0.2.4 version in npm registry, so we can't use this version even it fixed the problem. Thank u.

Is there any way to make it responsive? I want for example that the width on large screens is 40% and on xs screens 100%.

Thanks.

I'm trying to see the demo at http://madscript.com/boron/ but I can't access the site, anyone else has this same problem?

From what I can tell this library looks abandoned. Can anyone recommend a good fork? Ideally with support for React 16 and ES6.

The 'Boron is amazing' text seems to flicker as it appears, I am not sure if you can see it in the gif below but if you try it in your browser it should be pretty obvious:

My code looks similar to the one given in the example in the ReadMe. Any idea why I get this error?

Error message:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...):

Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

reactify is listed as a browserify transform, but is included in dev dependencies so it is missing when boron is a dependency in a browserify build

results in error:

Error: Cannot find module 'reactify' from ...

workaround:
npm i -D reactify in the project that includes boron

Have you guys considered updating the code for ES6? I'd love to use this modal

Please adjust this component to be able to render on the server for isomorphic (universal) apps.
This is becoming the standard now and it will be a shame not to use your component for lack of isomorphic support.
right now it throws an error because it has a dependency on document or window.
simply move the dependent code to componentDidMount...

So we're trying to change the styling on boron's drop modal. The problem is, this: https://github.com/yuanyan/boron/blob/master/src/DropModal.js#L92 is forcing certain styles that cannot be overwrriten by a classname. I really want to be able to change the background color at least. Any ideas? I'd be interested in helping out with this.

This will make the modals responsive in case the user's browser's width is less than 500px :)

ReferenceError: window is not defined
    at module.exports (G:\work\cinema\node_modules\boron\node_modules\react-kit\getVendorPrefix.js:9:18)

no window on the server
use something instead (maybe this, maybe global)

Blur effect caused by translate on webkit

Description

On webkit when a value computed for translate matrix is not integer the modal gets blurry on non retina displays.

Expected behaviour

Modal looks clear and crisp:
https://screencast.com/t/P7YWiE9q

Actual behaviour

Modal looks blurry:
https://screencast.com/t/SajA9vmva6mg

Solution

Proposed solution provided under #44 pull request.