Icon > Milestone
Description
Currently we use clock
for milestone, however this icon is ambiguous and used for other data points unrelated to milestones.
Creating a milestone-specific icon would aid cases where milestones are shown using an icon such as in the issue list by establishing a single unique visual that always means "milestone".
Concept
As a timebox, milestone has many potential icon representations using metaphors including mountains, flags/flagpoles, boxes/roadmaps, etc. Milestones can also be represented more as a highlighted point in time, which may be more of a generic shape within a roadmap.
A few options explored include:
My current preference is marker/diamond as the most simple and effective representation. While not required for this icon to work this would be possible to incorporate into the roadmap. This is familiar from a number of other project management tools where the diamond shape is used to denote milestones within a timeline.
Embedding status
In some cases it could be beneficial to encode the status of a milestone into the visual to provide a single point of reference. As an example in the issue list a user could tell whether an item was assigned to an upcoming or closed milestone, which each says something different about that issue.
Milestone statuses are: Upcoming, Open, Expired, Closed. Expired could use the same icon as Open, as both are "active".
Ideally any status-oriented solution can be reproduced for iterations, which have the same statuses and general use cases for why it'd be useful to see at a glance.
Initial rough concepts
Strategy | Upcoming | Open | Closed |
---|---|---|---|
Add-on modifier | |||
Stroke/Fill | |||
Inset modifier |
Alternate approach: Overlay
The above concepts embed status directly into the icon (i.e. into the SVG). We could instead always keep the icon the same but combine the icon with a separate overlay containing the status. This would allow for the icon to retain a base color while the overlay could have a status color.
Strategy | Upcoming | Open | Closed |
---|---|---|---|
Separate overlay |
Figma file
Checklists
After all of the following tasks are complete you can close this issue:
Assignee tasks:
See tasks:
-
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.
-
Update the link to the working file under the Figma link section above. -
If work was not done in a branch (a merged branch will automatically be archived), move your working file to the shared Figma project: - For all other changes, move your file to the Misc archive project.
- 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.
-
When applicable, follow our iconography guidelines. For third-party trademarks, please review the third-party trademark usage guidelines. -
Ask a Foundations designer 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:
-
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. -
Once review is approved, assign to a Figma maintainer for final review.
Maintainer tasks:
See tasks:
-
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. -
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:
-
Create a new merge request (MR) from this issue. -
Checkout the new branch locally. -
Export the icon component from the Pajamas UI Kit (in Figma) to the /sprite_icons folder in your local instance of the repo. The file name should be lowercase, and use hyphens as a separator between terms. -
Open the SVG you just exported in your code editor and remove fill="none"
from the<svg>
element. -
In a terminal window, run yarn run dev
to preview the SVG library locally. Find the new icon and test it out by changing settings in the Icon configuration panel of the site. The icon should change color and size with no issues. -
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. -
Assign the MR to be reviewed and merged by a maintainer, and proceed with any changes. -
Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of the new icon, linking to this issue.
If you run into any problems, ensure that all other steps in the project README have been followed.