All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
fab
- BREAKING removed
--mdc-fab-box-shadow-hover
; use--mdc-fab-box-shadow
- BREAKING removed
--mdc-fab-box-shadow-active
; use--mdc-fab-box-shadow
- Ripple now uses and exposes
mwc-ripple
's CSS custom properties API
- BREAKING removed
icon-button
- BREAKING now uses lazy
mwc-ripple
in its implementation
- BREAKING now uses lazy
icon-button-toggle
- BREAKING now uses lazy
mwc-ripple
in its implementation
- BREAKING now uses lazy
select
- render methods have been renamed and reorganized (breaking if extending and overriding)
slider
- An upcoming change will migrate the slider to use the MDC M2 slider. In preparation for this, the MWC slider => MDC slider dependency will not be updated until the migration is complete.
textfield
- render methods have been renamed and reorganized (breaking if extending and overriding)
- remove extra space between label and required asterisk (
*
)
top-app-bar(-fixed)
--mdc-top-app-bar-width
is now configurable
button
- ripple will unripple when mouse/touchend happens outside of button
select
- label will be highlighted before selected text during horizontal navigation for screen readers
- filled variant now has a ripple
textarea
- label will be highlighted before input during horizontal navigation for screen readers
- minlength attribute is now supported
- inputmode attribute is now supported
- autocapitalize attribute is now supported
- remove extra space between label and required asterisk (
*
)
textfield
- label will be highlighted before input during horizontal navigation for screen readers
- remove extra space between label and required asterisk (
*
)
- prod dependency breakage based on
@material/dom
- unused GH tag
linear-progress
- theming sass helpers.
notched-outline
- BREAKING removed border-radius and leading-width custom properties in favor of
--mdc-shape-small
- BREAKING removed border-radius and leading-width custom properties in favor of
textarea
- BREAKING shape is now customized with
--mdc-shape-small
- BREAKING shape is now customized with
textfield
- BREAKING shape is now customized with
--mdc-shape-small
- BREAKING shape is now customized with
mwc-list-item
- get rid of mobile os glow on tap
- do not set aria-selected on incompatible roles
- ripple will unrip if unclick or touchend is outside of list-item
mwc-list
- fixed regression in list that broke mwc-select in IE or shady dom.
- Tabs no longer focus on initialization
- mwc-list-item ripple color will now change based off of --mdc-ripple-color on initialization
- Fix issue where textfield would throw an error when fed a non-string value
- list selected item will update if selected item is disconnected
floating-label
: in bothselect
andtextfield
the user no longer has to call layout when changing label or outlined
textarea
- added separate internal and external character counters
textfield
- added support for autocapitalize attribute
--mdc-drawer-width
Drawer width is now configurable.- Added
name
propertymwc-textfield
&mwc-textarea
for browser autofill. ListItem.multipleGraphics
list-item graphic width now configuratble for multiple graphicsMenu.menuCorner
can now configure from which horizontal corner should the menu anchor from.- Add
reducedTouchTarget
param tomwc-checkbox
to control touchscreen accessibility. - Typeahead on
mwc-select
- Added
focusItemAtIndex(index)
andgetFocusedItemIndex
to bothlist
andmenu
- Add
--m-ripple-z-index
to control ripple z-index.
radio
- BREAKING renamed
SelectionController
toSingleSelectionController
- BREAKING moved
SingleSelectionController
to@material/mwc-radio/single-selection-controller.ts
SingleSelectionController
now acceptsCheckableElements
rather than just MWC Radio elements
- BREAKING renamed
textarea
- BREAKING character counters are now external by default
- BREAKING removed
fullwidth
variant
textfield
- BREAKING removed
fullwidth
variant
- BREAKING removed
- BREAKING
--mdc-tab-border-radius
has been removed to align with spec - BREAKING replaced
--mdc-dialog-shape-radius
with--mdc-shape-medium
- BREAKING mwc-checkbox sizing changed to 48x48 by default for touch accessibility. Disable with
reducedTouchTarget
attribute or property. - BREAKING mwc-select's fullwidth property removed since it was behaving as initially expected. Use
width: 100%
on the root element to accomplish fullwidth.
- Added --mdc-menu-z-index to menu-surface
- Added surface/on-surface theme properties for mwc-switch
- Added overrides for ripple focus and hover opacities
--mdc-ripple-focus-opacity
and--mdc-ripple-hover-opacity
respectively
- Added
spaceBetween
to mwc-formfield - Added
activated
andselected
states for ripple - Added documentation for ripple
- Prefix and suffix to mwc-textfield
mwc-formfield
now has a nowrap property- mdc-button now has --mdc-shape-small for border radii
- Added
size
property tomwc-textfield
mwc-fab
now has a slot of icons- Added
fullwidth
property tomwc-select
. - Added
minLength
tomwc-textfield
- Refactor
mwc-checkbox
- Remove usage of
MDCCheckboxFoundation
- Replace
ripple-directive
with lazymwc-ripple
- Remove usage of
- Refactor
mwc-button
- Replace
ripple-directive
with lazymwc-ripple
- Replace
- Refactor
mwc-ripple
- Normalized API to
start${state}
end${state}
naming
- Normalized API to
- BREAKING:VISUAL: mwc-list-item now internally uses mwc-ripple instead of styling ripple on host
mwc-menu
'squick
variant now opens synchronously- Convert to Sass modules
- BREAKING removed textfield's character counter foundation directive
- Refactor
mwc-select
- BREAKING:VISUAL internal structure of select anchor updated.
- BREAKING
naturalWidth
property renamed tonaturalMenuWidth
for clarity. - BREAKING:
--mdc-select-dropdown-icon-opacity
and--mdc-select-disabled-dropdown-icon-opacity
removed; opacity is now expressed in alpha channel of color. - BREAKING:VISUAL: Dropdown arrow icon motion updated.
- BREAKING remove
helperPersistent
property; helper text now persistent by default if included.
- Refactor snackbar to conform to other elements'
.open
.show()
.close()
APIs- BREAKING mwc-snackbar
isOpen
property is now calledopen
- BREAKING mwc-snackbar
open()
method is now calledshow()
- BREAKING mwc-snackbar's isOpen -> open property is now editable
- BREAKING mwc-snackbar
- Removed default slot from switch
- mwc-select's button role changed to combobox
- Fix property renaming issues with Closure Compiler
- Use
RippleAPI
interface betweenRippleHandlers
andmwc-ripple
- Use
RippleInterface
interface forripple-directive
- Use
- Fix regression in textfield line color custom properties
- Fix infinite loop bug in
mwc-tab-bar
whenactiveIndex
is set in first render - Fixed bug in
mwc-slider
where initializing min and max over100
would not set correct bounds on UI. - Fixed
"
showing up in mwc-button when the ripple activates - Changing an invalid textfield's validation properties to valid values will update styles automatically
innerAriaLabel
tomwc-list
to setaria-label
.--mdc-text-field-disabled-line-color
added
- Update
lit-element
dependency to2.3.0
for all components.
inputMode
tomwc-textfield
andmwc-textarea
readOnly
tomwc-textfield
andmwc-textarea
- CSS custom properties for typography
- Added
autoValidate
property on textfield mwc-button
now has a slot foricon
andtrailingIcon
- BREAKING setting
mwc-list-item.selected
will update selection in the parent list mwc-ripple
now has CSS properties--mdc-ripple-color
,--mdc-ripple-fg-opacity
, and--mdc-ripple-hover-opacity
- Added
RippleHandlers
tomwc-ripple
to provide an easy integration point for calling ripple API. - Added
light
property tomwc-ripple
to help style ripples on dark surfaces. mwc-select
can now select items by settingmwc-select.value
.- Exposed --mdc-shape-medium on mwc-menu-surface
- Added
focusOnActivate
property tomwc-tab
true
by default, set tofalse
to disable focusing on tab activation
- mwc-select now has --mdc-select-disabled-dropdown-icon-color
- BREAKING
--mdc-button-text-transform
has been renamed to--mdc-typography-button-text-transform
- BREAKING
--mdc-button-letter-spacing
has been renamed to--mdc-typography-button-letter-spacing
- BREAKING
--mdc-tab-text-transform
has been renamed to--mdc-typography-button-text-transform
- BREAKING:VISUAL textfield will now only validate on blur instead of input without
autoValidate
prop - BREAKING:VISUAL
mwc-tab
's default slot now has nameicon
mdcFoundation
andmdcFoundationClass
are now optional in BaseElement.- Remove
export *
from BaseElement and FormElement. - BREAKING:A11Y mwc-list will no longer update items on slotchange but on first render and on list item connect meaning list dividers will only add role="separator" in those cases
- Make FormElement and
mwc-formfield
support asynchronous ripple properties - BREAKING Remove
active
property frommwc-ripple
.- Use
activate()
anddeactivate()
methods instead
- Use
- BREAKING
mwc-ripple
now requires implementing event handlers manually in the parent component. - BREAKING Components must now import
@observer
manually from@material/mwc-base/observer
;
- Setting
scrollTarget
onmwc-top-app-bar
will update listeners - Fixed sass imports of
_index.scss
files - Fixed issue with caret jumping to end of input on textfield
- mwc-list-item now works on IE
- mwc-select's
updateComplete
will now properly await child custom elements'updateComplete
s - BREAKING Disabled icon buttons no longer have pointer events
mwc-textfield
will not setvalue
on the internal input tag oninput
event causing caret jumping in Safarimwc-select
's--mdc-select-ink-color
actually does something now- Setting
disabled
onmwc-ripple
will hide the ripple - mwc-menu's x and y anchor margins now work for all corners
- mwc-select's --mdc-select-disabled-ink-color now colors the selected text
- inconsistencies on how
<contol>-list-item
s' state of controls and element list
sets initialtabindex
when initialized withnoninteractive
and then set to false
- End-alignment to
mwc-textfield
andmwc-textarea
- Implemented:
mwc-select
mwc-menu
mwc-menu-surface
mwc-list
mwc-list-item
- Base / utils.ts
isNodeElement
- performant node -> element checkingdeepActiveElementPath
- finds the deepestactiveElement
nodedoesElementContainFocus
- determines is ancestor ofactiveElement
mwc-radio.global
- groups radios across document rather than shadow root- Style underline of filled textfield
--mdc-text-field-idle-line-color
--mdc-text-field-hover-line-color
- Fixed mwc-dialog not removing keydown event listener on close.
- BREAKING:VISUAL Wrap mwc-button label in a slot
- Remove mwc-button border-radius from ripple
- Make mwc-button internal button overflow none
- Added custom properties to style
mwc-radio
's colors - CSS styling options to
mwc-tab
active
attribute tomwc-tab
when (de)activated- Added custom properties to style
mwc-checkbox
's colors - Added
show
andclose
methods tomwc-dialog
- BREAKING:VISUAL
mwc-tab
will now automatically size slotted images. Also slotted image will override icon font.
- BREAKING
mwc-tab
can now only have slotted content via thehasImageIcon
flag. - BREAKING:VISUAL
mwc-checkbox
default display is changed from inline to inline-block.
- Restore removed code in linear progress adapter
- CSS styling options to
mwc-button
- CSS styling options to
mwc-textfield
- README for
mwc-drawer
- README for
mwc-checkbox
- README for
mwc-formfield
- Demo for
mwc-drawer
without a header in the drawer --mdc-icon-button-size
and--mdc-icon-size
tomwc-icon-button
- BREAKING
Dialog.title
renamed toDialog.heading
and--mdc-dialog-title-ink-color
renamed to--mdc-dialog-heading-ink-color
as it caused clashes withHTMLElement.prototype.title
. - Updated material dependencies to
4.0.0-canary.735147131.0
. - BREAKING
Slider.discrete
removed andSlider.pin
added. mwc-dialog
will now search its flattened distributed nodes and their trees for a focusable element.- BREAKING
mwc-slider
now emits bubbling and composedinput
andchange
events instead ofMDCSlider:input
andMDCSlider:change
. - BREAKING:VISUAL the digits inside the
Slider
's pin will be rounded to at most 3 decimal digits. - BREAKING
LinearProgress.determinate = false
removed in favor ofLinearProgres.indeterminate = false
. - BREAKING
LinearProgress.buffer = 0
default value changed to1
. - BREAKING:VISUAL
mwc-linear-progress
had--mdc-theme-secondary
applied to its buffer bar's background color. This custom property's name was changed to--mdc-linear-progress-buffer-color
. - BREAKING:VISUAL the digits inside the
Slider
's pin will be rounded to at most 3 decimal digits. - BREAKING
LinearProgress.determinate = false
removed in favor ofLinearProgres.indeterminate = false
. - BREAKING
LinearProgress.buffer = 0
default value changed to1
. - BREAKING:VISUAL
mwc-linear-progress
had--mdc-theme-secondary
applied to its buffer bar's background color. This custom property's name was changed to--mdc-linear-progress-buffer-color
. - BREAKING
mwc-icon-button
will now use its default slot for<img>
or<svg>
icons instead of a named "icon" slot.
- Fixed checkbox ripple visibility when focused while being unchecked.
- Fixed app content not being expanded inside drawer.
- Fixed issue where slider when resized or scrolled will not respond to touch as expected.
- Fixed issue where
mwc-ripple
would not ripple when parent was a shadow root - BREAKING:VISUAL Fixed sizing of the
mwc-icon-button
inmwc-snackbar
- Fixed
mwc-icon-button
icon at end layout. mwc-slider
can now have its pin and markers added and changed dynamically.- Fixed
mwc-icon-button
icon at end layout. mwc-slider
can now have its pin and markers added and changed dynamically.- Fixed
mwc-dialog
race-condition bug with the blocking elements polyfill that could occur if the dialog was disconnected before it had finished opening. - Fixed
mwc-button
alignment issues when some buttons have icons and others do not.
mwc-textfield
ink and fill css variables
-
BREAKING Removed
mwc-icon-font.js
import. Most users should load the Material Icons and Roboto fonts by adding the following to their HTML file:<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
See the Fonts section of the README for more details.
-
BREAKING Moved
@material/mwc-textfield/character-counter/mwc-character-counter-directive.js
to@material/mwc-textfield/mwc-character-counter-directive.js
.
- Fixed
mwc-dialog
's issues with working on older browsers. <mwc-radio>
groups are now correctly synchronized when stamped using a lit-htmlmap
orrepeat
, and any other time the radio is not created and connected at the same time (#282).
- Fixed missing
@material/mwc-base
dep on@material/mwc-dialog
.
- Implemented
mwc-dialog
mwc-textfield.layout
method.
- BREAKING: Added custom
.focus()
and.blur()
functions to mwc-button that cause the button to ripple as when tab focusing. - BREAKING: mwc-textfield's custom
.focus()
function will now call.focus()
on the native internal input causing the caret to appear instead of just forcing focus styles to appear. - BREAKING: mwc-textfield's custom
.blur()
function will now call.blur()
on the native internal input instead of just forcing focus styles to disapprear. - BREAKING
mwc-base/base-element
no longer exports any of thelit-element
orlit-html
APIs (e.g.LitElement
,customElement
,classMap
). Users should import directly from thelit-element
andlit-html
modules instead. - BREAKING
mwc-textfield
andmwc-textarea
will now update their.value
on the nativeinput
'sinput
event instead ofchange
.
<mwc-drawer>
can now be used with Rollup (via version bump to pick up WICG/inert#135).<mwc-textfield>
and<mwc-textarea>
will now have the same height between their filled and outlined variants with helper text on older browsers.mwc-textfield[required]
andmwc-textarea[required]
will now have their required asterisk colored correctly when customized.<mwc-textfield>
and<mwc-textarea>
can now have basic usability in IE.mwc-textarea[disabled][outlined]
will no longer have a filled-in background as is per material spec.mwc-textarea[disabled]label="string!"][value="string!"]
will now float the label to the correct spot.
-
Published JavaScript files no longer include inlined TypeScript helpers such as
__decorate
. Instead, helpers are now imported from thetslib
module dependency. This reduces code size by allowing multiple components to share the same helpers, and eliminates "this has been rewritten to undefined" errors from Rollup. (#439) -
BREAKING Renamed component
base
modules: (#440):icon-button-toggle-base.ts
→mwc-icon-button-toggle-base.ts
icon-button-base.ts
→mwc-icon-button-base.ts
top-app-bar-fixed-base.ts
→mwc-top-app-bar-fixed-base.ts
- Added "module" field in all packages'
package.json
manifests (#434)
-
New components:
-
Added support for
<svg>
and<img>
icons to<mwc-icon-button>
and<mwc-icon-button-toggle>
. (#358) -
Added
--mdc-snackbar-action-color
CSS custom property to<mwc-snackbar>
to override the default action button color (#354). -
Added a default slot to
<mwc-top-app-bar>
and<mwc-top-app-bar-fixed>
which takes page content and automatically applies the correctpadding-top
(#370). -
Added documentation for:
-
BREAKING The Material Icons font is no longer loaded automatically (#314). This allows more control over how fonts are loaded (e.g. serving fonts from a different server, or loading multiple fonts with a single request). Most users should now add tags like this to their HTML page:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
-
BREAKING The toggling behavior of
<mwc-icon-button>
has been removed (i.e.offIcon
), and is now instead supported by the dedicated<mwc-icon-button-toggle>
component (#370). -
BREAKING The short layout for
<mwc-top-app-bar>
has been removed, and is no longer supported because it is not part of the Material Design specification (#422). -
BREAKING The fixed layout for
<mwc-top-app-bar>
has been removed, and is now instead implemented by the dedicated<mwc-top-app-bar-fixed>
component (#379).
- Fixed bug where
<mwc-snackbar>
open
method threw if called immediately after construction (beforefirstUpdated
) (#356). - Fixed bug where setting the
<mwc-snackbar>
labelText
property could throw an exception and fail to render (#412). - Buttons slotted into
<mwc-snackbar>
now render with the correct default styles (#354). - Fixed layout issue affecting scrolling
<mwc-tab-bar>
in Firefox (#349). - Fixed bug where
<mwc-icon>
icons did not render in IE11 (#353). - Fixed bug where setting the
checked
property on an<mwc-radio>
did not result in the other radios in the group becoming unchecked (#373). - Fixed bug where
<mwc-drawer>
did not work in IE (WICG/inert#129). - Fixed
dense
andprominent
styling bugs in<mwc-top-app-bar>
(#379).
- Upgrade lerna to 3.x
- Upgrade typescript to 3.4, add config for tsbuildinfo files needed for incremental compilation mode
- Add README notes that component set is in experimental status.
- Remove draft components, simplify package listing.
- Prepare drawer, icon-button, linear-progress, slider, snackbar, tab components, and top-app-bar for release.
- Fix typing for event listeners in adapters due to typescript update.
- Add wicg-inert and blocking-elements dependencies to mwc-drawer
- Update to mdc 1.0
- Rewrite Adapters and Foundations with Typescript types
- Disable pointer-events on disabled buttons
- Update to mdc 0.44
- fix button label issues
- Use
static get styles()
on all components - Clean up dependencies
- Implement drawer focus trapping
- Add tests
- Setup travis CI
- Update to lit-html 1.0
- Update lit and lit-element dependencies
- Publish mwc-drawer
- Update to lit-element 0.6.5 and lit-html 1.0.0-rc.1
- Fix ripple directive for lit-html 0.13
- Move event listeners to the class with lit-element 0.6.2
- Add
@eventOptions({passive: true})
to event handlers in tab-bar-scroller- More efficient scrolling behavior, as
preventDefault
is never called
- More efficient scrolling behavior, as
- Implement icon-button in typescript
- Fix demo publishing
- Update to lit-element 0.6.2
- Add dependencies to lit-html where necessary
- Add explicit
.js
endings to imports, where necessary - Fill in CHANGELOG
- Rewrite elements in typescript
- Add
ripple
lit directive to add a material ripple to any component - Add
@observe
decorator to tie data changes into base MDC Foundation handlers - Add a watcher for styling and typescript changes
- Update to lit-element 0.6.1
- Use lit-element 0.6
- Use lit-element 0.5
- Add READMEs and examples
- Initial WIP of components