Update to the latest version of MDC #1070
Comments
adrianschmidt
added
feature
|
Do we still require the fork we have? |
Oh, yeah, good that you brought that up. I was going to but forgot. It seems we still do, but it seems they are at least planning on moving from pixels to It may be worthwhile to read through what's been said there, and see if we could perhaps contribute to that work. It would certainly be a great relief to no longer be dependant on keeping our own fork. |
|
@eketorp you wanted to know what we get upgrading. There is a change log in the issue :) |
|
It should be said that the changelog in the issue only covers the new versions up to 8.0.0, while the latest version of MDC is 11.0.0, so there's even more to be gained by now. MDC's changelog is found here: https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md |
|
🎉 This issue has been resolved in version 33.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
New feature motivation
We are using MDC v4.0.0, released 2 November 2019, while the latest available version is v8.0.0 released 2 November 2020. We want to update the package to take advantage of all the new stuff in the newer versions, obviously, but keeping up to date is also important to make sure that the components keep working in new browsers, make use of new advances in usability and accessibility, etc etc. And the more we tweak the components while using v4, the more work it will be to upgrade.
In other words, the longer we wait to upgrade, the more work it will be.
New feature description
For a quick idea of the amount of fixes and improvements, here is the relevant part of the changelog:
Click to expand changelog
8.0.0 (2020-11-02)
Bug Fixes
[@use](https://github.com/use)(098ae32)data-mdc-dialog-initial-focusdoesn't work (a0ec7e2)width: 100%to account for margin around slider track. (16c563e)Code Refactoring
Documentation
Features
indeterminatecheckbox (b273afa)aria-valuetexton slider thumbs. (fd608ff)Reverts
BREAKING CHANGES
typography.baseline-top()andtypography.baseline-bottom()are now private. Usetypography.baseline()for containers andtypography.text-baseline()for text with $top and $bottom params.mdc-select__selected-text-containerspan; see README for updated markupripple()=>ripple-styles()in MDC checkboxripple()=>ripple-styles()in MDC checkboxripple()=>ripple-styles()in MDC checkbox@material/theme/csshover-label-color()) are combined into the non-stateful mixin (e.g.label-color()). The default state of the mixin can be set as normal, or a Map of states can be provided to optionally set one or more states of the mixin (e.g.label-color((hover: blue))). See the@material/theme/statepackage for more details.getAttradded on helper text subcomponent; adapter methodsetInputAttrandremoveInputAttradded on main component$default-size,$stroke-width, and$container-side-lengthvariables removed.mdc-snackbar--stackedvariant will now have an additional 8pxgetTableBodyHeight()=>getTableHeaderHeight()and changed return types of this method.$input-padding,$input-padding-top,$input-padding-bottom,$outlined-input-padding-top,$outlined-input-padding-bottom,$input-border-bottomgetBuffer,getPrimaryBar,setStyleremoved. MDCLinearProgressAdapter methodsetBufferBarStyle,setPrimaryBarStyleadded.getBuffer,getPrimaryBar,setStyleremoved. MDCLinearProgressAdapter methodsetBufferBarStyle,setPrimaryBarStyleadded.7.0.0 (2020-06-23)
Bug Fixes
[@use](https://github.com/use)(098ae32)transform:none(9ea5207)Code Refactoring
Features
indeterminatecheckbox (b273afa)BREAKING CHANGES
getBuffer,getPrimaryBar,setStyleremoved. MDCLinearProgressAdapter methodsetBufferBarStyle,setPrimaryBarStyleadded.getBuffer,getPrimaryBar,setStyleremoved. MDCLinearProgressAdapter methodsetBufferBarStyle,setPrimaryBarStyleadded.addMenuClass,removeMenuClassisTypeaheadInProgress,typeaheadMatchItem$dropdown-colorrenamed to$dropdown-icon-color,$dropdown-opacityremoved,$disabled-dropdown-opacityremoved.isSelectedTextFocused,getSelectedTextAttr,setSelectedTextAttr; ADDED adapter methodsisSelectAnchorFocused,getSelectAnchorAttr,setSelectAnchorAttr; removed variablesoutlined-dense-label-position-y,icon-padding; added variablesminimum-height-for-filled-label,filled-baseline-top,selected-text-height,anchor-padding-left,anchor-padding-left-with-leading-icon,anchor-padding-right.densitymixin split intofilled-density,filled-with-leading-icon-density;heightmixin split intofilled-height,filled-with-leading-icon-heightmdc-menu--fullwidthclass replaces custom width class for the menu markup in selectremoveSelectAnchorAttrmdc-select__dropdown-icon-graphicclass.mdc-list-item__textspans removed in select markupmdc-select-helper-text--persistentremovedmdc-select--filledclass on its rootdemo-width-class) on the root instead of the anchor for width adjustments; alternately, use the newmdc-select--fullwidthon the root to expand width to that of its parent container$outline-disabled-borderrenamed to$disabled-outline-color; icon variable$icon-opacityremoved, use alpha channel of$icon-colorinstead.$input-padding,$input-padding-top,$input-padding-bottom,$outlined-input-padding-top,$outlined-input-padding-bottom,$input-border-bottommdc-text-field__resizerspan around the textarea (and internal counter if present) if they are resizablemdc-text-field--with-internal-counterclass. Character counters should move after the textarea element.color-hash()(and checkbox container-colors mixins) no longer works withvar()values and now only works with custom property Maps created bycustom-properties.create()typography.baseline-top()andtypography.baseline-bottom()are now private. Usetypography.baseline()for containers andtypography.text-baseline()for text with $top and $bottom params.6.0.0 (2020-04-22)
Bug Fixes
[@use](https://github.com/use)(098ae32)Code Refactoring
Features
indeterminatecheckbox (b273afa)Reverts
BREAKING CHANGES
select: HTML Markup significantly changed, see README; REMOVED adapter methods
isSelectedTextFocused,getSelectedTextAttr,setSelectedTextAttr; ADDED adapter methodsisSelectAnchorFocused,getSelectAnchorAttr,setSelectAnchorAttr; removed variablesoutlined-dense-label-position-y,icon-padding; added variablesminimum-height-for-filled-label,filled-baseline-top,selected-text-height,anchor-padding-left,anchor-padding-left-with-leading-icon,anchor-padding-right.text-field: Redundant mixins
mdc-text-field-textarea-fill-color,mdc-text-field-textarea-stroke-color,mdc-text-field-fullwidth-bottom-line-colorremoved. Instead, usemdc-text-field-fill-color,mdc-text-field-outline-color, andmdc-text-field-bottom-line-colorrespectively to achieve the same effect.textfield: mdc-text-field--dense and associated mixins/variables have been removed. Use the density() mixin instead.
textfield: removed the following variables:
$input-padding,$input-padding-top,$input-padding-bottom,$outlined-input-padding-top,$outlined-input-padding-bottom,$input-border-bottomlinear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method
getBuffer,getPrimaryBar,setStyleremoved. MDCLinearProgressAdapter methodsetBufferBarStyle,setPrimaryBarStyleadded.linear-progress: DOM for linear progress buffer changed. MDCLinearProgressAdapter method
getBuffer,getPrimaryBar,setStyleremoved. MDCLinearProgressAdapter methodsetBufferBarStyle,setPrimaryBarStyleadded.typography:
typography.baseline-top()andtypography.baseline-bottom()are now private. Usetypography.baseline()for containers andtypography.text-baseline()for text with $top and $bottom params.chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.
textfield: filled text fields must include a
<div class="mdc-text-field__ripple"></div>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: 40pxchips: Both
MDCChipAdapterandMDCChipSetAdapterhave new methods.MDCChipSetFoundationevent handlers now accept the corresponding chip event detail interface as the sole argument. Therootproperty has been removed from theMDCChipRemovalEventDetailinterface.line-ripple:
mdc-line-ripple-color()mixin has been renamed tomdc-line-ripple-active-color()textfield: Default textfields must now specify mdc-text-field--filled. Disabled outlined textfields no longer have a shaded background. Height mixin no longer specifies a baseline override, use typography's baseline-top mixin.
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--leadingor.mdc-text-field__icon--trailingclasses.mdc-text-field-icon-color()mixin has been split intomdc-text-field-leading-icon-color()andmdc-text-field-trailing-icon-color().switch: Added setNativeControlAttr method in mdc-switch adapter.
checkbox: remove event listener for 'change' and add event listener for 'click'.
$mdc-button-disabled-container-fill-colorrenamed to
$mdc-button-disabled-container-color.$edgeOptOutoption frommdc-theme-prop()Sass mixin.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.
New feature implementation
We need to update the package, and then go through our different components, find the things that don't work or look to bad to be acceptable, and fix those issues 🙂
The text was updated successfully, but these errors were encountered: