Merge remote-tracking branch 'origin/feat/typescript' into feat/types…

…cript--select
material-components · Feb 11, 2019 · f6de964 · f6de964
2 parents 7b625f6 + 9526da2
commit f6de964
Show file tree

Hide file tree

Showing 23 changed files with 260 additions and 165 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,8 +36,8 @@
 
 * **text-field:** Helper text must now be nested within `mdc-text-field-helper-line` element. Wrappers must account for the new `character-counter` sub-component. See the Text Field documentation for examples and more information.
 * **menu:** Replaced menu's foundation methods `handleClick` and `handleSelection` with `handleItemAction` to handle list item action (i.e., list's custom event `MDCList:action`)
-* **list:** Introduced new adapter method `getAttributeForElementIndex` to determine if target list item has `href` attribute and removed `followHref` adapter API.
-* **chips:** Adds 3 new chips adapter methods: hasLeadingIcon, getRootBoundingClientRect, and getCheckmarkBoundingClientRect. Also adds a new foundation method: getDimensions.
+* **list:** Removed adapter method `followHref` and used native anchor element behaviour to follow href on <kbd>Enter</kbd> & click. Components that use MDC List should use its new custom event.
+* **chips:** Adds 3 new chips adapter methods: `hasLeadingIcon`, `getRootBoundingClientRect`, and `getCheckmarkBoundingClientRect`. Also adds a new foundation method: `getDimensions`.
 
 
 
@@ -76,8 +76,8 @@
 
 * **list:** Introduced new adapter `isFocusInsideList` for MDC List for improved accessibility.
 * **snackbar:** Snackbar's DOM and APIs have changed to match the latest design guidelines. See the Snackbar documentation for more information.
-* **button:** We recommend placing each button's text label within a mdc-button__label element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.
-* **tab:** MDCTabBar#getIndexOfTab(tab: MDCTab): boolean is now MDCTabBar#getIndexOfTabByID(id: string): boolean
+* **button:** We recommend placing each button's text label within a `mdc-button__label` element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.
+* **tab:** `MDCTabBar#getIndexOfTab(tab: MDCTab): number` is now `MDCTabBar#getIndexOfTabById(id: string): number`
 
 
 
@@ -134,8 +134,8 @@
 ### BREAKING CHANGES
 
 * **notched-outline:** The notched outline has been changed from using an SVG for the outline to using 3 div elements. This approach resolves initial rendering issues as well as inconsistencies between the different types of outlines. Please refer to the [Readme](./packages/mdc-notched-outline/README.md) or the [screenshot test pages](./test/screenshot/spec/mdc-textfield/classes) for details and examples.
-* **checkbox:** The component is now responsible for calling MDCCheckboxFoundation#handleChange when the checked and indeterminate properties change.
-* **list:** Replaced toggleCheckbox adapter method with setCheckedCheckboxOrRadioAtIndex and added 3 more new adapter methods for improved accessibility.
+* **checkbox:** The component is now responsible for calling `MDCCheckboxFoundation#handleChange` when the checked and indeterminate properties change.
+* **list:** Replaced toggleCheckbox adapter method with `setCheckedCheckboxOrRadioAtIndex` and added 3 more new adapter methods for improved accessibility.
 * **fab:** Fab now has 2 separate mixins - `mdc-fab-shape-radius` for regular / mini Fab variants & `mdc-fab-extended-shape-radius` for Extended FAB variant.
 
 

diff --git a/docs/framework-wrappers.md b/docs/framework-wrappers.md
@@ -6,7 +6,7 @@ Material Components for the web are architected to be adaptable to various major
   - [Material Web Components](https://github.com/material-components/material-components-web-components): MDC Web integration for Web Components (using [vanilla components](./integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components))
   - Additional third-party integrations
     - [Preact Material Components](https://github.com/prateekbh/preact-material-components)
-    - [RMWC: React Material Web Components](https://github.com/jamesmfriedman/rmwc)
+    - [RMWC: React Material Web Components](https://github.com/jamesmfriedman/rmwc) (using [foundations/adapters](./integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)
     - [Angular MDC](https://github.com/trimox/angular-mdc-web)
     - [Blox Material](https://blox.src.zone/material): Angular Integration Library.
     - [Vue MDC Adapter](https://github.com/stasson/vue-mdc-adapter): MDC Web Integration for Vue.js (using [foundations/adapters](./integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)

diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -171,16 +171,18 @@
 }
 
 @mixin mdc-button-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius), $rtl-reflexive);
-  }
+  @include mdc-shape-radius(
+    mdc-shape-resolve-percentage-radius($mdc-button-height, $radius),
+    $rtl-reflexive,
+    $query: $query
+  );
 
   &.mdc-button--dense {
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius), $rtl-reflexive);
-    }
+    @include mdc-shape-radius(
+      mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius),
+      $rtl-reflexive,
+      $query: $query
+    );
   }
 }
 

diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss
@@ -291,11 +291,7 @@
 }
 
 @mixin mdc-card-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius($radius, $rtl-reflexive);
-  }
+  @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
 }
 
 @mixin mdc-card-media-aspect-ratio($x, $y, $query: mdc-feature-all()) {

diff --git a/packages/mdc-card/package.json b/packages/mdc-card/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material/elevation": "^0.44.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/ripple": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/shape": "^0.43.0",

diff --git a/packages/mdc-checkbox/package.json b/packages/mdc-checkbox/package.json
@@ -17,6 +17,7 @@
     "@material/animation": "^0.41.0",
     "@material/base": "^0.41.0",
     "@material/dom": "^0.41.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/ripple": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/selection-control": "^0.44.0",

diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
@@ -22,6 +22,7 @@
 
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
 @import "@material/shape/mixins";
@@ -174,7 +175,10 @@
   $left: $mdc-chip-leading-icon-margin-left) {
   &.mdc-chip--selected .mdc-chip__checkmark,
   .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
-    margin: $top $right $bottom $left;
+    @include mdc-rtl-reflexive-property(margin, $left, $right);
+
+    margin-top: $top;
+    margin-bottom: $bottom;
   }
 }
 

diff --git a/packages/mdc-elevation/package.json b/packages/mdc-elevation/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material/animation": "^0.41.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/theme": "^0.43.0"
   }
 }
diff --git a/packages/mdc-list/_mixins.scss b/packages/mdc-list/_mixins.scss
@@ -25,6 +25,8 @@
 @import "@material/theme/functions";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "./variables";
 
 //
@@ -275,8 +277,7 @@
   .mdc-list-group__subheader {
     $mdc-list-subheader-virtual-height: 3rem;
     $mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body1), line-height);
-    $mdc-list-subheader-margin:
-      ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
+    $mdc-list-subheader-margin: ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
 
     @include mdc-typography(subtitle1, $query);
 
@@ -335,12 +336,8 @@
 }
 
 @mixin mdc-list-item-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
   .mdc-list-item {
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-shape-radius($radius, $rtl-reflexive);
-    }
+    @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
   }
 }
 

diff --git a/packages/mdc-list/package.json b/packages/mdc-list/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@material/base": "^0.41.0",
     "@material/dom": "^0.41.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/ripple": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/shape": "^0.43.0",

diff --git a/packages/mdc-menu-surface/_mixins.scss b/packages/mdc-menu-surface/_mixins.scss
@@ -81,11 +81,7 @@
 }
 
 @mixin mdc-menu-surface-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius($radius, $rtl-reflexive);
-  }
+  @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
 }
 
 //
@@ -112,6 +108,12 @@
     z-index: $mdc-menu-surface-z-index;
   }
 
+  @include mdc-feature-targets($feat-animation) {
+    transition:
+      opacity $mdc-menu-surface-fade-in-duration linear,
+      transform $mdc-menu-surface-scale-duration $mdc-animation-deceleration-curve-timing-function;
+  }
+
   &:focus {
     @include mdc-feature-targets($feat-structure) {
       outline: none;
@@ -133,12 +135,6 @@
       transform: scale(.8);
       opacity: 0;
     }
-
-    @include mdc-feature-targets($feat-animation) {
-      transition:
-        opacity $mdc-menu-surface-fade-in-duration linear,
-        transform $mdc-menu-surface-scale-duration $mdc-animation-deceleration-curve-timing-function;
-    }
   }
 
   &--animating-closed {

diff --git a/packages/mdc-menu-surface/package.json b/packages/mdc-menu-surface/package.json
@@ -17,6 +17,7 @@
     "@material/animation": "^0.41.0",
     "@material/base": "^0.41.0",
     "@material/elevation": "^0.44.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/shape": "^0.43.0",
     "@material/theme": "^0.43.0"

diff --git a/packages/mdc-menu/package.json b/packages/mdc-menu/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@material/base": "^0.41.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/list": "^0.44.0",
     "@material/menu-surface": "^0.44.0",
     "@material/ripple": "^0.44.0",

diff --git a/packages/mdc-radio/package.json b/packages/mdc-radio/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@material/animation": "^0.41.0",
     "@material/base": "^0.41.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/ripple": "^0.44.0",
     "@material/selection-control": "^0.44.0",
     "@material/theme": "^0.43.0"

diff --git a/packages/mdc-shape/_mixins.scss b/packages/mdc-shape/_mixins.scss
@@ -20,23 +20,29 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "./variables";
 @import "./functions";
 
-@mixin mdc-shape-radius($radius, $rtl-reflexive: false) {
-  // Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical
-  $needs-flip: $rtl-reflexive and length($radius) > 1;
+@mixin mdc-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
 
-  @if ($needs-flip) {
-    /* @noflip */
-  }
-
-  border-radius: mdc-shape-prop-value($radius);
+  @include mdc-feature-targets($feat-structure) {
+    // Even if $rtl-reflexive is true, only emit RTL styles if we can't easily tell that the given radius is symmetrical
+    $needs-flip: $rtl-reflexive and length($radius) > 1;
 
-  @if ($needs-flip) {
-    @include mdc-rtl {
+    @if ($needs-flip) {
       /* @noflip */
-      border-radius: mdc-shape-flip-radius(mdc-shape-prop-value($radius));
+    }
+
+    border-radius: mdc-shape-prop-value($radius);
+
+    @if ($needs-flip) {
+      @include mdc-rtl {
+        /* @noflip */
+        border-radius: mdc-shape-flip-radius(mdc-shape-prop-value($radius));
+      }
     }
   }
 }
diff --git a/packages/mdc-shape/package.json b/packages/mdc-shape/package.json
@@ -14,5 +14,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@material/feature-targeting": "^0.44.0"
   }
 }
diff --git a/packages/mdc-switch/package.json b/packages/mdc-switch/package.json
@@ -18,6 +18,7 @@
     "@material/base": "^0.41.0",
     "@material/dom": "^0.41.0",
     "@material/elevation": "^0.44.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/ripple": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/selection-control": "^0.44.0",

diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -182,7 +182,7 @@ which is immediate sibling of `.mdc-text-field`. See [here](helper-text/) for mo
 ### Text Field with Character Counter
 
 Character counter is used if there is a character limit. It displays the ratio of characters used and the total character limit.
-Helper text should be rendered inside `.mdc-text-field-helper-line` element which is immediate sibling of `.mdc-text-field`.
+Character counter should be rendered inside `.mdc-text-field-helper-line` element which is immediate sibling of `.mdc-text-field`.
 See [here](character-counter/) for more information on using character counter.
 
 ```html

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -101,7 +101,8 @@
     color: $mdc-text-field-placeholder-ink-color !important;
   }
 
-  // Always show placeholder for text field without label and show only on focused state when label is present.
+  // Always show placeholder for text fields that has no label and show only on focused state when label is present.
+  .mdc-text-field--fullwidth &::placeholder,
   .mdc-text-field--no-label &::placeholder,
   .mdc-text-field--focused &::placeholder {
     transition-delay: 40ms;

diff --git a/packages/mdc-typography/package.json b/packages/mdc-typography/package.json
@@ -12,5 +12,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/material-components/material-components-web.git"
+  },
+  "dependencies": {
+    "@material/feature-targeting": "^0.44.0"
   }
 }