feat(Dropdown): add checkable and checkableIndicator prop#1738
feat(Dropdown): add checkable and checkableIndicator prop#1738
Conversation
mnajdova
requested review from
dvdzkwsk,
kuzhelov,
layershifter,
levithomason and
miroslavstastny
as code owners
Codecov Report
@@ Coverage Diff @@
## master #1738 +/- ##
==========================================
- Coverage 69.79% 69.78% -0.01%
==========================================
Files 872 872
Lines 7498 7503 +5
Branches 2204 2207 +3
==========================================
+ Hits 5233 5236 +3
- Misses 2257 2259 +2
Partials 8 8
Continue to review full report at Codecov.
|
| styles: styles.content, | ||
| }, | ||
| })} | ||
| endMedia={ |
There was a problem hiding this comment.
This is different then how the rest of the elements are created and where the styles are applied, but there are issues with the height if we don't provide these styles.. I am open for other ideas...
There was a problem hiding this comment.
Atlaskithttps://atlaskit.atlassian.com/packages/core/select
BlueprintJS
AntDesignhttps://ant.design/components/select/
|
mnajdova
changed the title
mnajdova
changed the title
|
We will need to set aria-selected on selected option: |
| searchQuery: PropTypes.string, | ||
| searchInput: customPropTypes.itemShorthand, | ||
| toggleIndicator: customPropTypes.itemShorthand, | ||
| toggleIndicator: customPropTypes.itemShorthandWithoutJSX, |
| }), | ||
| checkableIndicator: ({ variables: v }) => ({ | ||
| position: 'relative', | ||
| left: pxToRem(3), |
There was a problem hiding this comment.
The padding on the DropdownItem is 11px, but the icon should be 8px from the right border, that's why we need styles
Co-Authored-By: Oleksandr Fediashov <olfedias@microsoft.com>
4 participants
We have a requirement for Teams theme for adding checkmark icon in the selected dropdown item. We have several options:
selectedIndicatoricon shorthand prop in theDropdown, for allowing setting checkmark on the selected drop down item:Add
checkable&checkableIndicatorprops on the Dropdown & DropdownItem - similar to the clearable and clearableIndicator that we already have (thanks @layershifter for the proposal)Adding endMedia prop in the Dropdown Item as it is already a list item, and users can use it if they want to add some icon when the item is selected.
We need to decide on a common pattern for these things. In the Input, we have only the clearable boolean prop, so we have no way of customizing that slot. In the Dropdown together with the clearable we have the clearableIndicator. As we tend to say that every slot in the Stardust components can be customized, I believe we need to have slots for these things as well, although that they have some defaults.