5.0.0 (2020-02-14)
- auto-init: Fixed issue with multiple default exports (#5464) (8ddd5c6)
- button: Fix outline & ink color according to spec guidance (#5268) (ee1a68c)
- button: Fixed parameter default value in height mixin (#5244) (b0cecf1)
- checkbox: change checkbox event type from change to click and add some logic for IE browser (#5316) (2e491de), closes #4893
- checkbox: Disabled state colors in IE11 high contrast mode (#5263) (d6a1d4b)
- checkbox: Replace unique-id with custom color hash functio… (#5404) (7be9e4a)
- checkbox: update disabled color values (#5209) (821871e)
- chips: .d.ts file generated with syntax error (d154836)
- chips: .d.ts file generated with syntax error (#5577) (98f7faa)
- chips: Do not throw error if chip set becomes empty (#5290) (f978109)
- chips: Fix browser back nav in FF when removing chip with… (#5537) (a1a0deb)
- chips: Move touch target inside primary action (ad3bbf7)
- core: Fix canary release by excluding test files from default tsconfig (#5317) (c916008)
- data-table: change svg attribute name viewbox to viewBox (#5483) (#5493) (f3adce8)
- dialog: Move aria roles from dialog root to dialog surface… (#5239) (c704b71)
- elevation: Update overlay color mixin (#5331) (b723dfa)
- fab: Add missing dep to fab package.json. (#5236) (e0f6fd9)
- fab: Add overflow: visible to make touch target visible in… (#5241) (5850080)
- fab: Adjust fab line-height (#5254) (525989b)
- fab: Adjust fab line-height to center text (#5258) (591a6ad)
- floatinglabel: Estimate hidden scroll width (#5448) (981ec9b)
- list: Ensure disabled colors apply to primary and secondary text (#5322) (878a08b)
- notched-outline: Restore component test (#5449) (4269133)
- radio: update disabled color values (#5210) (491fddc)
- select: Do not fire change event on programmatic change (#5255) (ec72968)
- select: Fix notch outline width when floating (#5319) (1c494e5)
- slider: slider track not visible (#5512) (f2426d2)
- slider: use secondary custom property color for slider container (#5132) (aa8e43e)
- slider: Visual bug when slider value is displayed as "-0" (3fc3ab5)
- snackbar: add explicit width for label to wrap in ie11 (#5497) (cd49033)
- snackbar: adjust mixins to meet spec (#5477) (f16f15b)
- switch: add transform transition to switch control to avoid overflow-x issues (8c11ea2)
- switch: fix strict generic checks (7f5e0c2)
- switch: handle aria-checked correctly. (#5202) (#5357) (d245a1a)
- switch: set track border to be transparent (#5323) (397905b)
- testing: Revert change from #5299. (#5324) (5fb62be)
- textfield: add placeholder mixins and fix disabled colors (#5360) (0a40ced)
- textfield: add separate classes for leading/trailing icons (#5367) (70c708d)
- textfield: change root element to (#5439) (d8d9502)
- textfield: hide filled-variant floating label at <52px (#5553) (5ff3380)
- textfield: incorrect mixin forward path (#5554) (3e782d8)
- textfield: move ripple to separate element (c541ebe)
- textfield: outlined trailing icon's position (#5496) (93e2288)
- textfield: prevent placeholder styles from collapsing with minifiers (d07c78d)
- textfield: use correct disabled colors for IE11 high contrast (5353985)
- add missing SASS dependencies (#5337) (d2ae6e1)
- Remove edge detection for CSS custom properties (#5264) (fe444ac)
- migrate to the Sass module system (#5453) (faa9af3)
- grid-list: Deprecate component (#5499) (cf33f11)
- touchtarget: Rename mdc-touch-target-component => mdc… (#5245) (afe0dd1)
- button: Add disabled state color mixins (#5232) (b5eb51e)
- button: Add overflow ellipsis mixin (#5352) (47949b0)
- button: Setup elevation overlay (#5256) (3cbee6d)
- card: Add elevation overlay structure (#5282) (aa0eba4)
- chips: Add elevation overlay structure (#5279) (3e560b3)
- chips: Announce when chips are removed (b3f70eb)
- chips: Consolidate interaction event handlers (#5251) (5729943)
- dialog: Add elevation overlay structure (#5283) (b8bc4a2)
- dom: Add focus trap utility. (#5505) (63f357d)
- dom: Create announcer utility (32c1df1)
- elevation: Add elevation overlay mixins (#5249) (b4cfdc4)
- elevation: Update elevation mixins (#5304) (ba879b6)
- fab: Add elevation overlay structure (#5278) (e89750d)
- fab: Add support for increased touch target to mini FAB. (#5231) (0c4d8f3)
- floating-label: add feature targeting for styles (#5287) (b240bcc)
- icon-button: Add disabled state color mixins (#5246) (7161170)
- line-ripple: add active/inactive states to line-ripple (b6c7f62)
- line-ripple: add feature targeting for styles (#5292) (391674a)
- menu: Add elevation overlay structure (#5280) (7fd17ce)
- notched-outline: add feature targeting for styles (#5289) (c483774)
- progress-indicator: Add common interface for progress indicators (#5564) (ea863cb)
- switch: Add elevation overlay structure (#5281) (50f110a)
- Add index stylesheets to each MDC Web package (#5539) (1814866)
- Add index stylesheets to mdc-image-list and mdc-layout-gr… (#5546) (3a85313)
- Use @use syntax in material-components-web Sass file and… (#5573) (b4727e4)
- switch: Restructure DOM (#5312) (0ec1fab)
- text-field: Add disabled state color mixins (#5208) (66299b6)
- text-field: add feature targeting for styles (#5378) (e8a9936)
- textfield: add end-alignment (#5356) (847dd1a)
- Revert "feat(switch): Add elevation overlay structure (#5281)" (#5329) (1fbf5bd), closes #5281 #5329
- "fix(checkbox): change checkbox event type from change to click and add some logic for IE browser" (ba30399)
- feat(chips): Consolidate interaction event handlers (#5251) (#5301) (5e45d77)
- fix(chips): Do not throw error if chip set becomes empty (#5300) (d10e8cd)
- fix(select): Do not fire change event on programmatic change (#5255) (#5302) (ad9dfe7)
- chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.
PiperOrigin-RevId: 294259413
-
text-field: Redundant mixins
mdc-text-field-textarea-fill-color
,mdc-text-field-textarea-stroke-color
,mdc-text-field-fullwidth-bottom-line-color
removed. Instead, usemdc-text-field-fill-color
,mdc-text-field-outline-color
, andmdc-text-field-bottom-line-color
respectively to achieve the same effect. -
textfield: Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting
$mdc-text-field-minimum-height-for-filled-label: 40px
-
chips: Both
MDCChipAdapter
andMDCChipSetAdapter
have new methods.MDCChipSetFoundation
event handlers now accept the corresponding chip event detail interface as the sole argument. Theroot
property has been removed from theMDCChipRemovalEventDetail
interface. -
line-ripple:
mdc-line-ripple-color()
mixin has been renamed tomdc-line-ripple-active-color()
-
grid-list: Per the deprecation notice for grid-list, this component has been removed from MDC-Web. Some of its functionalities are available in the MDC Image List package instead. It is recommended that you migrate to the mdc-image-list package to continue to receive new features and updates.
-
Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).
-
textfield: icons must use
.mdc-text-field__icon--leading
or.mdc-text-field__icon--trailing
classes.mdc-text-field-icon-color()
mixin has been split intomdc-text-field-leading-icon-color()
andmdc-text-field-trailing-icon-color()
. -
chore(textfield): use --leading/trailing modifiers for icons
-
chore(textfield): docs typo
-
chore(textfield): revert hover fix
-
chore(textfield): fix unclosed css block
-
chore(textfield): separate position mixins for leading/trailing icons
-
chore(textfield): restore two-icons position mixin
-
chore(textfield): update component test with icon classes
-
chore(textfield): update foundation test for preventDefault error
-
switch: Added setNativeControlAttr method in mdc-switch adapter.
-
textfield: filled text fields must include a
<div class="mdc-text-field__ripple"></div>
PiperOrigin-RevId: 292641405
Co-authored-by: Material Web Copybara Robot [email protected]
- switch: Switch DOM structure has changed. See switch README for details
- button: Variable
$mdc-button-disabled-container-fill-color
renamed to$mdc-button-disabled-container-color
. - Removed
$edgeOptOut
option frommdc-theme-prop()
Sass mixin. - chips: the handleInteraction and handleTrailingIconInteraction handlers have been removed from the MDCChipFoundation. The handleClick handler has been added to the MDCChipFoundation
- Adds new adapter methods to MDCLinearProgressAdapter.
- elevation: Functions moved into the _functions.scss file
- touchtarget: Renames mixin from mdc-touch-target-component => mdc-touch-target-margin
- checkbox: remove event listener for 'change' and add event listener for 'click'.
- Add handleClick() method in foundation to handle click event.
- Add setCheck() method into component to change check status.
4.0.0 (2019-11-02)
- button: Add
overflow: visible
to button. (#4973) (905e84e) - button: Adjust touch target size when density is applied (#5112) (e2506f4)
- checkbox: Change minimum ripple size of checkbox & switch 24px => 28px (#5140) (3eae309)
- checkbox: Fix checkbox terminology in sass mixins (#5014) (2161c02)
- checkbox: Remove RTL styles from checkbox ripple (#5134) (a646516)
- chips: Ignore selection events in chip set (#4878) (94c6a00)
- chips: Remove keyCode check (#4966) (e6304c4)
- chips: Reset touch target when chip density mixin is applied. (#5116) (d3b515e)
- chips: Stack trailing/leading icons above touch target el (#5040) (048d4b7)
- chips: Stop emitting events in handlers (#4969) (cfd81dc)
- data-table: Minor fixes for data table layout (#5037) (37b1f93)
- fab: Add overflow: hidden; to ripple target to fix bounded ripple. (#5214) (97cbbdc)
- fab: Use FAB ripple target selector (#5146) (9d91acc)
- form-field: Fix radio RTL alignment bug. (#5064) (ef99808)
- linear-progress: Fix indeterminate animation bug (#5180) (062ade5)
- linear-progress: Prefix animation keyframes to prevent clashing (#5155) (fc0e474)
- linear-progress: Restore buffer after determinate is toggl… (#5156) (09b1598)
- linear-progress: Support high contrast mode (#5190) (d4141c9)
- list: Add #adapter.listItemAtIndexHasClass to prevent user state change to disabled items (#4922) (b6d213c)
- menu: Vertically center the group icon (#4862) (c5738ed)
- menu-surface: remove duplicate export from menu-surface (#5200) (0b120ae)
- radio: Fix touch target margins: 0px => 4px. (#5096) (a48d06e)
- ripple: Add overflow: hidden; to the bounded ripple mixin (#5173) (996b091)
- ripple: Always set even num when initial ripple size is ca… (#5141) (b26ad23)
- ripple: Remove unnecessary overflow: hidden. (#5191) (5916d18)
- tabs: Fix tab img icon styling. (#5041) (d0e6cd1)
- text-field: Do not trigger shake animation when text field is empty (#5097) (4913db9)
- text-field: Fixes input text alignment on IE11 for densed text field (#5136) (892dd4e)
- text-field: Fixes input text alignment on IE11 for densed… (#5147) (c8f7693)
- text-field: Updated shape mixins to set density scale (#5207) (719b57e)
- touch-target: Add class to touch target wrapper. (#5174) (e7799b8)
- touch-target: Add missing dependency - touch target to com… (#5098) (9306bd0)
- button: Add ripple target as an inner element. (#4890) (dffefe6)
- mdc-fab: Move Ripple to inner Element. (#4997) (85b33b5)
- select: Refactor select (#5113) (db7560e)
- slider: Functional slider tick visuals with css background (#4756) (8f851d9)
- button: Add support for increased touch target to button. (#4948) (1d7a2e6)
- checkbox: Add disabled state color mixins (#5167) (01628ef)
- checkbox: Add support for 48px touch target (#5025) (b5685a8)
- checkbox: Move ripple to child node (#4981) (9712b24)
- chip: Add density mixin to chip. (#5109) (bdf3430)
- chips: Add keyboard navigation (#4844) (42065fe), closes #2259
- chips: Add setSelectedFromChipset method (#4872) (283bd55)
- chips: Add support for increased touch target to chips. (#4970) (6aa109d)
- chips: Use index for all chip operations (#4869) (07078bb)
- density: Add density subsystem to components (#5059) (73a5e4c)
- dialog: Add dialog mixin for dialogs with increased touch target buttons. (#5024) (2ef1ddd)
- icon-button: Add density mixin to icon button (#5122) (37d6458)
- list: Add density mixin to list (#5069) (5132f89)
- list: Add mixin for disabled text opacity (#4861) (d68f8a7)
- radio: Add density mixin to radio (#5118) (199534d)
- radio: Add disabled state color mixins (#5168) (b5c6d66)
- radio: Add support for 48px touch target (#5032) (87b0a4c)
- radio: Move ripple to child element (#4983) (100ab37)
- ripple: Add support for ripple target to mixins. (#4880) (08dbe69)
- snackbar: Add option for indefinite timeout (#4998) (4f11851)
- switch: Add density support for switch component. (#5124) (2c793b4), closes #5104
- switch: add ripple opacity customization mixins (#5126) (8c0273f)
- tab: Add text transform mixin (#5144) (22d7ad2)
- tab-bar: Add a mixin to set scroller animation (#5172) (d7c938a)
- tab-bar: Add density mixin to tab-bar (#5070) (45dc002)
- tab-scroller: Add incrementScrollImmediate to bypass animation (#5184) (2b878b3), closes #5123
- tab-scroller: Mixin for scroll transition (#5154) (efda83d)
- text-field: Add density mixin to text field variants (#5066) (a12101d)
- text-field: Center align inner elements for dynamic height (#4990) (4d94b22)
- touch-target: Add touch target mixins. (#4940) (b2e0fea)
- Revert "refactor(menu-surface): Allow any type during migration (#5201)" (#5212) (62d3a09), closes #5201 #5212
- checkbox:
mdc-checkbox-ink-color
mixin now only applies to enabled checkboxes - chips: Chips markup, adapters, foundations, and events have changed.
- select: In MDCMenu and MDCMenuSurface,
hoistMenuToBody
adapter method removed. In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed:getValue
,setValue
,isMenuOpen
,setSelectedIndex
,checkValidity
,setValid
,toggleClassAtIndex
. MDCSelectAdapter methods added:hasLabel
,getSelectedMenuItem
,setSelectedText
,isSelectedTextFocused
,get/setSelectedTextAttr
,getAnchorElement
,setMenuAnchorElement
,setMenuAnchorCorner
,setMenuWrapFocus
,set/removeAttributeAtIndex
,focusMenuItemAtIndex
,getMenuItemValues
,getMenuItemCount
,getMenuItemCount
,getMenuItemAttr
,getMenuItemTextAtIndex
,add/removeClassAtIndex
. MDCSelectFoundationsetValue
method removed;getDisabled
,handleMenuItemAction
,getSelectedIndex
,get/setRequired
,init
added. - radio: In Checkbox, Renamed sass variables
$mdc-radio-touch-area
=>$mdc-radio-ripple-size
&$mdc-radio-ui-size
=>$mdc-radio-icon-size
to be consistent with checkbox. Also, removed$mdc-radio-ui-pct
sass variable. - switch: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
- list: New adapter method listItemAtIndexHasClass
- list: Renamed mixin
mdc-list-item-shape-radius()
=>mdc-list-single-line-shape-radius()
- linear-progress: MDCLinearProgressAdapter adapter has new
forceLayout
method - text-field: Removed sass variable in notched outline -
$mdc-notched-outline-transition-duration
. - mdc-fab: This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
NEW
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
- radio: Ripple has been moved to a child element. See readme for updates.
- slider: remove adapter methods
appendTrackMarkers
,removeTrackMarkers
,setLastTrackMarkersStyleProperty
, and add adapter methodsetTrackMarkers
. - button: This changes the structure of the button element by moving the ripple from the outer element to an inner
mdc-button__ripple
element.
OLD
<button class="mdc-button">
<span class="mdc-button__label">Hello World</span>
</button>
NEW
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Hello World</span>
</button>
- chips: MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex
- density: Renamed sass mixins & variables in MDC Data Table -
mdc-data-table-header-row-height
=>mdc-data-table-header-cell-height
&mdc-data-table-row-height
=>mdc-data-table-cell-height
. Also removedmdc-button--dense
variant, use button's density mixin instead.