EuiSuperSelect #921

cchaos · 2018-06-12T20:17:04Z

Addresses #274 , fixes #978

This creates a custom EuiPopover implementation that styles the triggering button to look like a EuiSelect and populates a list of EuiContextMenuItems based on an options object prop.

The issue right now is that it still behaves like a popover and not a select. Things that need help:

Utilize the same keyboard functionality as in EuiComboBox
Fix the focus/active states of the triggering button
Probably better positioning either from EuiComboBox or whatever the fix is going to be for EuiPopover

cchaos · 2018-06-12T22:14:49Z

@chandlerprall Do you think you could help out with the JS stuff for this one?

snide · 2018-06-12T23:02:28Z

Does it need the isInvalid stuff as the typical EuiSelect does? If so, what does it do and how will it need to be implemented

Yes, we'll need it. Though I think it should just come from EuiFormRow the same as any other. You'll just want to pass some form of isInvalid prop into this component as well. I'm guessing that will do literally nothing other than make the underline red.

chandlerprall · 2018-06-13T17:09:19Z

@cchaos yeah, no problem! I can get to it later today / tomorrow

cchaos · 2018-07-09T17:48:30Z

@chandlerprall, Any chance you will be able to get back to this this week?

chandlerprall · 2018-07-09T20:14:32Z

@cchaos yes! Sorry, fell off my radar.

cchaos · 2018-07-30T18:04:00Z

@chandlerprall Sorry, I merged your width PR in without testing. I noticed that when the popover is closing it doesn't maintain the determined width: https://d.pr/free/v/xzqbKp

cchaos · 2018-08-03T18:49:02Z

@chandlerprall thoughts on the above?

cchaos · 2018-08-03T19:10:52Z

Ok, this is finally no longer a WIP. Ready for review!

snide

Read through the code, tested both the new select and the adjusted context menu in IE11 and Chrome. Also went and built one to test it out.

Comments are pretty minor. Feel free to merge on your time.

I'd do three lines for your changelog. One for the new component, one for the popover change (hasArrow) and one for the context menu layout stuff.

snide · 2018-08-03T20:34:58Z

src-docs/src/views/super_select/super_select_basic.js

+
+  render() {
+    return (
+      <Fragment>


Can prolly yank this fragment. Look like there's only one child?

snide · 2018-08-03T20:46:23Z

src-docs/src/views/super_select/super_select_complex.js

+
+  render() {
+    return (
+      <Fragment>


snide · 2018-08-03T20:48:03Z

src-docs/src/views/super_select/super_select_example.js

+    text: (
+      <div>
+        <p>
+          This is a simple replacement component for <EuiCode>EuiSelect</EuiCode> if you


It'd be nice if over on the EuiSelectdocs we back to this EuiSuperSelect page as well. Guessing a lot of people would find it from there.

snide · 2018-08-03T20:53:36Z

src/components/context_menu/_context_menu_item.scss

@@ -34,3 +34,19 @@
  .euiContextMenuItem__arrow {
    align-self: flex-end;
  }
+
+  .euiContextMenu__itemLayout {


I didn't look too deep here, but IE11 has some fuzziness (that you don't see on github docs) now. Could be related to the shadow stuff in popover in a previous PR?

This PR

Live github docs

Note, that I would spend 5 minutes on this. I don't think it's a big deal, was just something small i noticed.

The whole popover is fuzzy (even the text). I don't think it's related to the drop shadow stuff. I'll look into it though.

Could very well be from fractional numbers on popover positioning. LMK if that's the issue.

Hmm, my local looks fine:

Even with decimal placement it is fine:

Though, @chandlerprall maybe the positioning service should just go ahead and round to a whole number?

snide · 2018-08-03T20:55:10Z

src/components/form/super_select/_super_select.scss

+  }
+}
+
+.euiSuperSelect__popoverPanel[class*="bottom"] {


What does this do? If it's anticipating a particular class, then maybe it makes more sense to use that specific class name(s) here so it's easier to find the reference if you change that class name?

So instead of relying on a full classname that is created by a different component like .euiPopover__panel-bottom, all I care about is the direction portion bottom. So if the prefix to the class name ever changes, it won't affect this component that depends on it.

I think it's important to remember we're also writing this codebase for everybody (Kibana team at large and community contributors)... so we should think about the point of view coming into this code and trying to figure out what it does so that they can either debug something or submit a PR. If someone comes to the super select and reads this line, they need to reverse engineer how the super select works in conjunction with the popover to understand what classes it could be interacting with. This line gives the reader a clue, and then the reader needs to spend time figuring it out.

But if it was just .euiSuperSelect__popoverPanel.euiPopover__panel-bottom then the line tells the reader exactly what it does, and they can focus their time on their PR rather than trying to decipher the code.

I don't think your concern is about needing to "reverse engineer" than just now knowing what that selector means. This type of selector is a very common one and we shouldn't need to be explicit (and therefore too dependent) for those that just aren't as CSS knowledgable. Its a quick lookup and you can easily see the result or debug in the browser's dev tools.

I don't think this is worth blocking on, so I'm OK with merging this PR without this change. But if you want to know more about my motivations, here's a great article on the importance of writing code so it can be understood (not saying that you don't care about this already, but I just thought it's worth sharing).

What I'll do is just add a comment about where that's coming from so then at least it's understandable.

snide · 2018-08-03T20:57:34Z

src/components/form/super_select/_test.scss

@@ -0,0 +1,3 @@
+.euiTest {


Assuming this isn't supposed to be here?

snide · 2018-08-03T21:00:17Z

src/components/form/super_select/super_select.js

+      e.preventDefault();
+      e.stopPropagation();
+      this.shiftFocus(SHIFT_BACK);
+    } else if (e.keyCode === keyCodes.DOWN) {


This works great, love that it goes back to the top. I'd also add a key event for "space" that does the same as down so that it mirrors the behavior of a HTML select.

Does SPACE not work as expected for you? For me, if the select box is focused but not open SPACE opens the options list, if an option is focused SPACE selects that option and closes the dropdown.

SPACE works for me

Yeah, sorry, chatted this in slack. Was a bad report on my side. This works as expected.

snide · 2018-08-03T21:02:44Z

src/components/popover/_popover.scss

@@ -131,6 +131,11 @@
      }
    }
  }
+
+
+  &.euiPopover__panel-noArrow .euiPopover__panel__arrow {


Element of an element? Maybe just make this something unique?

I don't understand.

Sorry, should have been more direct.

.euiPopover__panel__arrow

I think we've tried to avoid using underscores twice in a single selector. My read of this is that arrow is an element of the element panel of the block popover.

Should it just be....

euiPopover__panelArrow as the element of popover instead?

Yeah, that was leftover from another PR, but I can change it here

cjcenizal · 2018-08-03T23:17:22Z

Wow, the globalToastList tests failed... now THAT'S weird.

19:12:24 FAIL src/components/toast/global_toast_list.test.js
19:12:24   ● EuiGlobalToastList › props › dismissToast › is called when the toast lifetime elapses
19:12:24 
19:12:24     expect(received).toBe(expected)
19:12:24     
19:12:24     Expected value to be (using Object.is):
19:12:24       true
19:12:24     Received:
19:12:24       false
19:12:24 
19:12:24        96 |         // The callback is invoked once the toast fades from view.
19:12:24        97 |         setTimeout(() => {
19:12:24     >  98 |           expect(dismissToastSpy.called).toBe(true);
19:12:24        99 |           done();
19:12:24       100 |         }, TOAST_LIFE_TIME_MS + TOAST_FADE_OUT_MS + 10);
19:12:24       101 |       });
19:12:24       
19:12:24       at src/components/toast/global_toast_list.test.js:98:42
19:12:24       at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:633:19)
19:12:24 
19:12:24   ● EuiGlobalToastList › props › dismissToast › is called when the toast lifetime elapses
19:12:24 
19:12:24     Error: Uncaught [Error: expect(received).toBe(expected)
19:12:24     
19:12:24     Expected value to be (using Object.is):
19:12:24       true
19:12:24     Received:
19:12:24       false]
19:12:24 
19:12:24       2 | // failed prop types check.
19:12:24       3 | console.error = message => {
19:12:24     > 4 |   throw new Error(message);
19:12:24       5 | };
19:12:24       6 | 
19:12:24       
19:12:24       at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
19:12:24       at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:635:7)
19:12:24       at BufferedConsole.Object.<anonymous>.console.error (scripts/jest/setup/throw_on_console_error.js:4:9)
19:12:24       at VirtualConsole.on.e (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
19:12:24       at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
19:12:24       at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:635:7)

cjcenizal · 2018-08-03T23:17:30Z

Retest

cjcenizal · 2018-08-03T23:17:47Z

Jenkins test this?

cjcenizal

👏 This is awesome! I tested it in the browser and it works great. Code looks great overall, I just had a few suggestions with one big suggested change to the interface.

I did run into a problem with screen-reader accessibility. When I tab to the super select, VoiceOver on OS X doesn’t read the selected option. When I tab to a regular select element, the selected option is read aloud first, and then the element itself is identified. Can we fix this so the behaviors are identical/similar?

cjcenizal · 2018-08-03T23:44:44Z

src/components/form/super_select/super_select.js

+      />
+    );
+
+    const items = options.map((option, index) => {


We can support passing through props here (see next comment):

const items = options.map((option, index) => { const { value, dropdownDisplay, inputDisplay, ...optionRest } = option; return ( <EuiContextMenuItem key={index} className={itemClasses} icon={valueOfSelected === value ? 'check' : 'empty'} onClick={() => this.itemClicked(value)} onKeyDown={this.onItemKeyDown} layoutAlign={itemLayoutAlign} buttonRef={node => this.setItemNode(node, index)} style={{ width: this.state.menuWidth }} { ...optionRest } > {dropdownDisplay || inputDisplay} </EuiContextMenuItem> ); });

cjcenizal · 2018-08-03T23:55:55Z

src-docs/src/views/super_select/super_select_basic.js

+  constructor(props) {
+    super(props);
+
+    this.options = [


Can we add an example of disabled options and the application of pass-through props?

this.options = [ { value: 'option_one', inputDisplay: 'Option one', disabled: true, 'data-test-subj': 'option one', }, { value: 'option_two', inputDisplay: 'Option two', }, { value: 'option_three', inputDisplay: 'Option three has a super long text to see if it will truncate or what', }, ];

It looks like unexpected props aren't passed through.

cjcenizal · 2018-08-03T23:57:04Z

src/components/form/super_select/super_select.js

+  }
+
+  onItemKeyDown = e => {
+    if (e.keyCode === keyCodes.ESCAPE) {


switch might be more appropriate here since all of the conditions assert against the same variable:

const { ESCAPE, TAB, UP, DOWN } = keyCodes; // in all cases, close the popover and prevent ancestors from handling switch (e.keyCode) { case ESCAPE: e.preventDefault(); e.stopPropagation(); this.closePopover(); break; case TAB: // no-op e.preventDefault(); e.stopPropagation(); break; case UP: e.preventDefault(); e.stopPropagation(); this.shiftFocus(SHIFT_BACK); break; case DOWN: e.preventDefault(); e.stopPropagation(); this.shiftFocus(SHIFT_FORWARD); break; }

cjcenizal · 2018-08-04T00:06:14Z

src/components/form/super_select/_super_select_control.scss

+ * 2. Ensure the descenders don't get cut off
+ */
+
+ .euiSuperSelectControl {


I think there's an extra space at the beginning of this line.

Yeah, my IDE doesn't like those comment blocks so anything afterward it tries to align to the comment.

cjcenizal · 2018-08-04T00:10:24Z

src/components/form/super_select/_super_select.scss

+  }
+}
+
+.euiSuperSelect__popoverPanel[class*="bottom"] {


What does this do? If it's anticipating a particular class, then maybe it makes more sense to use that specific class name(s) here so it's easier to find the reference if you change that class name?

cjcenizal · 2018-08-04T00:22:32Z

src-docs/src/views/super_select/super_select_complex.js

+      {
+        value: 'option_one',
+        inputDisplay: 'Option one',
+        dropdownDisplay: (


Instead of putting inputDisplay and dropdownDisplay on each option, I think it might make more sense to treat these options as data-only, without any responsibility for rendering. Then we could provide props to the EuiSuperSelect instance itself to render the input and the dropdown. This will allow these options to be defined by an API response without requiring us to then decorate each option. This is similar to how EuiComboBox allows you customize the way each option is rendered (https://github.com/elastic/eui/blob/master/src-docs/src/views/combo_box/render_option.js#L117).

I'm thinking along these lines:

const healthToColorMap = { 0: 'warning', 1: 'subdued', 2: 'danger', }; const healthToNameMap = { 0: 'Warning', 1: 'Minor', 2: 'Critical', }; export default class extends Component { constructor(props) { super(props); this.options = [ { value: 'option_one', // You can put anything you want inside of data. data: { name: 'Option one', description: 'Has a short description giving more detail to the option.', health: 0, }, }, { value: 'option_two', data: { name: 'Option two', description: 'Has a short description giving more detail to the option.', health: 1, }, }, { value: 'option_three', data: { name: 'Option three', description: 'Has a short description giving more detail to the option.', health: 2, }, }, ]; this.state = { value: this.options[1].value, }; } onChange = (value) => { this.setState({ value: value, }); }; renderOption = option => { const { name, description, health } = option.data; return ( <Fragment> <strong>{name}</strong> <EuiHealth color={healthToColorMap[health]} style={{ lineHeight: 'inherit' }}> healthToNameMap[health] </EuiHealth> <EuiSpacer size="xs" /> <EuiText size="s" color="subdued"> <p className="euiTextColor--subdued">{description}</p> </EuiText> </Fragment> ); }; renderSelectedOption = option => { return option.data.name; }; render() { return ( <Fragment> <EuiSuperSelect options={this.options} valueOfSelected={this.state.value} onChange={this.onChange} itemLayoutAlign="top" renderOption={this.renderOption} renderSelectedOption={this.renderSelectedOption} hasDividers aria-label="Use aria labels when no actual label is in use" /> </Fragment> ); } }

I think it's valuable to have render-purposeful show this in the select box and show this in the drop down values. However, I would agree that also allowing a data param to help track the represented data would be helpful.

My worry with this option, is that each option is no longer customizable, unless you add a bunch of if statements in the render methods. You could still do a similar thing with the current mapping by using the render methods as calls within the options declaration.

Yeah, the flexibility is nice in the way its set up now. I see us switching things out more from item to item with this one than the combobox.

My worry with this option, is that each option is no longer customizable

Do we have an example use case where each option is completely different? Do you think this will be a common requirement? I think we should optimize for the common use case.

As it is right now, no. But it can be altered down the road to support this.

Thanks @cchaos though I was more thinking from the technical perspective, e.g. is there a challenge with decorating hundreds (or thousands) of options with inputDisplay and dropdownDisplay properties, would it play well with react-virtualized, etc?

@cjcenizal That screen looks like EuiFilterGroup, which has a current implementation within our table / search components (which you can see on those pages respectively). It even adds search once it gets beyond 10 items. Will that not cover what you need? I don't know about it's scaling abilities, but it's a 1-1 design against the screen you showed, so my guess is that's the component we'd update further.

By design EuiSuperSelect should not have search in it and is really just a stylized select of choices. We have combo box and the filter group stuff for the pattern you describe.

Example. I believe it also allows for multi-item selection, not just one item.

@snide Good call! Yes that could work, but it needs to be broken out into its own component. Looks like the table example you shared has it baked into its interface via the search prop, and the standalone EuiFilterGroup example is just using a hand-rolled popover.

If we were to break it out into its own component, then at first glance it looks like the only difference between it and EuiSuperSelect would be that one has search and the other doesn't.

cjcenizal · 2018-08-04T00:27:42Z

src/components/form/super_select/super_select_control.test.js

+        <EuiSuperSelectControl
+          options={[
+            { value: '1', inputDisplay: 'Option #1', disabled: false },
+            { value: '2', inputDisplay: 'Option #2', disabled: true }


Can we add tests for passing className and data-test-subj to the options?

chandlerprall · 2018-08-07T16:47:00Z

I did run into a problem with screen-reader accessibility. When I tab to the super select, VoiceOver on OS X doesn’t read the selected option. When I tab to a regular select element, the selected option is read aloud first, and then the element itself is identified. Can we fix this so the behaviors are identical/similar?

@cchaos any thoughts here? It seems to me that to get similar Mac VoiceOver results we'd want to integrate an actual select box (which opens another issue, the select element that is included for form submission has display: none; which excludes its value from inclusion in form submissions). We probably could do something around building dynamic aria labels around the whole menu content, but the screen reader will still add ", button", etc, at the end.

snide · 2018-08-07T18:03:54Z

I think we can probably solve it with some onFocus announcements. Specifically i don't think it matters if it's an actual select vs. a collection of buttons, and a role="group" with a proceeding announcement should work fine.

cchaos · 2018-08-07T18:17:04Z

I'll defer to whatever choice makes it work.

snide · 2018-08-07T18:19:47Z

@cchaos I'll give it a shot and submit your a PR.

This reverts commit 130bd22.

This reverts commit dc9f832.

cchaos · 2018-08-10T17:59:23Z

@chandlerprall All there is now, for addressing feedback, revolves around the discussion of needing to provide inputDisplay and dropdownDisplay.

This reverts commit e8c3fa0.

…ct example

274 super select pr feedback

cjcenizal

Found a couple small things -- the only major blocker are the tests. The component navigation sounds good on VoiceOver. Great work @snide!

cjcenizal · 2018-08-14T19:02:40Z

src-docs/src/views/super_select/super_select_complex.js

+
+    this.state = {
+      value: this.options[1].value,
+      inputDisplay: this.options[1].inputDisplay,


Looks like this isn't being consumed anywhere, so I think we can remove it?

cjcenizal · 2018-08-14T19:03:13Z

src-docs/src/views/super_select/super_select_complex.js

+  onChange = (value) => {
+    this.setState({
+      value: value,
+      inputDisplay: this.options.inputDisplay,


Then we can simplify this to:

this.setState({ value });

cjcenizal · 2018-08-14T19:12:37Z

src/components/form/super_select/super_select.test.js

+      .toMatchSnapshot();
+  });
+
+  describe('props', () => {


I think we need to mount the components in these tests and then click to open them or manually set the open state. We can then use the takeMountedSnapshot utility to get a snapshot of it. Otherwise the snapshots will just consist of closed super selects. Here's an example of a similar test with the combo box: https://github.com/elastic/eui/blob/master/src/components/combo_box/combo_box.test.js#L75

Update EuiSuperSelect unit tests to open the options before snapshot

snide · 2018-08-16T16:23:20Z

@cjcenizal can you verify the tests @chandlerprall merged in are what you'd expect. i think this one is good to go?

cjcenizal

Tests look good, just had one suggestion about a test we might not need.

cjcenizal · 2018-08-16T18:40:07Z

src/components/form/super_select/super_select_control.test.js

+  });
+
+  describe('props', () => {
+    test('options are rendered', () => {


Doesn't look like this test is effective since the options list isn't open in the snapshot. But I also think it might not be necessary, since you're testing it indirectly in the super select test suite.

This reverts commit a5b1d33.

This reverts commit d927eef.

cchaos added prototype labels Jun 12, 2018

cchaos assigned chandlerprall Jun 12, 2018

cchaos removed the prototype label Jun 25, 2018

cchaos force-pushed the 274-super-select branch from d18308a to 42a4b9e Compare June 26, 2018 15:52

cchaos force-pushed the 274-super-select branch from 3679b4c to 4942a1d Compare August 3, 2018 19:05

cchaos unassigned chandlerprall Aug 3, 2018

cchaos requested review from snide and cjcenizal August 3, 2018 19:10

cchaos added feature request and removed work in progress labels Aug 3, 2018

snide approved these changes Aug 3, 2018

View reviewed changes

cjcenizal suggested changes Aug 4, 2018

View reviewed changes

cchaos added 2 commits August 10, 2018 12:54

Revert "Added logo for EMS (Elastic Map Service)"

0c6aa97

This reverts commit 130bd22.

Revert "Revert "Added logo for EMS (Elastic Map Service)""

fde6cb0

This reverts commit dc9f832.

cchaos added 2 commits August 10, 2018 12:54

Fixed EuiPopover BEM naming

d7bd5b0

Addressing PR comments

8eb1e8b

cchaos force-pushed the 274-super-select branch from 6c72117 to 8eb1e8b Compare August 10, 2018 16:55

snide and others added 5 commits August 10, 2018 13:11

kinda working

5596d70

regex the input display and read as text

36feea2

update tests

95e87e0

Allowing label to be passed from EuiFormGroup

e8c3fa0

Allowing more props to be passed to each option

3d98cbc

cchaos and others added 5 commits August 10, 2018 14:10

Revert "Allowing label to be passed from EuiFormGroup"

1dd88f4

This reverts commit e8c3fa0.

Using mulitple id’s in aria-labelledby instead

a001055

use switch over if...else

2a7f5da

Convert the hidden <select> into an input[type=hidden]

70d08c3

Add example of disabled and data-test-subj attributes to a super sele…

5e86527

…ct example

chandlerprall mentioned this pull request Aug 14, 2018

274 super select pr feedback cchaos/eui#12

Merged

Merge pull request #12 from chandlerprall/274-super-select-pr-feedback

249fa1a

274 super select pr feedback

cjcenizal suggested changes Aug 14, 2018

View reviewed changes

chandlerprall and others added 2 commits August 14, 2018 15:06

Update EuiSuperSelect unit tests to open the options before snapshot

648f2a0

Merge pull request #13 from chandlerprall/274-super-select-unit-tests

9884c1e

Update EuiSuperSelect unit tests to open the options before snapshot

cjcenizal approved these changes Aug 16, 2018

View reviewed changes

cchaos and others added 5 commits August 16, 2018 14:48

Merge branch 'master' into 274-super-select

ab9bd72

Remove obsolete test & changelog

a5b1d33

Revert "Remove obsolete test & changelog"

d927eef

This reverts commit a5b1d33.

Revert "Revert "Remove obsolete test & changelog""

724486a

This reverts commit d927eef.

Wrong test suite update

f0e4f39

cchaos merged commit 387c736 into elastic:master Aug 16, 2018

cchaos deleted the 274-super-select branch August 16, 2018 20:20

snide mentioned this pull request Aug 16, 2018

Create a custom Button/Context Menu pattern that behaves like a Form Select #274

Closed

kibanamachine mentioned this pull request Sep 14, 2018

Improve Text Style Picker elastic/kibana#23132

Closed

3 tasks

EuiSuperSelect #921

EuiSuperSelect #921

Conversation

cchaos commented Jun 12, 2018 • edited Loading

cchaos commented Jun 12, 2018

snide commented Jun 12, 2018

chandlerprall commented Jun 13, 2018

cchaos commented Jul 9, 2018

chandlerprall commented Jul 9, 2018

cchaos commented Jul 30, 2018

cchaos commented Aug 3, 2018

cchaos commented Aug 3, 2018

snide left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This PR

Live github docs

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cjcenizal commented Aug 3, 2018

cjcenizal commented Aug 3, 2018

cjcenizal commented Aug 3, 2018

cjcenizal left a comment

Choose a reason for hiding this comment

cjcenizal Aug 3, 2018 • edited Loading

Choose a reason for hiding this comment

cjcenizal Aug 3, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide Aug 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chandlerprall commented Aug 7, 2018

snide commented Aug 7, 2018

cchaos commented Aug 7, 2018

snide commented Aug 7, 2018

cchaos commented Aug 10, 2018

cjcenizal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide commented Aug 16, 2018

cjcenizal left a comment

Choose a reason for hiding this comment

cchaos commented Jun 12, 2018 •

edited

Loading

cjcenizal Aug 3, 2018 •

edited

Loading

cjcenizal Aug 3, 2018 •

edited

Loading

snide Aug 14, 2018 •

edited

Loading