Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 24 15:19
    mshabarov opened #962
  • Oct 24 15:13

    mshabarov on 957-empty-items

    fix: mouse scroll doesn't fetch… (compare)

  • Oct 23 17:56
    tulioag commented #961
  • Oct 23 17:51
    tulioag synchronize #961
  • Oct 23 17:51

    tulioag on 900_Valid_item_is_not_selected_if_ComboBox_has_a_dataprovider_and_autoopendisabled

    chore: revision fixes (compare)

  • Oct 23 09:44
    xdenser edited #2066
  • Oct 23 09:41
    xdenser opened #2066
  • Oct 22 17:17
    mtter opened #2065
  • Oct 22 13:02
    rolfsmeds commented #719
  • Oct 22 11:32
    rolfsmeds closed #904
  • Oct 22 11:32
    rolfsmeds commented #904
  • Oct 22 11:32
    rolfsmeds unlabeled #904
  • Oct 22 08:56
    tulioag synchronize #961
  • Oct 22 08:56

    tulioag on 900_Valid_item_is_not_selected_if_ComboBox_has_a_dataprovider_and_autoopendisabled

    fix: flush the pending requests… Merge branch 'master' into fix/… (compare)

  • Oct 22 08:45
    tulioag synchronize #961
  • Oct 22 08:45

    tulioag on 900_Valid_item_is_not_selected_if_ComboBox_has_a_dataprovider_and_autoopendisabled

    Fixed error Added test Disable change if allowCustomVa… (compare)

  • Oct 22 07:45

    mshabarov on 229-load-indicator

    (compare)

  • Oct 22 07:45

    mshabarov on master

    fix: flush the pending requests… (compare)

  • Oct 22 07:45
    mshabarov closed #958
  • Oct 22 07:24

    web-padawan on demo-cleanup

    (compare)

chisholmd
@chisholmd
I just read https://github.com/vaadin/vaadin-themable-mixin#stylable-shadow-parts
and I am more confused then ever. Is there a really simple example somewhere of how to style the selected value in a vaadin-select. Its kinda driving me craxy
chisholmd
@chisholmd
I have my-element and inside its template I have a vaadin-select that works fine, except that the selected value that is displayed is black. So I added this to the host: section of my-element's style block:
:host {
[part="input-field"] {
color: #fff;
}
}
..but the selected value that is displayed remains black. Did I read the instructions wrong?
chisholmd
@chisholmd

Right so I drilled into...
\bower_components\vaadin-select\theme\lumo\vaadin-select-styles.html
scrolled down to the <dom-module id="lumo-select-text-field">
and found [part="input-field"] {} and added color:#fff.

Finally I have white text!! So what is the proper way of doing that?

Kari Söderholm
@Haprog
@chisholmd Have you looked at the vaadin-select styling demos here https://cdn.vaadin.com/vaadin-select/2.1.7/demo/#select-styling-demos ?
Kari Söderholm
@Haprog

You need to create a style module like this

<dom-module id="my-select-style" theme-for="vaadin-select-text-field">
  <template>
    <style>
      [part="input-field"] {
        color: #fff;
      }
    </style>
  </template>
</dom-module>

This will affect all vaadin-selects on the page. And note that style modules need to be loaded before the component definition itself (vaadin-select in this case) is loaded or it won't have an effect.

If you only want it to affect specific vaadin-select elements only then do this instead:

<dom-module id="my-select-style" theme-for="vaadin-select-text-field">
  <template>
    <style>
      :host([theme~="custom-select"]) [part="input-field"] {
        color: #fff;
      }
    </style>
  </template>
</dom-module>

And then you need to give that select a theme attribute like <vaadin-select theme="custom-select"></vaadin-select>.

Mark Garrett
@moderndeveloperllc
@web-padawan Just an FYI, new alphas are working well for me so far. The module IDs set things in the right order for themes and I'm not seeing any regressions so far.
MdV303
@MdV303

Hi all, I have a question about styling the vaadin-upload component. I am able to apply custom styling to
vaadin-upload::part(upload-button)
and
vaadin-upload::part(file-list)

However, I am struggling to find the proper syntax to set styling on elements deeper in the component's hierarchy, in particular the status text part, called "status". None of the following attempts work:

        vaadin-upload::part(status) {
            color: #009acd;
        }

        :host() [part="status"] {
            color: #009acd;
        }

        #status {
            color: #009acd;
        }

        vaadin-upload-file::part(status) {
            color: #009acd;
        }

What am I missing here? Why does the syntax I use for "upload-button" and "file-list" have no effect on "status"?
Any help would be appreciated :-)

Martijn

suns
@sashafirsov
Hi all, is there any samples of declarative use of <vaadin-menu-bar>?
(Declarative means with tags and no JS)
suns
@sashafirsov
Same question about <vaadin-combo-box> - are there declarative use samples ?
Kari Söderholm
@Haprog

@MdV303 When you want to style the internal parts of the components (which are inside shadow DOM) you need to declare the styles in special style modules so they get injected to the components you're targeting. You should probably read the docs at https://github.com/vaadin/vaadin-themable-mixin#readme to understand how it works. Most Vaadin components have some useful CSS styling examples at "Styling" tab in the demos of the component so you can see the correct HTML+CSS syntax to define specific styles at least, but vaadin-upload doesn't seem to have styling examples with CSS.

Basically for styling the part you want you need something like:

<dom-module id="custom-upload-file-style" theme-for="vaadin-upload-file">
  <template>
    <style>
      [part="status"] {
        ...
      }
    </style>
  </template>
</dom-module>
Kari Söderholm
@Haprog

@sashafirsov Unfortunately <vaadin-menu-bar> doesn't support a declarative API for defining the contents atm. vaadin/vaadin-menu-bar#81

Basically the same for <vaadin-combo-box> though you can provide an "item template" declaratively (there's an example in API docs https://cdn.vaadin.com/vaadin-combo-box/5.0.11/#/elements/vaadin-combo-box). I didn't see an existing issue about providing a declarative API for combo box.

In both cases you can provide items property as an HTML attribute (JSON string) but it isn't pretty.

Example from above link:
<vaadin-combo-box items='[{"label": "Hydrogen", "value": "H"}]'>
  <template>
    [[index]]: [[item.label]] <b>[[item.value]</b>
  </template>
</vaadin-combo-box>
MdV303
@MdV303
@Haprog Thanks for your response. Indeed, I can't find styling examples for vaadin-upload anywhere... Tomorrow I'll be working on that particular project again so I can try your suggestion. Will let you know how it turns out.
suns
@sashafirsov
@Haprog I found that vaadin-combo-box sample in webcomponents.org . Which was not easy to dig out. Is there a good way to contribute into documentation? Declarative use is a level of magnitude easier to comprehend and replicate. Especially for learning, demo, or evaluation. Accounting that web components have more attraction from gitter community, IMO vaadin would benefit from docs upgrade.
Kari Söderholm
@Haprog

@sashafirsov You can find the component docs and demos from https://vaadin.com/components/ or directly from GitHub (e.g. via https://github.com/vaadin/vaadin#readme). Each Vaadin web component repository has release notes in GitHub "Releases" page with links to "Live Demo" (code examples) and "API Documentation" (this is the link I pasted above) for each release. For example here for combo box https://github.com/vaadin/vaadin-combo-box/releases

The same information can basically be found from here https://vaadin.com/components/vaadin-combo-box (just make sure to select "HTML" version from the left unless you want to see the Java API). Then use the "Examples" and "API" tabs. Here's a more direct link which shows the above code snippet https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxElement (though the info at vaadin.com is not immediately updated after new component releases so it might be slightly outdated in some cases. If you need to check the web component docs for a specific version or want to make sure you're looking at the latest version of the demos, check the links in the latest GitHub releases)

The best way to contribute to our component documentation atm. is by opening issues or commenting on issues at the related component's GitHub repository. You can also contribute pull requests but it would be better to first check with the team (e.g. via discussion in issue) what is a good approach or what kind of pull request would be ok depending on issue (just to avoid wasted effort in case we can't accept the pull request without major changes).

We're working on a new documentation site to replace https://vaadin.com/docs/ (which currently focuses mainly on the Java framework side). The new docs should better integrate all our documentation in one place and should also have embedded code examples and demos of our components (both Java and HTML/JS examples). It's still a work in progress though but the first version of it might be coming out in some months from now.

suns
@sashafirsov
@Haprog , just an idea for docs, when creating the page, making it "alive" is quite beneficial. Meaning having ranked Q&A and ability to ask question. Implementation could go over git bug+tags, disqus or even wiki. Should not be difficult to implement as web component :)
PHP is a good sample of alive API docs
Kari Söderholm
@Haprog
@sashafirsov We already have commenting currently at the end of all pages at vaadin.com/docs
And there's "Edit this page" button at the top right of most content pages which links to correct file in GitHub (since those docs are currently spread across several repositories depending on which section of the docs you're looking at).
suns
@sashafirsov
@Haprog , there is no point in generic docs as far as I see. The questions raised on level of component or module
Kari Söderholm
@Haprog
As I said, those component docs will be integrated there, so they would also have the commenting as far as I understand.
Also with live examples.
suns
@sashafirsov
(Y)
Kari Söderholm
@Haprog
Not sure though if the commenting has been thought about yet in the current prototype of the new docs. Thanks for mentioning it. I'll ask has it been already considered how it will work in the new version.
suns
@sashafirsov

@all, there is a demo for most of Vaadin components in CDN
https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/demo/vaadin-elements-demo.html

There is no JS, all declarative programming.

MdV303
@MdV303

@Haprog I have been experimenting a bit with several variants of your suggestion. I have tried

<dom-module id="vaadin-upload-custom-style" theme-for="vaadin-upload-file">
    <template>
        <style>
            [part="status"] {
                color: #009acd;
            }
        </style>
    </template>
</dom-module>

though I would prefer something like

const vaadinUploadCustomStyle = document.createElement('dom-module');
vaadinUploadCustomStyle.themeFor = 'vaadin-upload-file';
vaadinUploadCustomStyle.innerHTML = `
    <template>
        <style>
            [part="status"] {
                color: #009acd;
            }
        </style>
    </template>
`;
vaadinUploadCustomStyle.register('vaadin-upload-custom-style');

...as this syntax is used to import other styling modules, so I tried that too.

The styling is then imported by the element that uses vaadin-upload with

<style include="vaadin-upload-custom-style"></style>

However, in all cases Chrome gives the following warning, completely regardless of the content of the <style> tag:
Could not find style data in module named vaadin-upload-custom-style.

I checked the link you provided but I can't seem to find the answer on that page...

Kari Söderholm
@Haprog
@sashafirsov The demo you linked doesn't work atm. Just shows blank page and console shows HTTP 503 error.
Kari Söderholm
@Haprog

@MdV303 When you use theme-for approach you don't need to use include for it anywhere. It will be automatically loaded by the component itself. But the style module needs to be loaded/declared before the component loads, otherwise the styles aren't picked up. This is currently a technical limitation of the ThemableMixin. So you need to either define the <dom-module id="vaadin-upload-custom-style" theme-for="vaadin-upload-file"> inline on the page or make sure that the import for the file that contains it is before the import of vaadin-upload component.

If you want to use JS to register the styles then I'd suggest using the registerStyles API of themable mixin. See https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript

So instead of that <dom-module> HTML block you can have something like:

registerStyles('vaadin-upload-file', css`
  [part="status"] {
    color: #009acd;
  }
`);

(this will handle creating the dom-module element for you). But you still need to make sure this executes before the vaadin-upload component has been fully loaded.

@MdV303 Are you using Polymer 2 or 3?
Or maybe lit?
MdV303
@MdV303
I am pretty much done converting a Polymer 2.6 Single Page Application to Polymer 3, so currently I am working in Polymer 3. This is one of the last conversion issues I have to solve. In Polymer 2 I had no problems styling the inner components of vaadin-upload, so it's a tad frustrating that it is taking so much time and effort just to get the word "Queued" to be displayed in a color that is visible on a dark background... So thank you very much for your support! I'll try your suggestion and post back the result.
MdV303
@MdV303

Yes! I finally got it to work! I had to put the following code all the way up in the index.html, before loading the app element:

    <dom-module id="vaadin-upload-custom-style" theme-for="vaadin-upload-file">
        <template>
            <style>
                #status {
                    color: #009acd;
                }
            </style>
        </template>
    </dom-module>

Please note that

    [part="status"] {
        color: #009acd;
    }

does not work here. However, the status div also has an id and setting styling by its id appeared to work - for some reason.
Furthermore, the snippet above is in the end the only change I had to make. No includes, no separate styling file.

Kari Söderholm
@Haprog
@MdV303 Good to hear. [part="status"] should work just as well though (unless some of the characters are accidentally something else than ASCII, for example if the quotes are wrong character like some smart quotes). It's just a CSS attribute selector that also applies to the same element. We normally use that "part" in styling examples because only the part attributes are considered to be "public API" for styling (so we consider backwards compatibility and semver when chaning them). Other things in shadow DOM like IDs and possible class names are considered private and may change in any version so you should try not to rely on those.
Though more often we show it in examples with [part~="status"] (note the ~=) since in some cases one element may have more than one word separated by space in the part attribute (e.g. part="part1 anotherpart" in which case [part="part1"] would not match but [part~="part1"] would)
MdV303
@MdV303

I just noticed that in Firefox the custom styling for "status" is the only one that works. So I guess the custom styling for the other vaadin-upload parts, now implemented as

vaadin-upload::part(upload-button)

and

vaadin-upload::part(file-list)

has to be implemented the same way as the status styling, to get it to work in FF. I'll look at that after the weekend, and then I'll also try (again) to use the part attribute instead of id.

suns
@sashafirsov
@Haprog , could you, please try again, does it give error to you?
Seems fine on my side.
Kari Söderholm
@Haprog
@MdV303 That native CSS ::part syntax is not yet well supported in browsers so we don't encourage using it yet. Looks like it should work in Firefox and Chrome but not in Safari but I haven't even tried it myself https://caniuse.com/#feat=mdn-css_selectors_part That's why we use the attribute syntax combined with our ThemableMixin to inject styles directly into the shadow roots.
@sashafirsov Seems to work now. Thanks for sharing. I might take a closer look next week (after Easter holidays)
MTigra
@MTigra

Hi, guys.
I am trying to modify bakery demo app
But now they not correctly appear.
I have this:

 grid.addColumn(DrugCard.getTemplate()
                .withProperty("drugCard", DrugCard::create)

and something like this

public class DrugCard {

    public static TemplateRenderer<Drug> getTemplate() {
        return TemplateRenderer.of(
                "<drug-card"
                        //+ "  header='[[item.header]]'"
                        + "  drug-card='[[item.drugCard]]'"
                        + "  on-card-click='cardClick'>"
                        + "</drug-card>");
    }

    public static DrugCard create(DrugSummary drug) {
        return new DrugCard(drug);
    }

But in browser only appers empty <drug-card></drug-card> tag without any #shadow-root
Is there something that i don't know to tell TemplateRendered to work?

image.png
And screenshot from dev panel
Kari Söderholm
@Haprog
I see from https://gitter.im/vaadin/flow you already solved it.
MTigra
@MTigra
image.png
image.png
@Haprog yea, but now i have other issue. Very similar to this. It's like my DrugCard recive null object. But grid actually has correct data because filter is working well.
Here is what i have.
and for example how i try to put data in drug-card <img class="badge" src="[[drugCard.pic]]">
MTigra
@MTigra
also i can provide a link to github. I would very appreciate if someone could help: https://github.com/MTigra/china-medicne-application
Also i looked up in vaadin forums about that. for example this: https://vaadin.com/forum/thread/17242086/struggling-with-grid-and-templaterenderer
but it not helped actually.
gouranshu
@gouranshu
Hi guys
I'm using vaadin-dialog-box with LitElement
I notice that the content inside the vaadin-dialog is part of <vaadin-dialog-overlay> ->shadowRoot -> [div part="overlay"] -> [div part="content"] but the actual content is somehow linked inside <vaadin-dialog-overlay> ,outside of the shadowRoot.
So my question is...i need to make one div of the content as overflow: hidden and keep all the other divs scrollable i.e overflow: auto. To do this, i need to access the divs of the actual content from inside the [div part="content"] so that i can sytle it using registerStyles()
Was unable to attach image here, so here are the links for screenshots:
https://ibb.co/K2qncqY
https://ibb.co/YDkgyH1
Sven Pruefert
@prsv

Hello, I was wondering why I wouldn't get a dropdown Select using this code with Vaadin 14.1.23

val select = Select<String>()
select.addValueChangeListener { grid.setItems(processor.selectPortCalls(processor.retrieveCruiseNo(it.value))) } // filling the select with data

This is the view
alt
According to Vaadin Seclect Component I should get a dropdown select...

suns
@sashafirsov

There is a gap in Vaadin Components design for referencing one component from another. It could be applied to menu or tooltip ( to define anchor element ), a button to trigger the property on another element( like 'open' in dialog ), etc.
In HTML such referenced are done for dom by name or ID( href with hash value as id selector or for in label).

Who on the team could talk about extending functionality with for attribute?

Kari Söderholm
@Haprog
@sashafirsov Do you have a concrete use case or idea about what feature exactly should be created with such references? Afaik this kind of binding is usually done via library or framework e.g. you can do it in Polymer or Lit templates depending on what you use to build your views. HTML id is not globally unique when Shadow DOM is involved, so it is not really suitable for this unless you only want to do it in scope of a single root without referencing over shadow boundaries (might be fine depending on use case).