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.
inputMode
tomwc-textfield
andmwc-textarea
- CSS custom properties for typography
- Added
autoValidate
property on textfield mwc-button
now has a slot foricon
andtrailingIcon
- 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.
- 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
- 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