Skip to content

Update Contributing.md #474

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.

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

Merged
merged 2 commits into from
Sep 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 3 additions & 3 deletions packages/design-system-website/foundations/Contributing.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ Once handed a design comp it is generally the engineers responsibility to levera
2. If a pre-baked component is not available, attempt to leverage the design system patterns encoded in our [sass-variable](https://github.com/puppetlabs/design-system/tree/master/packages/sass-variables) package. These Sass variables and mixins encode our lowest-level foundational elements including typography, color palettes, and common patterns such as borders and focus outlines.
3. If you still can't find an existing asset, alert your designer: it may be a mistake, or they may not have done due-diligence in attempting to use existing patterns.

For instructions on getting your app set up to consume design system assets please refer to the [README.md](https://github.com/puppetlabs/design-system/blob/development/README.md).
For instructions on getting your app set up to consume design system assets please refer to the [README.md](https://github.com/puppetlabs/design-system/blob/main/README.md).

For contributing, see [CONTRIBUTING.md](https://github.com/puppetlabs/design-system/blob/development/CONTRIBUTING.md).
For contributing, see [CONTRIBUTING.md](https://github.com/puppetlabs/design-system/blob/main/CONTRIBUTING.md).

## Extending the System

Expand Down Expand Up @@ -65,7 +65,7 @@ Once a pattern has been hardened and validated, it may be a good candidate for a
New design and code patterns should be submitted in tandem to maintain parity. As implementation and adoption of these designs will impact multiple teams, a high degree of scrutiny will be applied to the design and code to assure that it meets our criteria.

- [Design contribution criteria](#/Foundations/Design)
- [Engineering contribution criteria](https://github.com/puppetlabs/design-system/blob/development/CONTRIBUTING.md)
- [Engineering contribution criteria](https://github.com/puppetlabs/design-system/blob/main/CONTRIBUTING.md)

### Review

Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/source/react/library/icon/Icon.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const Renderer = () => {

## Customize icon color

If you need a different color, you can customize it with CSS, targeting the `fill` property. The default color is defined in [_icons.scss](https://github.com/puppetlabs/design-system/blob/development/packages/react-components/source/scss/library/components/_icons.scss). You should be able to do something like `.your-icon { fill: $puppet-purple; }` with Sass.
If you need a different color, you can customize it with CSS, targeting the `fill` property. The default color is defined in [_icons.scss](https://github.com/puppetlabs/design-system/blob/main/packages/react-components/source/scss/library/components/_icons.scss). You should be able to do something like `.your-icon { fill: $puppet-purple; }` with Sass.

```jsx
<Icon type="activity" style={{ fill: '#a263ff' }} />
Expand Down Expand Up @@ -141,7 +141,7 @@ const Renderer = () => {
3. Strip out the wrapping `svg` element, usually (but not always) leaving just a `path`.
4. Remove all instances of the `fill` attribute so that icons can be styled with CSS. You may also remove `clip-rule` attributes.
5. Rename dasherized attributes like `fill-rule` with React-compatible properties like `fillRule`.
6. Add the icon to [icons.js](https://github.com/puppetlabs/design-system/blob/development/packages/react-components/source/react/library/icon/icons.js) in alphabetical order, specifying the icon name and native SVG sizes (from step 2).
6. Add the icon to [icons.js](https://github.com/puppetlabs/design-system/blob/main/packages/react-components/source/react/library/icon/icons.js) in alphabetical order, specifying the icon name and native SVG sizes (from step 2).

## Disclaimer

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ There are times when you might need to use only the graphical icon for a Puppet
4. Remove all instances of the `fill` attribute so that icons can be styled with CSS. You may also remove `clip-rule` attributes.
5. Rename dasherized attributes like `fill-rule` with React-compatible properties like `fillRule`.
6. Add class names to the different `path` segments (so the component can add the correct colors on light and dark backgrounds) for `rc-logo-bug`, `rc-logo-puppet`, and `rc-logo-product`.
7. Add the icon to [logos.js](https://github.com/puppetlabs/design-system/blob/development/packages/react-components/source/react/library/logo/logos.js), using the same format with viewBox dimensions (from step 2) in a separate property.
7. Add the icon to [logos.js](https://github.com/puppetlabs/design-system/blob/main/packages/react-components/source/react/library/logo/logos.js), using the same format with viewBox dimensions (from step 2) in a separate property.

## Related

Expand Down