## Description * Adds `columns` icon. * Adds `rows` icon. * Adds `timeline` icon. * Updates `table` icon. ### Concept **Primary use case** Board view on the work items list. For example, go to https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/work_items. The view mode toggle shows text buttons: **List** and **Board**. This icon will be used for the **Board** button. {width=300} - Related work: https://gitlab.com/groups/gitlab-org/-/work_items/22581 For reference, this is how the toggle could look once Table view is added: [Figma](https://www.figma.com/design/9gbgnYGpKDIoXQFluXpYkM/Work-Items---Table-view?node-id=146-83373&t=fdDHz5xof584r9VH-1) **Existing (related) icons** - [`work-item-issue-board`](https://design.gitlab.com/product-foundations/iconography-directory/?q=%7Ework-item-issue-board) and [`work-item-epic-board`](https://design.gitlab.com/product-foundations/iconography-directory/?q=%7Ework-item-epic-board) were added for the [customized navigation effort](https://gitlab.com/gitlab-org/gitlab/-/work_items/596500). They point to the legacy issue and epic boards. - Once the legacy boards experience is deprecated, these icons may no longer be needed and can be removed. ### Figma file <!-- Before pasting the link to your Figma file/frame, in the file sharing settings, make sure that “anyone with the link” can view or that a specific user has been invited to the file. --> [❖ View working file in Figma →](https://www.figma.com/design/h4YjjttHL5YI0mXZfQ4uuU/branch/4P08jVKb6UBcwZSQbfVM8f/GitLab-Product-Icons?m=auto&node-id=0-1&t=bsMGtojo6KUDQddn-1) --- ## Checklists **After all of the following tasks are complete you can close this issue:** ### Assignee tasks <details><summary>See tasks:</summary> 1. [x] Create or update an icon: - If you’re a community contributor, please fork the [GitLab Product Icons file](https://www.figma.com/community/file/1051267829358377715) when updating or creating an icon. - If you’re a GitLab team member, please create a [branch](https://www.figma.com/best-practices/branching-in-figma/) of the [GitLab Product Icons file](https://www.figma.com/file/h4YjjttHL5YI0mXZfQ4uuU/GitLab-Product-Icons). 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. 1. [x] Update the link to the working file under the **Figma link** section above. 1. [ ] If work was not done in a branch (a merged branch will automatically be archived), move your file to the [**Misc archive**][misc-archive] project. If you’re a community contributor, please consider [transferring ownership of your draft file](https://help.figma.com/hc/en-us/articles/360040530853) to the maintainer so they can move it to our archive, along with its version history and comments. 1. [x] When applicable, follow our [iconography][iconography] guidelines. For third-party trademarks, please review the [third-party trademark usage guidelines](https://handbook.gitlab.com/handbook/legal/policies/product-third-party-trademarks-guidelines/). 1. [x] Add a description and `Keywords:` line to the icon component’s Description in Figma. These appear in the Assets panel and are used as the source of truth for the icon’s metadata in the `gitlab-svgs` library. For example: > Used to represent the Jobs feature in the Build category. > > Keywords: pipeline, job, jobs, arrow 1. [x] 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](https://help.figma.com/hc/en-us/articles/5691414603543-Request-a-branch-review). </details> ### Reviewer tasks <details><summary>See tasks:</summary> 1. [x] Review the icon in the author’s branch, including the keywords and description on the icon component. Add design-specific comments in Figma to maintain context. Add general comments to this issue, including your approval status. 1. [x] Once review is approved, assign to a [Figma maintainer](https://handbook.gitlab.com/handbook/engineering/projects/#design.gitlab.com) for final review. </details> ### Maintainer tasks <details><summary>See tasks:</summary> 1. [x] Review the icon’s keywords and description on the component. 1. [x] Merge the branch to the **GitLab Product Icons** file and verify the icon appears correctly in the Assets panel, aligned with the [document and asset library structure](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/pajamas-ui-kit.md#structure) documentation. 1. [x] Publish the library changes along with a clear message about the update. 1. [x] Once the `gitlab-svgs` MR has merged, publish the icon library Code Connect mapping by running `yarn figma:connect publish --force` in `packages/gitlab-ui` (requires `.figma.env`). Verify the `<gl-icon name="…" />` snippet appears for the icon in Figma Dev Mode. </details> ### Library addition tasks Once the Reviewer or Maintainer has approved your icon design, complete these tasks to add the icon to the `gitlab-svgs` library. <details><summary>See tasks:</summary> <!-- This checklist helps streamline the process of getting an icon from Figma to the library. --> 1. [x] Create a new merge request (MR) from this issue. 1. [x] Checkout the new branch locally or in the Web IDE. 1. [x] In Figma, export the icon component from the [GitLab Product Icons](https://www.figma.com/community/file/1051267829358377715/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](https://www.figma.com/community/plugin/782713260363070260) plugin to export an optimized SVG file (the plugin settings can also control what attributes are included or removed). 1. [x] Add the file to the **/packages/gitlab-svgs/sprite_icons** folder. The file name should be lowercase, and use hyphens as a separator between terms. 1. [x] Add or update the icon’s entry in `packages/gitlab-svgs/sprite_icons/icons.meta.json` (alphabetical order), using the keywords and description from the Figma component as the source of truth. Available fields: - `keywords`: search terms, including synonyms and visual descriptors. - `description`: usage notes describing what the icon can be used for. - `deprecated`: set to `true` when the icon is being phased out. - `aliases`: alternative names that resolve to the same icon appearance. 1. [x] 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. 1. [x] Include a [changeset](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/changesets.md) for the `@gitlab/svgs` package with a minor bump. 1. [x] Update the icon library [Code Connect](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/components/base/icon/) so the icon resolves in Figma Dev Mode. Do this **after the Figma branch has been merged** into the main **GitLab Product Icons** file — the `node-id` changes when the branch is merged, so an id captured from a branch will be wrong. Add (or rename) the icon's entry in `packages/gitlab-ui/src/components/base/icon/icon.figma.batch.json`, using the icon's `node-id` from the merged **GitLab Product Icons** file. Include a `"size"` field for non-16px icons (for example, `"size": 12`). A maintainer publishes the mapping after the MR merges. 1. [x] After you’ve committed the changes and the pipeline passes, double-check your icon in the review app by changing the icon size and the mode (light/dark) settings. The icon should change color and size with no issues. 1. [x] Assign the MR to be reviewed and merged by a [maintainer](https://handbook.gitlab.com/handbook/engineering/projects/#gitlab-svgs), and proceed with any changes. If you run into any problems, ensure that all other steps in the project [README](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-svgs/README.md) have been followed. </details> --- ## Links / references <!-- Add external links and references if necessary --> [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