Web Awesome follows Semantic Versioning. Breaking changes in components with
the
Components with the
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
scroll-margin-top to children of wa-page--scroll-margin-top css variable wa-page<wa-input> around value attributes and properties to behave like native
<input>.
<wa-select> that made the suffix slot collide with the clear button<wa-checkbox> where unchecking and then checking would "clear"
its value.
<wa-relative-time> would announce the full time instead of the relative
time in screen readers #22
<wa-tab-group> in Firefox where the overflow container would keep focus.
#14
<wa-input> where minlength and maxlength were
not being properly validated. #35
<wa-carousel> that made pagination work incorrectlyIf you're new to Web Awesome, you can skip this section. If you're coming from Shoelace, you're in the right place!
Here's a list of some of the things that have changed since Shoelace v2. For questions or help upgrading, the alpha discussion board is a great place to get help!
setKitCode() and getKitCode() functions as well as support for setting kit
codes declaratively with data-webawesome-kit
family and variant attributes to <wa-icon> and
<wa-icon-button>
active attribute to <wa-tab-group>data-dialog="close" to any button in
the dialog
data-dialog="close" to any button in
the drawer
--show-duration and --hide-duration custom properties to
<wa-details>, <wa-dialog>, <wa-drawer>,
<wa-tree-item>, and <wa-popup>
<wa-color-picker>data-webawesome instead of
data-shoelace; additionally, you can place it on any element now instead of just the associated
<script> tag
sl prefix to wa for Web Awesome, including tags, events, etc.primary variants to brand in all components<wa-checkbox> so that the internal checkbox now takes
up the full height and width of its wrapping container.
disabled attribute when disabled (use
:state(disabled) or [data-wa-disabled] instead)
<wa-checkbox> to no longer have a checked attribute set when their
checked property is changed, e.g. el.checked = true (use the
:state(:checked) or [data-checked] selector instead)
<wa-checkbox> and <wa-switch> to use
:state(checked) (fallback [data-wa-checked]) for styling their "checked"
state (the checked attribute now maps to defaultChecked like native HTML
checkboxes)
data-optional, data-required, data-invalid,
data-valid, data-user-invalid, and data-user-valid states to
data-wa-* prefix to avoid conflicts with user provided attributes
<wa-icon> so icons are no longer fixed width by default to accommodate variable
width icons
<wa-radio> from display: block; to
display: inline-block
<wa-tab-group> to implement a "roving tabindex" and
<wa-tab> is no longer tabbable by default. This aligns closer to the APG pattern for
tabs. [#2041]
<wa-tooltip> to no longer wrap content due to accessibility and styling issues.
Tooltips are now associated using the for attribute + an id on the trigger [#123]
<wa-spinner> so it doesn't wobble when zooming in Safari<wa-tab-group> so it uses a roving tab index instead of being able to
cycle through each tab
default from <wa-button> and made neutral the new
default
circle modifier from <wa-button> because button's no longer have
a set height
active-tab-indicator part from <wa-tab-group>closable attribute from <wa-tab> because you can't nest
interactive elements (see the updated example for a better method)
show() method from <wa-tab-group> (use the
active attribute instead)
show() and hide() methods from <wa-dialog> and
<wa-drawer> (toggle the open attribute instead)
wa-request-close event from <wa-dialog> and
<wa-drawer> (use the wa-hide event instead)
inline from <wa-color-picker>getFormControls() since we now use Form Associated Custom Elements and can reliably
access Web Awesome Elements via formElement.elements.
valueAsDate from <wa-input>; use the following to mimic native
behaviors: setter: waInput.value = new Date().toLocaleDateString() getter:
new Date(waInput.value)
valueAsNumber from <wa-input>; use the following to mimic native
behaviors: setter: waInput.value = 5.toString() getter: Number(waInput.value)
Did we miss something? Let us know!
Are you coming from Shoelace? The 2.x changelog can be found here.