v2.0.0-alpha2 — Styling parts structure change
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 slotpart="prefix"
: wrapper for the named slot withname="prefix"
part="suffix"
: wrapper for the named slot withname="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
- Remove use of unnecessary
-
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