Design Refresh
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 mainpx-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 calledmulti
. - 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 thedisplayValue
of "Show/Hide Columns" should always be displayed. - The
displayValue
property is no longer overwritten when the user selects an item. Inmulti
mode, thedisplayValue
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 thedisableClear
property. - When
multi
is false (i.e. single-select mode), useselectBy
to determine whether a "key" or "val" will be passed to theselected
property. Whenmulti
is true, useselectBy
to determine whether an array of "key" or "val" items will be passed to theselectedValues
property. In either single or multi mode, theselectedItems
property will contain a reference to the actualelements 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. ThesortCheckedItems
andsortDisabledItems
properties have been removed for simplicity. - The
px-dropdown-value-changed
andpx-dropdown-checkbox-changed
events have been consolidated into a singlepx-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.