pui-css-dropdowns

pui-css-dropdowns

A CSS dropdowns component that can be installed via this npm package. The package provides all of the CSS you need to use the component.

Installation

To install the package, from the command line, type:

npm install pui-css-dropdowns

Usage

Note that this requires the Bootstrap JavaScript.

<div class="dropdown btn-group">
  <button id="dropdown-button-1" class="dropdown-toggle btn btn-default" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-button-1">
    <li role="presentation">
      <a href="http://www.google.com" role="menuitem">Google</a>
    </li>
    <li class="divider mvn"></li>
    <li role="presentation">
      <a href="http://www.yahoo.com" role="menuitem">Yahoo</a>
    </li>
    <li class="divider mvn"></li>
    </li><li role="presentation">
      <a href="http://www.aol.com" role="menuitem">Aol</a>
    </li>
  </ul>
</div>

You can find more examples of the dropdowns component in the pui style guide

This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

Styleguide Github

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.

Changelog

2.0.0 (2015-09-29)

BREAKING CHANGES

• alerts: (css class) .alert-icon styles icons within alerts. (a6cfe36)
• buttons: (css class) .btn-primary and PrimaryButton are no longer supported. (8b86a1f)
• buttons: (css class) the value of $error-3, and $red-3 became darker. (232156c)
• buttons: (sass variable): the button-skin-alternate mixin is no longer supported (800c0f9)
• colors: (sass variables) 2.0 conversion table,dark,dark-3 is now dark-4,dark-2 is now dark-3,dark-1 is now dark-2,brand,brand-3 is now brand-8,brand-1 is now brand-3,brand-5 is now brand-10,brand-2 is now brand-5,brand-4 has changed, there is no equivalent color in 2.0 and will now be brand-9 to have a more appropriate place within the brightness scale,accent,accent-5 is now accent-6,accent-4 has changed, there is no equivalent color in 2.0 and will now be accent-5 to have a more appropriate place within the brightness scale,accent-3 is now accent-4,accent-2 is now accent-3,accent-1 is now accent-2,error,error-4 is now error-6,error-3 is now error-4,error-2 is now error-3,error-1 is now error-2,warn,warn-3 is now warn-6,warn-2 is now warn-3,success,success-2 is now success-6 (aeba298)
• dropdowns: (css class) Dropdowns now become darker when opened instead of lighter.(70fece4)
• dropdowns: (javascript) PrimaryDropdowns are no longer supported. (f1bfc81)
• ellipsis: (css class) 2 and 3 line ellipsis no longer supported. (fbd5fc3)
• expander: (html) The DOM for ExpanderTrigger has changed. There is no longer a wrapping div. (480c7bc)
• forms: (css class) Help text on input is now darker. (f2761e3)
• forms: (css class) .help-block has a darker color now. For the old color, use $gray-dark. (f2761e3)
• health_indicators: removes health_indicators from pui-css-deprecated (799eb23)
• images: (javascript) Images no longer responsive by default. Please use the responsive flag. (447a6a0)
• links: (css class) link-lowlight-alt is no longer supported. Please use link-lowlight instead. (757a0a1)
• links: (css class) the value of $link-color, $accent-2, and $blue-2 became darker (29c5826)
• lists: (sass variable) $list-steps-color-current is now $brand-8 (690d59b)
• lists: (css class) addable list animations removed. Do not use. (53315f5)
• lists: (html) The `.event-list` class is no longer supported. If you want to build a event list, build it up using a group list. See an example at http://styleguide.pivotal.io/elements.html#list_group (f8f2e40)
• maps: (css class) Google maps now need the `.labs-map` class to get styles. (d24e699)
• mixin: (sass variable) font() mixin no longer available. Use font-helper mixin from pui-css-typography instead. (dc94761)
• modernizr: (javascript) modernizr is no longer included with Pivotal UI (086002c)
• no-js: removes .no-js from pui-css-deprecated (c3674a2)
• panes: (javascript) outerClass, and innerClass no longer work. Use className and innerClassName to pass the classes, respectively. (76ac09e)
• selects: (sass variables) $input-border is now $neutral-7 (192e5af)
• sortable-table: (javascript) React component has new wrapping components for the header and rows. (537f477)
• tabs: (javascript) For the react version of tabs, the property 'tabs' is now called 'title' (01dad2a)
• tabs: (sass variables) $tab-responsive-color is now $neutral-3 instead of $neutral-4 and $tab-responsive-active-color is now $brand-5 instead of $brand-8 (7d99cec)
• tabs: The old styling of SimpleTabs is no longer available. The same classes or React Components use the new styles. (a942a44)
• tabs: (whitespace) tab default body padding is now on .tab-pane (cac8cde)
• toggles: removes toggles from pui-css-deprecated (945039a)
• typography: (css class) header line height changed and will look closer together on multiline headers but will look the same on single line headers (492247a)

Features

• autocomplete: Add autocomplete React component (6304d0c)
• back-to-top: react back-to-top accepts classname, id, style (92e095b)
• bootstrap: upgrade bootstrap from 3.3.1 to 3.3.5 (6f96e31)
• btn-group: Adds button groups (f2ff18a)
• buttons: react buttons now accept classname, id, and style (1f41c6d)
• collapse: Collapse can now start out open by passing defaultExpanded (7f01614)
• colors: Add new dark swatches and color styles (143695b)
• colors: add type modifiers for dark colors (46bfbf3)
• dividers: Dividers passthrough className, id and style (7d1db48)
• draggable-list: DraggableList passes through attributes (183810a)
• dropdown: Dropdown and DropdownItem pass through attributes (87b40f7)
• forms: Change selects to have label outside (e876de4)
• helpers: add `pui-react-helpers` module, with `mergeProps` function (ea0d732)
• labels: react labels now accept classname, id, style (48e9a39)
• lists: react lists accept classname, id, and style props (4f2a0e1)
• maps: Removes Maps dependency on id for height styling (d24e699)
• modal: Make x to close react modals accessible (48e41dd)
• modal: Modals passthrough className, id, and style (fe01756)
• notification: AlertNotifications passes through id, className, and style (0e8061a)
• notification: Notifications pass through className, style, and id (859e679)
• notifications: Add size prop to react notifications (569fcc8)
• overlay-trigger: Creates a unique id for overlay prop (52523d4)
• panels: Adds passthroughs for className, id, and style (174c544)
• panes: Panes passthrough className, id, and style (76ac09e)
• radio: Classname and style passes through to radio div (9f736c9)
• radio-group: react radio-group accepts classname, id, and style props (4d781f5)
• react-animations: remove pui-css-react-animations (e944ad0)
• ribbons: react ribbons now accept classname, id, and style props (1ecda1f)
• select-fancy: add a select fancy react component (b20a078)
• stream-list: Creates a stream-list component (b96429e)
• tabs: Makes tabs responsive (721cdbf)
• tabs: Adds new component LeftTabs in Tabs package (c1e87dd)
• tabs: Upgrade to new react-bootstrap Tabs API (01dad2a)
• tabs: Update styles for SimpleTabs for 2.0.0 (a942a44)
• tile-layout: adds TileLayout component (c3ff982)
• tooltip: Adds className, id, and style passthrough (ae06ad1)
• traffic-lights: Adds traffic lights component (985171e)
• typography: Headers now have a smaller line-height (492247a)
• typography: uses a variable for header padding (8fd4d96)

Accessibility

• alerts: JAWS indicates that alerts are alerts (95aca19)
• back-to-top: improve accessibility of back-to-top (61c9b93)
• buttons danger buttons pass contrast requirements (232156c)
• colors: changes colors to be more web accessible (aeba298)
• links: links pass contrast requirements (29c5826)
• modals: Modals are more accessible (08de4ff)
• sortable-table: Make sortable table keyboard accessible (ffdfe3a)
• tabs: Set correct aria-controls value for Tab nav items (75fd100)

Bug Fixes

• alerts: Add color back to notification alert icon (70ab958)
• alerts: Alert styles changed (a6cfe36)
• alerts: Remove extra margin on the alert (dc72f3d)
• autocomplete: Fix scroll to top (629401b)
• autocomplete: Uses neutral instead of gray (100ad8b)
• avatars: Adds alt attributes to image tags (1205551)
• back-to-top: Update dependencies for react back-to-top (4cefca2)
• back-to-top: make jquery back-to-top accessible (03e4d9b)
• buttons: Fixes Button Default Alternate hover state (c9db631)
• buttons: Changes style of buttons. (8b86a1f)
• dividers: (visual appearance) large dividers have less whitespace (b1a1906)
• dividers: reduce padding around large dividers to match small dividers (b1a1906)
• draggable-list: DraggableList callback onDrop is no longer passed to list items - use onDragEnd instead to provide a callback. (0bdd107)
• dropdowns: Changes style of dropdowns. (70fece4)
• dropdowns: Removes Primarydropdown (f1bfc81)
• dropdowns: buttonClassName is propagated properly (4e88e37)
• dropdowns: Adds default uniqueid to Dropdowns. (161198a)
• dropdowns: Fixes the highlighting on hover of dropdown items (718bfdd)
• ellipsis: removed 2 and 3 line ellipsis options (fbd5fc3)
• expander: Handle expander open animation correctly (d83f3dc)
• expander: ExpanderTrigger no longer wraps the given child (480c7bc)
• forms: Fix contrast issues on forms (f2761e3)
• forms: Inputs have labels (2ad8ed7)
• forms: Makes ids unique. (8c0ee53)
• forms: help-inline class has been removed from forms (87a90a5)
• forms: (sass variable) $input-color is now $neutral-3. (df046bd)
• forms: Changes input text color to be darker. (df046bd)
• images: Images get responsive class only with flag (447a6a0)
• links: Updates link colors and hover/focus and active states (757a0a1)
• lists: Current step list item is now brand-8 (690d59b)
• lists: Removes event list css (f8f2e40)
• media: InnerClassName passes through to the media-body (4966246)
• modals: fix times symbol (7d9dff9)
• modals: react modals now scroll when content is greater than viewport (4355e94)
• react-bootstrap: only require needed components from react bootstrap (a2847f9)
• selects: changes select styles (192e5af)
• sortable-table: refactor sortable-table to rerender with data change (537f477)
• sortable-table: sorts on first sortable column by default (c3b2fa0)
• sortable-table: Clicking on sortable header doesn't select text (a9ec8a0), closes #103050640
• tabs: Fixes contrast on Left Tabs and Responsive Tabs (7d99cec)
• tabs: Fixes bugs in react tabs and improves docs (2f0df41)

<a name="1.10.0"></a>