vaadin / vaadin-material-styles

Material Design Theme for Vaadin components

Material Theme for Vaadin components

⚠️ Starting from Vaadin 20, the source code and issues for this package are migrated to the vaadin/web-components monorepository. This repository contains the source code and releases of @vaadin/vaadin-material-styles for the Vaadin versions 10 to 19.

vaadin-material-styles is customizable theme for the Vaadin components.

Running demos and tests in browser

1. Fork the vaadin-material-styles repository and clone it locally.

2. Make sure you have npm installed.

3. When in the vaadin-material-styles directory, run npm install and then bower install to install dependencies.

4. Run polymer serve --open, browser will automatically open the component API documentation.

5. You can also open demo or in-browser tests by adding demo or test to the URL, for example:

• http://127.0.0.1:8080/components/vaadin-material-styles/demo
• http://127.0.0.1:8080/components/vaadin-material-styles/test

Running tests from the command line

1. When in the vaadin-material-styles directory, run polymer test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running gulp lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Creating a pull request

• Make sure your code is compliant with our code linters: gulp lint
• Check that tests are passing: polymer test
• Submit a pull request with detailed title and description
• Wait for response from one of Vaadin components team members

License

Apache License 2.0

vaadin-material-styles's Issues

Material theme customization options

From @jouni on April 12, 2017 10:5

Expose shared styles as global customization options using CSS custom properties.

The first easy candidates are:

• Font family
• Colors

In the demo, we should offer UI controls to adjust these on the page that update the theme at runtime. In addition (not a must-have), it would be great to show the adjustments in code that can be copy-pasted to your own theme.

The Valo theme already has a preliminary version of a similar control (valo-config).

Copied from original issue: vaadin/vaadin-themes#7

Blank screen and JavaScript syntax errors in IE11

When running a Vaadin application in IE11 the user sees only a blank white screen. The issue only occurs when using the Material theme and does not occur with the Lumo theme. The issue does not occur in browsers other than IE11.

In the IE11 console, 3 errors are seen. All are SCRIPT5022: SyntaxError originating in the file style-properties.js at line 30,3. Below is the context, lines 26 to 31.

const matchesSelector = function(selector) {
  const method = this.matches || this.matchesSelector ||
    this.mozMatchesSelector || this.msMatchesSelector ||
    this.oMatchesSelector || this.webkitMatchesSelector;
  return method && method.call(this, selector);
};

Baseline alignment should work predictably

We should find a way to align text fields and buttons on the same baseline as normal text.

Icons and labels in tabs are not aligned

Field error-message font-size looks too small

From @H3dz on July 12, 2017 21:11

The material error-message font-size looks smaller when compared with the paper-input-error font-size.

paper-input-error uses --paper-font-caption which is 12px and
material-text-field uses 0.7em instead of --material-caption-font-size

Copied from original issue: vaadin/vaadin-themes#27

UX tests (2-3d)

Plan, book, conduct and report.

vaadin-grid not using theme

I am extremely new to vaadin elements and have been trying for hours to get vaadin-grid to use vaadin-material-theme. Other themeable components are working though.

Using polymer-cli (1.5.7), created fresh polymer-starter-kit

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="../bower_components/vaadin-material-theme/vaadin-grid.html">
<link rel="import" href="../bower_components/vaadin-material-theme/vaadin-button.html">
<link rel="import" href="../bower_components/vaadin-material-theme/vaadin-checkbox.html">
<link rel="import" href="../bower_components/vaadin-material-theme/vaadin-text-field.html">

<link rel="import" href="../bower_components/vaadin-button/vaadin-button.html">
<link rel="import" href="../bower_components/vaadin-checkbox/vaadin-checkbox.html">
<link rel="import" href="../bower_components/vaadin-text-field/vaadin-text-field.html">

<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-column.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid-selection-column.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">

<dom-module id="my-view1">
  <template>
    <style include="">
      :host {
        display: block;

        padding: 10px;
      }

    </style>

    <vaadin-checkbox></vaadin-checkbox>
    <vaadin-text-field></vaadin-text-field>
    <vaadin-button>Button</vaadin-button>

    <vaadin-grid items="[[items]]">
      <vaadin-grid-selection-column auto-select> </vaadin-grid-selection-column>
      <vaadin-grid-column>
        <template class="header">Name</template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>
    </vaadin-grid>

  </template>

  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }

      static get properties() {
        return {
          items: Array
        }
      }

      ready() {
        super.ready();
        var items = [];
        for (var i = 0; i < 10; i++) {
          items.push({ firstName: 'First Name ' + i, lastName: 'Last Name ' + i });
        }
        this.items = items;
      }
    }

    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

The checkbox, input and button get styled correctly.
But styles are not applied to the grid.

The file is fetched

(Testing on Chrome 62)
Any help?

vaadin-item.html misses a closing bracket

In https://github.com/vaadin/vaadin-material-theme/blob/646eec6174c6aa42d96cb0d4eadd8a115ce1df60/vaadin-item.html#L2
the closing bracket is missing. This leads to parsing errors when minifying the file. Can you please add it?
Thanks!
Marco

Roboto font is not present in the npm version after modulizer conversion

This line just gets stripped out by modulizer:

vaadin-material-styles/typography.html

Line 5 in ff22e56

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" crossorigin="anonymous">

Note that Polymer team has fixed this for their repo manually: PolymerElements/font-roboto@40962bd

The similar change can be applied as part of the magi-p3-post process.

Roboto font is not used in the demo on IE11

The default font stack is used instead. Something is not working correctly with the polyfills.

If you add the following to demo/common.html directly, the font is used correctly:

  <custom-style>
    <style>
      body {
        font-family: var(--material-font-family);
      }
    </style>
  </custom-style>

For some reason <style include="material-typography"> doesn’t work correctly.

Date picker: label and placeholder shown simultaneously

From @jouni on August 28, 2017 14:27

The label and placeholder texts are shown on top of each other:

The text field doesn’t have the same problem, and the placeholder text is revealed only when focused:

Copied from original issue: vaadin/vaadin-themes#46

Provide TS definitions for exported css tagged literals

Same as vaadin/vaadin-lumo-styles#99

Styling of the underline

I've been noticing that in the vaadin input elements vaadin-date-picker and vaadin-text-input the underline isn't styled correctly.

This issue affects padding in all states (hover, focus, unfocused) as well as the underline itself.

Before writing this issue, I've been reading the Material Design spec very closely and noticed that there are contradictions in the animations and illustrations they show.

Here is a correct illustration taken from the spec:

What can be seen from this picture is that the 8dp padding are supposed to go to the baseline of the underline.
In all the spacing numbers they provide, the underline does not have a size. Spacing is always meant towards the baseline of the underline. In other words, the underline is inset.

In the specs they also have this image:

But this is wrong. It doesn't go together with all the information they provide. The 8dp padding should still go to the baseline.

This means that in the unfocused state, the "visual" padding between the text and the underline is 7dp and the thickness of the underline is 1dp, adding up to 8dp to the baseline.

And in the hover and focused state, the "visual" padding between the text and the underline is 6dp and the thickness of the underline is 2 dp, adding up to 8 dp to the baseline.

So when the underline "thickens", it will appear as if it would "thicken" towards the top.

Right now in vaadin-date-picker and vaadin-text-input, there's a constant 8px padding between the input and the underline and the underline appears to be "thickening" towards the bottom.

Please have a look at this implementation of React components, where this behavior is correctly implemented: https://material-ui-next.com/demos/text-fields/

EDIT:
This picture is the best in giving a correct overview of the spacing:

Here is a quote from the spec about the insetting of the underline (for the hover state):

Label text

Type: Roboto 16sp
Color: 54% black (4.5:1 contrast ratio)
Spacing: 8dp bottom padding, inset with bottom line

Thinking the spec through logically, the one position-fixed line in the design is the baseline of the underline.

Integrate into components

needs #48

• Create a separate vaadin-material-styles repo. (or use this one?) and include common theme styles
• Create a script that copies the element styles under themes/material of each element and updates dependencies etc
  • Commit to a separate feature branch "md-preview"
  • Modify README to include instructions on how to import the Material version instead of the default one

Could not find style data in module named vaadin-date-picker-overlay-default-theme

From @pdesjardins90 on April 16, 2018 21:0

Description

I get this warning using:

• vaadin-material-theme (0.3.0)
• vaadin-date-picker (v3.0.0-beta5)

Could not find style data in module named vaadin-date-picker-overlay-default-theme

Copied from original issue: vaadin/vaadin-date-picker#537

Export styles in a way that can be easily consumed in LitElement based views/components

See vaadin/vaadin-lumo-styles#90

Release 1.2.2

Webjar for 1.2.1 was incorrectly uploaded:
http://repo.maven.apache.org/maven2/org/webjars/bowergithub/vaadin/vaadin-material-styles/1.2.1/

compare with the correct one:
http://repo.maven.apache.org/maven2/org/webjars/bowergithub/vaadin/vaadin-material-styles/1.2.0/

correct vaadin-grid id

It should be material-grid.
https://github.com/vaadin/vaadin-material-theme/blob/master/vaadin-grid.html#L5

Not sure it is can create problems later on -

In some iOS devices label is not moved to top

One user in the UX test had this problem.
Can not reproduce in simulator, we need to contact the user for more details.

Theme for vaadin-combo-box

Styles from 2.0:

:host {
  position: absolute;
        box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
        background: #fff;
        border-radius: 0 0 2px 2px;
        top: 0;
        left: 0;
        pointer-events: auto;

        
        z-index: 200;
        overflow: hidden;
}

#scroller {
  overflow: auto;
        max-height: var(--vaadin-combo-box-overlay-max-height, 65vh);

        
        transform: translate3d(0, 0, 0);

        
        -webkit-overflow-scrolling: touch;
}

#selector {
  --iron-list-items-container_-_border-top:  8px solid transparent; --iron-list-items-container_-_border-bottom:  8px solid transparent;;
}

#selector vaadin-combo-box-item {
  cursor: pointer;
        padding: 13px 16px;
        color: var(--primary-text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

:host([opened][loading]) {
  display: block !important;
        height: 58px;
}

#selector:not([touch-device]) vaadin-combo-box-item:hover, #selector vaadin-combo-box-item[focused] {
  background: #eee;
}

#selector vaadin-combo-box-item[selected] {
  color: var(--primary-color);
}

#selector vaadin-combo-box-item[hidden] {
  display: none;
}

A link in the checkbox label can't be clicked

The link is clickable with the default theme (Lumo)

Notification Color is not OK on iOS

<h3> content is not shown with enough contrast

It might be a problem in the app (check that typography and colors modules are included in the app)

Plan the UX tests

child of #48

Date-picker and combo-box buttons have different appearance

vaadin-grid: checkbox ripple is clipped when inside Polymer element

I hope this is the right place and I'm not missing something obvious here.

Description

When using a vaadin-grid with vaadin-material-theme inside a Polymer element, the ripple effect on a checkbox is not shown correctly (clipped to a rectangle).
The ripple displays correctly when not inside a Polymer element

Expected outcome

Actual outcome

Steps to reproduce

• make a new Polymer element
• place vaadin-grid inside the element
• use a checkbox for selection in the grid (eg vaadin-grid-selection-column)
• use vaadin-material-theme on the vaadin-grid
• use the Polymer element
• click on the checkbox
• ???
• profit

Or just:

• Look at this handy JSFiddle

Notes

• I've only tested this in Chrome with
  polymer#2.5.0 && ( vaadin-grid#4.1.7 || vaadin-grid#4.0.0 ) && vaadin-material-theme#0.3.0.
• The bug works with any way to put in a Material checkbox,
  whether putting it in via vaadin-grid-selection-column or manually in a vaadin-grid-column,
  with either vaadin-checkbox or paper-checkbox
• I've managed to show the ripple by manually setting a margin: 15px; on the paper-checkbox, but that screws with the row-height, and I don't think this is intended to be necessary
• Please don't yell at me if I'm just too stupid to use your element correctly 🙂

vaadin-combo-box with label and placeholder are not displayed correctly when the material design is applied.

Description

The vaadin-combo-box's label and placeholder are one over the other when the material design custom style is applied.

Expected outcome

1. The vaadin-combo-box label is display and when we click the vaadin-combo-box label go on top and the placeholder appear.
2. The vaadin-combo-box label is fixed on top when there is a placeholder.

Actual outcome

The placeholder and the label are one over the other

Steps to reproduce

1. Put a vaadin-combo-box element in the page.
2. Put a vaadin-text-field element in the page.
3. Add the vaadin-text-field material design theme.
4. Open the page in a web browser.
5. See the bug

<link rel="import" href="../bower_components/vaadin-material-theme/vaadin-text-field.html">
<link rel="import" href="../bower_components/vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="../bower_components/vaadin-text-field/vaadin-text-field.html">

<vaadin-combo-box label="City" placeholder="Enter or Choose a City" items="{{cities}}"></vaadin-combo-box>
<vaadin-text-field label="City" placeholder="Enter a City"></vaadin-text-field>

Browsers Affected

• Chrome
• Firefox
• (Can't test) Safari
• Edge
• IE 11
• (Can't test) iOS Safari
• (Can't test) Android Chrome

Issue open first in vaadin-combo-box #586

Focus ring around cells on refocusing window with mouse

When refocusing the window with the mouse, the focus ring around cells shows.

These 3 lines are responsible for it:
https://github.com/vaadin/vaadin-material-theme/blob/master/vaadin-grid.html#L110-L112

Material multi-line text field (text-area)

From @jouni on April 12, 2017 10:18

CSS for vaadin-text-area that makes it look like the default material design multi-line text field: https://material.io/guidelines/components/text-fields.html#text-fields-field-types

Copied from original issue: vaadin/vaadin-themes#8

Book and conduct the UX tests

child of #48

Extract the findings from UX tests to tickets

child of #48

Move user colors from CE to Material theme

Currently the colors used by AvatarGroup are undefined unless Collaboration Engine is used.
It would be useful to be able to use the colors manually even without CE.
Moving them to the theme would make them generally available for any use case.

Add Material theme for vaadin-checkbox

From @limonte on August 8, 2017 7:1

Reference: https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox

Copied from original issue: vaadin/vaadin-themes#38

Add RTL specific styles

Convert existing styles to be RTL friendly and add them to the end of the file with
/* RTL specific styles */ comment.

:host([dir="rtl"]) selector should be used

Wrap mask-image to avoid Edge crash

#22 (comment)

update repo for p3

master needs the same changes performed with lumo-styles in its p3-preview branch, also it needs to be released in npm.

Remember update http://yuriyyevstihnyeyev.online.gridhosted.co.uk/

vaadin-grid theme dom-module ID issue?

Shouldn't this be something like material-grid as to not conflict with the Valo theme module of the same ID?

https://github.com/vaadin/vaadin-material-theme/blob/061040fe69b5ae69c66858ae61f1b352518e4264/vaadin-grid.html#L5

Combined small issues list

Generic

• Inconsistent font styles. <vaadin-button> sets material font style over contents, while some others (<vaadin-checkbox>, <vaadin-radio-button>) use inherited font. Won’t fix (works the same in Lumo).
• Expected to import the Roboto font? Font styles specify font-family: Roboto, Noto, sans-serif;, while Roboto can be not imported and not installed on the system. Fixed by importing the necessary font weights from Google Fonts in typography.html
• Expected: <vaadin-checkbox> and <vaadin-radio-button> have the same focus ring size. Actual: <vaadin-checkbox> has a smaller focus ring, compared to <vaadin-radio-button>.

<vaadin-button>

• Expected: some horizontal padding inside the button. Actual: no padding inside, the content touches the edges.
• Expected primary button to have white on primary colors. Actual: primary on white.
  • With a raised theme variant, works as expected. Works as designed. Let’s revise when updating to new specs
• Expected a bold font-weight by default. Actual: regular font-weight. The specs are a bit contradicting here. They say “regular” (400), but the screenshots show ”medium” (500)
• Expected: button should have a 2px border-radius. Actual: 3px. Using the new specs 4px now
• Expected: some horizontal spacing between the prefix icon and the content. Actual: no spacing. Fixed, according to new sizing and spacing specs

<vaadin-checkbox>

OK, apart from the generic issues.

<vaadin-combo-box>

• Expected icon: triange pointing down. Actual icon: angle pointing down.

<vaadin-context-menu>

• Expected: mouse hover is not confused with focused item. Actual:
  • hover and focused items have the same appearance,
  • mouse hover on the menu makes the focused item to appear as regular item,
  • keyboard navigation appears broken when mouse is over the menu, and works fine if mouse is outside.

Note: see <vaadin-list-box>, <vaadin-item>.

<vaadin-date-picker>

In the overlay:

• Expected: no spacing between the overlay edges and the scrollers. Actual: there is some padding inside.
• Expected: uses material font styles. Actual: font family is inherited from the body.
• Expected: centering for years, months, and week titles. Actual: have default alignment to the left.
• Expected: vertical spacing for month and week titles in the overlay. Actual: no vertical spacing.
• Actual: year scroller has gray text on gray background, contrast ratio: 4.50. Expected: higher contrast ratio, maybe inverse color theme (white on black or almost black).
• Expected: dots between the years in the year scroller. Actual: no dots.
• Expected: buttons toolbar drops a shadow on the scrollers and does not have a top border. Actual: no shadow, but there is a border.

<vaadin-dialog>

• The shadow is too small. Expected a larger one. The guideline specifies elevation level of 24dp for dialogs: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows
  • See also <paper-dialog> for comparison, it has a lot larger shadow: https://www.webcomponents.org/element/PolymerElements/paper-dialog/demo/demo/index.html
• There is a .buttons class exposed for arbitary users’s template. Should we scope it?
• Dark theme demo does not make sense at this point. The dark theme does not propagate to the dialog internal overlay anyway. This is a known issue of the dialog: vaadin/vaadin-dialog#37

Let us just remove this demo for now to avoid confusion.

<vaadin-dropdown-menu>

• Expected icon: triange pointing down. Actual icon: angle pointing down.
• Expected: mouse hover is not confused with focused item. Actual:
  • hover and focused items have the same appearance,
  • mouse hover on the menu makes the focused item to appear as regular item,
  • keyboard navigation appears broken when mouse is over the menu, and works fine if mouse is outside.

<vaadin-form-layout>

• Expected: the column gap is 24px. Actual: 2em, which is 32px with default font size. See: https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-grid

<vaadin-grid>

• Expected: header cells have the same style in different the browsers. Actual: centered bold in Firefox, regular start-aligned in Chrome; borders around header cells in Chrome, no borders in Firefox, no background in Firefox.
• Expected: <vaadin-grid-filter> text field does not add vertical spacing in the cell. Actual: margin above and below the filter, same as in material <vaadin-text-field>.
• Material <vaadin-checkbox> is vertically misaligned in the grid.
  • Expected: <vaadin-selection-column> checkbox is on the same line with regular column text content. Actual: it is below the line in Chrome.
  • Similar issue in all browsers when material <vaadin-checkbox> is used in a template content.
• Expected: material icons in <vaadin-grid-tree-toggle>. Actual: triangles from builtin styles, could be confusing with dropdown menu toggle icon.
• Expected: frozen column’s left and right edges are seamless (as in regular columns), or drops a shadow on the regular column when it is floating above. Actual: frozen column always has a border on the right edge.

<vaadin-list-box>

• Expected: horizontal divider <hr> touches the edges. Actual: has margin of 2px from both sides.

<vaadin-notification>

• Missing shadows. By material design guidelines, whenever some thing has higher z position over others, it should cast a shadow, so that the elevation level is indicated with the shadow size/look. Expected: snackbar elevation level: “Snackbars appear above most elements on screen, and they are equal in elevation to the floating action button. However, they are lower in elevation than dialogs, bottom sheets, and navigation drawers.” — https://material.io/guidelines/components/snackbars-toasts.html
  • Also, 6dp elevation level for snackbars is specified in the guide: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows
• Should probably have dark theme over contents. Currently in notification page, <vaadin-button> inside the notification uses dark blue over dark grey notification background. This manifests in low contrast, which is an accessibility issue. Expected behaviour: since the notification background is dark by default, nested Vaadin Elements use dark theme by default, so that the contrast remains high.
  • Would it make sense to include material-dark by default here and use default background/text color of the dark theme?
• Nitpick for the demos: second is a SI unit. Conventions tell us to write a space between the number and the symbol, and omit the dot ending. (2 s, not 2s.).
• Demo notifications should say Buttom start. Actual: Bottom left in the notification text.

<vaadin-item>

• Expected: more horizontal padding in the items (at least 16px from both sides). Actual: horizontal padding is rather small and asymmetric: 8px on the left, 24px on the right.
• Expected: icon in the item has horizontal spacing around. Actual: icon touches the item text.

<vaadin-password-field>

• Expected: material visibility/visibility-off icon is used to toggle reveal. Actual: no reveal icon is used.

<vaadin-split-layout>

• Expected: with orientaion="vertical", the handle is horizontal. Actual: handle is vertical with both orientations. Note: there is [vertical] attribute style in the theme, should be changed to [orientation="vertical"].

<vaadin-tab>

• Expected: text content is vertically centered in the tab by default. Actual: text content is at the top of the tab.
• The active tab appearance is hard to differenciate from the regular one:
  • Expected: active tab has an active color 2px underline. Actual: no underline.
  • Expected: active tab uses primary color. Theme variant with body color for active tab. Actual: active tab always uses body color, hard to see by default, better in the dark theme.

<vaadin-text-field> and the derived elements

• When floating, the label goes underneath the prefix. Expected: label stays always on top when prefix is in use, same way as with the value and with the placeholder.
• Expected: the underline width does not increase on hover. Actual: the underline width grows on hover.
• Expected: the underline clearly ripples on focus, does not ripple on blur. Actual:
  • Different ripple effects in <vaadin-text-field> itself and derived components.
  • Different effects in different browsers.
  • Different ripple efffect depending on mouse or keyboard focus.
  • On some cases, ripple on blur is more prominent that ripple on focus.

Extract the findings from UX tests to tickets

Child of #48

Material for date-picker

I've been going through the Material Design spec and I think it would be great, if the input field of the vaadin-date-picker would be styled closer to spec:

Using the material icon in front of the datepicker and the arrow icon at the end of the input, switching between arrow up and down.

The style of the arrow should not react to focus or hover.

The style of the icon in front should not react to hover, but to focus.

Here I found the material icon from the picture: https://materialdesignicons.com/icon/calendar-blank

The arrow icons are part of the iron-icon set.

EDIT:
The icon is spaced according to this picture. I couldn't find anything about the vertical alignment, but it looks like it is slightly higher than the top of the text input, because it's 24dp and the text is 16 sp, which means it would hit the underline, which from the picture it doesn't.

Improve documentation / how to use

Please improve the documentation how the Material theme can be used for Vaadin.
Especially without using bower or npm.

e.g. I tried to change Lumo.class to Material.class but it does not work. There should be an easy way to use the theme.

I have added the packages to gradle

compile group: 'com.vaadin', name: 'vaadin-material-theme', version: '1.2.3'
    compile group: 'org.webjars.bowergithub.vaadin', name: 'vaadin-material-styles', version: '1.2.0'

Now i know it was because i was using Vaadin11 so it should be noted somewhere that it only works with Vaadin 12 out of the box!

Button icon not positioned correctly

		Button btn = new Button("Go!", new Icon(VaadinIcon.AUTOMATION));
		btn.addClickListener(listener -> {
			Notification notification = new Notification(getTranslation("Not yet implemented"), 3000, Position.MIDDLE);
			notification.open();
		});

Renders:

Expected:

(Should be aligned like it is with Lumo Theme)
Especially since the API setIconAfterText should work as it does with Lumo

Probably this can be easily fixed by changing this CSS:

RadioButtonGroup not vertical by MATERIAL_VERTICAL

Actual Behavior:

Expected:
Like with Lumo Theme in a vertical Order instead of a row display. For Lumo it is working.

Settings:
RadioButtonGroup mobileType = new RadioButtonGroup<>();
mobileType.addClassName("mobile-radio-group");
mobileType.addThemeVariants(RadioGroupVariant.MATERIAL_VERTICAL);

Using:
vaadin-material-theme in version 1.2.2
vaadin in version 12.0.0

Repo is published to npm but doesn't use modules.

I tried to use the material theme with the vaadin polymer 3 components. This repo is published to npm but uses html imports. (hasn't been modulized) Is this going to happen soon or should I find a workaround? Thanks!

Blank screen and JavaScript syntax errors in IE11 when using Material theme

@evmatt commented on Wed Feb 27 2019

This bug appears to be similar to #4944. When running an application in production mode on Vaadin 12.0.7, which should incorporate the fix for #4944, the user sees a blank screen in IE11. Three JavaScript SyntaxErrors appear in the console on loading the page, all from the file style-properties.js. On inspecting this file ES6 keywords such as const are seen, so it appears that there is a failure in transpilation from ES6 to ES5 during the build process. This only occurs when using the Material theme, the Lumo theme works as expected.

I have been able to reproduce this bug using the Beverage Buddy starter pack running 12.0.7 when using the Material theme. When running the starter pack the errors arise from the webcomponents-lite.js file rather than style-properties.js.

---

@ZheSun88 commented on Thu Feb 28 2019

Issue confirmed.
Bug can be reproduced by running production build on beverage-start using material theme, though the js error is different every time i run, for example one from webcomponents-lite.js, which comes from webcomponentsjs webjar.

Extract “field-button” mixin

So that we don’t have to repeat similar styles for field components with buttons (combo-box, date-picker, dropdown-menu).

date-picker is misaligned with text-fields

Live demo: https://jsfiddle.net/6r5htd05/36/

Expected:

Actual:

Chrome/Linux

Form layout theme

From @jouni on April 12, 2017 9:54

The things a theme can control in a form:

• The gap between the label and the field, when the label is on the side of the field
• The font styles of the form item label, including text alignment (left/right)

The gaps can be controlled with CSS custom properties.

I’m not 100% sure about the approach for the label, as it’s going to be slotted content. Should we target them with ::slotted(*) and apply correct font styles?

The default gap between columns should be 32px, and the default gap between the label and the field should be 16px.

Copied from original issue: vaadin/vaadin-themes#5

Documentation has link to non-existing page

https://cdn.vaadin.com/vaadin-material-theme/0.3.0/demo/grids.html

Under "Styling API", there is a link to customization instructions which points to https://cdn.vaadin.com/vaadin-material-theme/0.3.0/demo/customization.html but the page does not exist.