diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ae726de18..91b05a9a4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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) -## 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. @@ -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. -## 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. -``` - -## 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. -## 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. -## 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= SAUCE_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? +``` -## 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. -## 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 diff --git a/README.md b/README.md index c2ab3efc5..af89f1d56 100644 --- a/README.md +++ b/README.md @@ -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/`): diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md index cf27a24ee..80227115b 100644 --- a/docs/DEVELOPER.md +++ b/docs/DEVELOPER.md @@ -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 @@ -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 @@ -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. diff --git a/package.json b/package.json index 5fa584167..314a5a945 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "babel-preset-es2015": "^6.9.0", "bel": "^4.4.3", "css-loader": "^0.23.1", + "cz-conventional-changelog": "^1.1.6", "eslint": "^2.12.0", "eslint-config-google": "^0.5.0", "eslint-plugin-tape": "^1.1.0", @@ -75,6 +76,9 @@ }, "validate-commit-msg": { "helpMessage": "\nNOTE: Please see angular's commit message guidelines (https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit) for information on how to format commit messages.\n\nAs an example, here is a valid commit message: 'docs(slider): Document slider public api'\n\nIf this commit is on a development / WIP branch, you can disable this by running `git commit --no-verify`." + }, + "commitizen": { + "path": "./node_modules/cz-conventional-changelog" } } }