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

Creating an issue template for icon submissions and updating contribution guidelines #367

Merged
merged 4 commits into from
Jan 21, 2020
Merged

Creating an issue template for icon submissions and updating contribution guidelines #367

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
00da549
Create submission template
jonrohan Jan 17, 2020
ed97c31
Update CONTRIBUTING.md
jonrohan Jan 17, 2020
ec99f9d
Update CONTRIBUTING.md
jonrohan Jan 17, 2020
d867e65
Apply suggestions from code review
jonrohan Jan 17, 2020
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
34 changes: 19 additions & 15 deletions .github/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,40 +25,44 @@ Make sure your duplicate file can be viewed by others. In the share menu "Anyone

[<img src="https://user-images.githubusercontent.com/54012/37803059-3ca54432-2dea-11e8-8c27-36c83a2dc5cb.gif" width="400"/>](https://user-images.githubusercontent.com/54012/37803059-3ca54432-2dea-11e8-8c27-36c83a2dc5cb.gif)

### Step 4, Pull Request: _(Optional)_
### Step 4, Create a new icon submission issue

You can submit a pull request updating the `FIGMA_FILE_URL` configuration in the .github/workflows/[push.yml](https://github.com/primer/octicons/blob/master/.github/workflows/push.yml#L17) with your Figma file. Doing so will generate alpha releases of [all the libraries that distribute Octicons](https://github.com/primer/octicons#libraries).
Create a new issue using the [Octicon submission](https://github.com/primer/octicons/issues/new?template=octicon-submission.md) template. Fill out the issue with screenshots of the icon(s), a link to the figma document, and remaining information.

If an icon was edited or added, you should see the before and after images directly in the PR. In addition, please describe your proposed changes in the PR's description.
The design systems team will review the submission and request any changes. If approved, your icon will be added to the next octicons release.

Once the build passes on your pull request, you should see statuses with all the alpha versions of the libraries. You can then use these to test your changes.

[Here is an example pull request](https://github.com/primer/octicons/pull/206)

[<img src="https://user-images.githubusercontent.com/54012/37811102-45ec2abc-2e15-11e8-8c1d-2d162ddcdad2.png" width="700"/>](https://user-images.githubusercontent.com/54012/37811102-45ec2abc-2e15-11e8-8c1d-2d162ddcdad2.png)

---

## Maintainers accepting changes

Once submitted changes have been agreed upon, these instructions will guide core primer team members in merging in those changes.

### Step 1, Save:
## Adding the icon
jonrohan marked this conversation as resolved.
Show resolved Hide resolved

### 1. Paste into master figma file
jonrohan marked this conversation as resolved.
Show resolved Hide resolved

If the icon is being updated, you'll need to keep the existing component and copy the new path into it.

### 2. Join any separate paths
jonrohan marked this conversation as resolved.
Show resolved Hide resolved

Any separate shapes under the icon component need to be unioned into one path. This is for performance when serving the icons.

Save the contributor’s Figma file as a `.fig` file and open in Figma (it will automatically be imported into your Drafts)
![image](https://user-images.githubusercontent.com/54012/72647901-7c9a7e80-392e-11ea-9e9b-08c4b8e1af0c.png)


## Step 2, Import:
### 3. Create and/or publish the icon as a figma component
jonrohan marked this conversation as resolved.
Show resolved Hide resolved

Drag and drop, or paste the updated or new icon from the contributer's file into the main Octicons Figma file. Make sure that the SVG only contains a single `path` and that it has relevant component keywords in Figma.
Make sure you publish the icon changes to the figma component library. https://help.figma.com/hc/en-us/articles/360038665934
jonrohan marked this conversation as resolved.
Show resolved Hide resolved

### 4. Add keywords to the icon
jonrohan marked this conversation as resolved.
Show resolved Hide resolved

### Step 3, Add:
Each icon needs keywords to help build out the icon search. Add `keywords: foo, bar` to the "Component" section in the figma toolbar.

Once the new changes have been added the new components to the master Octicons file, you can publish to the team library in Figma.
![image](https://user-images.githubusercontent.com/54012/72647771-26c5d680-392e-11ea-9167-462d5bb27936.png)
jonrohan marked this conversation as resolved.
Show resolved Hide resolved


### Step 4, Create a Release Branch in Octicons:
## Updating the release version

After you've published the latest changes in the Figma file, create a release branch in the [Octicons repo](https://github.com/primer/octicons).

Expand Down
23 changes: 23 additions & 0 deletions .github/ISSUE_TEMPLATE/octicon-submission.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
name: Octicon submission
about: Submit a new icon or an update to an existing icon
title: 'Icon submission: [NAME OF ICON]'
labels: ''
assignees: ''

---

**What does it look like?**

| Before (Optional) | After |
| :- | :- |
| | |

**Figma link:** [Asset]()

**What is the timeline?**

**Where will this be used?**

---
@primer/octicons