Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide style customization options #13

Open
imolorhe opened this issue May 10, 2019 · 5 comments

Comments

Projects
None yet
3 participants
@imolorhe
Copy link

commented May 10, 2019

Hey @sgrove,

looks like GraphiQL explorer was made with GraphiQL and so works with the styling available with GraphiQL. This makes it difficult to use it in other non-GraphiQL based projects, like Altair.

@FluorescentHallucinogen has previously created an issue on the Altair repo to integrate GraphiQL explorer (imolorhe/altair#534) and sufficient progress on that has been done already. However, we are facing a bit of styling issues.

Screenshot 2019-05-10 at 5 59 21 PM

Altair makes use of themes extensively with different styling options. While there are ways to make the styling work, I was hoping for a more standard approach from GraphiQL explorer itself.

@sgrove

This comment has been minimized.

Copy link
Contributor

commented May 10, 2019

@imolorhe That's great, I'm a big fan of Altair!

For styling in the short term, I think we should allow a custom set of style objects to be passed in to the explorer that will be merged with the default. That way the defaults are always there and it works for people who don't know to customize it, but the defaults are easy to override when advanced users (like you) want to.

Beyond that, I'd like for GraphiQL itself to adopt a theming approach that we can fall in line with, and that'll naturally mean that it's easy to interact with from projects like yours.

@imolorhe

This comment has been minimized.

Copy link
Author

commented May 11, 2019

That's great, I'm a big fan of Altair!

@sgrove I'm glad to hear that. It's always refreshing to know that major community contributors like yourself are a fan of the project. ❤️🍻

For styling in the short term, I think we should allow a custom set of style objects to be passed in to the explorer that will be merged with the default. That way the defaults are always there and it works for people who don't know to customize it, but the defaults are easy to override when advanced users (like you) want to.

I do think providing the option to pass custom styling as a prop would work for Altair's use case.

Beyond that, I'd like for GraphiQL itself to adopt a theming approach that we can fall in line with, and that'll naturally mean that it's easy to interact with from projects like yours.

That can be a point to consider during the meeting with the GraphiQL working group (which I assume you are going to be attending 😄)

PS:
I am able to get GraphiQL explorer working in Altair as a custom element (since Altair is angular, and not react). One of the biggest drawbacks being that the custom element needs to be bundled with its own graphql package (which seems to be quite large compared to the component itself). I would also like to hear your feedback on the work we've done so far if you don't mind 😄 imolorhe/altair#759

The demo graphql explorer plugin for Altair: https://github.com/imolorhe/graphql-explorer

@FluorescentHallucinogen

This comment has been minimized.

Copy link

commented May 11, 2019

@imolorhe How to run it? Is there a built deployed live demo to play with it?

@imolorhe

This comment has been minimized.

Copy link
Author

commented May 11, 2019

It's not running anywhere at the moment. You would have to run the code in the branch of the PR locally to see the plugin working. I'm still trying to finalize the plugin system implementation.

@imolorhe

This comment has been minimized.

Copy link
Author

commented Jun 4, 2019

@FluorescentHallucinogen There's a live demo you can play with now: https://plugin-dev-2-branch-altair-imolorhe.surge.sh/

You would need to enable the enableExperimental flag in the settings and reload the page, to see it working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.