edelstone / material-palette-generator

🎨 Get perfect Material Design palettes from any hex color.
https://materialpalettes.com
212 stars 25 forks source link

Export palette as a JSON #5

Closed ziyafenn closed 4 years ago

ziyafenn commented 4 years ago

Created a function to export palettes as a JSON

Code can be further refactored to reduce the repeats in code. I don't have enough time right now to make it better, probably sometime later.

For time being, it gets its job done.

Also added modal and button components.

4

edelstone commented 4 years ago

Thanks @ziyafenn ! I'll look closer later today.

Playing with it in the browser, I'm wondering if it's possible to control focus a little bit, for example when the dialog opens place focus on the close span, and when it closes, place focus back on export palette button.

If that's relatively simple I'd love to try to get that in there. I'll check the code shortly.

edelstone commented 4 years ago

This looks all good @ziyafenn. Let me know if you're interested in trying to get the focus a bit more standard as mentioned above. Otherwise I'll likely merge this and make a new issue.

ziyafenn commented 4 years ago

hey @edelstone. I believe your comments are due to accessibility reasons? If yes, instead of focus, correct tabindex should be implemented. It makes sense to focus on textarea, once modal is open, but in our case it set to readonly, so there is no need to focus in my opinion.

Here is the article from developers.google about focus and tabindex.

I will try now implement the modal in a way, that once it is displayed, first tab will focus on close button. And on page itself, first tab will focus on export button.

ziyafenn commented 4 years ago

I pushed a commit that fixes those issues:

  1. On page, first tab press focuses on export button
  2. On modal, it sets focus automatically on first/last possible element, which in our case is close button. I'm not sure that it is good to autofocus on close, but i wasn't been able to remove that.

PS. my linter decided to reformat all the code... / added new commit to fix it

edelstone commented 4 years ago

Hi @ziyafenn . Thanks for the update, and the overall work.