Field guide modal

[srallen]

Package:

Closes #391.

Describe your changes:
Adds the UI for the field guide

Review Checklist

General

• Are the tests passing locally and on Travis?
• Is the documentation up to date?
• Is the changelog updated?

Apps

• Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
• Does it work on mobile?
• Can you rm -rf node_modules/ && npm install and app works as expected?

[srallen]

My project 1233 has a field guide. The default project loaded by the classifier does not.

[srallen]

I don't have this setup for the light/dark themes yet. This is an already large PR so I'll note in an issue.

[srallen]

This also has the issue of the size of the modal changing between the full list of items and selected item. I haven't come up with a better way to have it be responsive and have a max-width yet...

[eatyourgreens]

Testing this out in VoiceOver, I'm wondering if the item buttons should be links to the individual items? Give it a go and let me know what you think. When I press a button, it's not immediately obvious that I've navigated to the item, although I can continue navigating with VoiceOver and read the new text.

There's an annoying jump in height between an item loading and the linked image loading. Can we show a placeholder for images, or set a default height on that box.

[srallen]

The new suggested changes feature is neat.

[eatyourgreens]

Yeah. I haven't tried it out for changes that are more than a few characters. Big changes might break things.

[srallen]

I updated to use an anchor instead and I like it a lot better for the hover state than what I came up with for the button.

[eatyourgreens]

VoiceOver says there's a missing counterpart translation in the link text somewhere.

[srallen]

@eatyourgreens Oops! That's fixed in the latest commit.

[eatyourgreens]

I'm also getting setActiveItem is not a function when I click those links.

[srallen]

In addition to the refactor to use Anchor instead of Button for the items list, I've:

• Created an icon component that uses a placeholder fallback consistently between the list items view and the item details view
• Added Grommet's ResponsiveContext component to set the widths for the outer Box container. This fixes it between the item list view and item detail view and also makes it responsive. Note Enzyme does not yet support React's createContext, so I cannot test how FieldGuide works until Enzyme updates this. See: Dive shallow in a Context Consumer enzymejs/enzyme#1908
• Refactored how I was using Grid. It was just wrong before. I'm still learning!
• Finished the fix for renaming the setActiveItemIndex and activeItemIndex
• Fix the tests

[eatyourgreens]

Sorry to be a pain about naming but I think the API for setting the active item is still confusing. It should be clear whether the model expects to store the selected item, or its array index (whichever is most convenient to pass in from the React component.) The code seems to use both terms interchangeably at the moment. I'm bringing this up because it's been a maintenance problem in PFE where we've used eg. workflow interchangeably to refer to either a workflow object or a workflow ID. I think the model API should be either setActiveIndex(index) or setActiveItem(item) but not setActiveIndex(item).

The item links are all showing up as visited links, so they could use unique URLs for the individual items if that's easy to implement.

Testing this out with the keyboard, there's a weird focus problem that might be a Grommet bug. Activate the field guide button from the keyboard. If you press Esc the field guide closes, as expected. Open it again, from the keyboard, and tab to a link. Activate the link with Enter. I'm finding that Esc doesn't do anything from the item page and I have to close the field guide with the mouse. Grommet might be losing the keyboard focus when the guide's content changes.

[srallen]

The focus bug I'll open as a separate issue. It might be a Grommet bug.

[eatyourgreens]

I've pulled down the rebased branch and the item links aren't working any more. I'll have a look to see if I can figure out why.

[eatyourgreens]

Only the last link in the item menu can be clicked. The others don't work.

[eatyourgreens]

Just waiting on Travis.