Select component tutorial [WIP]

kmcfaul commented 5 years ago

Initial draft commit

https://katacoda.com/kmcfaul/courses/react-components/select

kmcfaul commented 5 years ago

Since this week is full of F2F meetings / training, putting this draft up earlier than later to start gathering feedback on the content/format.

@gheake2 @christiemolloy

kmcfaul commented 4 years ago

Updated with the first round of feedback!

I will add the screenshots soon (currently there is placeholder text where they should be added). Still working on ironing out syntax tweaks for Katacoda editor.

kmcfaul commented 4 years ago

Made further updates to code snippets and text. Code should be good to go now, but there are two outstanding issues that need to be resolved.

1) I cannot interact with the select unless I delete a <div id="transparent-inner-box"></div> that sits alongside the that contains the select. Anyone run into this? Maybe @nicolethoen @seanforyou23 I haven't been able to run any katacoda tutorial with eventing without first removing/hiding this div</p> <p>2) The version of react-core needs to be updated and I'm not sure how to go about it. Whatever version it's running is missing a lot of select's more recent features.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/nicolethoen"><img src="https://avatars.githubusercontent.com/u/26305082?v=4" />nicolethoen</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>2. The version of react-core needs to be updated and I'm not sure how to go about it. Whatever version it's running is missing a lot of select's more recent features.</p> </blockquote> <p>I added <code>npm install @patternfly/react-core</code> to my env-init.sh file to get the latest version of react into my particular data toolbar tutorial when I had the same issue.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kmcfaul"><img src="https://avatars.githubusercontent.com/u/45077788?v=4" />kmcfaul</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p><del>Hmm. I added <code>npm install @patternfly/react-core</code> but it's still getting 3.75 instead of the latest. Does my env-init.sh look okay aside from that?</del></p> <p>Edit: nevermind my local deployment took a minute to pick up the changes. That did fix the older version thanks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/christiemolloy"><img src="https://avatars.githubusercontent.com/u/20118816?v=4" />christiemolloy</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <blockquote> <ol> <li>I cannot interact with the select unless I delete a <code><div id="transparent-inner-box"></div></code> that sits alongside the <iframe> that contains the select. Anyone run into this? Maybe @nicolethoen @seanforyou23 I haven't been able to run any katacoda tutorial with eventing without first removing/hiding this div</li> </ol> </blockquote> <p>I captured this in an issue #210 </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>

patternfly / training-scenarios

Select component tutorial [WIP] #181