Skip to content

md-tab-group tabs should be able to contain scroll-able components #3153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
sherwopj opened this issue Feb 17, 2017 · 4 comments · Fixed by #3162
Closed

md-tab-group tabs should be able to contain scroll-able components #3153

sherwopj opened this issue Feb 17, 2017 · 4 comments · Fixed by #3162
Assignees
@andrewseguin
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@sherwopj
Copy link

sherwopj commented Feb 17, 2017 •
edited
Loading

Bug, feature request, or proposal:

Bug/Feature Request

What is the expected behavior?

Elements within an md-tab of an md-tab-group should be independently scroll-able. nav tabs (md-tab-nav-bar) do allow independently scroll-able contents

What is the current behavior?

scroll is only possible for the whole tab

What are the steps to reproduce?

http://plnkr.co/edit/h67A8ZSeH747E3oYKdv5?p=preview

What is the use-case or motivation for changing an existing behavior?

A tab could fill screen real estate but contain multiple lists of data. It would be useful to be able to freeze a list header (containing a search input say) and allow the rest of the list to be scrollable.

Which versions of Angular, Material, OS, browsers are affected?

@angular/cli: 1.0.0-beta.31
node: 7.2.0
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/compiler-cli: 2.4.7
@angular/core: 2.4.7
@angular/flex-layout: 2.0.0-beta.5
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31

Is there anything else we should know?

Like your work :)
@andrewseguin andrewseguin mentioned this issue Feb 17, 2017
Merged
@andrewseguin
Copy link
Contributor

Changed height to 100% for the content so that you can match it with your elements. Let me know if this is what you are expecting:

http://plnkr.co/edit/vccsJWQmy7nOVvXtIpNO?p=preview

@kara kara added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Feb 17, 2017
@sherwopj
Copy link
Author

Thanks for looking into it old bean. How on earth did you discover that:

.mat-tab-body-content { height: 100%; }

would do the trick? Chrome devtools? Inspecting, snooping, inferring?

Is this solution a workaround?

Cheers

@andrewseguin
Copy link
Contributor

Lots of experience in dealing with height issues :) I used Chrome devtools to see that the mat-tab-body-content element was not fixing its height to the height of its parent, which means its children will not be able to infer anything about the tab height.

kara pushed a commit that referenced this issue Feb 27, 2017
@andrewseguin @kara
fix(tabs): set tab body content to 100% (#3162)
cbd1ff9 
Fixes #3153
pacjin79 added a commit to pacjin79/material2 that referenced this issue Apr 16, 2017
@pacjin79
sync from upstream (#1)
ac476e4 
* fix(tabs): remove body and header from compatibility (angular#3168)

* feat(ripple): expose ripple directive in template (angular#3165)

* When programmatically calling `launch` on the ripple element the developer can specifiy a configuration object.
  Since the `launch` method is part of the directive and all the associated `@Input`s. The given configuration should be used as default.

 * Exposes the ripple component instance to the Angular template.

* feat(select): add floatingPlaceholder option (angular#2571)

Adds the `floatingPlaceholder` option that can be used to disable the floating placeholders.

Fixes angular#2569.
Fixes angular#2963.

* feat(screenshot): Add a gulp to compare screenshot diffs, upload results to gcs & firebase (angular#2774)

* Add google cloud storage

* Add screenshots to e2e test

* Renamed functions. Add types. Remove firebase, use firebase-admin

* dependencies

* Save pull request sha to firebase db

* Save travis job id

* Add function to update github commit status

* remove update status code

* Add update status

* Address comments

* Add fs-extra

* try using ES6 Promise

* .

* Fix cannot find name promise

* Add back function to save filenames to firebase

* Update comments

* feat(snack-bar): add `dismiss` method to `MdSnackBar` service (angular#3069)

Adds a `dismiss` method to the snack bar service, which dismisses the currently-open instance, mostly for convenience since the spec only allows one snack bar to open at a time.

* Make slide toggle e2e test take screenshots when ripple disappeared (angular#3171)

* chore: update status of components, high level tasks (angular#3177)

* docs(dialog): change then to subscribe (angular#3186)

Change the docs to align with the returned observable

* fix(tooltip): avoid capturing the initial tap on mobile (angular#2423)

Currently the tooltip always binds the mouseenter and mouseleave events, however this can cause the click handlers on the tooltip host not to be fired on the first tap. These changes switch to binding the events only on devices that have touch events.

Fixes angular#2326.

* feat(button-toggle): Add a focus overlay for button-toggle (angular#3119)

* Add a focus overlay for button-toggle

* Use FocusOriginMonitor

* .

* Fix test

* Add 0.12 opacity white and black.

* Add dark-overlay

* Fix icon not found (angular#3129)

* add throw operator

* log error message instead of object

* fix(pseudo-checkbox): alignment issue and border color (angular#3144)

* fix(pseudo-checkbox): alignment issue and border color

* Fixes an alignment issue with the pseudo checkboxes. Most likely caused by the `mat-` prefix changes or a faulty conflict resolution.
* Fixes pseudo checkboxes not using the proper border color from the theme.
* Adds the pseudo checkboxes to the checkbox demo for easier testing.

* fix: address PR feedback

* fix(button): square ripple in compatibility mode (angular#3167)

* Fixes the ripple not being clipped in compatibility mode. The issue was due to the check not including the `mat-` selectors.
* Reduces the amount of DOM manipulation done by the button.

Fixes angular#3164.

* refactor(autocomplete): merge optionSelections into single observable (angular#3212)

Merges the `optionSelections` into a single observable, in order to make it easier to consume.

Fixes angular#3205.

* feat(dialog): add enter/exit animations (angular#2825)

* Adds enter/exit animations to the dialog.
* Refactors the `MdDialogContainer` and `MdDialogRef` to accommodate the animations.
* Fixes some test failures due to the animations.
* Allows for the backdrop to be detached before the rest of the overlay, in order to allow for it to be transitioned in parallel.

Fixes angular#2665.

* test(e2e): Fix e2e flakes by setting default window size (angular#3234)

* .

* Try to make screenshot image size same as before

* change back to 1024 x 768

* chore: add button to toggle theme in demo-app (angular#3093)

* update: add button to toggle theme in demo-app

* Adds a button to the demo-app toolbar that allows developers to quickly change between dark and light Material themes.
  This is very useful when building new components or just when confirming that all components work with dark themes.

* Improve list-demo in dark-theme

* Fix stylelint

* Address comments

* docs: Update theming-your-components.md (angular#3218)

* fix(checkbox): create ripple on label mousedown (angular#3206)

* Now triggers the ripple on label mousedown (similar as to slide-toggle and radio)
* Only sets cursor for underlying `label` element (similar as for native checkbox inputs)
* Adds a test that confirms that ripples work for checkbox

Fixes angular#3030

* feat(slide-toggle): add option to disable ripple (angular#3195)

* Adds an option to disable ripples for slide-toggle elements. Similar as for buttons, checkbox and other components.

* fix(connected-position): error if none of the initial positions fit in viewport (angular#3189)

Fixes an error in the `recalculateLastPosition` method that gets thrown if none of the element's positions fit inside the viewport.
These changes default to the first preferred position, if there was no previously-matched position.

Relates angular#3183.

* fix(button-toggle): only show focus style when focused via keyboard (angular#3232)

* Use a lighter color for focused layer in button-toggle

* .

* Only show focus layer when keyboard focus

* fix(autocomplete): prevent opening on load in IE (angular#3190)

Prevents the autocomplete being opened on load in IE. This was due to a bug where IE fires the `input` event on `load`, `focus` and `blur`, if the input element has a placeholder.

Fixes angular#3183.

* Revert "update: add button to toggle theme in demo-app" (angular#3271)

* fix(compatibility): remove ink bar from compatibility check (angular#3267)

* docs(list): use md-list-icon in example code (angular#3284)

Fixes angular#3217

* chore(autocomplete): removed un-used "this" from html bindings (angular#3278)

* feat(autocomplete): support static placeholders (angular#3115)

* feat(overlay): allow theming overlay-based components (angular#2967)

Fixes angular#2662.

* fix(tabs): missing mat class on tab group (angular#3038)

* fix(slide-toggle): ripple fade-in too slow (angular#3170)

* fix(menu): incorrect text alignment in IE/Edge (angular#3268)

Fixes angular#3254.

* fix(autocomplete): fix key manager instantiation (angular#3274)

* fix(connected-overlay): direction not being updated (angular#3293)

Fixes angular#3241.

* test(): add testing utilities for components (angular#2943)

Closes angular#2902

* fix(tabs): set tab body content to 100% (angular#3162)

Fixes angular#3153

* fix(toolbar): incorrect height for soft-keyboards (angular#3312)

Fixes angular#3233

* docs(autocomplete): copy over autocomplete example (angular#3340)

* chore: fix autocomplete folder (angular#3344)

* fix(docs): only rewrite relative links (angular#3339)

Fixes angular#3147

* docs(dialog): Add note about AOT compilation. (angular#3272)

Fixes angular#2686.

* fix(select): animation jump in Chrome and blurry text in IE (angular#3328)

Fixes angular#3327.
Fixes angular#1953.

* fix(slide-toggle): occasional element jumping (angular#3311)

* feat(ripple): add option for persistent ripples (angular#3315)

Closes angular#3169

* fix(tabs): remove flex; bring ink into same parent as links (angular#3331)

* build: make app tasks optional (angular#3361)

* build: fix dgeni warning for component-groups (angular#3362)

* fix(input): remove jitter that occurs on focus (angular#3343)

* fix(checkbox): switch checkbox behaviors for click and change events (angular#3146)

* feat(screenshot): Update screenshot golds for merged PR (angular#3365)

* fix(input): fix chrome autofill style (angular#3366)

* refactor(focus-trap): convert to directive (angular#3184)

* chore: update default plunker link

* fix(sidenav): throw error when sidenav has 2 sidenavs on the same side at the same time (angular#3369)

* test(): cleanup screenshot files in e2e-app (angular#3367)

* fix(focus-trap): enabled property not being coerced (angular#3417)

* docs(autocomplete): fix a11y of autocomplete example

* docs(autocomplete): add guidance about filter criteria

* fix(ripple): fade-out-all should hide all ripples (angular#3400)

* fix(checkbox): show checkbox animation only if user click or indeterminate state (angular#3137)

Fixes angular#2783

* feat(checkbox): add value attribute to md-checkbox (angular#2701)

Fixes angular#2583

* fix(radio): add focus indication (angular#3402)

Fixes angular#3102

* fix(autocomplete): remove max width for autocomplete panel (angular#3297)

Fixes angular#3198

* fix(button-toggle): fix color for selected button toggle and selected disabled button toggle (angular#3418)

Fixes angular#3382

* fix(input): make icons in prefix/suffix the right size (angular#3342)

* refactor(focus-origin-monitor): complete stream when stopping monitor (angular#3404)

* docs(dialog): update dialog afterClosed (angular#3411)

* docs(progress-spinner): fix typo in progress spinner example (angular#3299)

Fixes angular#3148

* fix(checkbox): add focus indication (angular#3403)

Fixes angular#3102

* feat(ripple): add way to globally disable ripples (angular#3383)

* refactor: consistent module declaration (angular#3095)

* fix(focus-trap): avoid closure compiler issues when adding anchors (angular#3448)

* chore(menu): switch menu-item to common coercion logic (angular#3065)

* `MdMenuItem` to use the common coercion logic when determining the disabled state.
* Gets rid of the `@HostBinding` in favor of passing them through the `host` option.

Relates to angular#2985.

* fix(list-key-manager): exception when no initial active item (angular#3431)

* fix(list-key-manager): exception when no initial active item

Fixes an exception that is thrown when the user presses a key on ListKeyManager that doesn't have a default active item. The problem was due to the fact that we have a check for `null` a little bit down, that handles cases like this, however the active index is `undefined` by default.

Fixes angular#3317.

* fix: it it

* fix(focus-trap): exception when element contains SVG on IE (angular#3432)

Fixes an exception being thrown by the focus trap, if it contains an SVG element on IE. The problem was that on IE, SVG elements don't have the `children` property, which means that we have to fall back to `childNodes`.

Fixes angular#3410.

* fix(select): initial value not being displayed with FormControl and OnPush (angular#3434)

* fix(select): initial value not being displayed with FormControl and OnPush

Fixes the initial value not being displayed in a select that has a `FormControl` and is placed in a component with `ChangeDetectionStrategy.onPush`.

Relates to angular#2269 (comment).

* chore: remove unused properties

* build: run tslint on tool files (angular#3436)

* Since we had a lot of TSLint issues on our tooling scripts & tasks, we should run TSLint on those as well.
* Also updates Dgeni to latest version, because it now supports TypeScript typings.

* build: upgrade dev dependencies (angular#3440)

* Upgrades outdated devDependencies to the latest version.

* perf(scroll-dispatcher): lazily subscribe to global events (angular#3270)

* perf(scroll-dispatcher): lazily subscribe to global events

Switches the `ScrollDispatcher` to only subscribe to `scroll` and `resize` events if there any registered callbacks. Also unsubscribes once there are no more callbacks.

Fixes angular#3237.

* refactor: account for the `scrolled` subscriptions when adding the global listeners

* fix: wrong value being passed in

* fix: don't add global listener for scrollables

* build: upload coverage to firebase (angular#3435)

* Introduces a gulp task that will run on Travis Push builds and will upload coverage results to a Firebase database.

Closes angular#128.

* fix(ripple): rename selector for the ripple (angular#3482)

* docs(autocomplete): fix code snippet (angular#3509)

* docs(tabs): make non-exported comps as docs private (angular#3510)

* docs(card): remove internal classes from docs (angular#3511)

* chore(): remove TODO from menu trigger desc (angular#3512)

* docs(button): mark classes to exclude from docs (angular#3513)

* Add doc for MdCheckboxChange (angular#3514)

Add doc for MdButtonToggleChange

* chore(menu): update menu position attributes to be camelCase (angular#3515)

* docs(slider): clean up docs (angular#3516)

* clean up slider docs

* add descriptions to MdSliderChange properties

* docs(select): add docs for static placeholder (angular#3519)

* docs(grid-list): improve basic grid-list example (angular#3520)

* clean up button toggle docs (angular#3521)

* feat(select): add multiple selection mode (angular#2722)

* * Integrates the `SelectionModel` into `md-select`.
* Adds the `multiple` option which allows users to select multiple options from a `md-select`.
* Fixes a button that wasn't being cleaned up from dialog tests, causing some select tests to fail.

Fixes angular#2412.

* fix: remove array literal from template

* fix: avoid issues with material in compatibility mode

* fix: test failure in IE

* fix: checkbox always being rendered inside option

* fix(button): use FocusOriginMonitor for focus styles (angular#3294)

* use FocusOriginMonitor for md-button focus styles

* format imports

* fix tests

* export style module

* remove style module import in test

* don't re-export StylModule

* clean up imports

* add back stopImmediatePropagation

* fix(menu,tooltip): Ensure subscription exists before unsubscribing. (angular#3078)

* fix(menu): not emitting close event when closing via the backdrop (angular#3300)

* fix(menu): not emitting close event when closing via the backdrop

* Fixes the menu not emitting the `close` event if it is closed by clicking on the backdrop.
* Adds missing test coverage for the `close` event in general.

Fixes angular#3295.

* fix: restore method prefix

* chore: publish docs content under angular org (angular#3508)

* class alias tags in html generated from markdown (angular#3525)

* class alias tags in html generated from markdown

* addressed comments

* address comments

* stop screenshot (angular#3506)

* fix(tab-nav): add constructor back for ripple (angular#3537)

* style(progress): added transition to color change (angular#3116)

* fix(chips): Fix adding new chips on demo page (angular#3426)

* Adding colon for consistency. (angular#3248)

* fix(card): removed header height (angular#3450)

- long titles was overlapping content cause of the height that was applied on the header

fixes angular#3288

* feat(ripple): support for global ripple options (angular#3463)

* feat(ripple): add option to change global speedFactor

* Refactors the `MD_DISABLE_RIPPLES` token to a configuration object, that can also include options like a global `baseSpeedFactor`.

* Fix Angular issue

* fix(select): unable to set a tabindex (angular#3479)

* fix(select): unable to set a tabindex

Fixes users not being able to override the `tabIndex` on `md-select`.

Fixes angular#3474.

* fix: allow use of `tabindex`

* build: fix karma console log (angular#3484)

Karma recently introduced a breaking change, that **hasn't** been noted (karma-runner/karma#2582).

Karma doesn't show any `console.log` calls anymore, because the priority order of the `LogLevel`'s has been changed. The default log leve for the `browserConsoleLog` does no longer include the `LOG` log-level.

* fix(input): make all icons in input containers the correct size (angular#3489)

* fix(input): make all icons in input containers the correct size

* docs(input): add icon prefix/suffix example

* docs: remove mat stylers from docs (angular#3517)

* docs: remove mat stylers from docs

* add one more

* docs(getting-started): revise docs (angular#3523)

* docs(getting-started): revise docs

* minor changes

* clean up radio docs (angular#3524)

* fix(autocomplete): "undefined" being displayed on empty control with ngModel (angular#3535)

* fix(autocomplete): "undefined" being displayed on empty control with ngModel

Fixes "undefined" being displayed as the autocomplete input's value, if the value is undefined and the input uses `ngModel`.

Fixes angular#3529.

* const

* fix: coverage issue with saucelabs (angular#3540)

* Saucelabs seems to have issues with Edge and the `karma-coverage` plugin.

* Running on Browserstack seems to be work without any flakiness and also makes the build faster (runs less browsers than on saucelabs)

* fix(autocomplete): fix down arrow use with ngIf (angular#3493)

* fix(tab): use MD_RIPPLE_GLOBAL_OPTIONS in tab (angular#3553)

* use MD_RIIPLE_GLOBAL_OPTIONS in tab

* .

* chore(tools/gulp): add html minifying task to generated docs (angular#3476)

* fix(slider): unable to reset tickInterval after it has been set (angular#3488)

Fixes user not being allowed to reset the `tickInterval` after it has been set to a valid value.

Fixes angular#3452.

* fix(tabs): change color for disabled tab label (angular#3483)

Fixes angular#3481

* feat(slider): differentiate sliders focused via keyboard vs other means (angular#3487)

* fix(autocomplete): aria-expanded should be updated when panel hides (angular#3494)

* fix(autocomplete): aria-expanded should be updated when panel hides

* address comments

* fix(input): label animation shifting sibling labels (angular#3568)

Prevents the focused animation in inputs from causing sibling inputs to shift slightly.

Fixes angular#3541.

* fix(input): overflow-y scrollbar is displayed (IE) (angular#3571)

y-scrollbar is displayed when placeholder text line-height is bigger than md-input-placeholder height (on IE browser)

fixes angular#3570

* build: replace forbidden-identifiers with tslint (angular#3579)

* Replaces the big `forbidden-identifiers` script with TSLint rules.

Closes angular#2175

* bug(md-slide-toggle): slide toggle should fit to it's content width (angular#3231)

* bug(md-slide-toggle): slide toggle should fit to it's content width

Fixes angular#3230

* md-slide-toggle: show each slide toggle on it's own row on demo-app

* fix to slide toggle css (demo)

* bug(md-select): change the arrow position to absolute (angular#3580)

Fixes angular#3112

* Revert "bug(md-select): change the arrow position to absolute (angular#3580)" (angular#3598)

This reverts commit 19c19c0.

* build: create a util directory (angular#3558)

* Introduces a new directory called `util` in the gulp setup. This should make the gulp setup more clear and maintainable.
* The utility `task_helpers` no longer includes random utilities like for Firebase. Those have been moved to their own util file (similar as in `e2e/`)
* Refactors the Github Status utility because it can be useful for other things as well (e.g upcoming coverage, payload)

* fix(slide-toggle): invalid change events with no new value (angular#3555)

Currently the slide-toggle will always emit a change event on dragend.
This is not always correct, because the `checked` value only changes if 50% of the distance have been dragged.

Fixes angular#3526

* fix(autocomplete): update overlay ref width on menu trigger (angular#3573)

* fix(autocomplete): update overlay ref width on menu trigger

when changing the width of the `host` (or using flex box) the `div.cdk-overlay-pane` kept the width of the host when it was first created

* chore(autocomplete): add pane width unit test

* chore(): parse and round width since firefox and edge return a decimal width

* chore(): update comment to make it more understandable

* fix(package.json): Fix failing `npm run api` command (angular#3462)

api script was running the incorrect gulp command.

* build: include license in docs-content (angular#3557)

* Now includes the `LICENSE` file in the `material2-docs-content` repository. Similar as for `material2-builds`.

* feat(list): add ripples to list items that are links (angular#930)

* feat(list): add ripples to list items that are links

* Add MdRippleModule to imports

* docs: Update README.md - add tree to feature status list (angular#3564)

add tree to feature status list

* build: show inherited members in dgeni (angular#3599)

* build: show inherited members in dgeni

* Introduced a new Dgeni processor that will take care of the inherited docs for TypeScript classes.
* Cleaned up the categorizer processor and made it compatible with the `inherited-docs` processor.
* Fixes that the `docs-private-filter` processor doesn't filter the referenced members in the class docs.

This basically allows us to extend other classes in our components like in angular#3036

* Handle private-docs param for all docs.

* Address comments

* Address feedback

* fix(dialog): leaking component instance references (angular#2875)

Fixes a memory leak in the dialog, which was causing it to keep references to the user's instantiated dialog in memory forever. It was due to:
1. The portal class wasn't invoking the cleanup function if it didn't have attached content.
2. The dialog ref was keeping the reference after the dialog is closed. There is also a leak related to dialog refs which will be addressed separately.

Fixes angular#2734.

* fix(interactivity-checker): cast node name to lowercase for isInputElement function (angular#3281)

* build: replace gulp-autoprefixer (angular#3563)

* build: replace gulp-autoprefixer

* Removes `gulp-autoprefixer` in order to avoid issues with Google's internal build system.
* Switches to adding vendor prefixes via SCSS mixins.
* Adds a custom Stylelint plugin that utilizies Autoprefixer to find unprefixed properties, values, @rules etc.

Fixes angular#3536.

* fix: missing import

* fix: address feedback

* feat(tooltip): allow tooltip be disabled (angular#3578)

* feat(tooltip): allow tooltip be disabled

* hide if disabled while shown

* bug(button): remove dotted border on firefox (angular#3583)

Fixes angular#3582

* build(tslint): disallow var keyword (angular#3625)

* Disallows the var-keyboard in the source files. `var` mostly causes issues with variables, and can be safely replaced with `let`.

* build: ship esm bundle (angular#3443)

* build: ship esm bundle

* Now ships a Flat / ESM bundle (similar as for Angular 4+ releases)
* In future PRs we will remove the single ES-files and can just link to the ES bundle (as in angular/angular).

* Use template strings for diagnostic

* fix(button): persist theme color of button when leaving hover state (angular#3629)

For all buttons that need the focus overlay to be visible on on focus, that is already covered in `_button-base.scss`.

For flat or icon buttons that need the focus overlay to be visible on hover, that is already covered in `button.scss`.

All disabled buttons should always hide the focus overlay.

* build(components): update TypeScript ScriptTarget option (angular#3663)

The ScriptTarget `ES6` does not exist in newer versions of TypeScript and is instead `ES2015`

* build: update saucelabs tunnel binary (angular#3658)

* Updates the Saucelabs Tunnel connector to the latest version (4.4.5)

* build: include scss files in releases (angular#3661)

* Includes the SCSS files in releases. This has been accidentally disabled in PR angular#3443

* build: don't run karma if typescript compilation fails (angular#3668)

* chore: remove dom projection service (angular#3656)

Gets rid of the `DomProjection` service which isn't being used anymore.

Fixes angular#3649.

* fix(core): log warning if doctype is missing (angular#2849)

Logs a warning if the user's document doesn't have a doctype. This has been an issue in the past with some hard-to-track-down bugs which ended up being due to the browser running in quirks mode.

Fixes angular#2351.

* fix(portal-host): unable to clear and portal reference not being set (angular#3302)

* Fixes not being able to clear an attached `PortalHost` by setting its contents to `null`.
* Fixes the `portal` reference not being set, if the portal host gets populated programmatically.
* Clears references to the attached portal on destroy.
* Switches to calling the inherited methods via `super`, instead of `this`, making it easier to spot which ones are inherited.

* chore: export ripple timing constants (angular#3650)

Exports RIPPLE_FADE_IN_DURATION  and RIPPLE_FADE_OUT_DURATION so that they can be used by users with `fakeAsync` in unit tests

* feat: angular 4 compatibility (angular#3608)

* Bumps the required Angular version to 4 and TypeScript to 2.1.6.
* Fixes deprecation warnings for `<template>` usages.
* Fixes any unit and e2e test failures.
* Includes the new animations module and switches any components that use animations to it.
* Fixes issues with the various test apps.

Fixes angular#3357.
Fixes angular#3336.
FIxes angular#3301.

* chore: bump to angular 4 final (angular#3752)

Bumps the version to Angular 4 final. The release is pretty safe and shouldn't need any code changes.

* build: update packaging to match angular/angular (angular#3751)

* build: restructure release output

* build: inline metadata.json resources

* build: output re-export meatadata.json file in package root

* build: fix build artifacts (angular#3771)

* The distribution folder structure has changed, and the path `dist/@angular/material` is no longer valid.

* build: package theming files into release output (angular#3776)

* test(screenshot): enable screenshot tests w/ Firebase Functions and JWT (angular#3628)

Set up firebase functions to copy valid data to firebase storage/database
Use JasonWebToken to validate data written to firebase
Github Status change will be done in another PR
Result at: https://material2-screenshots.firebaseapp.com/3628

* fix(autocomplete): not showing panel on first focus in certain cases (angular#3775)

Fixes a case where the first time an autocomplete is focused by clicking within its input container (note not directly on the input), the panel is invisible, because its `showPanel` flag hasn't been set yet.

Relates to angular#3722.

* perf(scroll-dispatcher): avoid triggering change detection on scroll (angular#3687)

* Avoids triggering change detection when listening to global scroll events in the `ScrollDispatcher`.
* Avoids triggering change detection when scrolling inside of `Scrollable` instances.
* Switches a `ScrollDispatcher` test to use spies, instead of toggling booleans.

* fix(input): don't animate label when value is set programmatically (angular#3691)

* fix(input): make sure injected NgControl belongs to the input (angular#3700)

* fix(select): show focus indicator even with validation errors (angular#3743)

Fixes angular#3742

* style(button): polished icon buttons ripples (angular#3208)

- changed Icon button ripples to start from the center and removed hover style on icon buttons

* feat(input): add directive for displaying error messages (angular#3560)

* feat(input): add directive for displayed error messages

Adds the `md-error` directive that can be utilised to display validation errors to the user. Example:

```
<md-input-container>
  <input mdInput placeholder="email" [formControl]="emailFormControl">
  <md-error *ngIf="emailFormControl.errors.required">This field is required</md-error>
  <md-error *ngIf="emailFormControl.errors.pattern">
    Please enter a valid email address
  </md-error>
</md-input-container>
```

The `md-input-container` behavior is as follows:
* If there is an error and the user interacted with the input, the errors will be shown.
* If there is an error and the user submitted the a form that wraps the input, the errors will be shown.
* If there are errors to be shown on an input container that has `md-hint`-s, the hints will be hidden.
* If an input with hints and errors becomes valid, the hint won't be displayed anymore.

**Note:** At the moment, all hints will be hidden when an error is shown. This might not be intended for some cases (e.g. with a character counter). It might make sense to only hide the one in the `start` slot, but this could be addressed separately.

* chore: lint and aot errors

* fix: address feedback

* fix: address more feedback

* chore: use FormGroup properly

* refactor: switch back to showing hints when valid

* errror

* fix(overlay): ensure proper stacking order when attaching (angular#3581)

Fixes a case where the order of overlays can be invalid if one overlay is detached, while another is destroyed. Next time both of them are open, the one that was disposed will end up beneath the freshly-created one, no matter the order of attachment. This PR adds some logic that will ensure that all each newly-opened overlay will be at the top of the stacking order.

Fixes angular#3574.

* add exportAs to focusTrap directive (angular#3688)

* fix(input): fix blank aria-describedBy (angular#3713)

* fix(input): baseline alignment on textarea (angular#3714)

* fix(input): baseline alignment on textarea

* add mdTextareaAutosize to baseline demo

* fix(input): change dividerColor to color (angular#3726)

* fix(input): change dividerColor to color

* change over docs and demo usages

* fix(checkbox): focus origin for focus method (angular#3763)

* Currently when developers call the `focus` method on the checkbox, the checkbox focuses via keyboard. This makes the focus-classes of the `FocusOriginMonitor` invalid.
* To be consistent with native input controls, the focus indicator should also show for programmatic focus.

* fix(select): allow custom aria-label (angular#3765)

* fix(select): allow custom aria-label

* Adds support for custom `aria-label` attributes on the select host element.
* Also fixes that the `aria-labelledby` attribute is overwritten by the placeholder `aria-label`.

Fixes angular#3762.

* Fix typos

* fix(progress-spinner): not redrawing when changing modes (angular#3672)

* Fixes the progress spinner not redrawing when the mode is changed dynamically from `indeterminate` to `determinate`.
* Some minor cleanup in the progress spinner.

Fixes angular#3648.

* bug(autocomplete): deselect the other options when the user select an option (angular#3690)

* bug(autocomplete): deselect the other options when the user select one from the autocomplete

Fixes angular#3689

* bug(autocomplete): only call deselect on the previous selected option. Unit tests.

* fix(scroll-dispatcher): unable to unsubscribe from global listener (angular#3729)

Fixes not being able to unsubscribe from the global `scrolled` listener.

* chore(progress-spinner): remove md-progress-circle alias (angular#3735)

Removes the deprecated `md-progress-circle` alias.

* feat(slider): add theme color support (angular#3766)

* fix(list): add font-family style to subheader (angular#3056)

* fix(slide-toggle): remove host element margin (angular#3761)

* Angular Material components should not have any outer-margin on component host elements. Similar as for the checkbox component.

* fix(dialog): delay focus until animation is done (angular#3774)

Delays focusing the first tabbable element in a dialog until animation is done. This prevents issues where other components (e.g. autocomplete) may have a wrong position on load, because they measured dialog while it was animating.

Note on lack of tests: This is kind of hard to test, because we don't have much control over how the animations runs.

Fixes angular#3722.

* build: run closure-compiler (angular#3789)

* build: run closure-compiler

* Adds a script that runs the closure-compiler against the devapp / demo-app.
* The script will run on the CI as a new mode. Ensuring that all our components are closure-compatible.

Fixes angular#1206.

* Address feedback

* build: tsconfig for editor warnings (angular#3791)

* build: tsconfig for editor warnings

Currently when using a code editor that uses the TypeScript language service (Webstorm / VS Code / Atom / Sublime) there will be TypeScript errors in the `.spec` files.

This is because the editor finds the `tsconfig.json` file that doesn't match the spec files. Therefore it complains about the `experimentalDecorators`.

In `angular/angular` there is a global `tsconfig` file that matches everything and is therefore fixing the editor warnings. This file is also used to compile all `.spec` files for the whole project.

We can add such a `tsconfig.json` file as well, and in the future we can use it for compiling the specs as well.

* Add docs for tsconfig files

* build: fix serve task (angular#3794)

* build: fix serve task

* Currently when serving the dev-app or e2e-app and chanages are recognized, the library task will run. This task clears the whole `dist/` and rebuilds then.

* This is problematic because sometimes only the library will be rebuilt and for example the `dev-app` won't be rebuilt. After the task ran, the `dev-app` is removed and the serve task will crash.

* Rename to library:clean-build

* fix(dialog): leaking MdDialogContainer references (angular#2944)

* fix(dialog): leaking MdDialogContainer references

Fixes an issue that caused the `MdDialogContainer` references to not be cleaned up, and as a result, any of the `MdDialogRef` and `MdDialogConfig` instances as well. The issue seems to come from the fact that a couple of blocks that look like:
```
this._ngZone.onMicrotaskEmpty.first().subscribe(() => {
  this._elementFocusedBeforeDialogWasOpened = document.activeElement;
  this._focusTrap.focusFirstTabbableElement();
});
```

End up being transpiled to:
```
var _this = this;
this._ngZone.onMicrotaskEmpty.first().subscribe(function () {
    _this._elementFocusedBeforeDialogWasOpened = document.activeElement;
    _this._focusTrap.focusFirstTabbableElement();
});
```

This seems to cause the browser to retain the `_this` reference after the dialog has been destroyed.

Fixes angular#2876.

* chore: add comment about `this` usage in zone

* fix(select): wrong item order in label in rtl (angular#3567)

Fixes selected items not having the proper order in the label when `md-select` is in `multiple` mode and in RTL.

* fix(tabs): re-align ink bar on direction change (angular#3622)

Re-aligns the ink bar if the user's layout direction changed.

Fixes angular#3615.

* fix(input): don't add empty prefix & suffix wrappers (angular#3724)

* fix(input): don't add empty prefix & suffix wrappers

* add tests

* fix(autocomplete): do not trigger submit on ENTER (angular#3727)

* fix(autocomplete): do not trigger submit on ENTER

When an option is selected with the ENTER key, it should not submit the form and prevent the default input behavior

Fixes angular#3159

* test(autocomplete): removing extra detectChanges

* feat(slide-toggle): add ripple focus indicator (angular#3739)

* feat(slide-toggle): add ripple focus indicator

* Introduces a focus indiactor using the persistent ripples.

* Address comments

* feat(theming): log a warning if core theme isn't loaded (angular#3781)

* feat(theming): log a warning if core theme isn't loaded

* Checks the user's loaded stylesheets and logs a warning if the Material core theme isn't loaded.
* Fixes a wrong `typeof` check when determining the doctype.

Fixes angular#2828.

Note: I originally went with looping through the `document.styleSheets` to check whether the selector is defined, however I had to switch back to `getComputedStyle`, because browsers don't expose the `document.styleSheets`, if the CSS file is being loaded from another domain. This would've caused the warning to be logged if the user loads over a CDN.

* refactor: address feedback

* fix(select): exception if selected value is accessed on init (angular#3785)

Fixes an error that is thrown if something attempts to access the `selected` value of `md-select` too early. The issue comes from the fact that the underlying `SelectionModel` gets initialized too late in `ngAfterContentInit`.

Fixes angular#3750.

* build: fix closure tsconfig path (angular#3835)

* Due to the TSConfig file renaming in angular#3791 and the fact that they were merged at the same time, the path in the closure-compiler script is now invalid.

* feat(dialog): allow for the dialog dimensions to be updated (angular#2940)

* feat(dialog): allow for the dialog dimensions to be updated

Adds an `updateDimensions` method to the `MdDialogRef` which allows the user to update a dialog's dimensions after it has been created.

Fixes angular#2930.

* refactor: split dimensions method into two

* refactor: rename updateDimensions to updateSize

* refactor: add back _getOverlayState method

* chore: fix aot issue

* refactor(focus-origin-monitor): rename unmonitor to stopMonitoring (angular#3783)

* Renames the `unmonitor` function to `stopMonitoring`.
* Removes unnecessary code that keeps track of the `FocusOriginMonitor` subscription. After calling `stopMonitoring` the observable will complete.

* build: silent sass bundling (angular#3784)

* No longer prints the whole SASS file-tree when running the `build:release` task.
* Added a new options that allows disabling STDOUT messages. STDERR is important for error messages.

* demo(slide-toggle): fix slide-toggle required demo (angular#3793)

Fixes the slide-toggle required demo, where the component will be compared with the native required state.

Basically in the demo, the form should be validated native and should show the browsers popup if the slide-toggle is required.

* fix(slide-toggle): fix unavailable unmonitor call (angular#3862)

* fix(slide-toggle): fix unavailable unmonitor call

* Remove variable

* fix: use correct access tokens for artifact publishing (angular#3860)

* fix: aot runtime issues (angular#3807)

* fix: aot runtime issues

Currently when using the `MdSnackBar` in AOT, there will be runtime exceptions from the NgFactory. Those are caused by the re-exports of DI tokens.

The Angular compiler will then look for the first export e.g `MdLiveAnnouncer` and the normal `LiveAnnouncer` export wont be included in the factory.

This is breaking at runtime now, because the NgFactory searches for `LiveAnnouncer` but there is only the `LiveAnnouncer` (DI exception)

Since this deprecation is pretty old we can safely remove it anyways. Although this is probably an Angular that should be reported separately.

Also this commit fixes the output directory of the `aot` gulp task. Currently it outputs the factories in a wrong directory. (This allows us to serve the aot demo-app in the future)

* Remove MdUniqueSelectionDispatcher

* test(select): various test inconsistencies (angular#3861)

* test(select): various test inconsistencies

* Fixes a select test that occasionally fails to capture the error inside the expect, causing it to get logged without actually being thrown. This seems to be a Zone-related issue since wrapping a few calls in `async` makes it behave correctly.
* Fixes an RTL test that fails if it is made async. This incorporates the changes from angular#3866 and angular#3163 and fixes the underlying issue. It appears that the test was failing, because IE does a slight twitch on the select panel since it goes from a pixel-based `min-width` to one with `calc` and percentages to just percentages. I've set the default width to 100% which is the same as the pixel-based one, which appears to make IE happy.

* chore: verify that changing the min-width causes failures

* chore: revert min-width change

* chore: remove a few unnecessary expressions

* docs(dialog): fix misleading code comment (angular#3894)

* chore: fix screenshot results to be per-sha (angular#3887)

* docs(tabs): use two-way binding syntax in API doc (angular#3885)

* fix: deprecate MaterialModule (angular#3840)

We've found that, with the current state of tree-shaking in the world,
that using an aggregate NgModule like `MaterialModule` leads to tools
not being able to eliminate code for components that aren't used.

In order to ensure that users end up with the smallest code size
possible, we're deprecating MaterialModule, to be removed in the a
subsequent release.

To replace `MaterialModule`, users can create their own "Material"
modul within their application (e.g., `GmailMaterialModule`) that
imports only the set of components actually used in the application.

* docs(theming): list prebuilt themes (angular#3826)

* docs(dialog): document viewContainerRef config option (angular#3825)

* build: fix build script in package.json (angular#3915)

Previously the build script tried to run an invalid gulp task.

* ci: run with LTS node version (angular#3906)

* Updates the previous LTS version to the current LTS version of node.

* chore: bump version to beta.3 and add changelog (angular#3953)

* chore: update tslint to v5 and fix newly surfaced issues (angular#3958)

* chore: copy LICENSE to release package (angular#3957)

* chore: fix typo in beta.3 changelog (angular#3962)

Modul is used instead of module

See: angular#3961

* docs(guide): theme scss path update (for beta 3) (angular#3964)

* docs: fix package paths (angular#3966)

* chore: add additional structure to generated docs (angular#3985)

* For API docs, wrap each generated document in `.docs-api`
* For markdown docs, wrap each generated document in `.docs-markdown`
* Remove the `h1` from API docs that contained only the component name
* Change the `h2` for API docs to be a friendlier title followed by an example import.
* Increase header level for API by one across the board (so that they're "under" the new `h2`)
* A few misc. docs fixes

* docs: fixed stylesheet path to match the relevant path that is produced by angular-cli (angular#3982)

* chore: update getting-started guide for beta.3 (angular#3986)

No longer mentions `MaterialModule` and instead offers some guidance on building your own NgModule for Angular Material components.

* chore: publish examples assets for plunker with docs content (angular#3987)

* chore: add api design section to coding standards (angular#4017)

* chore: add more naming and inheritence guidance to coding standards (angular#3933)

* docs: clarify points to address common issues (angular#4021)

* Repeated reminders to only include mat-core once.
* Note about including a theme file via styleUrls
* Add section for theming only certain components
* Move section on overlay theming after section for multiple themes

* fix(slider,slide-toggle): use the grab cursor (angular#3821)

Uses the `grab` cursor when hovering over an active slider's thumb and thumb labels, as well as on active slide toggles.

Fixes angular#3778.

* docs(sidenav): add "push" mode to api docs (angular#3803)

* fix(dialog): unable to press escape to close in lazy-loaded module (angular#3788)

Fixes not being able to use the escape key to close a dialog that was opened from a lazy-loaded module.

Fixes angular#3737.

* fix(tooltip): wrong position when using OnPush change detection (angular#3671)

* fix(tooltip): wrong position when using OnPush change detection

Fixes the tooltip having a wrong position if it is inside a component with `OnPush` change detection. The issue was due to the fact that when `OnPush` is used, the tooltip text isn't rendered at the moment when the element is positioned.

Fixes angular#3497.

* fix(snack-bar): allow multi-line text (angular#3626)

* Wraps multi-line text, instead of truncating it, inside of snack bars. **Note:** While the spec only mentions multi-line text on mobile, this seems to be a better approach than cutting it off at ~500px. We can revisit this if we start using media queries.
* Aligns the snack bar button margin to the spec.
* Simplifies some of the CSS to remove the need for a hardcoded height and negative margins.

Fixes angular#1951.

* fix(overlay): Render the templates before placing them in the overlay. (angular#2989)

This fixes positioning issues when rendering templates which contain embedded templates.
The templates need to be rendered in order to properly determine width which can then determine placement.

* fix(button): ripple color for raised buttons (angular#3829)

* fix(button): ripple color for raised buttons

* Fixes the incorrect ripple color for raised buttons. Currently the ripple color is always based on black. This is incorrect on palettes like Indigo.

Fixes angular#2901

* Address feedback

* Distinguish between buttons with focus overlay

* Fix comment

* fix(checkbox, radio): ripple error on focus event (angular#3869)

* The checkbox and radio disable the ripples using a `*ngFor` check. This causes the `ViewChildren` instance to turn null. The reference is required for the focus indicators.

* If ripples are disabled there will be still ripples on click. This is due to the fact that label elements redirect focus to the underlying input element. The `focusOrigin` is therefore `program` and a focus ripple will show up.

* Tests had to be adjusted because the `[md-ripple]` element won't be removed anymore. Therefore the tests now confirm that no ripples are showing up.

Fixes angular#3856.

* fix(select): wrong panel width if element is hidden initially (angular#3647)

Fixes the select not having a proper width if it became visible after it was initialized.

Fixes angular#3639.
Fixes angular#3244.

* fix(input): make start and end hints interact well when their text needs to wrap (angular#3979)

* fix(list): icon size in dense mode (angular#3913)

Fixes the size of icons inside dense lists.

Fixes angular#3886.

* perf(dialog): switch dialog animations to translate3d (angular#3905)

* Switches the `translate` to `translate3d` for hardware accelerated animations.

* fix(compatibility): error in theme check with angular universal (angular#3872)

Fixes a reference error being thrown by the theme check when using server-side rendering.

Fixes angular#3870.

* fix(compatibility): throw better error when wrong prefix is used (angular#3871)

Throws a slightly better error when the wrong prefix is used. The error now includes the node name of the offending element, which should make it easier to pinpoint the issue.

* fix(grid-list): export MdGridTile. Fixes angular#2408 (angular#4000)

* build: fix karma pattern warnings (angular#4057)

* Fixes the karma pattern warnings. Those showed up because there was a pattern that included all files (and watched them).

* build: create material-examples package (angular#4046)

* build: use version placeholder in packages (angular#4065)

* Introduces a version placeholder (as in angular/angular) that will be replaced with the version string form the root `package.json` file.

* This ensures that the different packages are always having the correct version and it also ensures that there is no version-mismatch.

* build: publish material-examples package to docs content (angular#4064)

* chore: fix typos in coding standards (angular#4043)

* build: copy readme to releases (angular#4079)

* Due to a typo the `README.md` file is not copied properly to the releases.

* chore: remove unused bash scripts (angular#4080)

* Removes two unused bash scripts (`copy-docs.sh`, `enact-release.sh`).
* `enact-release.sh` is now part of the release gulp task.
* `copy-docs.sh` is now part of the `docs` gulp task.

* build: dgeni add deprecated marker (angular#4028)

* build: dgeni add deprecated marker

* Adds a class to property rows in the template that can be used to distinguish between deprecated and stable APIs.

Fixes angular#3981.

* Address feedback

* build: create sourcemap files (angular#4022)

* Creates sourceMap files for all bundles inside of the release.

Fixes angular#852

* docs(theming): cleanup grammar on overlay theming (angular#4089)

* docs(guides): add guide for using compatibility mode (angular#4082)

Fixes angular#4018

* chore: fix typo in closure compiler script (angular#4040)

* build: detect todos in public comments (angular#4059)

* build: detect todos in public comments

* Creates a naive rule that checks all multi-line comments and reports failures once it detects TODOs inside of it.

* This means that TODOs always need to placed inside of single-line comments.

Fixes angular#4026

* chore: remove public folder (angular#4061)

* Removes the unused `public` folder from the repository.

* fix(checkbox): support OnPush for disabled with forms module (angular#4087)

* fix(input): incorrect height with autosize (angular#4084)

Currently when using the `mdTextareaAutosize` directive the textarea height might be incorrect on component initialization.

This happens because the textarea `scrollHeight` property is not ready in the `ngOnInit` lifecycle hook yet.

Other libraries like `angular-elastic` have timeouts for that. But using the `ngAfterViewInit` lifecycle hook is more elegant and also ensures that the `scrollHeight` property is ready.

Also switches `offsetHeight` to `clientHeight` since we don't want to include the border in our line-height calculations.

Also by default `textarea` elements have a padding of `2px` and the `padding` needs to be explicitly set to `0px` when resolving the line-height.

Fixes angular#4070.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@andrewseguin andrewseguin

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(tabs): set tab body content to 100% andrewseguin/components
3 participants
@sherwopj @kara @andrewseguin