feat: change base class 'react-dropdown-now'

README.md

@@ -15,6 +15,7 @@ import 'react-dropdown-now/style.css';
 // normal usage
 <Dropdown
   placeholder="Select an option"
+  className="my-className"
   options={['one', 'two', 'three']}
   value="one"
   onChange={(value) => console.log('change!', value)}
@@ -98,15 +99,14 @@ const options = [{ id: 'custom-id', value: 1, label: 'awesome' }];
 
 ### Customizing
 
-#### Styling with classnames
+| Classname                 | Targets                                         |
+| :------------------------ | :---------------------------------------------- |
+| `rdn`                     | main wrapper div                                |
+| `rdn-control`             | dropdown control                                |
+| `rdn-control-arrow`       | dropdown arrow indicator                        |
+| `rdn-control-placeholder` | placeholder / selected item in dropdown control |
+| `rdn-drop`                | container for dropdown options                  |
 
-| Classname                                                 | Targets                                                    |
-| :-------------------------------------------------------- | :--------------------------------------------------------- |
-| `Dropdown-root` <br/> prop: `className`                   | main wrapper div                                           |
-| `Dropdown-control` <br/> prop: `controlClassName`         | the dropdown control                                       |
-| `Dropdown-placeholder` <br/> prop: `placeholderClassName` | styles the placeholder / selected item in dropdown control |
-| `Dropdown-menu` <br/> prop: `menuClassName`               | container for the dropdown options                         |
-| `Dropdown-arrow` <br/> prop: `arrowClassName`             | dropdown arrow indicator                                   |
 
 #### Using custom arrows
 
@@ -124,18 +124,25 @@ More [examples in the docs folder.][2]
 
 ### Migration
 
+#### v3 => v4
+
+- removed configurable classNames `placeholderClassName`, `arrowClassName`, `menuClassName` and `controlClassName`
+- [changed classNames][10] to use className prefixing. stylesheets targeting the v3 component will need to be updated
+
 #### v2 => v3
 
 - `onChange` always returns an object with aleast `{value, label}`
 - `option.type` is no longer needed to determine if the option is a group. Once the option has an `items` array then it is assumed to be a group.
 
+
 ### License
 
 **MIT**
 
 [0]: https://github.com/fraserxu/react-dropdown/issues/183
 [1]: https://iambumblehead.github.io/react-dropdown-now/
 [2]: https://github.com/iambumblehead/react-dropdown-now/tree/master/docs
+[10]: https://github.com/iambumblehead/react-dropdown-now/pull/71/files#diff-96444c2208ab41b33ce225669e78e3b3426b43216f64e4c34398d6c0d50918e9
 [npm-image]: https://img.shields.io/npm/v/react-dropdown-now.svg?style=flat-square
 [npm-url]: https://npmjs.org/package/react-dropdown-now
 [downloads-image]: http://img.shields.io/npm/dm/react-dropdown-now.svg?style=flat-square

docs/dropdown.css

@@ -0,0 +1,115 @@
+.rdn {
+  position: relative;
+}
+
+.rdn-control {
+  position: relative;
+  overflow: hidden;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: #333;
+  cursor: default;
+  outline: none;
+  padding: 8px 52px 8px 10px;
+  transition: all 200ms ease;
+}
+
+.rdn-control:hover {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+
+.rdn-arrow-icon {
+  border-color: #999 transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0;
+  content: ' ';
+  display: block;
+  height: 0;
+  margin-top: -ceil(2.5);
+  position: absolute;
+  right: 10px;
+  top: 14px;
+  width: 0;
+}
+
+.rdn-arrow-icon.is-open {
+  border-color: transparent transparent #999;
+  border-width: 0 5px 5px;
+}
+
+
+.rdn-drop,
+.rdn-selection {
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  margin-top: -1px;
+  max-height: 200px;
+  overflow-y: auto;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+}
+
+.rdn-selection {
+  position: relative;
+  z-index: auto;
+}
+
+
+.rdn-drop-menu-group-title,
+.rdn-selection-menu-group-title {
+  padding: 8px 10px;
+  color: rgba(51, 51, 51, 1);
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+.rdn-drop-menu-option,
+.rdn-drop-menu-group-option,
+.rdn-selection-menu-option,
+.rdn-selection-menu-group-option {
+  box-sizing: border-box;
+  color: rgba(51, 51, 51, 0.8);
+  cursor: pointer;
+  display: block;
+  padding: 8px 10px;
+}
+
+.rdn-drop-menu-option:last-child,
+.rdn-drop-menu-group-option:last-child,
+.rdn-selection-menu-option:last-child,
+.rdn-selection-menu-group-option:last-child {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.rdn-drop-menu-option:hover,
+.rdn-drop-menu-group-option:hover,
+.rdn-selection-menu-option:hover,
+.rdn-selection-menu-group-option:hover {
+  background-color: #f2f9fc;
+  color: #333;
+}
+
+.rdn-drop-menu-option.is-selected,
+.rdn-drop-menu-group-option.is-selected,
+.rdn-selection-menu-option.is-selected,
+.rdn-selection-menu-group-option.is-selected {
+  background-color: #f2f9fc;
+  color: #333;
+}
+
+.rdn-drop-menu-noresults,
+.rdn-selection-menu-noresults {
+  box-sizing: border-box;
+  color: #ccc;
+  cursor: default;
+  display: block;
+  padding: 8px 10px;
+}

docs/iframe.html

@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";</script><script src="runtime~main.cc450a465a9bcd5813a6.bundle.js"></script><script src="vendors~main.cc450a465a9bcd5813a6.bundle.js"></script><script src="main.cc450a465a9bcd5813a6.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";</script><script src="runtime~main.9f17b494f33dbe751e5d.bundle.js"></script><script src="vendors~main.9f17b494f33dbe751e5d.bundle.js"></script><script src="main.9f17b494f33dbe751e5d.bundle.js"></script></body></html>

docs/index.html

@@ -28,4 +28,4 @@
 
 
 
-              window['DOCS_MODE'] = false;</script><script src="./sb_dll/storybook_ui_dll.js"></script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.52168a07bacac095f162.bundle.js"></script><script src="main.34c1c9ff3e2b093d8f66.bundle.js"></script></body></html>
+              window['DOCS_MODE'] = false;</script><script src="./sb_dll/storybook_ui_dll.js"></script><script src="runtime~main.870e8ee0658e83d05c6b.bundle.js"></script><script src="vendors~main.9ccf6ca128e4a62c8a04.bundle.js"></script><script src="main.570f70c5a54cbfafd8ce.bundle.js"></script></body></html>