Skip to content

Icons > Calendar overdue

Description

Primary use: indicating due dates that have past for open items. Currently in issue lists and boards we use calendar paired with the date; when an item is past due both are shown in a danger color. This means that conveying the past due state relies on color alone.

Concept

Similar to other cases where we embed state into an icon, embed an "X" into the bottom-right corner of the base calendar icon.

Existing calendar Proposed addition
image image

Name ideas: calendar-issue calendar-overdue calendar-danger

  • From discussion in Figma, we decided on calendar-overdue to be specific to the intended purpose and avoid potential misuse.

Figma file

❖ View working file in Figma →

Checklists

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

Assignee tasks:

See tasks:
  1. Create or update an icon
    • If you’re a community contributor, please fork the GitLab Product Icons file when updating or creating an icon.
    • If you’re a GitLab team member, please create a branch of the GitLab Product Icons file. Prefix the branch name with the issue, MR, or epic number, and add your GitLab username as the suffix. For example, #860-new-icon-lvanc. Then update or create an icon.
  2. Update the link to the working file under the Figma link section above.
  3. If work was not done in a branch (a merged branch will automatically be archived), move your working file to the shared Figma project:
    1. For all other changes, move your file to the [Misc archive][misc-archive] project.
    2. If you’re a community contributor, please consider transferring ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments.
  4. When applicable, follow our [iconography][iconography] guidelines. For third-party trademarks, please review the third-party trademark usage guidelines.
  5. Ask a [Foundations designer][foundations-team] to review your design.
    • If you’re a community contributor, ensure the designer that will be reviewing your file has edit permissions in Figma.
    • If you’re a GitLab team member, request a review in Figma.

Reviewer tasks:

See tasks:
  1. Review the icon in the author’s branch. Add design-specific comments in Figma to maintain context. Add general comments to this issue, including your approval status.
  2. Once review is approved, assign to a Figma maintainer for final review.

Maintainer tasks:

See tasks:
  1. Merge the branch to the GitLab Product Icons file, convert the icon to a component, add keywords and usage notes (optional) in the description, and view it in the Assets panel to ensure it aligns with what’s outlined in the document and asset library structure documentation.
  2. Publish the library changes along with a clear message about the update.

Library addition tasks:

Once the Reviewer or Maintainer has approved your icon design, consider the following tasks to add the icon the gitlab-svgs library.

See tasks:
  1. Create a new merge request (MR) from this issue.
  2. Assign a label to the MR, such as foundationiconography, and any other relevant labels as needed.
  3. Open the branch in the Web IDE.
  4. In Figma, export the icon component from the GitLab Product Icons file. The parent frame of the icon should not have "Clip content" checked in the Design panel. Consider using the Advanced SVG Export plugin to export an optimized SVG file (the plugin settings can also control what attributes are included or removed).
  5. In the Web IDE, upload the file to the /sprite_icons folder. The file name should be lowercase, and use hyphens as a separator between terms.
  6. Open the icon file and:
    • Ensure that the viewBox attribute is present and matches the icon frame dimensions (either viewBox="0 0 12 12" or viewBox="0 0 16 16").
    • Remove any desc or clipPath attributes.
    • Remove the fill="none" attribute from the <svg> element.
  7. After you’ve committed the changes and the pipeline passes, double-check your icon in the review app by changing settings in the Icon configuration panel of the site. The icon should change color and size with no issues.
  8. Assign the MR to be reviewed and merged by a maintainer, and proceed with any changes.
  9. 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

[foundations-team]: https://about.gitlab.com/company/team/?department=ecosystem-foundations-team [iconography]: https://design.gitlab.com/product-foundations/iconography [misc-archive]: https://www.figma.com/files/project/10620392/Misc-archive

Edited by Nick Leonard