Skip to content

Illustrations > Base illustrations

Purpose

Create a few base universal illustrations

  • Error
  • Warning
  • Success
  • Congrats
  • Nothing there
  • Wasn’t loaded / loading error
  • Settings
  • Create/add something
  • Anything else?

Concept

✿ Link to Figma file →

Checklists

After all of the following tasks are complete you can close this issue:

Assignee tasks:

See tasks:
  1. 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.
  2. 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.
  3. Ensure that the illustration follows the Illustration guidelines. For third-party trademarks, please review the third-party trademark usage guidelines.
  4. 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:
  1. 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:
  1. 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:
  1. Create a new merge request (MR) from this issue.
  2. Checkout the new branch locally.
  3. 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.
  4. In a terminal window, run yarn run dev to preview the SVG library locally. Find the new illustration and ensure it is rendered accurately.
  5. 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.
  6. Assign the MR to a review by a maintainer, and proceed with any changes.
  7. Add a reference to the change in the Pajamas UI Kit release notes by adding a commit to the current draft MR.

If you run into any problems, ensure that all other steps in the project README have been followed.

Links / references