prop type check

[byronz]

@alexcjohnson @chriddyp I have a concern about the current state of our defined PropTypes,

one example is draggable: PropTypes.string, but per HTML reference it's an enumerated attribute with {true, false, auto}.

we don't have another useful attribute inputmode, which is also an enumerated list, and it's a good demo case for and <input> </p> <p>this fixes <a rel="noreferrer nofollow" target="_blank" href="https://github.com/plotly/dash-html-components/issues/107">https://github.com/plotly/dash-html-components/issues/107</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/byronz"><img src="https://avatars.githubusercontent.com/u/1394467?v=4" />byronz</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@plotly/dash-core a quick glimpse of <code>generate-component.js</code> and <code>extract-attributes.js</code>, and also found a <a href="https://github.com/plotly/dash-html-components/issues/71">closed issue</a> create by ryan, I think it makes sense to revisit the accuracy of the prop types definition for global attributes.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/chriddyp"><img src="https://avatars.githubusercontent.com/u/1280389?v=4" />chriddyp</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I think it makes sense to revisit the accuracy of the prop types definition for global attributes.</p> </blockquote> <p>👍 . I just found this data in a structured format here: <a href="https://github.com/iandevlin/html-attributes">https://github.com/iandevlin/html-attributes</a>, seems like we could use that in our component generation script.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/chriddyp"><img src="https://avatars.githubusercontent.com/u/1280389?v=4" />chriddyp</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>also might need to evaluate how we deal with booleans too. I think we should accept them and coerce to <code>"true"</code>. </p> <p>not sure what to do about <code>False</code> - do we compile to <code>"false"</code> or do we omit? in the html spec, for a value to be false, it needs to be omitted rather than set to <code>"false"</code></p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#Boolean_Attributes">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#Boolean_Attributes</a>:</p> <blockquote> <p>Some content attributes (e.g. required, readonly, disabled) are called boolean attributes. If a boolean attribute is present, its value is true, and if it’s absent, its value is false.</p> </blockquote> <p>However, I believe React will just ignore it now: <a href="https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html">https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html</a> & <a href="https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true">https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true</a> <img src="https://user-images.githubusercontent.com/1280389/55433781-1346ac00-5564-11e9-8762-b97d9d3f1d0f.png" alt="image" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/byronz"><img src="https://avatars.githubusercontent.com/u/1394467?v=4" />byronz</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>the <code>draggable</code> example itself is also tricky, if you don't set, it's <code>auto</code>, when you set it, must be <code>true</code> and <code>false</code>, so a simple enum list might not be ideal </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/alexcjohnson"><img src="https://avatars.githubusercontent.com/u/2678795?v=4" />alexcjohnson</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@byronz can we close this PR (and issue #107), since <a href="https://github.com/plotly/dash-renderer/pull/100">https://github.com/plotly/dash-renderer/pull/100</a> does this for all components?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>