pui-css-dropdowns

pui-css-dropdowns

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

Installation

To install the package from the command line:

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" 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 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, a collection of React and CSS components for rapidly building and prototyping UIs.

Styleguide Github npm

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

Changelog

8.0.0 (2017-03-09)

Bug Fixes

Features

• 8 point grid system: Many components have been refactored to fit the grid system described in this blog

• Accordion/Collapse: Redesigned to 8 point standard. Replaced <h5> tag in panel heading with class .panel-title.

• Buttons: Redesigned to 8 point standard.

• Dropdown: Redesigned to 8 point standard. CSS solution is truly CSS-only. Added size option. Added floatMenu option to React component to give explicit control over whether menu is floating.

• Forms: Redesigned to 8 point standard. Custom icons fixed to 18px by 18px.

• Iconography: Wrapping element for Icons were changed from span to div. Added spinner SVGs in three different sizes; sm, md, lg. The spinners can be used in Icons. You can then attach a spinner icon in a button.

• Links: Link animation speed changed from 300ms to 150ms.

• Modals: Redesigned to 8 point standard. Replaced close image with SVG. Replaced modal body wrapping <p> tag with .modal-body class. Removed bootstrap influence from modals styling.

• Panels: Redesigned to 8 point standard.

• Tables: Redesigned to 8 point standard. Added flex-grid-driven table in addition to standard HTML table (both React and CSS). Added border and hover modifier classes for CSS only tables.

• Tabs: Redesigned to 8 point standard.

• Tooltips: Redesigned to 8 point standard. Added a TooltipTrigger React component that uses a different rendering strategy from OverlayTrigger. Added dark and light themes to both TooltipTrigger and OverlayTrigger. CSS solution for tooltip is truly CSS-only. Added three sizes to tooltips (sm, md, lg).

• Typography: Redesigned to 8 point standard.

Breaking Changes

• Buttons: The .button class has been replaced by the .btn class. All <button> tags now require the .btn class to be styled.
• Dropdowns: CSS version has new structure and classes, see style guide. The small size has been removed. The following changes have been made to the React component:
  • The pullRight option has been replaced with the menuAlign option to accommodate the ability to pull left.
  • The border option has been removed.
  • The toggle option has been replaced with by the icon option.
  • The menuCaret option has been renamed to showIcon for clarity.
• Forms: The following classes have been removed: .checkbox-inline, .radio-inline, .inline-labels, and .unstyled.
• Iconography: The .svgicon class has been replaced by the .icon class. The .svg-baseline and .svg-middle classes have been replaced by .icon-baseline and .icon-middle classes.
• Tables: The following CSS classes have been removed: .table-data, .table-key-value, .table-striped, and .table-light. The variously-sized scrollable tables classes have been removed: .table-scrollable-sm, .table-scrollable-md, and .table-scrollable-lg. Scrollable tables now have a default max height of 164px.
• Tooltips: The CSS version no longer relies on bootstrap. CSS version has new structure and classes, see style guide.

Deprecated

• Panels: The following types of panels are deprecated: simple, basic alt, panel title, highlight panel, alternate, shadow, card, and clickable.
• Tabs: The following types of tabs are deprecated: simple alt tabs and images tabs
• Typography: h1.title

<a name="7.5.5"></a>