feat(menu): Add new anchor positioning functionality #1691
Conversation
…mponents/material-components-web into feat/menu/anchor-positioning
Codecov Report
@@ Coverage Diff @@
## master #1691 +/- ##
==========================================
- Coverage 99.48% 99.43% -0.06%
==========================================
Files 84 84
Lines 3697 3721 +24
Branches 460 484 +24
==========================================
+ Hits 3678 3700 +22
- Misses 19 21 +2
Continue to review full report at Codecov.
|
…mponents/material-components-web into feat/menu/anchor-positioning
|
So there's good news and bad news. 👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there. 😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request. Note to project maintainer: This is a terminal state, meaning the |
|
I'm not sure how but it looks like this branch somehow diverged from master and is repeating commits/changes that are already on master? (For example some of my states commits, and the entirety of the mdc-select UX update...) |
|
@ken All I was doing I did a rebase. I was also surprised to see all that... |
lynnmercier
changed the title
demos/index.html
Outdated
| @@ -59,6 +59,13 @@ | |||
| <span class="mdc-list-item__secondary-text">Multi-selection controls</span> | |||
| </a> | |||
| </li> | |||
| <li class="mdc-list-item"> | |||
There was a problem hiding this comment.
Do we really need a demo page for both context menus and simple menu? I think the updates you did to the simple menu demo page show the anchor positioning better than the context menu demo...so I kinda just want to drop the entire context menu demo
packages/mdc-menu/simple/adapter.js
Outdated
| @@ -163,8 +163,11 @@ class MDCSimpleMenuAdapter { | |||
| * }} position */ | |||
| setPosition(position) {} | |||
|
|
|||
| /** @param {string} height */ | |||
| setMaxHeight(height) {} | |||
There was a problem hiding this comment.
remember....before you hit the "squash and merge button" to add a "breaking change" comment to the commit.
There was a problem hiding this comment.
So adding, a method is considered a breaking change?
There was a problem hiding this comment.
When it comes to adapter methods, any API change (addition/modification/removal) is considered breaking, since it impacts authors of libraries which wrap our components (since they have to implement the adapter API themselves).
| } | ||
|
|
||
| /** | ||
| * @param {AnchorMargin} margin 4-plet of margins from anchor. |
There was a problem hiding this comment.
hmmm. 4-plet is not really a word...though I see what you are trying to say here. Maybe just add an example of what an argument would look like?
There was a problem hiding this comment.
Add nullability qualifier to type (e.g., @param {!AnchorMargin}
There was a problem hiding this comment.
tests have examples of how the argument looks like. I added flexibility to specify just the non-zero (default) values.
| /** | ||
| * @param {Corner} corner Default anchor corner alignment of top-left menu corner. | ||
| */ | ||
| setAnchorCorner(corner) { |
There was a problem hiding this comment.
Document this in the README
There was a problem hiding this comment.
If this comment has been addressed, I'm not sure the latest commits have been pushed to this remote branch?
| /** | ||
| * @param {AnchorMargin} margin 4-plet of margins from anchor. | ||
| */ | ||
| setAnchorMargin(margin) { |
There was a problem hiding this comment.
Document this in the README
|
|
||
| const topOverflow = anchor.top + this.dimensions_.height - windowDimensions.height; | ||
| const bottomOverflow = this.dimensions_.height - anchor.bottom; | ||
| const topShift = (this.anchorCorner_ & CornerBit.BOTTOM) ? |
There was a problem hiding this comment.
This entire animationLoop_ method...can you break it up into smaller private methods? There is too much going on right now.
There was a problem hiding this comment.
Refactored... no animationLoop_ method. All is done in css. Auto-positioning logic has been broken up into smaller methods.
| * @param {Corner} corner Default anchor corner alignment of top-left | ||
| * menu corner. | ||
| */ | ||
| setAnchorCorner(corner) { |
There was a problem hiding this comment.
Document this in the README
| /** | ||
| * @param {AnchorMargin} margin | ||
| */ | ||
| setAnchorMargin(margin) { |
There was a problem hiding this comment.
Document this in the README
…mponents/material-components-web into feat/menu/anchor-positioning
…e tests. Good for demo.
There was a problem hiding this comment.
FWIW, I tested the select.html demo page and it seems as if those menus don't animate at all anymore, which seems a little jarring and maybe unintended with the animation changes in this PR. This may require updates to mdc-select code (which currently has some code to override existing mdc-menu behavior I believe). That code can probably go in a separate PR anyway, but we should definitely test and track it.
demos/simple-menu.html
Outdated
| margin-left: 2em; | ||
| } | ||
|
|
||
| .longAnchorWidth, |
There was a problem hiding this comment.
These class names don't follow BEM and are primarily being used to select elements in JS to apply inline styles.
It'd be nicer to set up selectors on modifier classes so that the JS can simply use classList APIs on the parent.
Example:
.demo-button__normal-text,
.demo-button__long-text {
display: none;
}
.demo-button--normal .demo-button__normal-text,
.demo-button--long .demo-button__long-text {
display: inline;
}<button id="menu-button" class="mdc-button mdc-button--raised demo-button demo-button--normal">
Show<span class="demo-button__normal-text"> Menu</span><span class="demo-button__long-text"> From Here Now!</span>
</button>(I also replaced the toggle class in the existing demo with a menu-button id in this example, since it's only ever being used in JS to grab a reference to the element.)
Then in JS call classList.add or classList.remove on the button for each of the modifier classes.
The same can be applied to the menu and its items.
| <div class="left-column-controls"> | ||
| Button Position: | ||
| <div> | ||
| <label><input type="radio" name="position" value="top left" checked> Top left</label> |
There was a problem hiding this comment.
If the values in the new set of radio buttons have underscores, maybe do that here too to be consistent?
demos/simple-menu.html
Outdated
| var inputs = document.querySelectorAll('input[type="text"]'); | ||
| for (var i = 0; i < inputs.length; i++) { | ||
| inputs[i].addEventListener('change', () => { | ||
| const topMarginInput = document.querySelector('input[name="topMargin"]'); |
There was a problem hiding this comment.
Give these inputs IDs and use getElementById, or use a form for the demo controls container and reference its .elements? (Applicable to all of the name attribute selectors in this file, not just here.)
Also, kebab-case instead of camelCase.
There was a problem hiding this comment.
Changed for the inputs, but left for radio buttons. Renamed names to be kebab-case.
demos/simple-menu.html
Outdated
| }); | ||
| } | ||
|
|
||
| var inputs = document.querySelectorAll('input[type="text"]'); |
There was a problem hiding this comment.
Put an ID on your margin-inputs element and use that as the root for this selector instead of document. Otherwise this is bound to break if we ever add text inputs for anything else to this page.
demos/simple-menu.html
Outdated
| if (evt.target.checked) { | ||
| switch (evt.target.value) { | ||
| case "small": | ||
| document.querySelector('.longMenuItems').style.display = 'none'; |
There was a problem hiding this comment.
Replace these inline styles with classList usage, see earlier comment for example
| if (anchorWidth / menuWidth > numbers.ANCHOR_TO_MENU_WIDTH_RATIO) { | ||
| horizontalAlignment = 'center'; | ||
| } | ||
| // adjust vertical origin when menu can and significantly overlaps anchor. |
There was a problem hiding this comment.
Explain why this isn't simply centering as opposed to horizontal above, and initial-cap first word of comment
There was a problem hiding this comment.
This just makes origin coincide with anchor, so that scale animation looks like it originates from the anchor.
|
|
||
| // clear measures after positioning is complete. |
There was a problem hiding this comment.
Nit: capital C in Clear
| @@ -480,11 +549,13 @@ class MDCSimpleMenuFoundation extends MDCFoundation { | |||
| } | |||
|
|
|||
| this.adapter_.deregisterBodyClickHandler(this.documentClickHandler_); | |||
| this.adapter_.addClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING); | |||
| this.adapter_.addClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING_CLOSE); | |||
There was a problem hiding this comment.
Nit: should this be ANIMATING_CLOSED (where "open" and "closed" are adjectives as opposed to "open" and "close" being verbs)?
There was a problem hiding this comment.
ok changed to adj meaning, however, I was thinking those as being verbs in this case. Like in "animating whirl".
| } | ||
|
|
||
| &--animating { | ||
| &--animating-close { |
There was a problem hiding this comment.
See earlier comment RE renaming this to --animating-closed
| &--open { | ||
| display: inline-block; | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| > .mdc-simple-menu__items { |
There was a problem hiding this comment.
Is this necessary, or would this be the default style anyway due to the style below under &__items?
There was a problem hiding this comment.
yes. This is the end state that gets applied after animating-open class is added.
There was a problem hiding this comment.
Oh, I see, --open is added while --animating-open is still present.
Is just plain --animating even used anymore? There are still styles present for it below, but no constants. Maybe some style cleanup is necessary?
ANDREY (couldn't reply, so editing):
Thanks, missed that one. Removed unused style. Done.
| itself relative to this anchor element. It will open from the top left (top right in RTL) corner of the anchor by | ||
| default, but will choose an appropriate different corner if close to the edge of the screen. | ||
| itself relative to this anchor element. Unless anchor corner is specified, menu will open from the top left | ||
| (top right in RTL) corner of the anchor by default, but will choose an appropriate different corner if close |
There was a problem hiding this comment.
Does it actually make sense to swap this in RTL? Sometimes RTL really only makes sense for text based content. Where a menu opens is not as "text-y". (But if theres guidance in our Material Design articles to do this RTL swap, then it makes sense)
There was a problem hiding this comment.
I think so, in RTL - EVERYTHING is mirrored. I do not think there is any guidance in spec about RTL, I will ask Jefferson.
There was a problem hiding this comment.
Something is buggy with regards to this in the demo and I'm not exactly sure what.
Testing with wider-than-menu button text:
- If I check RTL without touching button position radios: button switches to right side, menu opens anchored to top right corner
- If I change button position to top right but leave RTL off: button switches to right side, menu opens anchored to top left corner (This might be technically correct right now but might not be the best UX?)
- If I check RTL and change button position to top right then back to top left, menu opens anchored to top left corner (I think this is wrong if I understand correctly?)
I'm not sure if there's a bug in the demo or the foundation code. As for intended behavior, have we checked with designers about this (and distinguished RTL from "button just happens to be on the right")?
Edit: re-tested in the new year after subsequent changes and things in the demo seem consistent now.
There was a problem hiding this comment.
yeah that got fixed
packages/mdc-menu/index.js
Outdated
| export {MDCSimpleMenu, MDCSimpleMenuFoundation, util}; | ||
| import * as constants from './simple/constants'; | ||
| import {MDCSimpleMenu, MDCSimpleMenuFoundation, CornerBit, Corner, AnchorMargin} from './simple'; | ||
| export {MDCSimpleMenu, MDCSimpleMenuFoundation, CornerBit, Corner, AnchorMargin, util, constants}; |
There was a problem hiding this comment.
They should be hung off the foundations.
| /** @return {number} */ | ||
| getAccurateTime() {} | ||
| /** @param {string} height */ | ||
| setMaxHeight(height) {} |
There was a problem hiding this comment.
it is REALLY odd that setMaxHeight doesnt take a number as input. Are you suppose to specify "100px"? Could we change it to just take a number?
| @@ -96,27 +116,23 @@ class MDCSimpleMenuFoundation extends MDCFoundation { | |||
| /** @private {boolean} */ | |||
| this.isOpen_ = false; | |||
| /** @private {number} */ | |||
| this.startScaleX_ = 0; | |||
| this.openAnimationEndTimerId_ = 0; | |||
There was a problem hiding this comment.
openAnimationEndTimerId is a number?
I think openAnimationEndTimerId, closeAnimationEndTimerId, and selectedTriggerTimerId all need better inline documentation for what they represent
There was a problem hiding this comment.
it is whatever, setTimeout returns and what you can pass to clearTimeout. Yeah it is a number - see https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout.
| @@ -150,109 +168,27 @@ class MDCSimpleMenuFoundation extends MDCFoundation { | |||
| } | |||
|
|
|||
| /** | |||
| * Calculates transition delays for individual menu items, so that they fade in one at a time. | |||
| * @private | |||
| * @param {!Corner} corner Default anchor corner alignment of top-left menu corner. | |||
There was a problem hiding this comment.
I think we generally need to be more clear that the corner clients set is the "ideal" corner. But there is internal logic which will change the "actual" corner depending on the view port.
| @@ -15,10 +15,34 @@ | |||
| * limitations under the License. | |||
| */ | |||
|
|
|||
| /** | |||
There was a problem hiding this comment.
Just in general...MDCSimpleMenuFoundation is now 570 lines of code. Which is quite a lot. Is there any way to break out some piece of this into a new file? Open to ideas here...
There was a problem hiding this comment.
Might be feasible to genericize some of the broken-out auto-positioning functions to util functions?
There was a problem hiding this comment.
Separate PR, plz!
There was a problem hiding this comment.
Yeah, I'll create an issue, since I also realized that I think there are now some unused util functions anyway.
Edit: Created #1814
demos/simple-menu.html
Outdated
| display: inline; | ||
| } | ||
|
|
||
| .mdc-simple-menu__long-items, |
There was a problem hiding this comment.
We don't want to use the mdc prefix for demo classes, since it makes it confusing what styles are built-in vs. not and best practice is to use custom class names. (Matt's currently working on eliminating this everywhere in another PR.)
Use something like menu or demo-menu as a base here and below.
There was a problem hiding this comment.
makes sense. done.
demos/simple-menu.html
Outdated
| @@ -175,13 +278,109 @@ | |||
|
|
|||
| var vertical = evt.target.value.split(' ')[0]; | |||
| var horizontal = evt.target.value.split(' ')[1]; | |||
| anchor.style.setProperty(vertical, '0'); | |||
| if (vertical == 'middle') { | |||
demos/simple-menu.html
Outdated
| const marginInputsEl = document.querySelector('#margin-inputs'); | ||
| var inputs = marginInputsEl.querySelectorAll('input[type="text"]'); | ||
| for (var i = 0; i < inputs.length; i++) { | ||
| inputs[i].addEventListener('change', () => { |
There was a problem hiding this comment.
Do not use ES6 syntax in demo pages; it breaks demos in IE.
| itself relative to this anchor element. It will open from the top left (top right in RTL) corner of the anchor by | ||
| default, but will choose an appropriate different corner if close to the edge of the screen. | ||
| itself relative to this anchor element. Unless anchor corner is specified, menu will open from the top left | ||
| (top right in RTL) corner of the anchor by default, but will choose an appropriate different corner if close |
There was a problem hiding this comment.
Something is buggy with regards to this in the demo and I'm not exactly sure what.
Testing with wider-than-menu button text:
- If I check RTL without touching button position radios: button switches to right side, menu opens anchored to top right corner
- If I change button position to top right but leave RTL off: button switches to right side, menu opens anchored to top left corner (This might be technically correct right now but might not be the best UX?)
- If I check RTL and change button position to top right then back to top left, menu opens anchored to top left corner (I think this is wrong if I understand correctly?)
I'm not sure if there's a bug in the demo or the foundation code. As for intended behavior, have we checked with designers about this (and distinguished RTL from "button just happens to be on the right")?
Edit: re-tested in the new year after subsequent changes and things in the demo seem consistent now.
packages/mdc-menu/README.md
Outdated
|
|
||
| Specifies the anchor corner to which top start of the menu (top left in ltr, top right in rtl) should align given there | ||
| is enough space to show the full menu. | ||
| When menu display is constrained by viewport edge, TOP can be flipped to BOTTOM. Similarly START can flip to END. |
There was a problem hiding this comment.
Nit: I'd put all of the all-caps words in backticks for inline code formatting since they're referring to constants (or part of a constant).
The extended explanation definitely helps.
| const leftOverflow = menuWidth - availableLeft; | ||
| const rightOverflow = menuWidth - availableRight; | ||
| if (this.adapter_.isRtl()) { | ||
| if (leftOverflow < 0 && this.anchorCorner_ & CornerBit.FLIP_RTL & ~CornerBit.RIGHT) { |
There was a problem hiding this comment.
Actually, can't this be represented a bit more concisely like so, rather than having multiple variably-nested branches that result in the same action?
const shouldUseRightCorner =
(this.adapter_.isRtl() && leftOverflow < 0 && this.anchorCorner_ & CornerBit.FLIP_RTL & ~CornerBit.RIGHT) ||
(!this.adapter_.isRtl() && rightOverflow > 0 && leftOverflow < rightOverflow);
if (shouldUseRightCorner) {
corner |= CornerBit.RIGHT;
}| */ | ||
| getVerticalOriginOffset_(corner) { | ||
| const {anchorRect, viewport, viewportMargin, anchorHeight, menuHeight} = this.measures_; | ||
| const verticalAlignment = (corner & CornerBit.BOTTOM) ? 'bottom' : 'top'; |
There was a problem hiding this comment.
If you want a separate variable, I'd go for something like isBottomAligned again instead, that way you can simply do if (isBottomAligned) rather than comparing to arbitrary strings. Same for the next instance below.
ANDREY (couldn't reply, so editing):
Done.
| getMenuMaxHeight_(corner) { | ||
| let maxHeight = 0; | ||
| const {viewportMargin} = this.measures_; | ||
| const verticalAlignment = (corner & CornerBit.BOTTOM) ? 'bottom' : 'top'; |
There was a problem hiding this comment.
Add a comment above the outer if below to indicate that the alternative case is handled by CSS (if I'm understanding correctly)
ANDREY (couldn't reply, so editing):
Done.
| if (anchorWidth / menuWidth > numbers.ANCHOR_TO_MENU_WIDTH_RATIO) { | ||
| horizontalAlignment = 'center'; | ||
| } | ||
| // Adjust vertical origin when menu can and significantly overlaps anchor. |
There was a problem hiding this comment.
When I asked to explain what this meant, I meant elaborate in the comment so people have an easier time figuring out the "why" of this later :)
ANDREY (couldn't reply, so editing):
Done.
| @@ -15,10 +15,34 @@ | |||
| * limitations under the License. | |||
| */ | |||
|
|
|||
| /** | |||
There was a problem hiding this comment.
Yeah, I'll create an issue, since I also realized that I think there are now some unused util functions anyway.
Edit: Created #1814
demos/simple-menu.html
Outdated
| @@ -1,4 +1,4 @@ | |||
| <!DOCTYPE html> | |||
| demo-menu__long-items<!DOCTYPE html> | |||
There was a problem hiding this comment.
How did this get here? 😅
demos/simple-menu.html
Outdated
| anchor.style.setProperty(horizontal, '0'); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
|
|
There was a problem hiding this comment.
Remove extra newlines, and remove var before radios on following line (it's already declared above)
| const anchor = this.adapter_.getAnchorDimensions(); | ||
| const windowDimensions = this.adapter_.getWindowDimensions(); | ||
| const isRtl = this.adapter_.isRtl(); | ||
| const isFlipRtl = !!(this.anchorCorner_ & CornerBit.FLIP_RTL); |
There was a problem hiding this comment.
Nit: Prefer Boolean(...) to !!(...) for readability wherever it's used, and also do the same on the next line for avoidHorizontalOverlap
demos/simple-menu.html
Outdated
| @@ -81,58 +109,126 @@ | |||
| </header> | |||
|
|
|||
| <main> | |||
| <div class="mdc-toolbar-fixed-adjust"></div> | |||
| <section class="hero"> | |||
There was a problem hiding this comment.
Why was the hero section removed? If this was for button positioning, shouldn't it be possible to work within the demo-content element for that and leave the hero section intact?
There was a problem hiding this comment.
brought it back. Still need to figure out how to size demo section correctly.
There was a problem hiding this comment.
added it back. Ignoring issues with height of the demo content portion.
| return { | ||
| anchorRect: anchorRect, | ||
| viewport: viewport, | ||
| viewportMargin: { |
There was a problem hiding this comment.
Are you planning to rename this to viewportDistance from the earlier discussion?
ANDREY: I could swear I've made the change before the holidays - i guess not.
| let corner = Corner.TOP_LEFT; | ||
|
|
||
| const {anchorRect, viewportMargin, anchorHeight, anchorWidth, menuHeight, menuWidth} = this.measures_; | ||
| const isBottomAligned = this.anchorCorner_ & CornerBit.BOTTOM; |
There was a problem hiding this comment.
Nit: Boolean(...); on right side
There was a problem hiding this comment.
Writing down my observations on behavior to make sure they sound correct (let me know if any of this sounds wrong):
- Top and Start each mean the menu should cover the anchor over the relevant axis (Top = Y, Start = X)
- Bottom and End each mean the menu should open opposite the anchor along the relevant axis
- RTL affects which side of the anchor the menu aligns with if the anchor is wider than the menu
- RTL also flips the meaning of start/end, which isn't noticeable in the demo page unless we add horizontally-centered examples (I set position manually to test it)
Andrey:
All seems to be correct.
The last bullet point you can verify by selecting longer than menu anchor.
demos/simple-menu.html
Outdated
| } | ||
|
|
||
| .demo-header-toolbar { | ||
| z-index: 10; |
There was a problem hiding this comment.
This z-index style should be added back - it's what allows the menu in the hero section to pass under the toolbar instead of over it.
Was there a reason this was removed?
There was a problem hiding this comment.
Well, true. However, popup menus should show over the title bar. I would argue that z-indexing of the bar itself is not right.
There was a problem hiding this comment.
I guess you could argue for changing the z-index of the specific hero menu instance instead? One way or another, this menu shouldn't overlap the toolbar; it breaks the perception of the toolbar being "over" the page.
However, I imagine it's also possible for the page to scroll while a menu on the page is open, in which case the same problem will occur. It seems more common to have a menu within the body of a page rather than in its fixed toolbar and in that case you wouldn't want the menu to cover the toolbar. (Plus, if the menu is in the toolbar already, it should already be within the stacking context of the toolbar and appear above it, right?)
There was a problem hiding this comment.
The hero menu overlapping the toolbar is still a problem that needs to be fixed, whether by raising the toolbar's z-index or lowering the menu's. (I would probably still vote for raising the toolbar's, since it's also possible to scroll the button's menu such that it overlaps the toolbar.)
There was a problem hiding this comment.
Ok I put back z-index on the toolbar and added z-index for the popup menu. I still think it sets a bad example moving forward - "z-index war" is a loosing war.
| const numItems = this.adapter_.getNumberOfItems(); | ||
| for (let i = 0; i < numItems; i++) { | ||
| this.adapter_.setTransitionDelayForItemAtIndex(i, null); | ||
| setAnchorMargin(margin) { |
There was a problem hiding this comment.
This has the potential to partially override the existing margins rather than reset. Is that really what we want / what consumers of the API would expect? (e.g. this is inconsistent with the setPosition adapter API which needs to reset every time to work properly.)
e.g. if you call setAnchorMargin({top: 4}) and then call setAnchorMargin({right: 4}), the result is actually {top: 4, right: 4, bottom: 0, left: 0}.
If we want to reset each time, we could re-code each of these blocks e.g.
this.anchorMargin_.top = typeof margin.top === 'number' ? margin.top : 0;Or if we're more trusting / less picky about what's passed in, even just a one-liner:
this.anchorMargin_ = Object.assign({top: 0, right: 0, bottom: 0, left: 0}, margin);There was a problem hiding this comment.
I wanted to allow people to call setAnchorMargin({top: 5, bottom: -5}) without having to worry about right/left. This API kind of follows the css style specification in that it does not reset margin to 0 for sides you have not specified.
There was a problem hiding this comment.
I'd argue that in your example, people do have to worry about whether right/left have been set previously. i.e. previous calls to this set API can have side effects on future calls, and if they want to be sure that only the margins they pass are in effect, they have to pass all 4 sides and zero out the ones they don't want, which seems less convenient in the long run.
IMO it's easier to consume set APIs that function as resets, not potentially additive across subsequent calls.
There was a problem hiding this comment.
I do not expect people to change margins more than once, frankly. It has to do with anchor geometry and should probably not change between invocations. So, being able to specify just the margins that one cares about is useful. One can always set all 4 to be sure. If you feel strongly about this, I can add assert for all 4 fields to be there on each set.
I do not think that not including a side should reset that side to 0 margin.
There was a problem hiding this comment.
Discussed offline, but in summary: I definitely agree that this will be called only once in most cases, which makes me feel a little guilty about harping on it :) but resetting the unspecified states seems cleaner from a setter API perspective, and also can be accomplished with less code, which seems like a win-win to me.
There was a problem hiding this comment.
Single liner breaks closure test, since margin is of type AnchorMargin and not Object.
|
|
||
| const {anchorRect, viewportDistance, anchorHeight, anchorWidth, menuHeight, menuWidth} = this.measures_; | ||
| const isBottomAligned = Boolean(this.anchorCorner_ & CornerBit.BOTTOM); | ||
| const availableTop = isBottomAligned ? anchorRect.top + anchorHeight + this.anchorMargin_.bottom |
There was a problem hiding this comment.
Should I be weirded out that there's no reference to viewportDistance.top in the true branch of this ternary? All the other availableFoo variables seem to reference the respective side in both branches.
There was a problem hiding this comment.
I think those are always equal, but good catch for consistency.
| const avoidHorizontalOverlap = Boolean(this.anchorCorner_ & CornerBit.RIGHT); | ||
| const isAlignedRight = (avoidHorizontalOverlap && !isRtl) || | ||
| (!avoidHorizontalOverlap && isFlipRtl && isRtl); | ||
| const availableLeft = isAlignedRight ? viewportDistance.left + anchorWidth + this.anchorMargin_.right : |
There was a problem hiding this comment.
I'm a bit confused why availableLeft and availableRight aren't quite mirror images of each other, e.g. the former adds anchorMargin_.left in the left-aligned case but the latter subtracts anchorMargin_.right in the right-aligned case, and similar differences for the opposite cases.
I figure I'm probably missing something simple, since there's also similar differences between the top and bottom logic, but could you explain?
There was a problem hiding this comment.
Suppose we are aligning to the TOP-LEFT. When menu should appear aligned to the right edge of the anchor, we need to add or subtract right margin. The difference between addition vs subtraction comes from asymmetry with respect to direction of an axis.
| */ | ||
| getHorizontalOriginOffset_(corner) { | ||
| const {anchorRect} = this.measures_; | ||
| const horizontalAlignment = (corner & CornerBit.RIGHT) ? 'right' : 'left'; |
There was a problem hiding this comment.
Nit: Would an isRightAligned boolean be simpler here, like isBottomAligned in the next method below? (Maybe I only commented on that one earlier...)
Also, given that there's really just one assignment within each branch, the *Offset variables aren't really necessary.
| td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000}); | ||
| td.when(mockAdapter.getAnchorDimensions()).thenReturn(anchorDimensions); | ||
|
|
||
| if (isRtl) { |
There was a problem hiding this comment.
This seems awkward since it's not going to explicitly stub whatsoever if you don't pass isRtl, resulting in it being undefined (and warranting the coersion here).
It'd make more sense to default isRtl to false in the function parameters, then simply do td.when(mockAdapter.isRtl()).thenReturn(isRtl); (since we always pass a boolean to it).
There was a problem hiding this comment.
sure, makes sense. I guess I am not used to setting default values on params (yet)!
| } | ||
|
|
||
| if (menuHeight) { | ||
| td.when(mockAdapter.getInnerDimensions()).thenReturn({height: menuHeight, width: 100}); |
There was a problem hiding this comment.
Default menuHeight to 200 in the function's parameters, then you don't need this if/else at all, just this line from inside the if block.
| foundation.open(); | ||
| mockRaf.flush(); | ||
| mockRaf.flush(); | ||
|
|
||
| td.when(mockAdapter.getAccurateTime()).thenReturn(500); |
There was a problem hiding this comment.
Given that this test is only waiting for the very next frame, the test name seems inaccurate - are we actually focusing before the animation finishes? (That might be okay, but we should probably remove that part from the test name.)
| td.verify(mockAdapter.focusItemAtIndex(0), {times: 0}); | ||
| }); | ||
|
|
||
| testFoundation('#open anchors the menu on the top left in LTR, given enough room', | ||
| /** Testing various layout cases for autopositoining */ |
| }); | ||
|
|
||
| testFoundation('#open anchors the menu on the top right in RTL, given enough room', | ||
| testFoundation('#open from small anchor in right bottom of viewport, BOTTOM_START) anchor corner, LTR', |
There was a problem hiding this comment.
Typo: remove ) in test name
|
|
||
| td.when(mockAdapter.getAccurateTime()).thenReturn(500); | ||
| testFoundation('#open from small anchor in left bottom of viewport, BOTTOM_START) anchor corner, RTL', |
There was a problem hiding this comment.
Typo: remove ) in test name
| const smallCenter = {height: 20, width: 40, top: 490, bottom: 510, left: 480, right: 520}; | ||
| const smallAboveMiddleLeft = {height: 20, width: 40, top: 400, bottom: 420, left: 20, right: 60}; | ||
| const smallBelowMiddleLeft = {height: 20, width: 40, top: 600, bottom: 620, left: 20, right: 60}; | ||
| const wideCenter = {height: 20, width: 100, top: 490, bottom: 510, left: 450, right: 550}; |
There was a problem hiding this comment.
IIUC these configure the anchor to be the same width as the menu. Do we need some tests for when the anchor is wider than the menu to test which side the menu adheres to in LTR vs. RTL for cases where it overlaps the anchor?
There was a problem hiding this comment.
Thanks, for reminding. I will add those tests.
| }); | ||
| foundation.setAnchorCorner(Corner.BOTTOM_START); | ||
| foundation.setAnchorMargin({top: 5, left: 0, bottom: 10, right: 7}); | ||
| foundation.setAnchorMargin({top: '5px', left: 'zz', bottom: '10dp', right: '7em'}); |
There was a problem hiding this comment.
Why two setAnchorMargin calls?
And what's the motivation for testing invalid input for this specific API? (I doubt we really do that in general...)
There was a problem hiding this comment.
code coverage is one of the motivations.
There was a problem hiding this comment.
Oh, for the typeof operations? This may become unnecessary then, if we revise the API RE my other comment (i.e. the branch this hits will no longer exist, and those branches are really intended for nonexistent values rather than invalid ones, right?).
| td.when(mockAdapter.hasClass('mdc-simple-menu--open')).thenReturn(true); | ||
| td.when(mockAdapter.hasClass('mdc-simple-menu--open-from-bottom-left')).thenReturn(true); | ||
|
|
||
| td.when(mockAdapter.hasClass(cssClasses.OPEN)).thenReturn(true); |
There was a problem hiding this comment.
Is this line even necessary, here and in the next test?
There was a problem hiding this comment.
strictly speaking it is not needed :).
demos/simple-menu.html
Outdated
| } | ||
|
|
||
| const rtl = document.querySelector('input[name="is-rtl"]'); | ||
| rtl.addEventListener('change', () => { |
There was a problem hiding this comment.
Replace with function() { so the demo page works in IE11
demos/simple-menu.html
Outdated
| } | ||
|
|
||
| .demo-header-toolbar { | ||
| z-index: 10; |
There was a problem hiding this comment.
The hero menu overlapping the toolbar is still a problem that needs to be fixed, whether by raising the toolbar's z-index or lowering the menu's. (I would probably still vote for raising the toolbar's, since it's also possible to scroll the button's menu such that it overlaps the toolbar.)
| const viewport = this.adapter_.getWindowDimensions(); | ||
|
|
||
| return { | ||
| anchorRect: anchorRect, |
There was a problem hiding this comment.
Does anchorRect actually need to be in this returned object? AFAICT we only ever reference height and width from it and those are already exposed via anchorHeight and anchorWidth.
There was a problem hiding this comment.
Good point, refactored affected methods.
| @@ -1,14 +1,14 @@ | |||
| /** | |||
| * Copyright 2016 Google Inc. All Rights Reserved. | |||
| * | |||
| * Licensed under the Apache License, Version 2.0 (the "License"); | |||
| * Licensed under the Apache License, Version 2.0 (the 'License'); | |||
There was a problem hiding this comment.
I assume some kind of mass find/replace altered these comments in the copyright; we should revert these 2 edits (here and L11)
demos/simple-menu.html
Outdated
| z-index: 10; | ||
| } | ||
|
|
||
| #demo-menu { |
There was a problem hiding this comment.
I was thinking this menu should not overlap the toolbar since the toolbar is supposed to be thought of as being above the page.
If you want this to overlap the toolbar, it'd be simpler to only override the z-index on the menu in the hero section, instead of overriding the z-index of both the toolbar and this menu.
Also, generally avoid ID selectors in demo CSS.
commit ec4d18eab615528a2ace6a7c1e471db1b05934e9 Author: Will Ernest <[email protected]> Date: Mon Jan 8 15:04:46 2018 -0800 feat(text-field): Move color for default text-field to mixins. (#1899) commit 10ca23e03671292ac73d95a140e7f94890b9d98a Author: Andrew C. Dvorak <[email protected]> Date: Mon Jan 8 12:54:33 2018 -0800 docs(text-field): Fix URL typos in README front matter (#1897) commit d6db793dfc2d9f3b085274c73c074bbc3a255587 Author: Andy Dvorak <[email protected]> Date: Mon Jan 8 11:00:52 2018 -0800 docs: Update CHANGELOG.md commit 11bf57434ec4c973bab71e342a60246c1c1f7ebb Author: Andy Dvorak <[email protected]> Date: Mon Jan 8 11:00:42 2018 -0800 chore: Publish commit f19bfbed33654172b299a4ccfb6041796b7a2a98 Author: Andrew C. Dvorak <[email protected]> Date: Mon Jan 8 10:46:45 2018 -0800 feat(theme): Update baseline theme colors (#1884) The baseline color values are duplicated in demos/common.scss because we still want to demonstrate how and where to set your own custom colors. The theme demo page will soon let you preview multiple themes, at which point we might want to remove the duplicate color values from common.scss. commit daefeba86dbe2fe1cd82a400d108fdfc73241025 Author: Andrew C. Dvorak <[email protected]> Date: Mon Jan 8 10:37:26 2018 -0800 feat(theme): Switch to new theme demo page (#1886) The `MDC_GENERATE_DEMO_THEMES` env var is now opt-out (i.e., it's `true` by default) commit ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f Author: Matty Goo <[email protected]> Date: Fri Jan 5 20:07:43 2018 -0800 fix(drawer): update radio button ids to correct add/remove classes on demos (#1883) commit 9bb3be544b5b2390e7a7ab31cf40047028494e20 Author: Matty Goo <[email protected]> Date: Fri Jan 5 19:20:35 2018 -0800 feat(tab): sass color mixins (#1851) commit da566191fa1329c0e729f67c51d63e86abfb8536 Author: aprigogin <[email protected]> Date: Fri Jan 5 17:13:16 2018 -0800 feat(menu): Add new anchor positioning functionality (#1691) Resolves #1688 BREAKING CHANGE: Removes 5 adapter methods and adds a new setMaxHeight adapter method; adds anchor positioning API to menu foundation; see README for details. commit 9da2abac97ee7bd24bf4c8e6f67d6ab8f28c5d03 Author: Simon Olofsson <[email protected]> Date: Sat Jan 6 02:09:00 2018 +0100 docs(select): Fix typo. (#1880) Fixes #1839 commit f83439c5a7682d66c8d37e832610609dd803f9cf Author: Chafic Najjar <[email protected]> Date: Sat Jan 6 03:07:06 2018 +0200 docs: Fix typos in docs/code/{README,architecture}.md (#1865) commit 37dc536d68170cbd00f77718bd7fae1129cd91ee Author: Shubham Tiwari <[email protected]> Date: Sat Jan 6 06:34:35 2018 +0530 docs: Update element tag name in getting-started.md (#1853) commit 21cc771bfba4e23ab1d8748b1b64e21560fa6b04 Author: Patty RoDee <[email protected]> Date: Fri Jan 5 14:25:37 2018 -0800 chore(slider): annotate for closure compiler (#1782) Annotate index.js, foundation.js, adapter.js, and constants.js under MDC Slider for closure compiler. Update package.json closure whitelist to test MDC Slider. commit d7b93450161fa530564d20eb577d51a28ffb8f04 Author: Lynn Jepsen <[email protected]> Date: Fri Jan 5 13:59:25 2018 -0800 feat(text-field): Add properties for value, disable, value, and required (#1873) BREAKING CHANGE: - The return type for `MDCTextFieldAdapter.getNativeInput()` has changed. See the 'NativeInputType` typedef in the adapter. - MDCTextFieldLabelFoundation has removed: - `floatAbove` - `deactivateFocus` - `setValidity` - They are replaced with methods for updating the label float and label shake styles: - `styleFloat` - `styleShake` commit e9f02eda9f4343913b99e11b5292ae9532c0c40c Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Jan 5 15:35:29 2018 -0500 fix(ripple): Listen for up events at document level (#1800) BREAKING CHANGE: `registerDocumentInteractionHandler ` and `deregisterDocumentInteractionHandler` APIs have been added to the ripple adapter. commit 8a835ab9f3074933b9d5ae5f28061ee829dc4a6b Author: Bonnie Zhou <[email protected]> Date: Fri Jan 5 14:54:45 2018 -0500 docs(text-field): Update icon docs with outlined text field (#1881) commit 1ebad2cbc2b335786ee54f7e49967ab07c676aca Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Jan 5 12:40:05 2018 -0500 feat(elevation): Remove transition mixin; use transition-value function (#1871) BREAKING CHANGE: The `mdc-elevation-transition` mixin has been removed, and the `mdc-elevation-transition-rule` function has been renamed to `mdc-elevation-transition-value`, which should be used instead. commit 2a69fefc9abb2744996b51b51e5e6edf055f99eb Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Jan 5 12:25:17 2018 -0500 fix(ripple): Apply will-change to surface rather than pseudo-elements (#1872) This avoids a rendering regression in Safari where ripples/shade expanded beyond the border-radius of the surface, and also generally decreases the surface area affected by `will-change`. commit 0ec39425c33d3c1d1119126ba310cc8b33b9b787 Author: greenkeeper[bot] <greenkeeper[bot]@users.noreply.github.com> Date: Fri Jan 5 08:34:29 2018 -0800 Update karma to the latest version 🚀 (#1816) commit 89fa45ccc5ae2d9d416bdef8ab4ee73458310702 Author: Patrick Roncagliolo <[email protected]> Date: Fri Jan 5 06:44:38 2018 +0100 docs(tabs): Fix an inconsistency in the class name of the example commit 92c1bf23715c346cdf1ee65c4da0135d0f6c3e5d Author: greenkeeper[bot] <greenkeeper[bot]@users.noreply.github.com> Date: Thu Jan 4 21:33:23 2018 -0800 Update fs-extra to the latest version 🚀 (#1743) commit 782db21cecd9311ec747167281ae2b8358e776c7 Author: greenkeeper[bot] <greenkeeper[bot]@users.noreply.github.com> Date: Thu Jan 4 21:30:06 2018 -0800 Update stylelint-order to the latest version 🚀 (#1686) commit f007b9c7fbd680f24f11b64e1714c021939b9a15 Author: Matty Goo <[email protected]> Date: Thu Jan 4 16:04:10 2018 -0800 refactor(text-field): replaced text-field invalid css with mixin (#1870) commit ca0af1b5e2bf66356f42be3d9353fd7b440d3e8b Author: Bonnie Zhou <[email protected]> Date: Thu Jan 4 18:04:04 2018 -0500 feat(text-field): Handle leading/trailing icons in outlined text field (#1858) commit b8e4020f82e20dcf5da672268d92d7016773bff9 Author: greenkeeper[bot] <greenkeeper[bot]@users.noreply.github.com> Date: Thu Jan 4 09:19:07 2018 -0800 Update recast to the latest version 🚀 (#1629) commit fc57923923b72d6d48a0faa37691a62adfbf9147 Author: Matty Goo <[email protected]> Date: Wed Jan 3 15:57:17 2018 -0800 refactor(text-field): replaced focused css with private sass color mixins (#1862) commit 6d74ebc66ea06eefd9c8ab377c2ad5a369802c2b Author: Matty Goo <[email protected]> Date: Wed Jan 3 14:45:29 2018 -0800 refactor(text-field): split disabled state from scss file to mixins (#1861) commit 3061a612a0bd8ec8ff59fa823f6d69fa691c7945 Author: Matty Goo <[email protected]> Date: Wed Jan 3 14:42:45 2018 -0800 fix(text-field): updated dependency check test and added special case for text-field (#1860) commit 5a19695523cf96e068a844cc762df9400d97554a Author: Bonnie Zhou <[email protected]> Date: Wed Jan 3 13:31:27 2018 -0500 feat(text-field): Add dense mode to outlined text field (#1846) BREAKING CHANGE: Please implement `hasClass` method on MDCTextFieldAdapter, and change `getFloatingWidth` method to `getWidth` on MDCTextFieldLabelFoundation. commit e3cb47cb01e7ab194fc2a70eb45706aedce17245 Author: Kenneth G. Franqueiro <[email protected]> Date: Wed Jan 3 13:13:41 2018 -0500 fix(list): Move divider color style so it takes precedence (#1856) commit 6ada786180b8e31e30b610016ea222eee1850e9e Author: Bonnie Zhou <[email protected]> Date: Wed Jan 3 12:00:50 2018 -0500 fix(text-field): Update outline and label styles according to spec (#1855) commit 2f9dd6f24904f485c2a044088a0c8c21e0503cfd Author: Matty Goo <[email protected]> Date: Tue Jan 2 17:11:58 2018 -0800 fix(text-field): allow commit message text-field with dash (#1850) commit 308f600d09aa49ab9d0cf653ecaf26c4c062cfaf Author: Lynn Jepsen <[email protected]> Date: Tue Jan 2 16:19:27 2018 -0800 style(textfield): Fix mdc-text-field__input to be its own stanza (#1849) commit 69687be48e6332cf8d710a10a9ff915eeddf94a0 Author: Anton Kachurin <[email protected]> Date: Tue Jan 2 18:59:37 2018 -0500 docs(tab-bar): Add description for MDCTabBar.layout (#1637) commit dd5ea7b5776fb82c3276f8ba875c34adad11ef4e Author: Bonnie Zhou <[email protected]> Date: Tue Jan 2 16:47:15 2018 -0500 feat(text-field): Add CSS-only version of outlined text field (#1824) commit 921a41f1e0d0980d1f6f4a046e5b88c4ad100bbe Author: Matty Goo <[email protected]> Date: Tue Jan 2 12:38:05 2018 -0800 feat(drawer): custom sass mixins for color, background, scrim (#1730) BREAKING CHANGE: Renamed `mdc-permanent-drawer` CSS class to `mdc-drawer--permanent`, renamed `mdc-temporary-drawer` CSS class to `mdc-drawer--temporary`, and renamed `mdc-persistent-drawer` to `mdc-drawer--persistent`. Also renamed all subelement classes by removing the variant from the selectors. Example: ``` mdc-persistent-drawer__drawer --> mdc-drawer__drawer mdc-persistent-drawer__toolbar-spacer --> mdc-drawer__toolbar-spacer mdc-temporary-drawer__header --> mdc-drawer__header mdc-temporary-drawer__header-content --> mdc-drawer__header-content mdc-permanent-drawer__content --> mdc-drawer__content ``` commit 5013069dd26b10b8b3c1978e137aec4ac8ea4a43 Author: Patty RoDee <[email protected]> Date: Tue Jan 2 11:02:12 2018 -0800 chore(infrastructure): Remove goog.module dashes (#1809) To follow internal Google build tool formatting, dashes must not be present in the `goog.module` names. Fixes #1671 commit 166ac26df3cf7ca406db3fce8288bcbf07007a6e Author: Simon Olofsson <[email protected]> Date: Tue Jan 2 17:18:33 2018 +0100 docs(switch): Remove not-existing class `mdc-switch--disabled`. (#1829) commit a9e48682bf28f7ccfde9fdf79a97a2ecef8affbc Author: Patty RoDee <[email protected]> Date: Thu Dec 21 18:21:14 2017 -0800 feat(ripple): Add setUnbounded to foundation (#1826) Add setUnbounded to foundation, allowing a method to change whether a ripple is bounded or not. Modify the unbounded setter on the ripple implementation to use a local private method to solve closure compiler access control issues. commit d39ea5df160fa8d8c7ad5471d568cf9ccb4f79ec Author: Matty Goo <[email protected]> Date: Thu Dec 21 11:02:19 2017 -1000 docs(textfield): updated readme with missing adapter method (#1823) docs(textfield): updated readme with missing adapter method (#1823) commit 49fc1c476e1f077fd8e202ab00acf19a24b4a270 Author: Bonnie Zhou <[email protected]> Date: Thu Dec 21 15:50:06 2017 -0500 feat(text-field): Add ripple to outlined text field (#1807) commit 737f712fb596ac3518c446ca5296f42d2cf16944 Author: Matty Goo <[email protected]> Date: Thu Dec 21 09:10:34 2017 -1000 fix(textfield): Add isFocused to adapter in case autofocus attr is present (#1815) BREAKING CHANGE: Added isFocused() to Text Field adapter commit 0e9fbe1a405e311a74fddefeeeb14b31ddbf7b6c Author: Matty Goo <[email protected]> Date: Thu Dec 21 08:34:24 2017 -1000 fix(textfield): Fix placeholder colors (#1813) commit ea88991f48230efd469050e5a5302ef627c07acd Author: Matty Goo <[email protected]> Date: Thu Dec 21 08:14:13 2017 -1000 docs: updated architecture doc links (#1811) commit d3a2901038a76b764f9ee700942d78f61e290225 Author: Patty RoDee <[email protected]> Date: Thu Dec 21 08:41:03 2017 -0800 fix(checkbox): Remove duplicate background props (#1812) The `mdc-checkbox__background` mixin included the `mdc-checkbox__child--cover-parent-` mixin which set the positioning for the element on all sides to 0. However, the `mdc-rtl-reflexive-position` mixin **also** sets left and right positioning and the `mdc-checkbox__background` mixin **also** set the top positioning, resulting in duplicate properties when compiled out to CSS. This fix removes the colliding `mdc-checkbox__child--cover-parent-` mixin and sets only the remaining properties (`position` and `bottom`) to what they normally be. commit 255b63e8b436171820e2e3f62ba9e0a96c287e4b Author: Kenneth G. Franqueiro <[email protected]> Date: Wed Dec 20 13:50:41 2017 -0500 feat(select): Move focus handling to surface element for focus shade (#1803) BREAKING CHANGE: JS-enhanced Select should now apply tabindex to the surface element instead of the root element. The adapter APIs related to focus, interaction handling, and tabbability now operate on the surface element instead of the root element. commit ee1c0db07b04125d0504f0fdc936f937435d54f6 Author: Simon Olofsson <[email protected]> Date: Wed Dec 20 03:13:18 2017 +0100 fix(list): Respect BEM when outputting the base stylesheet. (#1799) Fixes #1748. commit 3e53614ad806e8c0860a707ac4548c35d51a74e9 Author: Rajendra Patil <[email protected]> Date: Wed Dec 20 07:06:28 2017 +0530 feat(snackbar): Emit show or hide event. fixes #1603 (#1755) Resolves #1603 commit d28cc8e3235b4956ab507e7b99e7d37b4722efd6 Author: Lynn Jepsen <[email protected]> Date: Tue Dec 19 17:35:42 2017 -0800 chore(textfield): Update README to follow best practices (#1788) Resolves #1707 commit a943ad6c84d551bc90460eb14cc81f3ac8969d0b Author: Mian Uddin <[email protected]> Date: Tue Dec 19 17:10:43 2017 -0800 fix(typography): change display2 font size to correct value (#1652) Resolves #1638 commit 617c61d5dfcd59a7811b3dddfdb5ba5af525857e Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 19 19:04:17 2017 -0500 feat(ripple): Remove old mixin and obsolete JS logic (#1784) This removes the pre-states mdc-ripple-color mixin which is no longer used by any components. It also removes logic for the active-fill modifier class which is no longer a thing with new states styles, and removes the logic that suppressed focus styles on press/release, since states are designed to more closely match actual browser behavior. BREAKING CHANGE: The mdc-ripple-color mixin is removed; use the mdc-states-* mixins instead. commit d6619a544ff7b1681c17f402115b12956b281bdd Author: Simon Olofsson <[email protected]> Date: Tue Dec 19 18:55:05 2017 +0100 docs: Update CHANGELOG.md commit 4ce3582b05fc0102213d20de369e4e546a1507fa Author: Bonnie Zhou <[email protected]> Date: Tue Dec 19 09:00:34 2017 -0800 feat(text-field): Add outline subelement and demo for outlined text field (#1749) BREAKING CHANGE: Public method `layout()` and adapter methods `getIdleOutlineStyleValue()` and `isRtl()` were added to MDCTextField. Added a new subcomponent MDCTextFieldOutline, and adapter method `getWidth()` to MDCTextFieldLabel. commit abbcc6985bceb62f49ee8357fdb9629cee7e0d5d Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Dec 18 17:25:19 2017 -0500 docs(form-field): Clarify README a bit and remove redundant paragraph (#1791) commit 2519b099f5f94ef97eba19ba7399c62fd1a79fa8 Author: Matt Goo <[email protected]> Date: Mon Dec 18 11:09:20 2017 -1000 fix(textfield): safari input has rounded corners (#1793) commit 4e0e17a2ea4944612c9a9b2e93de27f126da1689 Author: Daniel Deppe <[email protected]> Date: Fri Dec 15 17:13:03 2017 +0100 docs: Update list of already available components (#1789) commit e96fe2fcc63f52285157105675c662319c7b5be9 Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Dec 15 11:05:42 2017 -0500 fix(select): Disable ripple/state pseudos for native multiselect (#1781) commit c08b5e1732f56044389e8ba2f27748d17a110e43 Author: Simon Olofsson <[email protected]> Date: Fri Dec 15 01:37:42 2017 +0100 docs: Update documentation for `setStyle` in `linear-progress`. (#1758) Fixes #1680 commit 145d80c315fc14bae63fed7467098d71eae2daec Author: Patrick RoDee <[email protected]> Date: Thu Dec 14 14:10:42 2017 -0800 chore(infrastructure): Change MacOS 10.12 Chrome beta to Chrome dev (#1783) commit 4e7fa3e664593d6cd8b003900efc19e43385fe10 Author: Bonnie Zhou <[email protected]> Date: Thu Dec 14 09:59:02 2017 -0800 chore(text-field): Split out icon into subelement (#1697) BREAKING CHANGE: Remove `setIconAttr`, `eventTargetHasClass` and `notifyIconAction` from `MDCTextFieldAdapter` implementations. commit 7c6867472a8a76c2da8bcf2423c2a2dfda04bdc0 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Dec 14 11:36:48 2017 -0500 feat(drawer): Remove obsolete pre-states styles; update demo pages (#1738) BREAKING CHANGE: the "mdc-...-drawer--selected" classes are replaced by "mdc-list-item--activated", as it pertains to a specific list item and not the entire drawer. commit f82998a337dfa7d24a46fc13e478c403bbf7eaec Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Dec 14 11:15:46 2017 -0500 feat(menu): Remove obsolete pre-states styles; fix dark-mode selector (#1739) BREAKING CHANGE: the "mdc-simple-menu--selected" class is replaced by "mdc-list-item--selected", as it pertains to a specific list item and not the entire menu. commit c8772ea5f32ef971f4ae049379dc114fa2f0ec84 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Dec 14 10:48:17 2017 -0500 feat(list): Use states mixins; change padding behavior to support them (#1737) Also updates demo index page DOM and styles to accommodate new padding behavior and make entire rows clickable to match states' shade region. BREAKING CHANGE: List padding is now per-item rather than across the entire list. Separators now span the entire list width by default, with the addition of a mdc-list-divider--padded modifier class to achieve the old default behavior. commit c50363d8e836507872cdc52a65a4dfd031f4740b Author: pndewit <[email protected]> Date: Thu Dec 14 01:20:31 2017 +0100 feat(typography): Support custom properties in mdc-typography mixin (#1664) Apply all styles from `$mdc-typography-styles` instead of just a select set of properties. This allows users to override `$mdc-typography-styles` and add custom properties which will then be used everywhere. For example, adding `color` or a different `font-family`. commit 4c682672e0ab09e48efb47edb1a60e7a7f692a33 Author: Kenneth G. Franqueiro <[email protected]> Date: Wed Dec 13 17:34:04 2017 -0500 fix(select): Work around glitch with new list styles in Chrome (#1757) commit f9527db47ae8cb9f13eef45ad39d197a74d43d94 Author: Andrew C. Dvorak <[email protected]> Date: Tue Dec 12 21:39:44 2017 -0800 chore(theme): Remove constrast tone vars (#1721) BREAKING CHANGE: `$mdc-theme-primary-tone` and friends have been removed. We now use a private function instead. commit 328df776c31dc82209902d931e74594724ffba4e Author: Andrew C. Dvorak <[email protected]> Date: Tue Dec 12 21:24:19 2017 -0800 feat(toolbar): Add theme color mixins (#1720) This PR also makes the demo page a little prettier. Fixes #1154 commit acb47d70bdc3c49c3c2b9462e1b5aa5c558034f8 Author: Lynn Jepsen <[email protected]> Date: Tue Dec 12 18:39:15 2017 -0800 chore(ripple): move common ripple styles out of mixins and into @material/ripple/common (#1736) BREAKING CHANGE: Please update all components which use MDC Ripple to import the new /common file commit f71025f7a091b203e63a44c808c459a947c59245 Author: Patrick RoDee <[email protected]> Date: Tue Dec 12 16:40:04 2017 -0800 fix(theme): replace inline comments in property-values map with multiline comments (#1746) Due to an unfortunate bug in `scss-parser`, the inline comments in the property-values map were being prepended to the following lines in the build process to transform for Bazel, effectively commenting out any line that appeared directly after an inline comment in the map. While that bug is still present, replacing the inline comments with multiline comments reduces the impact of the bug. commit 1d9cd68ee62ab835435396cd5b29e7a1dab3d3fe Author: Patrick RoDee <[email protected]> Date: Tue Dec 12 15:17:26 2017 -0800 fix(linear-progress): restores progress when determinate set to true (#1698) Fixes a bug where the progress was set to 1 after determinate was toggled from false to true, regardless of what progress was set to before. The progress value is stored in the Foundation instance, defaulting to 0 to follow #1694. Fixes #1531 commit c989b431293daa1d9351499ddb3ad25e464d9e0c Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 12 14:26:08 2017 -0500 docs: Update select DOM in theme demo page (#1750) commit f8ca29260059993baf42516d59a1892be98b3aa0 Author: Aaron Hudon <[email protected]> Date: Tue Dec 12 11:12:17 2017 -0800 chore(linear-progress): add --closed state to docs commit 5dabcdf72606e182d44bdaddd386e47ae2da0d77 Author: Andrew C. Dvorak <[email protected]> Date: Tue Dec 12 02:00:31 2017 -0800 feat(list): Rename elements to match spec; don't set size of meta (#1716) BREAKING CHANGE: `__start-detail` has been renamed to `__graphic`, and `__end-detail` has been renamed to `__meta`. In addition, meta data tiles no longer have a default width/height (fixes #1644). Also: - Format mdc-list README - Capitalize headings in mdc-list README and demo commit efd9d5d4fa18863c3a58a0bb1c83a6eb3d7e2d5f Author: Andrew C. Dvorak <[email protected]> Date: Tue Dec 12 01:58:00 2017 -0800 feat(icon-toggle): Add color theme mixin; remove --primary/--accent modifiers (#1717) BREAKING CHANGE: The `--primary` and `--accent` CSS modifier classes have been removed in favor of the new mixin. Resolves #1147 commit 3e9bd5f7a147e5e3853be37a47a5cd7f76f99327 Author: Lynn Jepsen <[email protected]> Date: Mon Dec 11 18:51:57 2017 -0800 fix(checkbox): Respect BEM when outputting the base stylesheet (#1733) commit e483aae54ddea177c50cf23634ff62304e159b6c Author: Bonnie Zhou <[email protected]> Date: Mon Dec 11 15:20:32 2017 -0800 chore(text-field): Split out label into subelement (#1693) BREAKING CHANGE: Remove `addClassToLabel` and `removeClassFromLabel` from `MDCTextFieldAdapter` implementations. commit cef10e8fe32349d4940a27654d0975fd616033a4 Author: Lynn Jepsen <[email protected]> Date: Mon Dec 11 14:40:06 2017 -0800 fix(textfield): Fix mixin calls for keyframes (#1735) commit 1a4cd671c966ad9d8d57cf3e14d6ee4a05c51fa4 Author: Alex Sheehan <[email protected]> Date: Mon Dec 11 14:38:34 2017 -0500 docs: Update CHANGELOG.md commit 94cabc33f9feb772f046b755982196678a43b40b Author: Alex Sheehan <[email protected]> Date: Mon Dec 11 14:38:16 2017 -0500 chore: Publish commit 6f7008cf2b4c6dd7cf0460ac0a810b2793babb7e Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Dec 8 14:16:14 2017 -0500 feat(ripple): Add support for activated and selected states (#1696) commit 4625ac723d6eadbcbb6bde8e64503252d879b37e Author: Bonnie Zhou <[email protected]> Date: Fri Dec 8 08:31:28 2017 -0800 chore(text-field): Export subcomponents and subfoundations from root index.js commit b022f16e4fb92009eeeeb34a0b0b53de2c8ffc03 Author: Andrew C. Dvorak <[email protected]> Date: Thu Dec 7 17:03:08 2017 -0800 docs(toolbar): Reformat README (#1722) - Remove table column alignment spaces (to match our style convention in other READMEs) - Remove leading/trailing pipe characters on tables - Remove duplicate blank lines commit 49cd750ed5dbd13312e19ad235c4c571252ddd36 Author: Andrew C. Dvorak <[email protected]> Date: Thu Dec 7 16:27:31 2017 -0800 feat(theme): Add accessible-ink-color function (#1719) New mixin: `mdc-theme-accessible-ink-color($fill-color, $text-style: primary)` commit fa72e425105a3666f5ab62bc0c1ee98da14fcb6e Author: Matt Goo <[email protected]> Date: Thu Dec 7 14:54:38 2017 -0800 fix(demos): add back button to header on drawer demos page (#1703) * fix(demos): add back button to header on drawer demos page for consistency * fix(drawer): removed padding from back arrows on perisstent and temporary drawer pages commit 3043a546d5161c006024f8bebaf9ab5398484c26 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Dec 7 15:20:24 2017 -0500 feat(select): Use new mdc-states mixin for select styles (#1704) commit 35d362c6e91e3a50cda30595b3feb908ffc3c5ea Author: Patrick RoDee <[email protected]> Date: Wed Dec 6 17:13:34 2017 -0800 fix(linear-progress): default size (#1694) Fixes bug where determinate linear-progress was defaulting to 100% when progress value was not set. Fixes #1528 commit 6ea948f266b340f6733e3b005c0e25e93028955c Author: Andrew C. Dvorak <[email protected]> Date: Wed Dec 6 15:22:21 2017 -0800 feat(list): Add color theme mixins & --selected/--activated modifiers (#1663) Resolves #1662 commit 54465d942393e8e4dc8c0700325e486459bdaeaa Author: Andrew C. Dvorak <[email protected]> Date: Wed Dec 6 14:40:26 2017 -0800 feat(infrastructure): Add build command for static demo assets (#1589) New command: `npm run build:demo`. Outputs static `.css`, `.js`, and `.html` demo files to the `build/` directory. These files can be uploaded to a static file hosting service like [Firebase Hosting](https://firebase.google.com/docs/hosting/) to create a publicly-visible demo. Note that this command emits `.css` files, _not_ `.css.js` files. As such, it also rewrites the HTML to include `.css` instead of `.css.js`. commit 52008def5fb04167eab22846a500a7fc1de021cd Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 5 18:35:49 2017 -0500 docs(ripple): Update mdc-states-color -> mdc-states (#1695) commit 99878c1196498c64001dfe9f460bd1d7586906aa Author: Alex Sheehan <[email protected]> Date: Tue Dec 5 18:15:38 2017 -0500 feat(select): Add new UX styles and behavior to select BREAKING CHANGE: Adds several adapter methods to facilitate the new UX styles. Changes DOM requirements. Refer to https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/README.md for new implementation requirements. commit f7f1eb07942db56759da15fcd422a9efc057b243 Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 5 15:52:44 2017 -0500 feat(tabs): Use new mdc-states mixin for tab styles (#1674) commit 9ab48b7a05441b75b504162b3271c70bd2bd9ba7 Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 5 15:28:17 2017 -0500 feat(fab): Use new mdc-states mixin for fab styles (#1669) commit 50655762a99bd2bd5c74895768d195525206a4fd Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 5 15:02:32 2017 -0500 feat(radio): Use new mdc-states mixin for radio styles (#1673) commit 80223f222e297dd5c7507d9139b7e0099a383307 Author: Bonnie Zhou <[email protected]> Date: Tue Dec 5 10:56:13 2017 -0800 chore(text-field): Pass subelement foundations through MDCTextField super constructor (#1684) BREAKING CHANGE: Please update implementations of MDCTextField to pass in a map of subfoundations to the MDCTextFieldFoundation constructor. Methods getBottomLineFoundation() and getHelperTextFoundation() are no longer in MDCTextFieldAdapter. See the README for mdc-textfield/input for more information. commit a7505dbac607531662f927b33dbe64bb451113b2 Author: Andrew C. Dvorak <[email protected]> Date: Tue Dec 5 10:17:33 2017 -0800 chore(demos): Remove white gap from simple-menu demo in dark mode (#1692) This was supposed to be part of PR #1659, but I was dumb and forgot to `git push` before merging the PR into master. D'oh! commit eebee079e4660deb130e376e0719bcb323ae0513 Author: Andrew C. Dvorak <[email protected]> Date: Tue Dec 5 10:05:59 2017 -0800 chore(demos): Make simple-menu demo less ugly (#1659) - Use `mdc-typography` to make text look nicer - Fix invalid markup - Reformat markup - Add a space between radio buttons and their label text - Use light colored text in dark mode - Remove white gap between hero and main content in dark mode commit 2918031c4da5ffd7b5a41cc26e0b23d36b2fda09 Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 5 11:10:38 2017 -0500 feat(textfield): Use mdc-states mixin and add support for focus shade (#1677) commit 55fbba9ac2edfd36bb05bb734f56d0de1209e28f Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 5 10:52:00 2017 -0500 feat(button): Use mdc-states mixin for button styles (#1668) BREAKING CHANGE: The $mdc-*-button-ripple-opacity variables have been removed, as these values are now available via the state opacity maps in mdc-ripple. commit dab612c10ef42b623b8b0a1709008ac91f7ee83f Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Dec 5 10:18:55 2017 -0500 feat(checkbox): Use new mdc-states mixin for checkbox styles (#1672) commit 75eb1bcb7ef488ed0fc137672e46c5b095440e40 Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Dec 4 20:42:08 2017 -0500 feat(icon-toggle): Use new mdc-states mixin for icon-toggle styles (#1685) commit 28b97a5d4e5508767a8ac26fd392a10c7b68129a Author: Patrick RoDee <[email protected]> Date: Mon Dec 4 14:04:07 2017 -0800 fix(toolbar): margin for fixed toolbar Updated the media query for mdc-tollbar-fixed-adjust to be more specific, targetting only screens that fall within the mobile breakpoints of <959px and >599px instead of all landscape screens narrower than 959px commit 3e173e1ddc3bff5c7c9c2d794eeb36a9354ec98c Author: j-o-d-o <[email protected]> Date: Thu Aug 17 07:06:29 2017 +0200 fix(drawer): Change how click events are handled Remove stopPropagation() for the drawer and add conditonal closing (simliar to the Dialog). BREAKING CHANGE: Adds eventTargetHasClass method to the temporary drawer adapter API. commit 3b8ce1b4deea88d4603a607081047d8f4d525213 Author: Andrew C. Dvorak <[email protected]> Date: Fri Dec 1 07:43:52 2017 -0800 chore(menu): Use // comments and reorder styles for linter (#1661) commit e953af96c2165899c33aab00b8101ff4fef36d1c Author: Andrew C. Dvorak <[email protected]> Date: Fri Dec 1 07:29:13 2017 -0800 chore(demos): Move typography import to common; normalize class usage (#1658) This PR: - Moves all `@import "mdc-typography"` statements from individual demo Sass files to `common.scss` - Moves all `class="mdc-typography"` attrs from `<html>` to `<body>` elements (both in our demo pages and our docs), and adds the class to demo pages that previously lacked it While I'm here, this PR also: 1. Normalizes the Tab demo page's `<title>` to match our convention 2. Removes a redundant `font-family` declaration in `common.scss` commit 935644939d09fafe051ceb48581b959c46c53829 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Nov 30 18:32:20 2017 -0500 feat(ripple): Add new states mixins (#1624) commit 9ec35b74ec5109a3fc7d4398c91aa82028819b3b Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Nov 30 12:47:39 2017 -0500 fix(icon-toggle): Don't nuke tabindex if initializing disabled to false (#1667) commit 7a23183d95bd88534db2939c04a5fc3faf46a3ad Author: Andrew C. Dvorak <[email protected]> Date: Thu Nov 30 07:16:16 2017 -0800 chore(list): Rename CSS class to follow BEM naming (#1660) BREAKING CHANGE: The `mdc-list-item__text__secondary` class was renamed to `mdc-list-item__text-secondary` to follow BEM conventions. See the [BEM FAQ](http://getbem.com/faq/#css-nested-elements) for more details. commit 7e1255e4692992ba514c6337122b9bf2b133a990 Author: Andrew C. Dvorak <[email protected]> Date: Thu Nov 30 06:39:41 2017 -0800 feat(theme): Support currentColor in mdc-theme-prop* (#1657) The `mdc-theme-prop` mixin and `mdc-theme-prop-value` function now treat `currentColor` as if it were a color and emit/return it directly. commit 175bd2125b35385bd2cf6bc0acbba4d1507888c5 Author: pndewit <[email protected]> Date: Thu Nov 30 13:12:42 2017 +0100 chore(select): Remove duplicate font-family declaration (#1635) The `mdc-typography` mixin already sets `font-family` to the default font (Roboto). commit 32355c1b5c7d54e94bc023dddeb784a276473973 Author: Will Strinz <[email protected]> Date: Thu Nov 30 06:04:36 2017 -0600 chore(demos): Fix spelling mistake in list demo (#1654) change "Sleuth" to "Sloth" commit 02fe795139ed2fb3077008feaa52aaa928d014f5 Author: Alex Sheehan <[email protected]> Date: Tue Nov 28 16:48:36 2017 -0500 feat(menu): Fix menu to only fire one event per interaction BREAKING CHANGE: Adds an adapter method eventTargetHasClass to check if a given event target has a given class commit 7466effe9b5d56db75cb9202e56b345a6369aa4f Author: Bonnie Zhou <[email protected]> Date: Tue Nov 28 12:04:05 2017 -0800 chore(text-field): Remove extra code and documentation from splitting out bottom-line and helper-text (#1646) commit c62b9fa5e166ad94972c0fd699e0794389698ec0 Author: Bonnie Zhou <[email protected]> Date: Mon Nov 27 14:32:36 2017 -0800 docs: Update CHANGELOG.md commit 1d250819dd46e89385b269df6e096affb0686a46 Author: Bonnie Zhou <[email protected]> Date: Mon Nov 27 14:32:12 2017 -0800 chore: Publish commit 0ff2bcfb8268879c8b0a9b9f8d1e12957d16d62c Author: Dominic Carretto <[email protected]> Date: Mon Nov 27 14:26:55 2017 -0500 docs: Update README.md with Angular MDC framework (#1549) commit 8107b0817e73b542bc3b6bc2f4640fab4d39a19c Author: Bonnie Zhou <[email protected]> Date: Mon Nov 27 10:12:09 2017 -0800 chore(text-field): Split out helper text as a subelement (#1611) BREAKING CHANGE: Please update implementations of MDCTextFieldAdapter to implement the method getHelperTextFoundation. MDCTextFieldAdapter no longer implements addClassToHelperText, removeClassFromHelperText, helperTextHasClass, setHelperTextAttr, removeHelperTextAttr, and setHelperTextContent. See the README for mdc-textfield/helper-text for more information. commit de1effbb0fca2143d34bfd59c6c843343f075cae Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Nov 27 10:52:32 2017 -0500 docs(ripple): Document mobile Safari :active caveat (#1630) commit 875e39372a64a23b346c5def1fbe1092a4292c46 Author: Patrick RoDee <[email protected]> Date: Tue Nov 21 15:12:32 2017 -0800 feat(textfield): helperTextContent setter (#1569) BREAKING CHANGE: Adds adapter method to set helper text content. commit 67354d098660d2edcd4a451dfac0e471b04ea6ce Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Nov 21 13:53:46 2017 -0500 fix(list): Make bottom padding match top for dense lists (#1622) commit e9f077817476a5e5f22ce1f971c5b43c5775968d Author: Mats Pfeiffer <[email protected]> Date: Tue Nov 21 18:23:25 2017 +0100 docs: adding material-components-vue to frameworks (#1575) commit 584285e03fe237e81dbc3efc6086bb30d72a16cc Author: stasson <[email protected]> Date: Tue Nov 21 18:20:12 2017 +0100 docs: Add vue-mdc-adapter to frameworks integrations (#1552) commit bddd747a1ab3ba4950fbdb8fe66d52018ae2d00f Author: Patrick Roncagliolo <[email protected]> Date: Mon Nov 20 19:28:03 2017 +0100 fix(select): Don't scroll page when select's menu is open (#1500) Resolves #879. commit 476c81fc6c510a4db3086a39fc8a312918fb1221 Author: Anton Kachurin <[email protected]> Date: Mon Nov 20 10:39:47 2017 -0500 fix(slider): Properly handle arrow key events in IE (#1613) commit 39dd593aca8ee2ca62e2274a03f61ac474edb0c9 Author: Lynn Jepsen <[email protected]> Date: Fri Nov 17 16:16:34 2017 -0800 chore(drawer): Remove height property from scroll-lock class (#1612) commit dd45d1a1e10e508c2e8473033cbeb45bb6c0d8e1 Author: Lynn Jepsen <[email protected]> Date: Fri Nov 17 16:16:14 2017 -0800 chore(dialog): Remove height property from scroll-lock class (#1610) commit da3b8cf80886e18a54016a048dbdd38d7e30a36a Author: David Kretch <[email protected]> Date: Fri Nov 17 19:15:56 2017 -0500 docs: Fix typos in getting started and integrating frameworks docs (#1580) Fix a missing word in the getting started guide: "effect" in "a fairly subtle effect". Fix a typo in the integrating frameworks guide: "on our main README" to "in our main README". commit cd03a0e64ef665b37ef5c70b4e2ddaf7160a6307 Author: Toufic Batache <[email protected]> Date: Sat Nov 18 02:14:59 2017 +0200 fix(list): Add 8px bottom padding Resolves ##1488 commit 964a4192cc624a8e01f7594f3ee1bd994905c247 Author: Patrick Roncagliolo <[email protected]> Date: Thu Nov 16 18:19:25 2017 +0100 fix(select): Make CSS-only background transparent (#1499) commit b12c5769f1bd1cd44c59644009a004b74a075b70 Author: Lynn Jepsen <[email protected]> Date: Wed Nov 15 12:55:57 2017 -0800 chore(text-field): Splitting out bottom line as a sub element (#1585) BREAKING CHANGE: Please update implementations of MDCTextFieldAdapter to implement the methods registerBottomLineEventHandler, deregisterBottomLineEventHandler, and getBottomLineFoundation. See the README for mdc-textfield/bottom-line for more information. commit 874a17e596066732bff25000f099ba7fa931d0c8 Author: Lynn Jepsen <[email protected]> Date: Mon Nov 13 15:35:43 2017 -0800 fix(textfield): Should not be in both disabled and invalid state (#1568) commit 1a5acee2b012120db6ae26cf2cb20ec56b73a7e9 Author: Bonnie Zhou <[email protected]> Date: Mon Nov 13 13:50:30 2017 -0800 feat(text-field): rename helptext to helper text (#1576) BREAKING CHANGE: Instances of "helptext" in mdc-textfield/adapter.js has changed to "helperText", and users should update their implementations of the adapter. commit 8cca080d957d8d2db8e879e78bc6d0ccb473055a Author: Alex Sheehan <[email protected]> Date: Mon Nov 13 15:12:24 2017 -0500 docs: Update CHANGELOG.md commit 2834b633224b61d2df1c4fa4b98a92cfc67ef4a3 Author: Alex Sheehan <[email protected]> Date: Mon Nov 13 15:12:13 2017 -0500 chore: Publish commit 0ae3f9f8b0b57f7d5eff33dac3d20a56d87abb5e Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Nov 13 11:40:26 2017 -0500 chore: Fix changelog generation step in release process (#1583) commit 31d9d7b06f9d74474f8fdad7cbf4110c72cec601 Author: Andrew C. Dvorak <[email protected]> Date: Fri Nov 10 16:46:06 2017 -0800 feat(linear-progress): Add color theme mixins and remove `--accent` (#1541) BREAKING CHANGE: The `mdc-linear-progres--accent` modifier class has been removed. Use Sass color mixins instead. Resolves #1148 commit 28024e9eb7b233fb0a3a1142afb567141fecfe7d Author: Andrew C. Dvorak <[email protected]> Date: Fri Nov 10 15:37:43 2017 -0800 feat(slider): Add color theme mixins; default to secondary; remove `--off` (#1544) BREAKING CHANGE: The `mdc-slider--off` modifier class has been removed as it is being removed from the spec. Resolves #1151 commit 8093ad1d61608fb7f5e54e40af28d9dec19923ed Author: Bonnie Zhou <[email protected]> Date: Thu Nov 9 15:24:07 2017 -0800 feat(text-field): rename textfield to text-field (#1485) BREAKING CHANGE: CSS class name "mdc-textfield" is changed to "mdc-text-field", JS objects name "MDCTextfield" is changed to "MDCTextField", .scss file names "mdc-textfield.scss" is changed to "mdc-text-field.scss", global namespace "mdc.textfield" is changed to "mdc.textField". Note that the package name is unchanged. commit 93f2d5cf5470a00422561e0ea15de37ba2199063 Author: Joon Hyung <[email protected]> Date: Thu Nov 9 07:05:00 2017 -0800 fix(snackbar): Add padding between text and button (#1572) commit a8dcc590a052167cfc68d65ed8cd77e7898dcc86 Author: Brendan O'Brien <[email protected]> Date: Wed Nov 8 13:47:14 2017 -0800 feat(textfield): Convert some foundation methods from private to public (#1543) Also renames some newly public methods to be more semantic, and adds documentation for public methods. Resolves #1550 commit 626aa47757d17cab1272e49f47a3cd60b88e9426 Author: Lynn Jepsen <[email protected]> Date: Wed Nov 8 12:50:14 2017 -0800 chore: Fix lolex version (#1570) commit 57581edc4f643e39c0bcfffa95bab4ffde68b865 Author: Andrew C. Dvorak <[email protected]> Date: Mon Nov 6 11:06:22 2017 -0800 feat(theme): Add new tone mixins and deprecate old one (#1546) The old mixin name is confusing. It's also cumbersome to use if you just want to get the tone of a color directly, and you don't care about the text color that pairs with it. commit 5a777afcaaf62f3ce3e39a3c6c06cc4bffa935ca Author: Andrew C. Dvorak <[email protected]> Date: Mon Nov 6 11:01:16 2017 -0800 fix(slider): Don't hide focus ring on discrete sliders (#1545) The old behavior is not in the M1 or M2 specs. Even if it was, it's terrible for accessibility and is inconsistent with the continuous slider behavior. Resolves #1427 commit f579e0a67a4e49fa4948cd491f36c05c4423f62e Author: gline9 <[email protected]> Date: Fri Nov 3 16:19:10 2017 -0500 feat(theme): Allow overriding of text themes (#1481) commit 3b5f9a6f31b5c53f172267be34632984d50d1b86 Author: Lynn Jepsen <[email protected]> Date: Fri Nov 3 13:06:44 2017 -0700 chore: removing the rest of framework-examples (#1540) Resolves #983. We've added a recommended library for angular, and we will probably add one for vue soon. commit e02b4c9fa2bd026c695f3a71efce58d01f460269 Author: Andrew C. Dvorak <[email protected]> Date: Fri Nov 3 13:02:13 2017 -0700 feat(elevation): Update mixin to accept custom theme color (#1449) Resolves #1534  commit 97e5aa81b8b75ac00817d4686aa3c2371c3cd64a Author: Lynn Jepsen <[email protected]> Date: Fri Nov 3 10:19:49 2017 -0700 fix(button): Stroked buttons should change the padding of the button (#1538) commit b6de688862d8c3cdf0bf54c1b2c31dfa1cd445a4 Author: Lynn Jepsen <[email protected]> Date: Fri Nov 3 09:52:00 2017 -0700 chore: Remove framework-examples/react now that we have RMWC as a recommended library (#1532) commit e2354a765a336a9fa7723266e5fedcd1c5e41757 Author: Toufic Batache <[email protected]> Date: Fri Nov 3 18:14:29 2017 +0200 docs: Capitalize lines in GitHub issue template (#1515) commit 3519de5e3ba85fa66e44d3754265aa875262109e Author: Andrew C. Dvorak <[email protected]> Date: Thu Nov 2 21:32:23 2017 -0700 docs(ripple): Clarify Safari version 9 in caveats (#1409) commit 525d2ea52fc9e4e7a03614f50fa28aa0064f5ac2 Author: Toufic Batache <[email protected]> Date: Thu Nov 2 22:33:59 2017 +0200 docs(checkbox): Document console warning in IE (#1533) commit 0ba2c57a3cf1e6ffc93798823061da4f837c7fbd Author: gjdev <[email protected]> Date: Thu Nov 2 20:29:23 2017 +0100 docs: Add Blox Material to our list of recommended libraries commit e36735bdd9834e1a4ac728c05ee8f4f987b204c9 Author: lynnjepsen <[email protected]> Date: Thu Nov 2 12:21:43 2017 -0700 Revert "fix(checkbox): Close path tag to remove IE console error warnings" This reverts commit 1a82689a63116e9a34c1a6a4062dd294ea73a4e2. commit 1a82689a63116e9a34c1a6a4062dd294ea73a4e2 Author: Toufic Batache <[email protected]> Date: Thu Nov 2 19:54:12 2017 +0200 fix(checkbox): Close path tag to remove IE console error warnings Resolves #1504 commit 1aa3760e3943dc13f1c5ee5fcf198401fd3b11af Author: Patrick RoDee <[email protected]> Date: Thu Nov 2 10:51:18 2017 -0700 fix(dialog): fixed dark-theme dialog copy color (#1524) Resolves #1032 commit 5360cbdb3d9d6778133d00f2fd278afbe525e8d1 Author: Lynn Jepsen <[email protected]> Date: Thu Nov 2 10:48:30 2017 -0700 chore: Update standard-changelog to the latest version (#1525) commit 58827f532014dd20e793ae345a688e9a53d9b090 Author: James Friedman <[email protected]> Date: Thu Nov 2 13:40:58 2017 -0400 docs: Add React Material Web Components to our list of recommended wrapper libraries commit 0a5fec5eb59d09420a980d00a6ff86135cc514e2 Author: Lynn Jepsen <[email protected]> Date: Wed Nov 1 17:14:54 2017 -0700 perf(button): Remove extra CSS, now that ripple handles tap highlight color (#1520) commit fc2b098ec2ce1f4ebeee957c3d6fdcba779e08b5 Author: Lynn Jepsen <[email protected]> Date: Wed Nov 1 17:12:26 2017 -0700 chore(animation): Update closure annotations (#1519) commit 94b712ae6eeba83b022b6a9acbad96a3f8cec3af Author: Toufic Batache <[email protected]> Date: Thu Nov 2 02:08:21 2017 +0200 fix(menu): Menu opening animation shows scrollbar (#1513) Resolves #1387 commit bb568a84f641d4b143476506777cd60eebc0b9ab Author: Chinoms <[email protected]> Date: Thu Nov 2 00:49:33 2017 +0100 docs: Update grammar of our introduction documentation commit d610ab577b3bc579d7393cf1f9371aaa70dcab21 Author: greenkeeper[bot] <greenkeeper[bot]@users.noreply.github.com> Date: Wed Nov 1 16:41:41 2017 -0700 Update codecov to the latest version 🚀 (#1462) commit bcc5ec5cc6f5ea9f1ca58baf03f2741d06768658 Author: Kenneth G. Franqueiro <[email protected]> Date: Tue Oct 31 14:21:52 2017 -0400 fix(slider): Fix mobile Chrome by handling all "up" event types (#1484) commit 4ef842be2f1312a3fbf7e86f2a7a4f3457f9be5d Author: Nick McCurdy <[email protected]> Date: Tue Oct 31 10:32:52 2017 -0400 docs(toolbar): Fix grammar for mdc-toolbar modifiers (#1514) commit 6f49457e30ad248f36b3916ac7385dadcc8ea36d Author: lynnjepsen <[email protected]> Date: Mon Oct 30 12:24:17 2017 -0700 docs: Update CHANGELOG.md commit 7a5ba6d5ffbacdbc5922ab4d64a10ff209e3d936 Author: lynnjepsen <[email protected]> Date: Mon Oct 30 12:11:10 2017 -0700 chore: Publish commit cb732834ec918890d707f150c0dd7ada5107f5c8 Author: Toufic Batache <[email protected]> Date: Mon Oct 30 19:37:58 2017 +0200 fix(button): Revise button minimum width (#1487) commit dc8a65613b13cd7786e9c14fa9334c8e5d275a50 Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 30 13:18:32 2017 -0400 chore: Update eslint to 4.10 and fix lint error (#1508) commit 498fd267065a46f14e6e6803f6710d780dc6492a Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 30 12:50:39 2017 -0400 docs: Fix remaining broken links to developer docs (#1507) commit 8f98c7e24e6f9131aac2e461cdef934500e3ae74 Author: Patrick Roncagliolo <[email protected]> Date: Fri Oct 27 19:37:08 2017 +0200 docs(form-field): Fix global JS example (#1498) commit 47c6859ab444d6b01b2b9f721e99648f6467cc0f Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Oct 27 13:07:38 2017 -0400 feat(ripple): Remove old complex mixins (#1496) BREAKING CHANGE: The existing MDC Ripple Sass mixins mdc-ripple-base, mdc-ripple-fg, and mdc-ripple-bg have been removed, replaced by the new easier-to-use mixins mdc-ripple-surface, mdc-ripple-color, and mdc-ripple-radius. commit 253fba02cd82edfebc94a1199895b5c91624e290 Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Oct 27 10:07:06 2017 -0400 feat(tabs): Use new ripple mixins (#1492) commit b2a97eadfa7953e145e2403e087f5597649c4dd8 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 16:11:34 2017 -0400 docs(theme): Update theme/index.scss to use new ripple mixins (#1478) commit 94a826db49a53908bd8a05ff33484f14729c8c60 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 15:07:44 2017 -0400 feat(radio): Use new ripple mixins, and remove unnecessary mixin (#1476) BREAKING CHANGE: The mdc-radio-ripple mixin has been removed; use mdc-ripple-color directly. commit 0647576dd37d41ff90eb6cb86356b52ac2427bf0 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 14:28:52 2017 -0400 feat(list): Use new ripple mixins (#1475) commit cbc3e1c014a5097b307290ad5b5d6e6261eb373a Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 14:28:12 2017 -0400 feat(icon-toggle): Use new ripple mixins (#1474) commit fb798db6e79ae5b2664cd55ab2e987e077a10cc7 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 13:44:33 2017 -0400 feat(fab): Use new ripple mixins; remove unnecessary mixin/variable (#1473) BREAKING CHANGE: The mdc-fab-ripple mixin and $mdc-fab-light-ripple-config variable have been removed; use MDC Ripple's mdc-ripple-color mixin and opacity variables directly. commit 92b22eb165bb08d0c79d276bc96f43866bb6b7c9 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 13:42:39 2017 -0400 feat(checkbox): Use new ripple mixins, and remove unnecessary mixin (#1472) BREAKING CHANGE: The mdc-checkbox-ripple mixin has been removed; use mdc-ripple-color directly. commit 510f3567a33c23166b98aab89bf5375d4a7fd978 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 10:27:22 2017 -0400 feat(button): Use new ripple mixins, and remove unnecessary mixin (#1471) BREAKING CHANGE: The mdc-button-ripple mixin has been removed; use mdc-ripple-color directly. commit 756d8a670d7ece8342b3b78efa34e3ce8373fb6d Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 26 09:57:14 2017 -0400 fix(ripple): Avoid duplicating common styles (#1463) commit 231109edaf7c493cb1901b0dff6198840990d5e1 Author: Brendan O'Brien <[email protected]> Date: Wed Oct 25 15:51:14 2017 -0700 refactor(textfield): Add @license tags to mdc-textfield JS files for Closure Compiler. (#1486) commit 2a71ef7ed9d6d34f75d9a4a22c1cb7b52e975d83 Author: Kenneth G. Franqueiro <[email protected]> Date: Wed Oct 25 14:06:32 2017 -0400 feat(textfield): Use new ripple mixins and remove hover ripple styles (#1477) commit 375661d43309245bd02d49728ffd9fef060d7753 Author: Bonnie Zhou <[email protected]> Date: Wed Oct 25 09:41:46 2017 -0700 feat(theme): rename all color_palette instances (#1479) BREAKING CHANGE: _color_palette.scss has been renamed to _color-palette.scss in mdc-theme commit 924144bc64180bdc8dbe6629afef86aa19072bf2 Author: Kaartic Sivaraam <[email protected]> Date: Wed Oct 25 03:46:38 2017 +0530 fix(layout-grid): Import the variables in the mixin (#1232) commit 6f9b87fead123914e6ef089eccbc5aceb8394bd3 Author: pndewit <[email protected]> Date: Tue Oct 24 23:38:35 2017 +0200 docs(textfield): Remove unnecessary attributes (#1389) commit 70b13607296c7bcca8bf088745f9f9e0e2965e15 Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 23 17:57:34 2017 -0400 docs(dialog): Update README wording RE scrollable dialogs (#1465) commit 483e3d5e2d87e3b404f4b6ba04d067d2e48f7c7f Author: Alex Sheehan <[email protected]> Date: Mon Oct 23 15:47:07 2017 -0400 feat(textfield): Add mixin allowing customization of border radii (#1446) commit a983c01676e7b2a9b4aa743f722588ecb2019e4f Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 23 09:26:39 2017 -0400 feat(ripple): Add new simpler mixins and remove unused CSS vars (#1452) commit b4c4d7ba9579fbbdb221e5e3929d69a22f40c694 Author: Andrew C. Dvorak <[email protected]> Date: Fri Oct 20 10:51:19 2017 -0700 style(drawer): Fix stylelint errors in SCSS and change stylelint comments to `//` (#1447) - Fix preexisting `order/properties-order` errors in SCSS - Use `//`-style comments to enable/disable stylelint so that the comments don't get emitted in the CSS output commit dc6f21d05fcb61153354a2ee98e26f0c2790a32d Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Oct 20 11:07:09 2017 -0400 docs: Remove outdated plnkr link from getting-started (#1458) commit a9ba3fbc7a00d281dc035828a8e316794dcde8f1 Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Oct 20 09:54:09 2017 -0400 docs: Update text field markup to include bottom line element (#1454) commit 745597838c4a3f67dcbe0f894c2e1923b0d15052 Author: Robert <[email protected]> Date: Fri Oct 20 00:51:09 2017 +0200 fix(snackbar): Explicitly use border-box (#1453) commit 8a6e05797ddad2c771b09651d22a83ed8adae4de Author: Andrew C. Dvorak <[email protected]> Date: Thu Oct 19 15:49:07 2017 -0700 chore(theme): Add mdc-theme-prop-value function (#1450) This will unfortunately make search/replace of the `mdc-theme-prop` mixin more difficult, because the mixin name is now a prefix of the function name, but `mdc-theme-prop-value` feels like the most natural name for this function. commit 4708ee7ce7ba88b474ebaa1501c77adfc9f40d30 Author: Kenneth G. Franqueiro <[email protected]> Date: Thu Oct 19 15:31:05 2017 -0400 chore: Update release scripts and docs for lerna fixed mode (#1434) commit 801843ebeb4e43235d12dcb1716e9a7ce94f8fcf Author: Stephen Way <[email protected]> Date: Wed Oct 18 11:43:01 2017 -0700 Fixed mdc-drawer-toolbar-spacer align-items (#1390) `flex-center` isn't a valid align-items value, so I changed it to `center`. commit e4b4fa76f868930a7409d46a1267b39016d70982 Author: Andrew C. Dvorak <[email protected]> Date: Tue Oct 17 16:14:59 2017 -0700 feat(switch): Add color theme mixins and update default color to secondary (#1411) Resolves #1144 commit da9d48fafb88bdd95e433db884bcbdb41bd3a342 Author: Andrew C. Dvorak <[email protected]> Date: Tue Oct 17 16:00:53 2017 -0700 feat(radio): Add theme color mixins and update default color to secondary (#1410) Resolves #1149 commit de9b5a5ee29892ccc624961bd733a5a5ff969593 Author: Brendan O'Brien <[email protected]> Date: Tue Oct 17 11:51:49 2017 -0700 refactor(textfield): De-dupe two style rules. (#1423) Discovered two duplicate style rules in mdc-textfield SASS. Removed duplicates and performed minor cleanup, mainly moving some hardcoded values to SASS variables. This is a refactor and should produce no visual changes. commit f496581722370d5403458baf5ba43f7099d14426 Author: Amr Gaber <[email protected]> Date: Tue Oct 17 07:14:32 2017 -0700 feat(icon-toggle): Add public API for MDCRipple in icon-toggle (#1396) commit bb983c20e6385d40593daa55bc6f5fba6a116dd2 Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 16 17:22:58 2017 -0400 docs: Update CHANGELOG.md commit a9e7ef627f00bf81a96905ecbadd1b7a828b60ba Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 16 17:02:09 2017 -0400 chore: Publish commit 10940b0adb277420be3c14da7ddd4c3b9b5cbdf2 Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 16 16:24:00 2017 -0400 chore: Switch lerna to fixed mode (#1432) commit 928d6b4d4484557f84ec7f46fead9065cc9af886 Author: Kenneth G. Franqueiro <[email protected]> Date: Mon Oct 16 16:01:40 2017 -0400 fix(slider): Deregister correct handlers on destroy (#1431) commit b77895b82850872ba2acdac94f8807c09adc50f3 Author: Kenneth G. Franqueiro <[email protected]> Date: Fri Oct 13 19:27:02 2017 -0400 fix(menu): Add pointer-events: none to avoid blocking click events (#1421) commit 2327860695abbf205d998a1d2f26b6902e2db676 Author: Yiran Mao <[email protected]> Date: Fri Oct 13 19:23:19 2017 -0400 docs(layout-grid): Update README to match best practices (#1424) commit 891e9625205d66c0973d3d7af18c219301a2ef71 Author: aprigogin <[email protected]> Date: Fri Oct 13 12:33:22 2017 -0700 feat(ripple): Add optional event parameters to activate/deactivate methods commit 36577ab7a3236553769a6aa3766213e44847ecf6 Author: Thanik Bhongbhibhat <[email protected]> Date: Thu Oct 12 11:24:00 2017 -0700 fix(toolbar): update menu-icon className (#992) (#1373) update menu-icon className from `.mdc-toolbar__icon--menu` to `.mdc-toolbar__menu-icon` in demos and docs BREAKING CHANGE: Please update `mdc-toolbar__icon--menu` to `mdc-toolbar__menu-icon`
No description provided.