Skip to content

Design Refresh

Compare
Choose a tag to compare
@benoitjchevalier benoitjchevalier released this 24 Jul 22:50
· 155 commits to master since this release
  • rebuild of the px-dropdown component using iron-dropdown and iron-selector
  • added new icons
  • code review fixes
  • fix #50, #51, #52
  • add prop for disableClear

Additional notes on the new API for dropdown:

  • The px-dropdown-content subcomponent no longer exists. Several properties have been moved to the main px-dropdown component.
  • Most of the CSS variables for px-dropdown have gone away. Styling for the invoking element can still be achieved using the buttonStyle property and the CSS variables for buttons.
  • The boundTarget property now expects a CSS selector string instead of a reference to the actual HTML element that will be used for the outer bounds of the dropdown.
  • The checkboxMode property is now called multi.
  • By default, the dropdown button will display the selected item or number of selected items (#34). Use the hideSelected property to disable this behavior in use cases such as px-data-table, where the displayValue of "Show/Hide Columns" should always be displayed.
  • The displayValue property is no longer overwritten when the user selects an item. In multi mode, the displayValue is appropriately restored when all selections are cleared (#40).
  • A new clear button has been added for quickly de-selecting all values and restoring the dropdown to its default state and displayValue. This also allows users to clear the dropdown when not in multi-select mode, which was not previously possible. You can turn off this functionality with the disableClear property.
  • When multi is false (i.e. single-select mode), use selectBy to determine whether a "key" or "val" will be passed to the selected property. When multi is true, use selectBy to determine whether an array of "key" or "val" items will be passed to the selectedValues property. In either single or multi mode, the selectedItems property will contain a reference to the actual
    elements in the dropdown that have been selected.
  • Set sortMode to "key" or "val" to sort the dropdown options. By default, they will be displayed in the order they are passed in to the items array. The sortCheckedItems and sortDisabledItems properties have been removed for simplicity.
  • The px-dropdown-value-changed and px-dropdown-checkbox-changed events have been consolidated into a single px-dropdown-selection-changed event, which will fire in either single or multi-select mode.
  • All of the orientation and sizing logic has been simplified by using Google's iron-dropdown instead of the custom code in previous versions of dropdown. The properties for extendDropdown, extendDropdownBy, maxContentCharacterWidth, and the use of px-tooltip have all been removed.
  • Keyboard support has been added for accessibility.