Add affordance to icon selector in docs and fix selection state #6877
Conversation
evansjohnson
changed the title
fix selection stateBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
|
Noticed #6878 while testing but don't want to put more time into this for now |
more correctBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
| @@ -159,6 +167,7 @@ export class Select<T> extends AbstractPureComponent<SelectProps<T>, SelectState | |||
| filterable = true, | |||
| disabled = false, | |||
| inputProps = {}, | |||
| placeholder = "Filter...", | |||
There was a problem hiding this comment.
I used an ellipsis in Start typing to search… but didn't want to convert all ellipsis in BP to the actual character until a major version bump since this could be a breaking change (tests that rely on finding elements by default text)
| * | ||
| * @default "Filter..." | ||
| */ | ||
| placeholder?: string; |
There was a problem hiding this comment.
calling out this small new feature. this has some potential to be used inappropriately, but I don't think "Filter..." is always the best indication here particularly since the user is responsible for defining the match predicate and may not strictly implement a filter
There was a problem hiding this comment.
I agree just "Filter..." may not be that valuable to a user. I also think we'd want this to be customizable for translations. I'm actually surprised a hard-coded English string has survived this long in Blueprint without someone flagging that a translation is necessary.
Thanks for adding!
| @@ -77,9 +80,6 @@ export class IconSelect extends React.PureComponent<IconSelectProps> { | |||
| }; | |||
|
|
|||
| private filterIconName = (query: string, iconName: IconName | typeof NONE) => { | |||
| if (iconName === NONE) { | |||
| return true; | |||
| } | |||
| if (query === "") { | |||
There was a problem hiding this comment.
this prevents loading the full list on empty query - there's over 600 icons and it's a bit laggy if showing all... and doesn't quite feel worth bringing in a virtualized list for
There was a problem hiding this comment.
I was a bit surprised it was starting to struggle with just 600 items, in case this raises any concerns
| * Defining this will set the `aria-selected` attribute and apply a | ||
| * "check" or "blank" icon on the item (unless the `icon` prop is set, | ||
| * which always takes precedence). | ||
| * Whether this item should appear selected - `roleStructure` must be `"listoption"` for this to be |
There was a problem hiding this comment.
Thank you for adding this comment!
roleStructuremust be"listoption"for this to be applied.
This prop being a no-op depending on roleStructure would have surprised me too, especially since "listoption" isn't the default.
| * | ||
| * @default "Filter..." | ||
| */ | ||
| placeholder?: string; |
There was a problem hiding this comment.
I agree just "Filter..." may not be that valuable to a user. I also think we'd want this to be customizable for translations. I'm actually surprised a hard-coded English string has survived this long in Blueprint without someone flagging that a translation is necessary.
Thanks for adding!
cleanup noneBuild artifact links for this commit: documentation | landing | table | demoThis is an automated comment from the deploy-preview CircleCI job. |
Fixes no issue
Checklist
Changes proposed in this pull request:
selectedonly applies with the"listoption"role - I had to dig into the code to figure out what was going wrong here and initially thought selection state was entirely broken.Reviewers should focus on:
Screenshot
Current:
I found this to be confusing - this looks like it came up in the PR that introduced but it was a big one and I suppose was never addressed
no indication of selection within menu - note selected icon shown in button:
This PR:
custom placeholder text:
selection state: