docs(chips): provide docs and demo for using a label with outline appearance

[KevinJue]

Bug, enhancement request, or proposal:

In mat-form-field with outline appearance you can insert a mat-chip-list inside the form-field but the label doesn't go above the input
it's look like a bug, because if we insert the mat-chip-list outside or if we change the appearance everything look good

CodePen and steps to reproduce the issue:

Stackblitz to see what i mean
https://stackblitz.com/edit/angular-dydyib

Detailed Reproduction Steps:

What is the expected behavior?

The label should go above the input like that

What is the current behavior?

The label stay in the input

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

Which versions of AngularJS, Material, OS, and browsers are affected?

• "@angular/material": "^6.3.2"

• OS: MacOS Mojave

• Browsers: Chrome Version 74.0.3729.169

[KevinJue]

Hello,

@Splaktar don't know if is a bug actually, because it's work fine if the mat-label is outside the mat-chip-list.

this work

<mat-form-field>
    <mat-label></mat-label>
    <mat-chip-list>
        <mat-chip></mat-chip>
        <input>
    </mat-chip-list>
    <mat-autocomplete>
    </mat-autocomplete>
</mat-form-field>

but if we move the mat-label inside like that, the label don't have the correct render

<mat-form-field>
    
    <mat-chip-list>
        <mat-chip></mat-chip>
        <mat-label></mat-label>
        <input>
    </mat-chip-list>
    <mat-autocomplete>
    </mat-autocomplete>
</mat-form-field>

[Splaktar]

This is certainly a hole in our documentation. As you found, the mat-label needs to be in the mat-form-field and not within the mat-chip-list. Here's a working StackBlitz.

Thank you for pointing this out.

[mkonars]

Pull request created #16578

[zarend]

Closing this because the Chips Autocomplete example in the Angular Material Docs uses a label inside the form field.