Releases: predixdesignsystem/px-dropdown
Releases · predixdesignsystem/px-dropdown
Chrome Unique ID Fix
- Removed id #searchbox from px-dropdown and used the class variable .search__box.
- This ensures no duplicate 'non-unique id' error that chrome console checks for.
remove es6 code to please IE
v4.7.7 bump version
v4.6.1: Merge pull request #76 from sks/patch-1
remove console.log
px-dropdown can now optionally hoist the overlay portion out of a stacking context trap
- Adding px-overlay-content to optionally hoist content.
- px-dropdown was broken up into two sub components to facilitate hoisting.
- Adds JS to dynamically watch for a trigger element to be added to the trigger slot so we can avoid breaking the API. We can't just pass the trigger down because in v1 Shadow DOM slots passed down twice that are empty still wipe out any
default content. - Refactor px-dropdown-content to just listen for click event emitting from the trigger
- Move all code that deals with items into px-dropdown-content to cleanly seperate concerns. px-dropdown is just a wrapper that connects the trigger and content together and passes properties and slotted content down.
- Adds JS to dynamically watch for a trigger element to be added to the trigger slot so we can avoid breaking the API. We can't just pass the trigger down because in v1 Shadow DOM slots passed down twice that are empty still wipe out any
Polymer 1.x/2.x hybrid element support
Design Refresh
- 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.
v4.0.0-prerelease
code review fixes
v3.1.1
fix for failing FF unit test
Add search and sorting functionality
New properties and functionality on the px-dropdown-content
sub-component:
search-mode
- includes an input field that live-filters the list of dropdown optionssort-mode
- if set to 'key' or 'val', the dropdown items will be sorted accordinglysort-disabled-items
- if set to true, disabled options will appear at the bottom of the list
The following are only used if checkbox-mode
is also true:
sort-checked-items
- if set to true, selected items appear at the top of the listshow-selected
- if set to true, the placeholder text will be replaced by a comma-separated list of all the checked items from the dropdown
Thanks to @PiotrekPaprocki for the pull request.
Added capability to disable a dropdown item
v2.2.0 added capability to disable a dropdown item