Skip to content
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

docs(infrastructure): Update README and dev docs for v2 #4589

Merged
merged 1 commit into from
Jul 25, 2016
Merged

docs(infrastructure): Update README and dev docs for v2 #4589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 95 additions & 149 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@

# Contributing to Material Design Lite

We'd love for you to contribute to our source code and to make Material Design Lite even better than it is today! Here are the guidelines we'd like you to follow:

- [Code of Conduct](#coc)
- [Question or Problem?](#question)
- [Issues and Bugs](#issue)
- [Feature Requests](#feature)
- [Submission Guidelines](#submit)
- [Coding Rules](#rules)
- [Signing the CLA](#cla)

## <a name="coc"></a> Code of Conduct
- [Code of Conduct](#code-of-conduct)
- [Development Process](#development-process)
- [Setting up your development environment](#setting-up-your-development-environment)
- [Building Components](#building-components)
- [Running the development server](#running-the-development-server)
- [Building MDL](#building-mdl)
- [Linting / Testing / Coverage Enforcement](#linting--testing--coverage-enforcement)
- [Running Tests across browsers](#running-tests-across-browsers)
- [Coding Style](#coding-style)
- [Signing the CLA](#signing-the-cla)
- [Submitting Pull Requests](#submitting-pull-requests)
- [Questions / Problems](#questions--problems)
- [Issues / Bugs](#issues--bugs)
- ["What's the core team up to?"](#whats-the-core-team-up-to)

## Code of Conduct

As contributors and maintainers of the Material Design Lite project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.

Expand All @@ -23,205 +30,144 @@ If any member of the community violates this code of conduct, the maintainers of

If you are subject to or witness unacceptable behavior, or have any other concerns, please drop us a line at sgomes@google.com.

## <a name="question"></a> Got a Question or Problem?
## Development Process

If you have questions about how to use Material Design Lite, please direct these to [StackOverflow][stackoverflow] and use the `material-design-lite` tag. We are also available on GitHub issues.
> NOTE: As we are still in **pre-alpha** for v2, this section may be incomplete, in flux, and/or lacking some info. We hope to stabilize it by the time we reach alpha. If you have additional follow-up questions about our development process or find something confusing / ambiguous, reach out to us on [gitter](https://gitter.im/google/material-design-lite) and we may be able to help.

If you feel that we're missing an important bit of documentation, feel free to
file an issue so we can help. Here's an example to get you started:
We strive to make developing Material Design Lite as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the Material Design Lite codebase. Before beginning development, you may want to read through our brief [v2 developer guide](https://github.com/google/material-design-lite/blob/master/docs/DEVELOPER.md) to get a better understanding of our overall architecture.

```
Component (if any):
### Setting up your development environment

What are you trying to do or find out more about?
You'll need a recent version of [nodejs](https://nodejs.org/en/) to work on MDL. We [test our builds](https://travis-ci.org/google/material-design-lite) using both the latest and LTS node versions, so use of one of those is recommended. You can use [nvm](https://github.com/creationix/nvm) to easily install and manage different versions of node on your system.

Where have you looked?
Once node is installed, simply clone our repo (or your fork of it) and run `npm install`

Where did you expect to find this information?
```

Or, if you're looking for a new design template:

git clone git@github.com:google/material-design-lite.git # or a path to your fork
cd material-design-lite && npm i
```
Please provide a short summary of the template you’re looking for.

What makes this template interesting or challenging from a design perspective?
### Building Components

Please provide any URLs to good examples of this type of page that you may have come across.
```

## <a name="issue"></a> Found an Issue?
If you find a bug in the source code or a mistake in the documentation, you can help us by
submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request
with a fix.
Each component requires the following items in order to be complete:

See [below](#submit) for some guidelines.
- A **foundation class** which is integrated into actual components
- A **component class** using vanilla JS + SCSS
- A **README.md** in its subdir which contains developer documentation on the component, including usage.
- A **set of unit tests** within `test/unit/` with adequate coverage (which we enforce automatically).
- A **demo page** within `demos/` that shows example usage of the component.

## <a name="feature"></a> Want a Feature?
You can request a new feature by submitting an issue to our [GitHub Repository][github].

Here is a template to get you started:
### Running the development server

```
Is this a new component, or a missing feature in an existing one?
Component name:
Material Design spec URL for the component (if any):

What does this component or feature allow you to do which isn’t possible at the moment?

Please provide any URLs or screenshots of good examples of usage of this component or feature that you may have come across.
npm run dev
open http://localhost:8080
```

If you would like to implement a new feature then consider what kind of change it is:

* **Major Changes** that you wish to contribute to the project should be discussed first on our
[issue tracker][https://github.com/google/material-design-lite/issues] so that we can better coordinate our efforts, prevent
duplication of work, and help you to craft the change so that it is successfully accepted into the
project.
* **Small Changes** can be crafted and submitted to the [GitHub Repository][github] as a Pull Request.
`npm run dev` runs a [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html) instance that uses `demos/` as its content base. This should aid you in initial development of a component. It's served on port 8080.

## <a name="submit"></a> Submission Guidelines
### Building MDL

### Submitting an Issue
Before you submit your issue search the archive, maybe your question was already answered.
```
npm run build # Builds an unminified version of MDL within build/
npm run build:min # Same as above, but enables minification
npm run dist # Cleans out build/ and runs both of the above commands sequentially
```

If your issue appears to be a bug, and hasn't been reported, open a new issue.
Help us to maximize the effort we can spend fixing issues and adding new
features, by not reporting duplicate issues. Providing the following information will increase the
chances of your issue being dealt with quickly:
### Linting / Testing / Coverage Enforcement

* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
* **Motivation for or Use Case** - explain why this is a bug for you
* **Material Design Lite Version(s)** - is it a regression?
* **Browsers and Operating System** - is this a problem with all browsers or only IE9?
* **Reproduce the Error** - provide a live example (using JSBin) or a unambiguous set of steps.
* **Related Issues** - has a similar issue been reported before?
* **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
causing the problem (line of code or commit)
```
npm run lint:js # Lints javascript using eslint
npm run lint:css # Lints (S)CSS using stylelint
npm run lint # Runs both of the above commands in parallel

**If you get help, help others. Good karma rulez!**
npm run fix:js # Runs eslint with the --fix option enabled
npm run fix:css # Runs stylefmt, which helps fix simple stylelint errors
npm run fix # Runs both of the above commands in parallel

Here's a template to get you started:
npm run test:watch # Runs karma on Chrome, re-running when source files change

npm test # Lints all files, runs karma, and then runs coverage enforcement checks.
```
MDL version:
Browser:
Browser version:
Operating system:
Operating system version:
URL, if applicable (you can use a [codepen as a starting point][http://codepen.io/pen/def?fork=xGWgXa]):

What steps will reproduce the problem:
1.
2.
3.
#### Running Tests across browsers

What is the expected result?
If you're making big changes or developing new components, we encourage you to be a good citizen and test your changes across browsers! A super simple way to do this is to use [sauce labs](https://saucelabs.com/), which is how we tests our collaborator PRs on TravisCI:

What happens instead of that?
1. [Sign up](https://saucelabs.com/beta/signup) for a sauce labs account (choose "Open Sauce" as your selected plan; [it's free](https://saucelabs.com/opensauce/)!)
2. [Download sauce connect](https://wiki.saucelabs.com/display/DOCS/Setting+Up+Sauce+Connect) for your OS and make sure that the `bin` folder in the downloaded zip is somewhere on your `$PATH`.
3. Navigate to your dashboard, scroll down to where it says "Access Key", and click "Show"
4. Enter your password when prompted
5. Copy your access key
6. Run `SAUCE_USERNAME=<your-saucelabs-username> SAUCE_ACCESS_KEY=<your-saucelabs-access-key> npm test`

Please provide any other information below, and attach a screenshot if possible.
```

### Submitting a Pull Request
Before you submit your pull request consider the following guidelines:
This will have karma run our unit tests across all browsers we support, and ensure your changes will not introduce regressions.

* Search [GitHub](https://github.com/google/material-design-lite/pulls) for an open or closed Pull Request
that relates to your submission. You don't want to duplicate effort.
* Please sign our [Contributor License Agreement (CLA)](#cla) before sending pull
requests. We cannot accept code without this.
* Make your changes in a new git branch:
Alternatively, you can run `npm run test:watch` and manually open browsers / use VMs / use emulators to test your changes.

```shell
git checkout -b my-fix-branch master
```
### Coding Style

* Create your patch, **including appropriate test cases**.
* Follow our [Coding Rules](#rules).
* Run the full Material Design Lite test suite (`gulp test`),
and ensure that all tests pass.
* Avoid checking in files that shouldn't be tracked (e.g `node_modules`, `gulp-cache`, `.tmp`, `.idea`). We recommend using a [global .gitignore](https://help.github.com/articles/ignoring-files/#create-a-global-gitignore) for this.
* Make sure **not** to include a recompiled version of the files found in `/css` and `/js` as part of your PR. We will generate these automatically.
* Commit your changes using a descriptive commit message.
Our entire coding style is enforced automatically through the use of linters. Check out our [eslint config](https://github.com/google/material-design-lite/blob/master/.eslintrc.yaml) (heavily influenced by [Google's Javascript Styleguide](js-style-guide)) as well as our [stylelint config](css-style-guide) (heavily annotated, with justifications for each rule) for further details.

```shell
git commit -a
```
Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
### Signing the CLA

* Build your changes locally to ensure all the tests pass:
Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code
changes to be accepted, the CLA must be signed. It's a quick process, we promise!

```shell
gulp
```
* For individuals we have a [simple click-through form][individual-cla].
* For corporations we'll need you to
[print, sign and one of scan+email, fax or mail the form][corporate-cla].

* Push your branch to GitHub:

```shell
git push origin my-fix-branch
```
### Submitting Pull Requests

* In GitHub, send a pull request to `material-design-lite:master`.
* If we suggest changes then:
* Make the required updates.
* Re-run the Material Design Lite test suite to ensure tests are still passing.
* Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
We prefer small, incremental changes over large, sweeping ones, so please try to adhere to this when submitting PRs. Also, make sure you're following our commit message conventions (which are the same as [angular's](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit)); our `commit-msg` hook should automatically enforce this. We also support [commitizen](https://www.npmjs.com/package/commitizen), which you can
use to auto-format commit messages for you.

```shell
git rebase master -i
git push origin my-fix-branch -f
```
If you've done some experimental work on your branch/fork and committed these via `git commit --no-verify`, you can rebase them into one correctly-formatted commit before submitting.

That's it! Thank you for your contribution!
Finally, it helps to make sure that your branch/fork is up to date with what's currently on master. You can ensure this by running `git pull --rebase origin master` on your branch.

#### After your pull request is merged
> **NOTE**: Please do _not merge_ master into your branch. _Always_ `pull --rebase` instead. This ensures a linear history by always putting the work you've done after the work that's already on master, regardless of the date in which those commits were made.

After your pull request is merged, you can safely delete your branch and pull the changes
from the main (upstream) repository:
To submit code for v2, open a PR for your fork/branch against `master` (_not_ `mdl-1.x`, which is currently our default branch).

* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
Once you've submitted a PR, it'll be assigned to a core team member for review. If all CI tests pass and you get a `LGTM` from a reviewer, your code will be merged into master.

```shell
git push origin --delete my-fix-branch
```
## Questions / Problems

* Check out the master branch:
If you have questions about how to use Material Design Lite, please direct these to [StackOverflow][stackoverflow] and use the `material-design-lite` tag.

```shell
git checkout master -f
```
If you feel that we're missing an important bit of documentation, feel free to
file an issue so we can help. Here's an example to get you started:

* Delete the local branch:
```
Component (if any):

```shell
git branch -D my-fix-branch
```
What are you trying to do or find out more about?

* Update your master with the latest upstream version:
Where have you looked?

```shell
git pull --ff upstream master
```
Where did you expect to find this information?
```

## <a name="rules"></a> Coding Rules
## Issues / Bugs

See the [Google JavaScript style guide][js-style-guide] for more information.
If you find a bug in the source code or a mistake in the documentation, you can help us by
submitting an issue to our [GitHub Repository][github]. Even better, you can submit a Pull Request with a fix. Before submitting issues, please ensure that you've read through our [issue template](https://github.com/google/material-design-lite/blob/mdl-1.x/.github/ISSUE_TEMPLATE.md) to ensure a fast and helpful response from the maintainers.

## <a name="cla"></a> Signing the CLA
## "What's the core team up to?"

Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code
changes to be accepted, the CLA must be signed. It's a quick process, we promise!
The core team maintains a [public Pivotal Tracker](https://www.pivotaltracker.com/n/projects/1664011) (**tracker** for short) which details all the items we're working on within our current two-week [iteration](https://www.agilealliance.org/glossary/iteration/). This tracker mirrors in what's in our GH issues. It is used _purely for planning and prioritization purposes, **not** for discussions or community issue filing_. That being said, it's a great place to look at the overall state of our project as well as some the big ticket issues we're working on.

* For individuals we have a [simple click-through form][individual-cla].
* For corporations we'll need you to
[print, sign and one of scan+email, fax or mail the form][corporate-cla].
Each tracker story contains a link to its corresponding GH issue within its description. Each GH issue present in tracker is tagged with an `in-tracker` label. This will hopefully make it easy to move between the two if so desired.

*This guide was inspired by the [AngularJS contribution guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md).*

[github]: https://github.com/google/material-design-lite
[individual-cla]: http://code.google.com/legal/individual-cla-v1.0.html
[corporate-cla]: http://code.google.com/legal/corporate-cla-v1.0.html
[js-style-guide]: https://google.github.io/styleguide/javascriptguide.xml
[js-style-guide]: https://github.com/google/material-design-lite/blob/master/.eslintrc.yaml
[css-style-guide]: https://github.com/google/material-design-lite/blob/master/.stylelintrc.yaml
[jsbin]: http://jsbin.com/
[stackoverflow]: http://stackoverflow.com/questions/tagged/material-design-lite
[global-gitignore]: https://help.github.com/articles/ignoring-files/#create-a-global-gitignore
1 change: 0 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ Setup the repo:
```
git clone https://github.com/google/material-design-lite.git && cd material-design-lite
npm i
$(npm bin)/lerna bootstrap
```

Run the development server (served out of `demos/`):
Expand Down
15 changes: 3 additions & 12 deletions docs/DEVELOPER.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ To make this possible, our new component library is internally split into two pa
- **MDL V2 Vanilla**: ready-to-use components (what the majority of our current users are interested in)
- **MDL V2 Foundation**: shared UI code (for lower-level usage by other frameworks or complex rendering scenarios)

On the whole, many of these changes will be transparent to Vanilla end-users, and are primarily intended to enable MDL to work at web and Google-scale.
On the whole, many of these changes will be transparent to Vanilla end-users, and are primarily intended to enable MDL to work across the entire web platform.

## Component Architecture

Expand All @@ -22,6 +22,8 @@ There are several key design decisions that underpin MDL V2 Foundation:

The aim being to push forward a clear separation of concerns, with the Foundation code being entirely about UI-related matters - as opposed to data-binding, templating, key/input handling, etc. In the case of Vanilla, we take a plain JS approach towards wrapping Foundation and providing the necessary code to make things usable out-of-the-box.

> NOTE: This next section is currently being reworked. See [#4568](https://github.com/google/material-design-lite/issues/4568)

Foundation components are implemented as [functional mixins](http://raganwald.com/2015/06/17/functional-mixins.html) and thus must be bound to a host class in order to be used. The mixin automatically binds when called with the host prototype as the receiver. Additionally, each mixin must be passed in an `adapter` implementation at creation time which is the contract by which the component communicates with its host.

```javascript
Expand Down Expand Up @@ -59,14 +61,3 @@ When cloning the repo for the first time, you must run `lerna bootstrap` which i

In this manner, each MDL component is isolated and can be versioned and published independently.

### Testing

TODO.

## Theming

TODO.

## FAQ

TODO.
Loading