Material Versions Save

Material design for AngularJS

v1.2.5

2 years ago

One final release of AngularJS Material in order to update package README files on npm.

v1.2.4

2 years ago

Bug Fixes

  • panel, select: fix Trusted Types violations during initialization (#12128) (4e354a6)

Code Refactoring

  • sass: migrate from node-sass to sass (5e2d213)
    • If you consume our .scss files directly in your build, you will need to switch from the deprecated node-sass package to the sass package for compiling your Sass.
  • sass: fix division deprecation warnings (b5a1a02)

Documentation

  • fix API docs issues related to marked Markdown rendering (441a912)

Contributors

Thank you to the contributors who helped with the v1.2.4 release:

Splaktar bjarkler superheri
Splaktar bjarkler superheri

v1.2.3

2 years ago

Bug Fixes

  • datepicker: ISO 8601 dates decorated as invalid in forms (0a06f99), closes #12075

Features

  • menu: add a new backdropParent option (78b1073)

Contributors

Thank you to the contributors who helped with the v1.2.3 release:

Splaktar atfzls
Splaktar atfzls

v1.2.2

3 years ago

Highlights

This is a patch release that includes bug fixes and enhancements.

  • This is the final release of AngularJS Material prior to entering our Long Term Support (LTS) period.
  • This release includes many accessibility and localization improvements to components like autocomplete, checkbox, datepicker, dialog, and fab speed dial.
  • It fixes regressions with radio buttons in IE11 and with the datepicker modifying the model value (time) before a date is selected.
  • A few long-standing issues with the fab speed dial have been fixed, significantly improving the UX of the component.

Bug Fixes

  • aria: radio buttons throw argument not optional errors in IE11 (eab5c81)
  • autocomplete: prevent flashing of invalid state (#12064) (a4732a9), closes #10975
  • checkbox: aria-checked state is not computed correctly in all cases (c609385), closes #12046
  • datepicker: null model with timezone throws exception (7856883), closes #12025
  • datepicker: time is modified before even selecting a date (b406623), closes #12028 #12026
  • dialog: shift+tab does not cycle through tabbable elements (7d5e262), closes #10963
  • fab-speed-dial: action items are in tab order when closed (da86e62), closes #10101
  • fab-speed-dial: keyboard navigation issues with tab and shift+tab (41c71ed), closes #12043
  • fab-speed-dial: opens when trigger button is disabled (e7dfcc1), closes #9467
  • input: check that containerCtrl.label is defined before accessing it (f79186f), closes #10831
  • menu: menu focus is lost when menu-item has custom content (6391b13), closes #12054
  • select: floating label hidden w/ placeholder and no value (3ea5630), closes #10116
  • select: form remains valid after empty option is selected (61412b4), closes #10005
  • tabs: md-align-tabs should only affect the current component (d77fbc4), closes #10541
  • theming: fix CSS with nested rules parsing when registering a theme (71dc4eb), closes #9869

Features

  • autocomplete: allow localization of query result announcements (5157f94), closes #11789
  • chips: md-max-chips support for md-contact-chips (e6b5482), closes #10827
  • datepicker: add input-aria-describedby and input-aria-labelledby (5f8472c), closes #11762

Contributors

Thank you to the contributors who helped with the v1.2.2 release:

Splaktar FreedCapybara shishkinilya kylekatarnls natete
Splaktar FreedCapybara shishkinilya kylekatarnls natete

v1.2.1

3 years ago

Bug Fixes

  • calendar: allow tabbing out when in standalone mode (93518bb), closes #9794
  • calendar, datepicker: fix issues with GMT+X timezones (90d24cf), closes #12000
  • calendar, datepicker: fix MomentJS custom format support (8f9e213), closes #12003 #11949
  • datepicker: min-date validation is incorrect in GMT+X timezones (7395914), closes #11963
  • dialog: remove focus trap focus listeners onRemove (33e8bac), closes #12010
  • icon: providing empty alt or aria-label attributes do not hide them from a11y (37f1535), closes #10721
  • list: case where list items are read twice by screen readers (5c455d3), closes #11582
  • radio-button: Cannot read property 'nodeName' of null (f43ff63), closes #10546
  • radio-button: support selection using the space key (3cf78a7), closes #11960
  • select: respect theme color when select has focus (4afba57)
  • select: in popup, hover and focus background colors are the same (d5863b8), closes #000 #9851
  • select: md-select-header closes on mouse click when not using multiple (f2fca2e), closes #11969
  • typography: enable iOS long-press context menus (3d98b6e), closes #10622

Documentation

  • mdSticky: update and clarify the usage and behavior (0d431e0)
  • a11y: add a list of supported screen readers (8ce0813), closes #11449
  • home: simplify and clarify that browser support policy is for major versions (1babe8c)
  • icon: documentation refinement and cleanup (c644d6a)

Contributors

Thank you to the contributors who helped with the v1.2.1 release:

Splaktar mmalerba josephperrott cgx
Splaktar mmalerba josephperrott cgx

v1.1.26

3 years ago

Bug Fixes

Contributors

Thank you to the contributors who helped with the v1.1.26 release:

Splaktar mmalerba
Splaktar mmalerba

v1.1.25

3 years ago

Bug Fixes

  • calendar, datepicker: fix date selection issues with GMT+X timezones (a897a67), closes #12000
  • datepicker: min-date validation is incorrect in GMT+X timezones (dd150fa), closes #11963
  • select: md-select-header closes on mouse click when not using multiple (b32b473), closes #11969

Contributors

Thank you to the contributors who helped with the v1.1.25 release:

Splaktar jelbourn
Splaktar jelbourn

v1.2.0

3 years ago

Bug Fixes

  • autocomplete: change md-escape-options default to 'clear' (47106ba), closes #11767
  • button: horizontal padding should match the spec (3205b33), closes #10535 #10535
  • checkbox: handle links in transcluded label in an a11y-friendly way (4d36fd2), closes #11134
  • checkbox: update CSS to match spec (c893050), closes #9351 #9927 #8713
  • checkbox, date-picker, input, radio-button, select, switch: md-inline-form support (b3e9ffe)
  • chips: chip remove icon isn't sized to match the spec (#10491) (29c0a4a), closes #9619
  • chips: placeholder is truncated even though there is room (aa4e29b), closes #10630
  • chips: update to latest Material Design spec (2017) updates (01351b1), closes #9883
  • datepicker: support ng-model-options timezone w/ Moment (e24d09c), closes #11945 #10598
  • input-container: align indentation with spec (31a596f), closes #10105 #11421
  • list: fix checkbox alignment and match dense heights to spec (a13722e), closes #11966
  • nav-bar: throws exception when indexing null tabs variable (b1c7154), closes #11964
  • panel: demos need to access locals in controller's $onInit (6e91c62)
  • panel: don't throw exceptions when the groupName is a string (4178459)
  • radio-button: when no value selected, first button not announced on focus (9159384), closes #11973 #11923 #11974
  • select: support for md-inline-form, more configurable SCSS (0d4d37f), closes #8712 #8716
  • select: md-select-header closes on mouse click when not using multiple (f2fca2e), closes #11969
  • tabs: update min-width to follow the spec (693ecca), closes #10406 #11432
  • tabs: align theming with spec updates (d237715), closes #7685
  • theming: dark contrast used incorrectly when only contrastStrongLightColors defined (4e3f7a7)
  • theming: update palette contrast types to current spec (d716fde), closes #8992 #10164
  • theming, toolbar, subheader, input: align color palettes and contrasts with AA standards (3a291ac), closes #8992 #10164 #8993
  • toast: improve position handling to better align with docs (96ec741), closes #11843
  • toolbar: input placeholders and ink need more contrast (a82fc93), closes #7987 #11376
  • toolbar: default to 500 hue and contrasts when using accent/warn palettes (98a94db), closes #7685

Code Refactoring

  • autofocus: remove deprecated md-auto-focus attribute (bf0ec8c)
  • card: remove styles for md-actions class (75aa734)
  • chips: remove deprecated md-on-append attribute (1a2e3d0)
  • chips: remove deprecated MdChipsCtrl.selectAndFocusChip (01d2cde)
  • dialog: remove deprecated content options and methods (e3b52a0)
  • dialog: remove styles for deprecated md-actions class (93e2081)
  • layout: remove deprecated -lt- ("less than") attributes (e8e785e)
  • $mdCompilerProvider: remove deprecated $mdCompilerProvider.respectPreAssignBindingsEnabled() (579a327)
  • menu: removed deprecated $mdOpenMenu API (f023ce7)
  • panel: remove deprecated MdPanelRef.addClass/removeClass/toggleClass (bafbd96), closes #9310
  • select: rename ngMultiple to mdMultiple (4c75858)
  • sidenav: remove deprecated access to $media in md-is-locked-open (baa7563)
  • sidenav: remove md-sidenav-focus directive (8fc36d4)
  • theming: remove support for deprecated $mdThemingProviderTheme.primaryColor() and related APIs (00a50de)
  • tabs: remove deprecated md-no-disconnect (05bee8f)
  • toast: remove deprecated content() method and option and updateContent() method (cf3d56c)

Features

  • layout: add mixin for responsive support of rows (c2c336b), closes #9112 #9220
  • theming: add contrast opacity values for all color types and hues (68c1d02)

Documentation

  • theming, colors: md-colors demo was broken. improve JSDoc and fix lint issues (01917b3)

BREAKING CHANGES

  • autocomplete: The default behavior of md-autocomplete, when the options panel is visible and the Escape key is pressed, has changed. md-escape-options now defaults to 'clear' instead of 'blur clear'. This better aligns with the WAI-ARIA Authoring Practices as the focus is not sent to another element (like the <body>) when the Escape key is pressed.

If you want to restore the previous behavior, add the following to your md-autocomplete components:

md-escape-options="blur clear"
  • autofocus: Removed the deprecated md-auto-focus directive. It was deprecated in favor of md-autofocus. Please see the md-autofocus Docs for examples.
  • button: md-button's internal horizontal padding has changed from 6px to 8px to match the Material Design spec. This may affect the layout of portions of your application where md-button, md-datepicker, or md-toast with actions are used.

If you are using our SCSS files, you can override this back to the default, or another value, in your app's SCSS files:

$button-left-right-padding: rem(0.600); // For 6px horizontal padding
  • card: Removed support for the class="md-actions" inside of an md-card template. This is deprecated in favor of using the <md-card-actions> element.
  • checkbox: If you've created a custom solution to style links within md-checkbox labels, then you may need to remove or change that code now. This is because we automatically detect <a> tags in these labels and re-render them in an accessible way.
  • checkbox: The default size and spacing for md-checkbox has been updated to align with the Material Design specification. Additionally, many new Sass variables have been added for customizing the size and spacing of md-checkbox. The md-dense class is now supported. After updating to this version, you may need to adjust the layout of your app due to the larger touch-friendly size of checkbox. You may also want to make use of md-dense in cases where space is limited.
  • chips: Chips have been updated to latest Material Design spec (2017). $chip-font-size was reduced to 13px from 16px. $chip-remove-padding-right was increased to 28px from 22px. These changes may cause your chips to have a smaller, denser layout now. In certain scenarios, this may require minor changes to your app's layout. You can change these variables back to their old values if your app consumes Sass. Additionally, the remove chip icon has been changed, but you can use the custom chip template demo as a guide to changing back to the old icon, if desired.
  • chips: Removed the deprecated, since 2015, md-on-append attribute. It was deprecated in favor of md-transform-chip or the simple notifier md-on-add. Please see the md-chips Demos for examples of using md-transform-chip.
  • chips: The deprecated MdChipsCtrl.selectAndFocusChip() function has been removed. MdChipsCtrl.selectAndFocusChipSafe() should be used instead.
  • dialog: Removed support for the deprecated class="md-actions" inside of an md-dialog template. This was deprecated in favor of using the <md-dialog-actions> element.
  • dialog: Removed support for the deprecated .content('string') methods and options. These were deprecated in favor of .textContent('string') and .htmlContent('sanitized-string')' methods and their associated options. Please note that use of .htmlContent requires that the ngSanitize module be loaded.

If you have

  alert = $mdDialog.alert()
    .content('This is an example.');

It needs to be changed to

  alert = $mdDialog.alert()
    .textContent('This is an example.');

If you have

  alert = $mdDialog.alert({
    content: 'This is an example.'
  });

It needs to be changed to

  alert = $mdDialog.alert({
    textContent: 'This is an example.'
  });

  • input-container: md-input and md-select inside of md-input-containers have been updated to use indentation that is consistent with the spec (aligned to the left in LTR and the right in RTL). This may cause some minor layout issues in apps that depended upon the previous 2px padding inside of md-input-container.

  • layout: The way that margins are applied to md-checkbox, md-input-container, md-radio-group, and md-select has been changed. You can now use the $default-horizontal-margin Sass variable to override the default 16px horizontal margin size. As part of this, md-radio-buttons inside of layout="row" containers are now aligned vertically with other content as they no longer have a 16px margin-bottom. If you have previously added custom styles, to your components inside of a row layout, in order to give them extra margin-right in LTR or margin-left in RTL, you will need to re-evaluate those styles. In most cases, they can now be removed.

  • layout: Removed the deprecated, undocumented *-lt-* layout attributes and classes. This includes the following attributes and their matching classes, which have been giving deprecation warnings since 2015:

    • layout-lt-md
    • layout-lt-lg
    • flex-lt-md
    • flex-lt-lg
    • layout-align-lt-md
    • layout-align-lt-lg
    • flex-order-lt-md
    • flex-order-lt-lg
    • flex-offset-lt-md
    • flex-offset-lt-lg
    • hide-lt-md
    • hide-lt-lg
    • show-lt-md
    • show-lt-lg

  • list: md-list with the md-dense class has been updated to align with the Material Design specification. This means that md-list-items heights have changed when using md-dense. The md-dense-disabled class is now supported on md-list. After updating to this version, you may need to adjust the layout of your app if you use md-dense with md-list or customize the layout of md-checkboxs within md-list-items.

  • $mdCompilerProvider: The deprecated $mdCompilerProvider.respectPreAssignBindingsEnabled() API has been removed. We no longer respect AngularJS's $compileProvider.preAssignBindingsEnabled() value as this API was removed in AngularJS 1.7.0.

If you had the recommended configuration for AngularJS 1.6.x:

  $compileProvider.preAssignBindingsEnabled(false);
  $mdCompilerProvider.respectPreAssignBindingsEnabled(true);

Then you should remove both of these calls as they are now the defaults in AngularJS 1.7.0 and AngularJS Material 1.2.0.

If you had the recommended configuration for AngularJS 1.7+:

  $mdCompilerProvider.respectPreAssignBindingsEnabled(true);

Then you should remove this call as it is now the default in AngularJS Material 1.2.0.

If you were using a backwards-compatible configuration for AngularJS 1.6+:

  $mdCompilerProvider.respectPreAssignBindingsEnabled(false);

Then you will need to remove this call and may need to refactor your Controllers for AngularJS Material components like $mdDialog, $mdPanel, $mdToast, or $mdBottomSheet.

For example:

 $mdDialog.show({
   locals: {
     myVar: true
   },
   controller: MyController,
   bindToController: true
 }
  function MyController() {
   // No locals from Angular Material are available. e.g myVar is undefined.
   // You would need to move anything accessing locals in here to $onInit().
 }
  MyController.prototype.$onInit = function() {
   // Bindings are now available in the $onInit lifecycle hook.
 }
  • menu: Removed the deprecated $mdOpenMenu API. It was deprecated in favor of $mdMenu.open.
  • panel: The deprecated MdPanelRef.addClass(), MdPanelRef.removeClass(), and MdPanelRef.toggleClass() functions have been removed. These were deprecated in 2016 in favor of using the panelContainer or panelEl JQLite elements that are referenced in the MdPanelRef object.
  • select: ngMultiple has been renamed to mdMultiple to make it clear that this API is provided by AngularJS Material and not by AngularJS.

If you had:

  <md-select ng-multiple="expression">...</md-select>

You need to change to:

  <md-select md-multiple="expression">...</md-select>
  • sidenav: Removed access for the deprecated $media service in md-is-locked-open. This was deprecated in favor of the $mdMedia service. The functionality is the same and only a rename to the current name of the service is required.
  • sidenav: Removed the md-sidenav-focus directive. It was deprecated in favor of md-autofocus. Please see the md-autofocus Docs and md-sidenav Basic Usage Demo for examples.
  • tabs: Tab items now have a min-width and padding which matches the Material Design specification. For width, this is 72px on xs screens and 160px on all other screens. For left and right padding, this is now 12px instead of 24px. If your app needs to have tabs which are smaller than the spec, you will need to override md-tab-item's min-width and md-tab's padding styles.
  • theming: Removed support for the deprecated $mdThemingProviderTheme.primaryColor() and the related accent/warn/background APIs. These were deprecated in favor of $mdThemingProviderTheme.primaryPalette() (and accent/warn/background) in 2015 and they have been logging warnings when used since then.
  • theming, toolbar, subheader, input: The contrast colors (the text or icon color, for example on a raised button) of many of our default palettes have been updated to meet the AA level of the contrast guidelines for web accessibility. If you are using our default palettes directly, the accessibility of your application should be improved. However, we recommend that you evaluate this after updating to 1.2.0. There may be edge cases in your app or custom styles that need to be updated to meet accessibility guidelines.

If you find significant accessibility issues after updating, please report them to us. In 1.2.x, we have a lot more control over our component theming in regards to hues and opacities.

If your app is using a custom palette, whether based on a copy of default palette or not, we encourage you to evaluate that your contrast configuration meets the WebAIM guidelines. Please review our guide on Defining Custom Palettes for details.

  • toast: $mdToast.show()'s position behavior has been updated to be consistent with the documentation. If you relied on the previously undocumented behavior where it defaulted to top left instead of bottom left, you will need to update your app.

Change your code from this:

    $mdToast.show(
      $mdToast.simple()
      .textContent('Simple Toast!'))
    .then(...

To this:

    $mdToast.show(
      $mdToast.simple()
      .textContent('Simple Toast!')
      .position('top left'))
    .then(...
  • toast: The deprecated content() and updateContent() methods have been removed.

If you had:

  $mdToast.show($mdToast.simple().content('This no longer works.'));

You will need to change to:

  $mdToast.show($mdToast.simple().textContent('This works.'));

If you had:

  $mdToast.updateContent('This no longer works.');

You will need to change to:

  $mdToast.updateTextContent('This works.');

If you had:

  $mdToast.show($mdToast.simple({parent: parent, content: 'This no longer works.', theme: 'some-theme', capsule: true}));

You will need to change to:

  $mdToast.show($mdToast.simple({parent: parent, textContent: 'This works.', theme: 'some-theme', capsule: true}));

Contributors

Thank you to the contributors who helped with the v1.2.0 release:

Splaktar jelbourn clshortfuse oliversalzburg batsauto wagnermaciel
Splaktar jelbourn clshortfuse oliversalzburg batsauto wagnermaciel
tomaszgrabowski
tomaszgrabowski

v1.2.0-rc.2

3 years ago

Bug Fixes

  • checkbox, date-picker, input, radio-button, select, switch: md-inline-form support (b3e9ffe)
  • select: support for md-inline-form, more configurable SCSS (0d4d37f), closes #8712 #8716

Code Refactoring

  • autofocus: remove deprecated md-auto-focus attribute (bf0ec8c)
  • card: remove styles for md-actions class (75aa734)
  • chips: remove deprecated md-on-append attribute (1a2e3d0)
  • dialog: remove deprecated content options and methods (e3b52a0)
  • dialog: remove styles for deprecated md-actions class (93e2081)
  • layout: remove deprecated -lt- ("less than") attributes (e8e785e)
  • menu: removed deprecated $mdOpenMenu API (f023ce7)
  • panel: remove deprecated MdPanelRef.addClass/removeClass/toggleClass (bafbd96), closes #9310
  • sidenav: remove deprecated access to $media in md-is-locked-open (baa7563)
  • sidenav: remove md-sidenav-focus directive (8fc36d4)
  • theming: remove support for deprecated $mdThemingProviderTheme.primaryColor() and related APIs (00a50de)
  • tabs: remove deprecated md-no-disconnect (05bee8f)

Features

BREAKING CHANGES

  • layouts: The way that margins are applied to md-checkbox, md-input-container, md-radio-group, and md-select has been changed. You can now use the $default-horizontal-margin Sass variable to override the default 16px horizontal margin size. As part of this, md-radio-buttons inside of layout="row" containers are now aligned vertically with other content as they no longer have a 16px margin-bottom. If you have previously added custom styles, to your components inside of a row layout, in order to give them extra margin-right in LTR or margin-left in RTL, you will need to re-evaluate those styles. In most cases, they can now be removed.
  • sidenav: Removed access for the deprecated $media service in md-is-locked-open. This was deprecated in favor of the $mdMedia service. The functionality is the same and only a rename to the current name of the service is required.
  • dialog: Removed support for the deprecated .content('string') methods and options. These were deprecated in favor of .textContent('string') and .htmlContent('sanitized-string')' methods and their associated options. Please note that use of .htmlContent requires that the ngSanitize module be loaded.

If you have

  alert = $mdDialog.alert()
    .content('This is an example.');

It needs to be changed to

  alert = $mdDialog.alert()
    .textContent('This is an example.');

If you have

  alert = $mdDialog.alert({
    content: 'This is an example.'
  });

It needs to be changed to

  alert = $mdDialog.alert({
    textContent: 'This is an example.'
  });
  • theming: Removed support for the deprecated $mdThemingProviderTheme.primaryColor() and the related accent/warn/background APIs. These were deprecated in favor of $mdThemingProviderTheme.primaryPalette() (and accent/warn/background) in 2015 and they have been logging warnings when used since then.
  • layout: Removed the deprecated, undocumented *-lt-* layout attributes and classes. This includes the following attributes and their matching classes, which have been giving deprecation warnings since 2015:
  • layout-lt-md
  • layout-lt-lg
  • flex-lt-md
  • flex-lt-lg
  • layout-align-lt-md
  • layout-align-lt-lg
  • flex-order-lt-md
  • flex-order-lt-lg
  • flex-offset-lt-md
  • flex-offset-lt-lg
  • hide-lt-md
  • hide-lt-lg
  • show-lt-md
  • show-lt-lg
  • autofocus: Removed the deprecated md-auto-focus directive. It was deprecated in favor of md-autofocus. Please see the md-autofocus Docs for examples.
  • sidenav: Removed the md-sidenav-focus directive. It was deprecated in favor of md-autofocus. Please see the md-autofocus Docs and md-sidenav Basic Usage Demo for examples.
  • menu: Removed the deprecated $mdOpenMenu API. It was deprecated in favor of $mdMenu.open.
  • chips: Removed the deprecated, since 2015, md-on-append attribute. It was deprecated in favor of md-transform-chip or the simple notifier md-on-add. Please see the md-chips Demos for examples of using md-transform-chip.
  • card: Removed support for the class="md-actions" inside of an md-card template. This is deprecated in favor of using the <md-card-actions> element.
  • dialog: Removed support for the deprecated class="md-actions" inside of an md-dialog template. This was deprecated in favor of using the <md-dialog-actions> element.
  • panel: The deprecated MdPanelRef.addClass(), MdPanelRef.removeClass(), and MdPanelRef.toggleClass() functions have been removed. These were deprecated in 2016 in favor of using the panelContainer or panelEl JQLite elements that are referenced in the MdPanelRef object.

Contributors

Thank you to the contributors who helped with the v1.2.0-rc.2 release:

Splaktar clshortfuse wagnermaciel
Splaktar clshortfuse wagnermaciel

v1.2.0-rc.1

3 years ago

Bug Fixes

  • button: horizontal padding should match the spec (3205b33), closes #10535 #10535
  • checkbox: handle links in transcluded label in an a11y-friendly way (4d36fd2), closes #11134
  • checkbox: update CSS to match spec (c893050), closes #9351 #9927 #8713
  • chips: chip remove icon isn't sized to match the spec (#10491) (29c0a4a), closes #9619
  • datepicker: support ng-model-options timezone w/ Moment (e24d09c), closes #11945 #10598
  • input-container: align indentation with spec (31a596f), closes #10105 #11421
  • list: fix checkbox alignment and match dense heights to spec (a13722e), closes #11966
  • nav-bar: throws exception when indexing null tabs variable (b1c7154), closes #11964
  • panel: demos need to access locals in controller's $onInit (6e91c62)
  • panel: don't throw exceptions when the groupName is a string (4178459)
  • select: md-select-header closes on mouse click when not using multiple (f2fca2e), closes #11969
  • tabs: update min-width to follow the spec (693ecca), closes #10406 #11432
  • theming: dark contrast used incorrectly when only contrastStrongLightColors defined (4e3f7a7)
  • theming: update palette contrast types to current spec (d716fde), closes #8992 #10164
  • theming, toolbar, subheader, input: align color palettes and contrasts with AA standards (3a291ac), closes #8992 #10164 #8993
  • toast: improve position handling to better align with docs (96ec741), closes #11843
  • toolbar: input placeholders and ink need more contrast (a82fc93), closes #7987 #11376

Code Refactoring

  • $mdCompilerProvider: remove deprecated $mdCompilerProvider.respectPreAssignBindingsEnabled() (579a327)
  • chips: remove deprecated MdChipsCtrl.selectAndFocusChip (01d2cde)
  • select: rename ngMultiple to mdMultiple (4c75858)
  • toast: remove deprecated content() method and option and updateContent() method (cf3d56c)

Features

  • theming: add contrast opacity values for all color types and hues (68c1d02)

Documentation

  • theming, colors: md-colors demo was broken. improve JSDoc and fix lint issues (01917b3)

BREAKING CHANGES

  • list: md-list with the md-dense class has been updated to align with the Material Design specification. This means that md-list-items heights have changed when using md-dense. The md-dense-disabled class is now supported on md-list. After updating to this version, you may need to adjust the layout of your app if you use md-dense with md-list or customize the layout of md-checkboxs within md-list-items.
  • button: md-button's internal horizontal padding has changed from 6px to 8px to match the Material Design spec. This may affect the layout of portions of your application where md-button, md-datepicker, or md-toast with actions are used.

If you are using our SCSS files, you can override this back to the default, or another value, in your app's SCSS files:

$button-left-right-padding: rem(0.600); // For 6px horizontal padding
  • $mdCompilerProvider: The deprecated $mdCompilerProvider.respectPreAssignBindingsEnabled() API has been removed. We no longer respect AngularJS's $compileProvider.preAssignBindingsEnabled() value as this API was removed in AngularJS 1.7.0.

If you had the recommended configuration for AngularJS 1.6.x:

  $compileProvider.preAssignBindingsEnabled(false);
  $mdCompilerProvider.respectPreAssignBindingsEnabled(true);

Then you should remove both of these calls as they are now the defaults in AngularJS 1.7.0 and AngularJS Material 1.2.0.

If you had the recommended configuration for AngularJS 1.7+:

  $mdCompilerProvider.respectPreAssignBindingsEnabled(true);

Then you should remove this call as it is now the default in AngularJS Material 1.2.0.

If you were using a backwards-compatible configuration for AngularJS 1.6+:

  $mdCompilerProvider.respectPreAssignBindingsEnabled(false);

Then you will need to remove this call and may need to refactor your Controllers for AngularJS Material components like $mdDialog, $mdPanel, $mdToast, or $mdBottomSheet.

For example:

 $mdDialog.show({
   locals: {
     myVar: true
   },
   controller: MyController,
   bindToController: true
 }
  function MyController() {
   // No locals from Angular Material are available. e.g myVar is undefined.
   // You would need to move anything accessing locals in here to $onInit().
 }
  MyController.prototype.$onInit = function() {
   // Bindings are now available in the $onInit lifecycle hook.
 }
  • toast: The deprecated content() and updateContent() methods have been removed.

If you had:

  $mdToast.show($mdToast.simple().content('This no longer works.'));

You will need to change to:

  $mdToast.show($mdToast.simple().textContent('This works.'));

If you had:

  $mdToast.updateContent('This no longer works.');

You will need to change to:

  $mdToast.updateTextContent('This works.');

If you had:

  $mdToast.show($mdToast.simple({parent: parent, content: 'This no longer works.', theme: 'some-theme', capsule: true}));

You will need to change to:

  $mdToast.show($mdToast.simple({parent: parent, textContent: 'This works.', theme: 'some-theme', capsule: true}));
  • select: ngMultiple has been renamed to mdMultiple to make it clear that this API is provided by AngularJS Material and not by AngularJS.

If you had:

  <md-select ng-multiple="expression">...</md-select>

You need to change to:

  <md-select md-multiple="expression">...</md-select>
  • chips: The deprecated MdChipsCtrl.selectAndFocusChip() function has been removed. MdChipsCtrl.selectAndFocusChipSafe() should be used instead.
  • theming, toolbar, subheader, input: The contrast colors (the text or icon color, for example on a raised button) of many of our default palettes have been updated to meet the AA level of the contrast guidelines for web accessibility. If you are using our default palettes directly, the accessibility of your application should be improved. However, we recommend that you evaluate this after updating to 1.2.0. There may be edge cases in your app or custom styles that need to be updated to meet accessibility guidelines.

If you find significant accessibility issues after updating, please report them to us. In 1.2.x, we have a lot more control over our component theming in regards to hues and opacities.

If your app is using a custom palette, whether based on a copy of default palette or not, we encourage you to evaluate that your contrast configuration meets the WebAIM guidelines. Please review our guide on Defining Custom Palettes for details.

  • tabs: Tab items now have a min-width and padding which matches the Material Design specification. For width, this is 72px on xs screens and 160px on all other screens. For left and right padding, this is now 12px instead of 24px. If your app needs to have tabs which are smaller than the spec, you will need to override md-tab-item's min-width and md-tab's padding styles.
  • checkbox: If you've created a custom solution to style links within md-checkbox labels, then you may need to remove or change that code now. This is because we automatically detect <a> tags in these labels and re-render them in an accessible way.
  • input-container: md-input and md-select inside of md-input-containers have been updated to use indentation that is consistent with the spec (aligned to the left in LTR and the right in RTL). This may cause some minor layout issues in apps that depended upon the previous 2px padding inside of md-input-container.
  • The default size and spacing for md-checkbox has been updated to align with the Material Design specification. Additionally, many new Sass variables have been added for customizing the size and spacing of md-checkbox. The md-dense class is now supported. After updating to this version, you may need to adjust the layout of your app due to the larger touch-friendly size of checkbox. You may also want to make use of md-dense in cases where space is limited.
  • toast: $mdToast.show()'s position behavior has been updated to be consistent with the documentation. If you relied on the previously undocumented behavior where it defaulted to top left instead of bottom left, you will need to update your app.

Change your code from this:

    $mdToast.show(
      $mdToast.simple()
      .textContent('Simple Toast!'))
    .then(...

To this:

    $mdToast.show(
      $mdToast.simple()
      .textContent('Simple Toast!')
      .position('top left'))
    .then(...

Contributors

Thank you to the contributors who helped with the v1.2.0-rc.1 release:

Splaktar jelbourn clshortfuse oliversalzburg batsauto tomaszgrabowski
Splaktar jelbourn clshortfuse oliversalzburg batsauto tomaszgrabowski