Consolidate angles, arrows, and chevrons
## What Our SVG library has different labeling and categorization for similar icon concepts. This is an effort to begin the process of simplifying the categories and establishing definitions. We primarily use **chevrons**, and that will be the main category moving forward. ### Definitions | Icon | Description | | ------ | ------ | | ![arrow.svg](/uploads/1b1776632d2751e4890b88bdf080e3c6/arrow.svg) | **Arrow** - An arrow has a tail | | ![caret.svg](/uploads/9ca8e60d854a0866aa270e7427d75b55/caret.svg) | **Caret** - A caret is a solid triangle | | ![chevron.svg](/uploads/bad3682ffdc8af9fc9389f04e2383c0e/chevron.svg) | **Chevron** - A chevron is an open angle | ## Process 1. Duplicate some icons to establish new naming conventions. This means that `angle-double-left` and `chevron-double-lg-left` are the same icon, and exist together for a time, so that we can incrementally change instance names in the product. 1. Rename icon symbols in Sketch to prevent any new designs from using old conventions 1. Once icons with new names are available to the product, begin updating instances 1. After all icon instances in the product have been updated, deprecate duplicate icons that use the current naming convention in the SVG library ## Proposed changes * New names are structured to help keep related icons grouped when listed in the SVG library * New names reflect duplicate icons that will be added to the library | **Icon** | **Current name** | **New name** | | ------ | ------ | ------ | | ![angle-double-left.svg](/uploads/c41af14594b1686281b33f49085a6f20/angle-double-left.svg) | `angle-double-left` | `chevron-double-lg-left` | | ![angle-double-right.svg](/uploads/df45c758ab1631d1aca79a8333851371/angle-double-right.svg) | `angle-double-right` | `chevron-double-lg-right` | | ![angle-down.svg](/uploads/6c3f16235b6fc006c84d95fce89dfa18/angle-down.svg) | `angle-down` | `chevron-lg-down` | | ![angle-left.svg](/uploads/efc36cdf2ecb9bbcf7933e396d0c5cce/angle-left.svg) | `angle-left` | `chevron-lg-left` | | ![angle-right.svg](/uploads/e27b141319d47dbd96f72c9d7cc7619b/angle-right.svg) | `angle-right` | `chevron-lg-right` | | ![angle-up.svg](/uploads/693c483d911281a7923cbbdfe6e87f83/angle-up.svg) | `angle-up` | `chevron-lg-up` | | ![arrow-down.svg](/uploads/22703882541b7338019f424037922d2f/arrow-down.svg) | `arrow-down` | *No change since `chevron-down` exists* | | ![arrow-right.svg](/uploads/23b19fbcb0d900316cd10bbc2d6d4768/arrow-right.svg) | `arrow-right` | - | | ![arrow-up.svg](/uploads/90d4819481782eb8de8d84df04ef214e/arrow-up.svg) | `arrow-up` | *No change since `chevron-up` exists* | | ![chevron-down.svg](/uploads/0dd17de89c44e72cd97f41256a56f8b3/chevron-down.svg) | `chevron-down` | - | | ![chevron-left.svg](/uploads/d6bc3931e59ba14ce46c942f2b357cde/chevron-left.svg) | `chevron-left` | - | | ![chevron-right.svg](/uploads/f01f779e70a8cd4fc686c97263ba3243/chevron-right.svg) | `chevron-right` | - | | ![chevron-up.svg](/uploads/3a6569cbbfcd2b34ad381b8b494b2391/chevron-up.svg) | `chevron-up` | - | These items are out of scope, or do not need changed: * Icons that have any of the above shapes in them, but represent other concepts, e.g., `play`, `collapse-right`, or `import` * FontAwesome icon references ### Checklist Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the [Sketch UI Kit documentation](https://gitlab.com/gitlab-org/gitlab-design/blob/master/doc/sketch-ui-kit.md) which has information on updating files, structure, fonts, and symbols. 1. [-] **Author**: Create a Sketch file in your progress folder with the changes required for this issue. Try to use existing symbols, layer styles, and text styles. 1. [-] **Author**: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person. 1. [-] **Reviewer**: Review and approve author's changes in their personal Sketch file, according to the [workflow](https://gitlab.com/gitlab-org/gitlab-design/blob/master/doc/sketch-ui-kit.md#sketch-workflow). 1. [x] **Author**: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this [step-by-step process](https://gitlab.com/gitlab-org/gitlab-design/blob/master/doc/sketch-ui-kit.md#when-changes-are-approved). 1. [x] **Author**: Ask the reviewer to review your changes to the Sketch UI Kit files. 1. [x] **Reviewer**: Review and approve author's changes to the Sketch UI Kit files, according to the [workflow](https://gitlab.com/gitlab-org/gitlab-design/blob/master/doc/sketch-ui-kit.md#sketch-workflow). 1. [-] **Author**: [Create an issue in the Design System](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/issues/new) to update the design **specs** and **documentation**. Mark it as related to this issue. 1. [x] **Author**: Add a read only (FYI) agenda item to the next [UX weekly call](https://docs.google.com/document/d/189WZO7uTlZCznzae2gqLqFn55koNl3-pHvU-eVnvG9c/edit?usp=sharing) to inform everyone of these changes, linking to this issue. /label ~"UX" ~"pattern library" ~Pajamas ~"pajamas::create" /cc @gitlab-com/gitlab-ux @gtsiolis @leipert
issue