angular/material v1.2.0-rc.1

1.2.0-rc.1

on GitHub

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