Blueprint: What's the reason for the lack of a JS API for some components?

[sustained]

Most things seem to have both a JS and a CSS API, however NavBar does not.

Is there an actual reason for this?

If this is a React-centric UI toolkit then I should be able to do <NavBar>...</NavBar> instead of writing masses of HTML, no?

Of course I could just write my own NavBar component but that kind of defeats the point, does it not?

---

@cmslewis checklist:

• [x] Navbar (#1803)
• [x] ButtonGroup (#1804)
• [x] Label
• [ ] TextArea
• [ ] ~Input~ (will be superseded by InputGroup when we rename that #1147)
• [ ] ControlGroup
• [x] ~Select~ (oh noooo, this name is already taken. We should probably rename the other one to keep parity with class names and component names.)
• [x] FileInput (instead of FileUpload; see #1453)
• [ ] ~Skeleton~ (strictly a CSS API)
• [ ] ~Table~ (name conflicts with existing Table)

[sustained]

Something along the lines of this -

<NavBar>
    <NavGroup left>
        <NavHeading>Blueprint</NavHeading>
    </NavGroup>
    <NavGroup right>
        <NavButton text="Home" icon="home" />
        <NavButton text="Files" icon="files" />
        <NavDivider />
        <NavButton minimal icon="user" />
        <NavButton minimal icon="notifications" />
        <NavButton minimal icon="cog" />
    </NavGroup>
</NavBar>

Is a million times better than this -

<nav class="pt-navbar pt-dark">
  <div style="margin: 0 auto; width: 480px;"> <!-- ADD ME -->
    <div class="pt-navbar-group pt-align-left">
      <div class="pt-navbar-heading">Blueprint</div>
    </div>
    <div class="pt-navbar-group pt-align-right">
      <button class="pt-button pt-minimal pt-icon-home">Home</button>
      <button class="pt-button pt-minimal pt-icon-document">Files</button>
      <span class="pt-navbar-divider"></span>
      <button class="pt-button pt-minimal pt-icon-user"></button>
      <button class="pt-button pt-minimal pt-icon-notifications"></button>
      <button class="pt-button pt-minimal pt-icon-cog"></button>
    </div>
  </div>
</nav>

Wouldn't you say?

[llorca]

We have not converted all pure view (non interactive) components to React yet, some are still raw HTML indeed. We plan on doing that for 2.0. Contribution welcome.

[sustained]

Hmm, good to hear!

I'm fairly new to React but I'm somewhat familiar with TypeScript and very familiar with CSS, JS, HTML etc.

I'd absolutely be interested in giving this a shot but I'd likely need some guidance. Do you have a Slack; Hipchat; Gitter; Discord (preferably); IRC or whatever the kids are using these days?

I'll probably take a look at tackling this shortly, actually. As in today. Gives me something to do. Besides, I'm trying to get into open-source anyway as it will help me to get hired.

I'll go go have a read through the contributor guidelines and all that jazz, in the mean time.

[llorca]

Nope, we solely use GitHub at the moment, we can keep in touch here. Check out the structure of the other React components, it should help you get started pretty easily. Don't hesitate if you have questions!

[sustained]

Yeah, I forked the repo and I'm going to give it a shot. Thanks!

Should I use this issue if I need any guidance, or? I can't exactly send a pull request until I have a somewhat-working implementation, can I?

[llorca]

Yup use this issue for NavBar, open a new one for a different component. Send a PR once you've got something working (shouldn't be too hard, the navbar doesn't carry much interaction).

Note on your snippet above: avoid creating NavButton, use already made Buttons directly instead

[Mottoweb]

Looks like the issue is obsolete?

[giladgray]

yes indeed!