Skip to content

v2.0.0-alpha2 — Styling parts structure change

Compare
Choose a tag to compare
@web-padawan web-padawan released this 28 Dec 07:42
· 211 commits to master since this release

Live Demo →
API Documentation →

⚠️ Breaking Changes:

  • Remove the wrapping native button (and the "button" styling part)
  • The CSS position is now set to relative on host element forced with !important

New Features:

  • Added three new styling parts:
    • part="label": wrapper for the default slot
    • part="prefix": wrapper for the named slot with name="prefix"
    • part="suffix": wrapper for the named slot with name="suffix"

Changes Since v2.0.0-alpha1:

  • 10b5b2d Fix host vertical align

  • d04626d Fix tests

  • 4eb80c3 Force relative positioning on the host

  • b9fc85a FFS demos, part 2

    • Use shared styles from vaadin-demo-helpers
    • Align examples with the new vaadin-button slots and theme variations:
  • 973fc25 Fix ElementMixin route

  • b668736 FFS theme, part 2

    • Fix vertical alignment to work naturally in all browsers
    • Added three new styling parts, named "label", "prefix" and "suffix"
    • Split the Valo theme module into multiple style modules
    • Add a test page for the Valo theme and its variations
  • d4a6944 FFS theme

    • Remove use of unnecessary --valo-font-size property
    • Add an intermediate property for sizing the button
      --valo-button-size
    • Remove box-shadows and update the background colors (which allows us
      to remove the --_valo-button-background-color tweak property for the
      dark palette)
    • Don’t transition background color and text color
    • Simplify hover and active styles (they also now work nicely on touch
      devices as well)
    • Remove horizontal margins (now aligns the same as text-field when
      stacked vertically)
    • Remove margins from icons when theme="icon" is used (so they are
      always centered inside the button)
    • Update screenshot to match the new style
  • 7f499b8 FFS demos

    • Remove superfluous examples (tabindex, autofocus)
    • Add an "icon" example to the basic examples
    • Extract a11y examples to a separate page
    • Improve Valo theme examples (include all the variations)
    • Add additional documentation in plain-text
    • Use "Vaadin Button" instead of "vaadin-button" when talking about the
      UI component. Use <vaadin-button> when talking about the element
      specifically.
  • e0d877e Use Vaadin.ElementMixin

  • db08dc0 Update README.md