Proposal: Guide for creating compatible community components

[willshowell]

Bug, feature request, or proposal:

Proposal

Expected behavior

I think it would be highly valuable to have a guide living somewhere in material.angular.io/guides that explained some of the best practices related with creating a high quality 3rd party component that will work with Material.

Some information that might be valuable to component authors:

1. How to get theming to seamlessly work
2. How to get packaging right
3. Where to find accessibility resources that the team relies on
4. ?

Perhaps even better would be a link to a starter repo that has a lot of the tooling in place to achieve 1 and 2

Motivation

It looks like some popular features will be left to the community (https://github.com/angular/material2/issues/860#issuecomment-306637337, https://github.com/angular/material2/issues/3262) and it would be great to set a standard for these so that authors can be confident they're doing it the right way.

[jelbourn]

I think this is a great idea

This will be easier once we release @angular/cdk (soon!).

[fxck]

Suggested something like this couple of months ago https://github.com/angular/material2/issues/2691#issuecomment-273495016

[willshowell]

Some decisions I've seen made here that custom libraries could utilize to be "high quality":

• strictNullChecks compatible
• Make components OnPush
• Bidirectional support
• Scope style selectors and avoid deep nesting for easier overrides
• Components don't have outer margins

Also I could see it being useful to have instructions on extending mat-light-theme and mat-dark-theme to include custom foreground/background palette mappings.

[Splaktar]

My talk at AngularMix in October was primarily about this issue. Unfortunately, it wasn't recorded. The slides are available, but their value is limited since I gave a lot of live demos and walkthroughs. There are some useful links to resources at the end and some speaker notes though.

It covered packaging with the new Angular CLI library support and adding Schematics to the same workspace (in a separate project and NPM package).

I'm giving the talk again in January at DevFest Florida and hopefully it will be recorded there. Also I hope to add guidance on theming to that talk.

[guzmanoj]

My talk at AngularMix in October was primarily about this issue. Unfortunately, it wasn't recorded. The slides are available, but their value is limited since I gave a lot of live demos and walkthroughs. There are some useful links to resources at the end and some speaker notes though.

It covered packaging with the new Angular CLI library support and adding Schematics to the same workspace (in a separate project and NPM package).

I'm giving the talk again in January at DevFest Florida and hopefully it will be recorded there. Also I hope to add guidance on theming to that talk.

It was recorded this time: https://youtu.be/OU6z3IKmyNI

[Splaktar]

Material Community Components and @devintent/dev implement a lot of the best practices for compatible community components.

There are also some really comprehensive examples of consuming the CDK that are now available. These include Nebular, ng-zorro-antd, Mosaic, and ng-lightning.

[jelbourn]

Revisiting this, I think it's reasonable now to close this out. When this issue was first opened, the cdk hadn't even existed. Now, I think the idea of being "compatible" with Angular Material doesn't mean as much- it would mostly be covered by the theming docs (https://material.angular.io/guide/theming-your-components), creating/using harnesses (https://material.angular.io/guide/using-component-harnesses), and otherwise generally using the cdk.

[angular-automatic-lock-bot[bot]]

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.}