Upgrade/Update available
Purpose
We need an icon to represent when an upgrade or update for a software is available. The top use cases this includes is updating/upgrading your GitLab instance or updating/upgrading GitLab runner. Depending on the scenario, update or upgrade is appropriate to use
Update: Use update for installing a newer patch version of the software only. For example Update GitLab from 14.9 to 14.9.1. Updates are generally more important for the user to know about since they contain security fixes.
Upgrade: Use upgrade for installing a newer major (13.0, 14.0) or minor (13.8, 14.5) version of GitLab. For example Upgrade GitLab from 14.0 to 14.1. Upgrade GitLab from 14.0 to 15.0. Upgrades are generally recommendations for the user to update to get the newest features.
Specific use case context for this icon
The context for this icon would be to indicate that a runner has an update or upgrade available. These vary in importance/sensitivity, which I'd want to incorporate as well (through our alert colors probably). If you are behind in a patch release (security), you may have to update ASAP vs being behind in a minor/major release, which could be only a recommended upgrade (somewhat similar to how google chrome does it).
Here's where I want to use it in the runner list (where the arrow-up is currently). We are not differentiating between updates vs upgrades for the MVC, but we will in our next iteration:
More context can be found in Add icon for "upgrades" (gitlab-org/gitlab-services/design.gitlab.com#1340 - closed)
Concept
| A | B | C |
|---|---|---|
 |
 |
 |
I think we are leaning towards A right now:
Checklists
Complete all items in both checklists before closing the issue. All items are the responsibility of the author, unless otherwise noted.
Design
-
Duplicate the Icon template and move the copy to your Drafts folder in Figma. Update the file name and cover thumbnail with relevant issue information. -
Share your 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 Foundations designer. -
Reviewer: Review the icon in the author’s draft file. 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: Add the icon to the component library file, convert it to a component, and view it in the Assets panel to ensure it aligns with what’s outlined in the document and asset library structure documentation. -
Maintainer: Publish the library changes along with a clear message about the update. -
Author: Move your draft file to the Component archive Figma project.
Library addition
-
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 devto 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.