Select Multi

[francisrupert]

Task

• [x] Design
• [x] Build HTML/CSS (done in PCP)
• [x] Port to fsa-style, namespace, any adjustments, etc.
• [x] Variations?
• [x] Examples; e.g. without "Select all", what else?
• [x] States: at least disabled, what else?
• [x] Script demo (plain vanilla, non-jQuery)
  • [x] Select / Deselect all
  • [x] Indeterminate.
  • If at least 2 .pcp-select-multi__check are checked, the "Select all" checkbox is indeterminate. DS Reference.
  • Clicking checkbox in indeterminate state unchecks all.

PCP Prototype: https://sharepoint....component_select-multi.html

[bignamehere]

@francisrupert

Created a branch for Select Multi and added functionality for select all and disabled variations.

commits e2afbf5 and db9d767 are ready for peer review.

[francisrupert]

@bignamehere,

Action Pull before you next work on feature/select-multi branch to avoid conflict mayhem.

Background As part of adjusting disabled form elements (#189), I had to account for this component's disabled equivalent too. It was easier to do so by merging my working branch to feature/select-multi and adjusting.

I'm completely out of this branch now. So once you've completed the indeterminate feature, we'll likely move to develop right quick.

[bignamehere]

@francisrupert

I need a second set of eyes on this issue. I have tried a number of ways to try and replicate the jQuery example, but am having issues traversing back up the ancestry nodes to turn indeterminate to checked. I have committed my code here.

Can you take a look and see if you can spot what I am missing.

FYI:

• I have turned off the Select All capabilities because they will need to be rewritten with this new logic.

• I have added a --tiered class that gives more max-height for nested input trees. Needs CSS help later.

[francisrupert]

@bignamehere,

While the multi-tiered nested example you're attempting will be a good use case to make available at some point, don't kill yourself to get that working for now. Concentrate on the flat use case.

Solidify the below use case, and then create a new issue (referencing this issue) that addresses a multi-tiered example set for a future milestone.

Nothing is selected

[ ] Select all
[ ] Apple Pie
[ ] Cherry Pie
[ ] Peach Pie

Checking "Cherry Pie" results in indeterminate "Select all"...

[-] Select all
[ ] Apple Pie
[x] Cherry Pie
[ ] Peach Pie

Checking "Select all" when in indeterminate state will uncheck all

[ ] Select all
[ ] Apple Pie
[ ] Cherry Pie
[ ] Peach Pie

Checking "Select all" when none are checked

[x] Select all
[x] Apple Pie
[x] Cherry Pie
[x] Peach Pie

Unchecking "Cherry Pie" when all are checked results in indeterminate "Select all"

[-] Select all
[x] Apple Pie
[ ] Cherry Pie
[x] Peach Pie

[bignamehere]

@francisrupert

I rebuilt the code for the Select Multi with the Select All feature. Based on my research of various examples online, I believe we should not have the Select All checkbox uncheck all when in the Indeterminate state. There are a few UX and technical reasons as well, including that being counter intuitive to the label "Select All". Gmail is the only example I saw that used this behavior, but their pattern does not include any labels at all. To be honest, the Gmail implementation seems rather confusing.

Let's discuss further when you have some time.

[bignamehere]

@francisrupert

For reference, here are the examples I looked at:

Example One

Example One Code Pen

Example Two

Example that talks about behavior of indeterminate state.

Example five

[bignamehere]

closing as per 705e9ce

[bignamehere]

Reopening. Noticed a bug in IE.