Feature/code mirror theme exposed #323

Merged
merged 9 commits into from Feb 13, 2017

Projects

None yet

3 participants

@joelgriffith
Contributor
joelgriffith commented Feb 9, 2017 edited

First pass on exposing a codeMirrorTheme prop, plumbing it through, and docs on how to load/use css for the theme.

@joelgriffith
Contributor

See discussion in #129

@wincent

This looks good to me overall, but before we merge, I want to ask whether just "theme" would be a better name for this prop. The fact that the editor views are powered by CodeMirror is really just an implementation detail, and using codeMirror in the prop name leaks that out. In the future, if a better implementation comes along, maybe we want to preserve the ability to pass in themes like "solarized" to it (obviously, this would depend on the appropriate CSS being available, so you could argue that changing the implementation would be a breaking change and we therefore should pick a different property name; but I do like the idea of keeping some clutter out of the API).

Thoughts?

@@ -9,7 +9,6 @@
/* eslint-disable no-console */
import express from 'express';
import path from 'path';
-import fs from 'fs';
@wincent
wincent Feb 10, 2017 Contributor

Naughty! Sneaking in an unrelated change.

@wincent
Contributor
wincent commented Feb 10, 2017

Oh, forgot to mention: I applied some small fixes directly on the PR branch rather than incurring another round trip. If you do more work on this, be sure to pull those down.

@joelgriffith
Contributor

The fact that the editor views are powered by CodeMirror is really just an implementation detail, and using codeMirror in the prop name leaks that out.

This is a great point, and something that I thought about in some capacity. Here's my thoughts:

  • theme is a bit broad in my opinion, as new adopters will likely assume that this theme would apply to the entirety of GraphiQL (which isn't the case).
  • Minor, but I think that at this point GraphiQL is pretty tied to the CodeMirror implementation (there's even sub-packages that were written to marry GraphiQL to CodeMirror). Not saying that won't change, but would be non-trivial work.

I think maybe syntaxTheme would suffice since it succinctly addresses the fact that this only applies to code portions of the UI, and is not a global UI-theme.

Would that be ok @wincent?

@wincent
Contributor
wincent commented Feb 12, 2017

Or maybe editorTheme?

Agreed that for all practical purposes CodeMirror is likely to remain the implementation, but that doesn't mean we shouldn't try to practice good hygiene and abstract over it.

@joelgriffith
Contributor

💥 editorTheme is great. I'll update my PR tomorrow.

@wincent
Contributor
wincent commented Feb 13, 2017

Looks good. Thanks for your work on this!

@wincent wincent merged commit c573490 into graphql:master Feb 13, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@joelgriffith
Contributor

Thanks for catching that JSX error....again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment