Third bunch of illustrations
Purpose
security-dashboard-empty-state
, cycle-analytics-empty-chart
-> empty-dashboard-md
before | after |
---|---|
lock_promotion
, no-access
-> empty-access-md
before | after |
---|---|
examples
before | after |
---|---|
list
-> empty-epic-md
before | after |
---|---|
examples
before | after |
---|---|
chart-empty-state
, chart-empty-state-small
-> empty-chart-md
before | after |
---|---|
examples
before | after |
---|---|
canceled-job_empty
-> empty-job-canceled-md
before | after |
---|---|
examples
before | after |
---|---|
illustrations_scheduled-job_countdown
-> empty-job-scheduled-md
before | after |
---|---|
examples
before | after |
---|---|
job_not_triggered
-> empty-job-not-triggered-md
before | after |
---|---|
pending_job_empty
-> empty-job-pending-md
before | after |
---|---|
skipped-job_empty
-> empty-job-skipped-md
before | after |
---|---|
project-run-CICD-pipelines-sm
-> empty-devops-md
before | after |
---|---|
examples
before | after |
---|---|
geo-empty
-> empty-geo-md
before | after |
---|---|
examples
before | after |
---|---|
chat-bubble-sm
-> chat-sm
before | after |
---|---|
add-user-sm
cloud-check-sm
merge-requests-sm
chart-bar-sm
milestone-sm
pipeline-sm
Checklists
After all of the following tasks are complete you can close this issue:
Assignee tasks:
See tasks:
-
Start with a branch of the GitLab Illustration file in Figma. Prefix the branch name with the issue number, and add your GitLab username as the suffix. For example, #120-feature-illustration-jelder
. -
Choose/copy a grid frame from the Grid page. Work on your illustration in the appropriate component or library page. A small illustration that can be used as a standalone "spot" illustration, or as a reusable element in a larger illustration can be added in the Components page, while all others can be added to the library page that makes the most sense. -
Ensure that the illustration follows the Illustration guidelines. For third-party trademarks, please review the third-party trademark usage guidelines. -
Request a review from a FE/UX Foundation designer for your Figma branch. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer.
Reviewer tasks:
See tasks:
-
Review the illustration. Add design-specific comments in Figma to maintain context. Add general comments to this issue, including your approval status. Once approved, assign to a Figma maintainer for final review.
Maintainer tasks:
See tasks:
-
Either merge the branch and publish library changes, or copy/paste the illustration from a draft file to the illustration file under the appropriate page and category. The frame name should match the exported file name (without the extension).
Library addition tasks:
Once the Reviewer or Maintainer has approved your illustration, consider the following tasks to add it to the gitlab-svgs
library.
See tasks:
-
Create a new merge request (MR) from this issue. -
Checkout the new branch locally. -
Export the illustration from the illustration file in Figma to the /illustrations folder in your local instance of the repo. The file name should be lowercase, and use hyphens as a separator between terms. If necessary, place the illustration in one of the sub-directories. -
In a terminal window, run yarn run dev
to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately. -
After you’ve committed the changes and the pipeline passes, double-check your illustration in the review app and test that it matches your expectations. -
Assign the MR to a review by a maintainer, and proceed with any changes.
If you run into any problems, ensure that all other steps in the project README have been followed.