Skip to content

Instantly share code, notes, and snippets.

@abhiomkar
Created February 26, 2020 15:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abhiomkar/945574c2591bf386bdfb207ac06ab3d3 to your computer and use it in GitHub Desktop.
Save abhiomkar/945574c2591bf386bdfb207ac06ab3d3 to your computer and use it in GitHub Desktop.

5.0.0 (2020-02-14)

  • fix(linear-progress) support aria attributes (#5248) (7084b40), closes #5248

Bug Fixes

  • 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)

Code Refactoring

Features

  • 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)

Reverts

  • 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)

BREAKING CHANGES

  • 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, use mdc-text-field-fill-color, mdc-text-field-outline-color, and mdc-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 and MDCChipSetAdapter have new methods. MDCChipSetFoundation event handlers now accept the corresponding chip event detail interface as the sole argument. The root property has been removed from the MDCChipRemovalEventDetail interface.

  • line-ripple: mdc-line-ripple-color() mixin has been renamed to mdc-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 into mdc-text-field-leading-icon-color() and mdc-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 59487319+material-web-copybara@users.noreply.github.com

  • 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 from mdc-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)

Bug Fixes

  • 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)

Code Refactoring

  • 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)

Features

  • 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)

Reverts

  • Revert "refactor(menu-surface): Allow any type during migration (#5201)" (#5212) (62d3a09), closes #5201 #5212

BREAKING CHANGES

  • 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. MDCSelectFoundation setValue 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 method setTrackMarkers.
  • 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 removed mdc-button--dense variant, use button's density mixin instead.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment