Unless we intend to also include those helper methods, which sounds a little crazy.

(I'm making notes here of things that are breaking in the pivnet install, we're doing a sass install)

Currently neither of these examples work:

<SortableTable headers={[<TableHeader sortable={true}>Name</TableHeader>]}>
    <TableRow key={0}><TableCell>foo</TableCell></TableRow>
    <TableRow key={1}><TableCell>bar</TableCell></TableRow>
</SortableTable>

<SortableTable headers={[<TableHeader sortable={true}>First Name</TableHeader>,<TableHeader sortable={true}>Last Name</TableHeader>]}>
    <TableRow key={0}><TableCell>foo</TableCell><TableCell>bar</TableCell></TableRow>
</SortableTable>

Seems to be because we're expecting the children of the SortableTable and TableRow components to be arrays, but it seems like they shouldn't have to be. A table with one row in it is perfectly valid HTML.

Is there a way to change this default behaviour with pui-react-dropdowns? This is using version 2.0.

For instance have the menu align to the right border of the application instead?

A search + dropdown for selecting items nested in a hierarchy.

Specs:

1. Filter options by searched string. All children and all parents of matched items are still shown (not filtered out)
2. Dropdown maxes at a certain number of displayed items and has a scroll for vertical overflow. Widens to fit horizontal overflow.
3. Indentations identify levels of the hierarchy. Lowest level items have a white background; higher level items have a greyed background.
4. Bold + underline the matching substrings in each of the matched items.
5. The first matched item is automatically selected. Arrow keys then move the highlighted-background selection, and return key selects it.
6. Clicking the arrow on the right edge expands the dropdown, showing all available options (no filtering), without having to start typing.

Relevant code (we began developing this component for Pivotal Pulse already):
https://github.com/pivotal-cf/pivotal-ui-charts/blob/master/app/components/app_search.js
https://github.com/pivotal-cf/pivotal-ui-charts/blob/master/app/components/search_list.js
https://github.com/pivotal-cf/pivotal-ui-charts/blob/master/app/components/search_list_item.js

We should use loose mode for all our components to generate more readable code, it may not adhere to the ES6 spec perfectly but I don't see that being an issue.

https://babeljs.io/docs/advanced/loose/

We just need to add "loose": true to our .babelrc for all components.

@pivotal-plech wants the following dropdowns on PivNet:

This looks similar to bootstrap's dropdowns. We should give them a PUI-skin and document them in the styleguide.

This one is a bit different: it (a) has a shadowed arrow thing on top, and (b) is a big image-thing, instead of a list of links. Options for this dropdown:

1. PivNet implements this on their side, so it's not a PUI component
2. We create a dropdown-alt component that has the arrow-thing
3. We create a dropdown-notifications component for notification-specific dropdowns.

cc/ @pivotal-plech @stubbornella @pmeskers @bebepeng @scottruitt @montypivotal

when I try to bundle install using the ruby version specified in .ruby-version (2.1.2), I get the following error:

Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require': dlopen(/Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/x86_64-darwin12.0/openssl.bundle, 9): Symbol not found: _SSLv2_client_method (LoadError)
  Referenced from: /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/x86_64-darwin12.0/openssl.bundle
  Expected in: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
 in /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/x86_64-darwin12.0/openssl.bundle - /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/x86_64-darwin12.0/openssl.bundle
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/openssl.rb:17:in `<top (required)>'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/security.rb:11:in `<top (required)>'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/package.rb:43:in `<top (required)>'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/dependency_installer.rb:3:in `<top (required)>'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/2.1.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/installer.rb:2:in `<top (required)>'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/cli/install.rb:78:in `run'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/cli.rb:146:in `install'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/vendor/thor/command.rb:27:in `run'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/vendor/thor/invocation.rb:121:in `invoke_command'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/vendor/thor.rb:363:in `dispatch'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/vendor/thor/base.rb:440:in `start'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/cli.rb:9:in `start'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/bin/bundle:20:in `block in <top (required)>'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/lib/bundler/friendly_errors.rb:5:in `with_friendly_errors'
    from /Users/pivotal/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/bundler-1.6.2/bin/bundle:20:in `<top (required)>'
    from /Users/pivotal/.rbenv/versions/2.1.2/bin/bundle:23:in `load'
    from /Users/pivotal/.rbenv/versions/2.1.2/bin/bundle:23:in `<main>'

When I change the ruby version to 2.0.0-p598, everything works fine.

a sortable table loads the content from the props into the state, but when the props change, it should probably re-read the changed props and apply the sort. instead does not handle the new props.

this is a problem when dynamically loading content for a sortable table, it would be nice if the table would track the props, and apply the sort when they change.

Current:

Compliant:

They do have a lot less character, but it's going to be difficult to keep that while providing enough contrast. Perhaps bringing borders back in might give em' a little more oomph.

In Safari Version 8.0.4 (10600.4.10.7), clicking on an autocomplete list item doesn't trigger a callback. #253 Fixed this issue for firefox, but Safari is weird.

Currently all of the colors provided by Pivotal UI have a consistent naming schema except for the grays.

For example:

$gray-2
.bg-neutral-2
.type-neutral-2

vs

$dark-2
.bg-dark-2
.type-dark-2

I would think that the gray color variable $gray-2 should probably be $neutral-2.

React Component for quickly selecting a time by hour in the dropdown, while also having the power to type the time in directly in the main field.

Specs:

1. Customizable default time options.
2. The rounded hours are sorted descending (backwards in time)
3. Clicking on the field opens the dropdown.
4. Using arrow keys should navigate the dropdown, highlighting selection
5. Pressing return should select the highlighted selection
6. Type ahead filters for matching hours (Typing "9" should match "9:00:00 AM" and "9:00:00 PM" Typing "9:3" should not match anything)
7. (Ideal) Tab autocompletes what is identical among all matches. For example, if you type "9" and then push tab, it will autocomplete to "9:00:00", so you can go straight to typing either "A" or "P".
8. The dropdown defaults to a time which is not rounded to the nearest hour, but which is a snapshot of the time the moment the component is built.
9. Another dynamic option for "now".

• When now is selected, "now" remains an option in the dropdown, but the snapshot option is updated/replaced with the new snapshot.
• For example, if it's 3:45:23 PM when I first encounter the component, so that's the default option above "now" (and hours counting backwards from 3:00:00 PM). If I wait five seconds and select "now" in the dropdown, then the newly displayed time should be "3:45:28 PM" and "3:45:23 PM" should no longer be listed.
• Subtle grey divider lines separate the "now" option from the rounded hours below and the current time snapshot above:

Can be found in forms.scss.

It looked like a compliment to .help-block. Instead, it appears to have been pulled in ages ago from Apps Manager and is unrelated. I was hoping it might be just like .help-block except display: inline, but it is also still display: block.

Maybe deprecate, or change to display: inline?

.h2 class had both font-size and line-height. .fa-h2 only has font-size therefore breaking our styles.

Currently the current steps element does not look current; it looks more like it's disabled.

I would suggest something like the following:

It would be nice if OverlayTriggers allows more custom ways to trigger overlay visibility.
ie showOverlay={true}

Unzipping a release zip file places all its contents into pwd instead of unzipping into a subdirectory.
I think users commonly expect the contents to get unzipped to a subdirectory.

We would like to import the Pivotal UI kit in one of our internal projects and use @extend to combine several classes instead of writing them explicitly in html:

    .apps-list {
      @extend .list-unstyled;
      @extend .type-neutral-11;
    }

and <ul class="list-unstyled .type-neutral-11"></ul> becomes <ul class="apps-list"></ul>

Please include in the pivotal-ui source code and distribution, a file pivotal-ui.scss under src/pivotal-ui or root folder for distributions.
It will contain a reference to all components developed in Pivotal UI.
Source code version 1.6.1 used to have this file, but latest version does not.

It will look something like this:

@import "components/alerts/alerts";
@import "components/alignment/alignment";
@import "components/avatars/avatars";
@import "components/back-to-top/back-to-top";
@import "components/backgrounds/backgrounds";
@import "components/bootstrap/bootstrap";
@import "components/buttons/buttons";
@import "components/code/code";
@import "components/collapse/collapse";
@import "components/colors/colors";
@import "components/deprecated/deprecated";
@import "components/dividers/dividers";
@import "components/dropdowns/dropdowns";
@import "components/ellipsis/ellipsis";
@import "components/embeds/embeds";
@import "components/expander/expander";
@import "components/forms/forms";
@import "components/google-maps/google-maps";
@import "components/grids/grids";
@import "components/health_indicators/health_indicators";
@import "components/hiring/product_designer";
@import "components/hoverable/hoverable";
@import "components/iconography/iconography";
@import "components/images/images";
@import "components/intro/intro";
@import "components/labels/labels";
@import "components/links/links";
@import "components/lists/lists";
@import "components/media/media";
@import "components/modals/modals";
@import "components/panels/panels";
@import "components/panes/panes";
@import "components/pivnet_homepage/pivnet_homepage";
@import "components/portals/portals";
@import "components/product_specific/product_specific";
@import "components/progress-bars/progress-bars";
@import "components/react-animations/react-animations";
@import "components/ribbons/ribbons";
@import "components/scales/scales";
@import "components/spinners/spinners";
@import "components/tables/tables";
@import "components/tabs/tabs";
@import "components/toggles/toggles";
@import "components/tooltips/tooltips";
@import "components/traffic_lights/traffic_lights";
@import "components/typography/typography";
@import "components/utils/utils";
@import "components/vertical-alignment/vertical-alignment";
@import "components/whitespace/whitespace";

Thanks

Should PUI upgrade?

As is, consumers of PUI can't change the colors of their headings without making really gross css. Is type-dark-2 on headers really that important?

I can't see Tabs, Tooltips, or Typography..

we slowed down the animation to see what was going on:

CSS Panel examples have footers. React Panels should have this feature too?

Either use isNaN, or polyfill Number.isNaN. Can confirm that after polyfilling (typeof x === 'number' && isNaN(x)), this does work.

• Most images are unused in the html version
• So far, we need gray-cloud.png

Should the sass version use rails helpers like image-url, probably not.

The UI.AlertNotification used to create a bell icon with a size of font-size of h4. But now icons can only be sized via fa-h{size}, and the UI.AlertNotification does not do this, so it's much smaller than it used to be. This is a breaking change/regression for us.

Also, we can't add the class ourselves, because the component doesn't accept class names.

Tabs should have the ability to turn off responsiveness.

There should be a way to add a className/id to the React BS Tabs/Accordion component within the responsive PUI Tabs.

responsiveBreakpoint is not intuitive and doesn't actually work as intended.
ie: responsiveBreakpoint={md} renders Tabs in small screens and large screens.

Currently Pivotal Network uses a popover-like component in a few different places in the application:

It would be great to get a PivotalUI component documented in the styleguide following the Pivotal brand.

Example Bootstrap Popovers

See the $ and .00 here:

Bootstrap documentation: http://getbootstrap.com/css/#forms-inline

The main CSS file is called "application.css", this makes it hard to include the framework in a rails context because it is automatically added to the asset pipeline even when it is put in vendor, so it makes it hard to control incremental rollout.

What is the correct way to do dropdown menus where the items are not simple hyperlinks?

So something like:

      <li className='dropdown'>
        <a href='#' className='dropdown-toggle' data-toggle='dropdown'> Selection <span className='caret'></span> </a>
        <ul className='dropdown-menu'>
          <li><a onClick={this._selectByRectangle.bind(this)} href='#'>Select by rectangle</a></li>
        </ul>
      </li>

Missing a pui-css-alignment dependency.

Alerts and Tab-panes have extraneous padding that is annoying to work with. These should be styleguide only css rather than being published.

We're trying to have something like this...

<UI.Collapse className='foo'>
    ....
</UI.Collapse>

where the foo class would be added to the top-level .panel div.

The instructions for installing the SortableTable React component say npm install pui-react-tables, but they should instead say npm install pui-react-sortable-table.

In a lot of components we are doing this:

var BsAlert = require('react-bootstrap').Alert;

But we want to be doing this:

var BsAlert = require('react-bootstrap/lib/alert')

We don't want to use the full react-bootstrap require since that brings in about 600k of javascript into projects that have pivotal-ui as a dependency.

It would be great to fix this before we get many projects to switch to 2.0.

There should be a search function for the styleguide. Without the All page, it is currently hard to find something specific when you don't know where it lives on the styleguide.

I wasn't able to find another medium upon which to reach out to your team so I hope this is sufficient. First off I'd like to express my appreciation along with the gratitude from the React-Bootstrap team for your efforts to enhance our accessibility and public API.

Per our team's model for maintenance we have expressed that when we see devoted individuals continually providing support we will extend an invitation to join the organization. Though your team's case is particularly interesting since we are seeing a devoted team helping out.

Before we started reaching out to individual members of your team to see if they'd like to join we thought it may be more beneficial to first reach out to your team as a whole and ask if you have one to three members that you feel would be the best fit.

With that said the two teams are slightly different in the way that we approach things, and our focus is different from one another. At the same time we don't want to see that we are preventing you from moving forward. We are open to new tools or governance that will aid in the development lifecycle of our packages, so if there's something that you wish to change just open an issue and we can discuss it as a team. We follow a majority rule governance, and silence is usually perceived as acceptance given a reasonable period of time to allow all interested parties to respond.

Our initial process for adding collaborators is first to permit new members to review and accept pull requests. Then after we see that things are working well we have traditionally given push access to npm primarily for those that show senior level traits. We haven't documented this quasi promotion system, but it has been what we've done so far.

Please take a moment to review our Contributing and Maintaining documentation and let us know if this works for you, or if you are interested. It is our sincere hope that our two teams can work together to build rich reusable components.

On a side note it may make sense in some cases to breakout a new library similar to what we are doing with the react-overlays and react-prop-types projects. If something like this is identified we are open to discussion about it.

/cc
react-bootstrap team:
@aabenoja @AlexKVal @dozoisch @joemcbride @jquense @mathieumg @mfunkie @taion

pivotal team we've seen:
@atomanyih @ctaymor @gpleiss @kennyw12 @matt-royal @nicw @stubbornella

When I try to install grids:
npm install pui-react-grids --save

And include the components in the app:

var Row = require('pui-react-grids').Row;
var Col = require('pui-react-grids').Col;

I get the error:
Error: Cannot find module 'pui-react-helpers'

Simply installing pui-react-helpers fixes it, but it would be nice if that was documented or if it were just a dependency in pui-react-grids...

@atomanyih @nicw

Hey,

We are trying to work on updating the AlertNotification react component, but it's unclear what the best/intended practice is for doing this.

Now that the react components are part of the main repository, I thought perhaps the styleguide would serve components that were prepared locally, but it looks like it actually still uses the remote npm releases in src/pivotal-ui/javascripts/components.js.

We thought to change that components file to require the local JS file (e.g., Notifications: require('../../pivotal-ui-react/notifications/notifications.js').Notifications), but when running the default gulp task it does not preprocess the react components (since it assumed them to be coming from node modules, and therefore already transpiled).

Unfortunately, the CONTRIBUTING readme does not talk about what the current build and development process is for working on react components. It would be great if this were updated so other teams had a clear path for making contributions.

Cheers!

Currently if the viewport is too small vertically and the modal's content is too large, a user cannot scroll to view the action buttons in the footer of the modal (In PivNet's case it's the Accept and Download button).

Ideally, the header and footer would be fixed and only the content would scroll:

The issue is that the modal won't close anymore.

We are a team that is consuming this for our styles. We were using the old pivotal-one-styles repo, but are now tasked with switching to this new repo. The README for this project is currently empty, and with the latest commit from nearly a month ago, it doesn't seem like anyone is going to explain how this works anytime soon.

It would be great if someone could fill out some information in the README about how to use this repo to build assets for an app that consumes these styles. Thanks!

RadioGroup wasn't passing the onChange prop to it's children- the cloneWithProps was referencing onChange local to Radio's context (which resulted in undefined). I made this change:

Line 48:

children = React.Children.map(children, (child) => cloneWithProps(child, {name, onChange: this.onChange}));

==>

children = React.Children.map(children, (child) => cloneWithProps(child, {name, onChange: this.props.onChange}));
                                                                                              ^^^^^^^

Now everything works on tin.

EDIT: So I'm thinking of forking this as there is another thing I feel could be fixed in this (the inclusion of id in the second argument of cloneWithProps, which fulfills the intention of Radio-Group to pass it's id prop to it's children).

Priority: P5
Problem: The highlighted text isn't aesthetically pleasing
Pictures:

Our pre-PUI pages use select2 heavily for searchable select boxes. After moving to PUI, we are finding it to be very difficult to style the faux-select input to look consistent with normal PUI form inputs. Not using select2 would be a bit of a downgrade in functionality. Would it be possible for you guys to help us out with styling? Or would it be possible for you to provide a searchable select input in PUI?

Thanks!

cc: @pivotal-plech @matt-royal

I would like to add an active top border to the simple-tabs-alt component so that it reinforces what view you are currently on other than the subtle background color.

Currently:

Requested: