Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

1.2.0
Compare
Choose a tag to compare
@Splaktar Splaktar released this 03 Aug 20:40
· 85 commits to master since this release
v1.2.0
c3fa861

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
Assets 2