|
| 1 | +# explorer filter panel notes |
| 2 | + |
| 3 | +trying to get Explorer's sidebar to look like CCDB. not extracting anything into DSR yet — everybody keeps copy/pasting this thing and we might share it later, but not this round. |
| 4 | + |
| 5 | +CCDB is public: https://github.com/cfpb/ccdb5-ui |
| 6 | +look under `src/components/filters/` |
| 7 | + |
| 8 | +don't grab the redux, the aggregations, or the complaint field names. explorer can keep its own state. just the chrome. |
| 9 | + |
| 10 | +also this is NOT the ds "filterable list control panel" (the one at the top of the page with apply/clear and the 3 columns). that's `o-filterable-list-controls`. different animal. ccdb is the sidebar well with checkboxes and counts. |
| 11 | + |
| 12 | +## files i kept looking at |
| 13 | + |
| 14 | +`filter-panel/filter-panel.js` + scss |
| 15 | +- `.filter-panel.o-well` |
| 16 | +- "Filter results by..." |
| 17 | +- hrs between sections |
| 18 | +- close button on small screens |
| 19 | +- scss has the well border hacks and the padding against the hrs. worth a look. |
| 20 | + |
| 21 | +`filter-panel/filter-panel-toggle.js` |
| 22 | +- "Filter results" / "Close filters" when it's skinny. we probably want something like this if explorer doesn't have it. |
| 23 | + |
| 24 | +`collapsible-filter/collapsible-filter.tsx` |
| 25 | +- expandable without the box around it |
| 26 | +- starts OPEN |
| 27 | +- plus/minus round icons |
| 28 | +- aria-label is like "Collapse Product filter" |
| 29 | + |
| 30 | +don't use DSR Expandable for these. it slaps on background + border unless you pass inAccordion, and it calls `CFPB_Expandable.init()` which is a pain with react. ccdb rolled their own on purpose. |
| 31 | + |
| 32 | +`aggregation/aggregation-item/aggregation-item.js` |
| 33 | +- leaf row: DSR Checkbox + label + the count on the right |
| 34 | +- we just switched this over from a raw input. dsr 2.0.3. |
| 35 | + |
| 36 | +`aggregation/aggregation-branch/aggregation-branch.js` |
| 37 | +- parent checkbox + a SEPARATE button for the name/count/caret |
| 38 | +- clicking the checkbox should not open the kids |
| 39 | +- `isIndeterminate` when only some children are on |
| 40 | + |
| 41 | +`aggregation/aggregation.scss` |
| 42 | +- gray lines between rows |
| 43 | +- count parked on the right |
| 44 | +- nested list is `ul.children` with a bit of indent |
| 45 | + |
| 46 | +`more-or-less/more-or-less.js` |
| 47 | +- shows 5 then "+ Show N more". skip if explorer doesn't truncate. |
| 48 | + |
| 49 | +dates / zip / company typeahead = app stuff. only steal the layout if explorer actually has the same control. |
| 50 | + |
| 51 | +## checkboxes |
| 52 | + |
| 53 | +dsr 2.0.3 has `isIndeterminate` on Checkbox now. use that. |
| 54 | + |
| 55 | +how ccdb does parent/child: |
| 56 | +- all kids on → parent checked |
| 57 | +- some kids on → mixed / indeterminate |
| 58 | +- none → off |
| 59 | +- check parent → select parent key, drop the child keys |
| 60 | +- uncheck → wipe parent and kids |
| 61 | + |
| 62 | +leaf rows: accessible name should be whatever's on screen. we used to aria-label the raw key and it was dumb ("TX" instead of "Texas (TX)"). |
| 63 | + |
| 64 | +parents: hide the checkbox label text (`u-visually-hidden`) since the button next to it already says the name. still needs a name for at. |
| 65 | + |
| 66 | +## visually |
| 67 | + |
| 68 | +sidebar is a well. heading. hrs between chunks (margin 0 on the hr, padding lives on the sections). expandables open. plus/minus. counts gray, right aligned. nested ones have the caret. rule lines. maybe show more after 5. mobile toggle. |
| 69 | + |
| 70 | +## before i start ripping explorer apart |
| 71 | + |
| 72 | +- where's their filter sidebar vs the files above |
| 73 | +- what's actually different (well? hrs? default open? counts? caret vs checkbox? more/less? mobile?) |
| 74 | +- what's just markup vs wired to their api |
| 75 | +- anything explorer has that ccdb doesn't (apply button etc) — don't delete that without thinking |
| 76 | + |
| 77 | +no shared FilterPanel component. not yet. |
0 commit comments