Skip to content

Latest commit

 

History

History
114 lines (99 loc) · 5.2 KB

CONTRIBUTING.md

File metadata and controls

114 lines (99 loc) · 5.2 KB
Raw

Contributing to Garden

Keen to contribute to Garden? We're stoked to have you join us. You may find that opening an issue is the best way to get a conversation started. When you're ready to submit a pull request, follow the steps below. We follow a code of conduct as our guide for community behavior.

Versioning Workflow

Garden follows semantic versioning. We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes.

The pull request workflow along with the PR template will help us determine how to version your contributions.

All changes are recorded in the changelog file.

Development Workflow

Before you start, be sure npm is installed on your system. After you clone this repo, run npm install to install dependencies needed for development. After installation, the following commands are available:

  • npm start to launch the SVG icon demo server with live reload – source files will be watched for changes.
  • npm test to run package tests.
  • npm run lint to enforce consistent code conventions. Note this is run as a git pre-commit hook.
  • npm run format to optimize SVGs and enforce code style with opinionated formats. Note this is run as a git pre-commit hook.
  • npm run build to rebuild the SVG spritemap symbol distribution and update SVG demo pages. The build runs as part of the initial install.

Pull Request Workflow

  1. Fork the repo and create a branch. Format your branch name as username/verb-noun.
  2. If you haven't yet, get comfortable with the development environment.
  3. Regularly git commit locally and git push to the remote branch. Use whatever casual commit messaging you find suitable. We'll help you apply an appropriate squashed conventional commit message when it's time to merge to the main branch.
  4. If you are adding new SVG icons, optimize them following the workflow below.
  5. If your changes result in a major modification, be sure all documentation is up-to-date.
  6. When your branch is ready, open a new pull request via GitHub. The repo PR template will guide you toward describing your contribution in a format that is ultimately suitable for a structured conventional commit (used to automatically advance the published package version).
  7. Every PR must pass CI checks and receive at least one 👍 to be considered for merge.
  8. Garden maintainers will manage the squashed merge to the main branch, using your PR title and description as the scope, description, and body for a conventional commit.

SVG Optimization Workflow

Get SVG designs from Illustrator (not Sketch). Ensure all visible stroke and fill properties are colored red. Inspect the source:

  1. Ensure the viewBox is clean. It should contain a "normal" value like 0 0 64 64 (where this SVG has been right-sized for a maximum 64x64 rendering). If the viewBox looks weird (due to a bug with the Illustrator artboard), create a new artboard and re-export the SVG.
  2. Ensure specific shapes are represented by the best possible SVG elements (i.e. prefer <circle> vs. a <path> in the shape of a circle).
  3. Run npm run format to optimize SVGs via svgo.
  4. Edit the optimized SVG source file.
    1. Swap out any leftover <defs> and <use> elements, eliminating all internal xlink and references.
    2. Remove any leftover xmlns:xlink and data-* attributes – we don't use these.
    3. Attempt to remove fill-rule="evenodd" – it’s usually not needed.
    4. Remove unnecessary stroke-linejoin attributes where there are no lines to join.
    5. Remove unnecessary stroke-linecap attributes where there are no lines to cap.
    6. Make color corrections.
      1. For monochrome SVGs, make sure all foreground fill and stroke attributes are set to currentColor. This allows an inline icon to receive the font color of it's parent element. When optimal, combine these attributes under a SVG <g> element.
      2. For two-tone SVGs (such as Zendesk's relationshapes) set the color foreground to currentColor and leave the neutral foreground open to receive styling via the CSS fill property (see the hack for details).
  5. Add SVG width and height attributes that correspond to the viewBox – for bulletproof cross-browser scaling.

License

By contributing to Garden, you agree that your contributions will be licensed under the Apache License, Version 2.0.