Design Pattern Library - Resize the icons
We'll resize the icon in the following ways:
- Bounding box:
16x16px
- Live area:
- Height:
14px
- Width:
14px
(If the icon likecommit
is wide but short, the recommended width is16px
) - Make sure the icons balance the visual weight in the particular usage.
- For example,
Retry
icon on CI/CD is smaller than other icons originally, so we will make the icons smaller.(https://gitlab.com/gitlab-org/gitlab-ce/issues/41224)
Tasks:
-
Resize the icons in gitlab-design/progress/hazel/gitlab-icons -
Update the icons in gitlab-elements.sketch -
Update the icons on brand.ai -
Update the icons in gitlab-svgs
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to gitlab-elements.sketch -
Add a merge request that includes any new or updated guidelines to the GitLab Design System -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
Edited by Pedro Moreira da Silva