vaadin/vaadin-upload

can't style button on Mac Chrome

Closed this issue · 5 comments

JoernT commented

Chrome Version 62.0.3202.94
Vaadin-upload 3.0.0

my code

<vaadin-upload id="uploader" accept=".xar" method="post" target="{{targetUrl}}">
  <iron-icon slot="drop-label-icon" icon="image:adjust"></iron-icon>
  <div slot="drop-label">DROPZONE - put your package(s) here.</div>
</vaadin-upload>

rendering as attached
upload

tried anything i can think of to get hold of that button but no luck.

Ah, and the whole thing on Polymer 2 used in a class-style component.

samiheikki commented

Can you use element with add-button slot.

<vaadin-upload id="upload">
  <button slot="add-button">
    UPLOAD BUTTON which you can customize
  </button>
</vaadin-upload>
jouni commented

Another approach is to use a theme module to target the internal button part:

<dom module="my-upload-theme" for="vaadin-upload">
  <template>
    <style>
      [part="upload-button"] {
        ...
      }
    </style>
  </template>
</dom-module>

For more information how to style the Polymer 2, ES6 class-based elements, read the ThemableMixin documentation: https://github.com/vaadin/vaadin-themable-mixin/wiki

JoernT commented

thanks @samiheikki + @jouni

Didn't knew about the add-buttion slot. Thanks

Also didn't know about the themable-mixin So that's interesting information.

I'm still trying to find my way with Polymer sometimes. Nevertheless maybe a sentence or two on your webcomponents.org page - to help such people like me...

Appreciate your responses.

Joern

jouni commented

Nevertheless maybe a sentence or two on your webcomponents.org page - to help such people like me...

Yeah, would probably be a good thing to mention, since the ThemableMixin is a proprietary solution. The documentation will eventually end up somewhere in vaadin.com, but I think we could still have a mention about it in the repo readmes.

jouni commented

@tomivirkki, if you agree and can find the time, could the team update the skeleton repo readme with a section about styling which points to the documentation?

Closing, as this is not an actual issue but more of a question how to use the API.

  • 👍1