Skip to content

Illustration > Update snippets_empty

Purpose

Based on https://gitlab.com/gitlab-org/gitlab/-/issues/358587 issue update name and style of snippets_empty illustration.

This illustration is currently only used on the snippets page. However, it could also be used on the profile page. There are two types of contexts in which it could be used:

  • Your snippets. You can add new one
  • Other's snippets. You can't add a new one

I suggest using a universal illustration with the same metaphor as the outdated one.

Screenshots

before after

Checklists

Complete all items in both checklists before closing the issue. All items are the responsibility of the author, unless otherwise noted.

Design

  1. Choose one of the following based on your contribution:
    • If you are a member of the GitLab team in Figma, start with a branch of the 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.
    • For a community contribution, duplicate the illustration file to your drafts in Figma.
  2. Ensure that the illustration follows the Illustration guidelines. For third-party trademarks, please review the third-party trademark usage guidelines.
  3. 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.
  4. Share your branch or draft file with a FE/UX Foundation designer to review, and make sure they have view permissions in Figma. If they have the capacity, they should assign themselves to this issue. If not, try pinging another designer.
  5. Reviewer: 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.
  6. Maintainer: 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

  1. Create a new merge request (MR) from this issue: !898 (merged)
  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 icon 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.

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

Links / references

Edited by Julia Miocene