From 15208309098ea1d947fb15524cb538d4260166f5 Mon Sep 17 00:00:00 2001 From: Neil Smith Date: Thu, 30 Mar 2023 21:20:00 -0500 Subject: [PATCH 1/2] [chore] update readme and docs demos --- README.md | 14 +++++++------- docs/examples/css_classes.md | 2 +- docs/examples/global_overrides.md | 2 +- docs/examples/inline_styles.md | 2 +- docs/examples/minimal.md | 2 +- docs/examples/on_request_close.md | 2 +- docs/examples/set_app_element.md | 7 ------- docs/examples/should_close_on_overlay_click.md | 4 +--- docs/examples/styled_components.md | 5 +++++ 9 files changed, 18 insertions(+), 22 deletions(-) delete mode 100644 docs/examples/set_app_element.md create mode 100644 docs/examples/styled_components.md diff --git a/README.md b/README.md index 7abe492c..ab69848f 100644 --- a/README.md +++ b/README.md @@ -122,10 +122,10 @@ local development server using `npm start` or `yarn run start`. There are several demos hosted on [CodePen](https://codepen.io) which demonstrate various features of react-modal: -* [Minimal example](https://codepen.io/claydiffrient/pen/KNxgav) -* [Using setAppElement](https://codepen.io/claydiffrient/pen/ENegGJ) -* [Using onRequestClose](https://codepen.io/claydiffrient/pen/KNjVBx) -* [Using shouldCloseOnOverlayClick](https://codepen.io/claydiffrient/pen/woLzwo) -* [Using inline styles](https://codepen.io/claydiffrient/pen/ZBmyKz) -* [Using CSS classes for styling](https://codepen.io/claydiffrient/pen/KNjVrG) -* [Customizing the default styles](https://codepen.io/claydiffrient/pen/pNXgqQ) +* [Minimal example](https://codepen.io/neilhsmith/pen/QWVVEEg) +* [Using onRequestClose](https://codepen.io/neilhsmith/pen/OJooXBg) +* [Using shouldCloseOnOverlayClick](https://codepen.io/neilhsmith/pen/wvEYxKa) +* [Using inline styles](https://codepen.io/neilhsmith/pen/gOdZPPP) +* [Using CSS classes for styling](https://codepen.io/neilhsmith/pen/abaPNYm) +* [Using styled-components](https://codepen.io/neilhsmith/pen/gOdJGxp) +* [Customizing the default styles](https://codepen.io/neilhsmith/pen/abaPNGm) diff --git a/docs/examples/css_classes.md b/docs/examples/css_classes.md index 5580f9e3..a376d2b3 100644 --- a/docs/examples/css_classes.md +++ b/docs/examples/css_classes.md @@ -4,4 +4,4 @@ If you prefer to use CSS to handle styling the modal you can. One thing to note is that by using the className property you will override all default styles. -[CSS classes example](https://codepen.io/claydiffrient/pen/KNjVrG) +[CSS classes example](https://codepen.io/neilhsmith/pen/abaPNYm) diff --git a/docs/examples/global_overrides.md b/docs/examples/global_overrides.md index 4a3bc6e1..68dfef2c 100644 --- a/docs/examples/global_overrides.md +++ b/docs/examples/global_overrides.md @@ -2,4 +2,4 @@ If you'll be using several modals and want to adjust styling for all of them in one location you can by modifying `Modal.defaultStyles`. -[Global overrides example](https://codepen.io/claydiffrient/pen/pNXgqQ) +[Global overrides example](https://codepen.io/neilhsmith/pen/abaPNGm) diff --git a/docs/examples/inline_styles.md b/docs/examples/inline_styles.md index 2285d550..e6c61d16 100644 --- a/docs/examples/inline_styles.md +++ b/docs/examples/inline_styles.md @@ -2,4 +2,4 @@ This example shows how to use inline styles to adjust the modal. -[inline styles example](https://codepen.io/claydiffrient/pen/ZBmyKz) +[inline styles example](https://codepen.io/neilhsmith/pen/gOdZPPP) diff --git a/docs/examples/minimal.md b/docs/examples/minimal.md index 00617738..36da8e2b 100644 --- a/docs/examples/minimal.md +++ b/docs/examples/minimal.md @@ -2,4 +2,4 @@ This example shows the minimal needed to get React Modal to work. -[Minimal example](https://codepen.io/claydiffrient/pen/KNxgav) +[Minimal example](https://codepen.io/neilhsmith/pen/QWVVEEg) diff --git a/docs/examples/on_request_close.md b/docs/examples/on_request_close.md index 0f8075cb..500c0637 100644 --- a/docs/examples/on_request_close.md +++ b/docs/examples/on_request_close.md @@ -6,4 +6,4 @@ This is especially important for handling closing the modal via the escape key. Also more important if `shouldCloseOnOverlayClick` is set to `true`, when clicked on overlay it calls `onRequestClose`. -[onRequestClose example](https://codepen.io/claydiffrient/pen/KNjVBx) +[onRequestClose example](https://codepen.io/neilhsmith/pen/OJooXBg) diff --git a/docs/examples/set_app_element.md b/docs/examples/set_app_element.md deleted file mode 100644 index 944cc813..00000000 --- a/docs/examples/set_app_element.md +++ /dev/null @@ -1,7 +0,0 @@ -# Using setAppElement - -This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open. - -You'll notice in this example that the aria-hidden attribute is applied to the #main div rather than the document body. - -[setAppElement example](https://codepen.io/claydiffrient/pen/ENegGJ) diff --git a/docs/examples/should_close_on_overlay_click.md b/docs/examples/should_close_on_overlay_click.md index 161a17d0..1d7b4a73 100644 --- a/docs/examples/should_close_on_overlay_click.md +++ b/docs/examples/should_close_on_overlay_click.md @@ -5,6 +5,4 @@ it requires the `onRequestClose` to be defined in order to close the . This is due to the fact that the `react-modal` doesn't store the `isOpen` on its state (only for the internal `portal` (see [ModalPortal.js](https://github.com/reactjs/react-modal/blob/master/src/components/ModalPortal.js)). -[disable 'close on overlay click', codepen by claydiffrient](https://codepen.io/claydiffrient/pen/woLzwo) - -[enable 'close on overlay click', codepen by sbgriffi](https://codepen.io/sbgriffi/pen/WMyBaR) +[shouldCloseOnOverlayClick example](https://codepen.io/neilhsmith/pen/wvEYxKa) diff --git a/docs/examples/styled_components.md b/docs/examples/styled_components.md new file mode 100644 index 00000000..b06a0393 --- /dev/null +++ b/docs/examples/styled_components.md @@ -0,0 +1,5 @@ +# styled-components + +To use styled-components you must override the default inline styles by providing a className and/or overlayClassName. You can then provide your own styled component to the contentElement and overlayElement props. + +[styled-components example](https://codepen.io/neilhsmith/pen/gOdJGxp?editors=1011) \ No newline at end of file From c47c1a29d598bf9e77906078bbaf3178fc0f1619 Mon Sep 17 00:00:00 2001 From: Neil Smith Date: Sat, 8 Apr 2023 18:58:32 -0500 Subject: [PATCH 2/2] [chore] readd setAppElement example --- README.md | 1 + docs/examples/set_app_element.md | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 docs/examples/set_app_element.md diff --git a/README.md b/README.md index ab69848f..2a128a4c 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,7 @@ There are several demos hosted on [CodePen](https://codepen.io) which demonstrate various features of react-modal: * [Minimal example](https://codepen.io/neilhsmith/pen/QWVVEEg) +* [Using setAppElement](https://codepen.io/neilhsmith/pen/JjmoaOV) * [Using onRequestClose](https://codepen.io/neilhsmith/pen/OJooXBg) * [Using shouldCloseOnOverlayClick](https://codepen.io/neilhsmith/pen/wvEYxKa) * [Using inline styles](https://codepen.io/neilhsmith/pen/gOdZPPP) diff --git a/docs/examples/set_app_element.md b/docs/examples/set_app_element.md new file mode 100644 index 00000000..c239254f --- /dev/null +++ b/docs/examples/set_app_element.md @@ -0,0 +1,7 @@ +# Using setAppElement + +This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open. + +You'll notice in this example that the aria-hidden attribute is applied to the #root div rather than the document body. + +[setAppElement example](https://codepen.io/neilhsmith/pen/JjmoaOV)