Pajamas Design System issueshttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues2024-02-29T22:41:27Zhttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1477Filter component — move filter tokens outside of the search box2024-02-29T22:41:27ZMatej LatinFilter component — move filter tokens outside of the search boxThe filter component is complex and consequently comes with accessibility and usability problems. Even if most of these problems are solved, the main concern with the filter component is scalability. Numerous filters can be added to it b...The filter component is complex and consequently comes with accessibility and usability problems. Even if most of these problems are solved, the main concern with the filter component is scalability. Numerous filters can be added to it but it is often limited in width which can result in:
![image](/uploads/2a50ac12643bea59b123f134c448245a/image.png)
A lot of these problems are in the process of being solved, but as I explored the filter builder patterns (https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1478+) I thought: maybe most of these problems could be solved if we moved the filter tokens outside of the search. Here's a video of a basic prototype:
![filter-change](/uploads/1550c6db142f155e73cc1ab8f69297c8/filter-change.mov)
[Prototype](https://www.figma.com/proto/SsY1o3v6tRkOC7zX8URlxZ/Filter-alternatives?page-id=0%3A1&node-id=1%3A12364&viewport=4%2C-68%2C0.28&scaling=min-zoom&starting-point-node-id=1%3A12364)
_As you can see, everything works the same, except the filters are added outside at the end of the interaction._
This would partially decouple search and filtering making the component slightly less complex and more scalable. The new concern is: would placing filters outside work in screens with condense and busy UI? We often place other UI elements right below the filter component so this _could_ lead to some of the screens being even busier. Here's an example:
![image](/uploads/8009c1a83983ab2cba7ecbef096c603c/image.png)
The issue boards example has a similar problem here, but it could work well if the beautification proposal from Beautify UI 15.6 was applied:
![image](/uploads/3326f644c21e4112693024062442d5e6/image.png)Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/812POC: Merging Pajamas and GitLab UI2023-03-20T13:28:04ZTaurie DavisPOC: Merging Pajamas and GitLab UI# Overview
We'd like to put together a proof of concept that combines Pajamas and GitLab UI into one repository. The proof of concept will be a new, third repo to test out how the two repos will work together and ensure CI still functio...# Overview
We'd like to put together a proof of concept that combines Pajamas and GitLab UI into one repository. The proof of concept will be a new, third repo to test out how the two repos will work together and ensure CI still functions as expected.
By the end of the POC we should know whether or not it is feasible to migrate the repos into one monorepo. We should also determine whether or not this solves for the problems outlined below.
# Background
## Problems we want to solve
* Having two external sites (pajamas & gitlabui) to visit, depending on the use case
* Building/updating components separately from updating usage documentation
## Considerations:
* We want to maintain the ability to brand our design system in alignment with principles and design standards.
* We want to remain flexible. Marketing is building their own separate design system (currently a component library) using storybook. We should think about how those two component libraries may work together to build one cohesive design system in the future.
## Related issues:
https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/359
https://gitlab.com/gitlab-org/gitlab-ui/-/issues/888
https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1162
https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/490
https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/359
## Meeting notes
> Paul: storybook is a great tool for writing components, it's isolated and has lots of addons like accessibility that are valuable. On the other hand, we have a Nuxt website that is easy to brand. Maybe we can build more bridges between both. Maybe embed storybook pages into nice website to make it clear SSOT.
>
> Eipi: Based on your point above, what if we pull them into one repository?
>
> Paul: Monorepo, so you can build components and specs/guidelines in the same project.
>
> Eipi: One thing we could do is have design.gitlab.com folder and gitlab ui file in monorepo so keep structure in place.
>
> Eipi: We could create a third project as a test project and a POC.
>
> Mike: There is a react focus on storybook, so when running yarn you see a lot of errors. Were already seeing some friction in how we use storybook vs. how its suppose to be used.Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1556Define universal page templates2024-02-29T14:19:46ZJeremy ElderDefine universal page templates## Purpose
⚠️ {-This is currently on hold and waiting for some other efforts around navigation to complete.-}
As it relates to the sidebar navigation updates, work on defining universal page templates that can be documented in Pajamas,...## Purpose
⚠️ {-This is currently on hold and waiting for some other efforts around navigation to complete.-}
As it relates to the sidebar navigation updates, work on defining universal page templates that can be documented in Pajamas, and leveraged as templates in Figma.
Page templates at this high level would be applicable to any and all product pages with the goal of providing a universal construct for:
- Navigation
- DOM order
- Responsiveness
[![Figmacon.svg](/uploads/6d8faed71198c8641492e3239873f029/Figmacon.svg) View working file in Figma →](https://www.figma.com/file/NTRJ3TOajNYCKvBl1mHXJY/DRAFT%3A-Page-templates?node-id=0%3A1&t=TFlDhkpZhM2EBWZE-11)
### Regions
- Sidebar navigation
- Breadcrumb
- Page header
- Main content
- Right sidebar
### Considerations
- Navigation behavior
- Breakpoints and container queries
- Sticky behavior
- Condensed/combined header on scroll
- Sidebar behavior
- Placement of instance header/footer, broadcast messages, and global alerts
- And more!
## Deliverables
- [ ] Page templates in Figma
- [ ] Pajamas documentation under 'Page templates' (this section exists in concept, but to date no templates have been added so it isn't currently available on the site)
## Out of scope
- Fluid vs. fixed layout choices and settings
## Resources
- https://design.wikimedia.org/blog/2023/01/25/designing-single-grid-system.htmlBackloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1478Document the "Filter builder" pattern2023-02-28T13:02:45ZMatej LatinDocument the "Filter builder" patternFor more sophisticated filtering of more complex data, a more sophisticated pattern is required. One that would allow high level of customisation of filters with different operators and possibility to select multiple options for a parame...For more sophisticated filtering of more complex data, a more sophisticated pattern is required. One that would allow high level of customisation of filters with different operators and possibility to select multiple options for a parameter.
Goals of this issue:
* Discuss and decide whether we should document multiple filter builder patterns or just one?
* Consider all the requirements for filtering complex data (is there something missing in current explorations?)
* If we decide to update the filter component as described here (gitlab-org/gitlab-services/design.gitlab.com#1477+), do we still need the filter builder pattern?
* Solution validation as required
## Single dropdown
Pro: minimal UI placed contextually to where the filter adding is triggered.
Con: the interaction inside the dropdown is new to GitLab, maybe it's a bit unusual?
![single-dropdown](/uploads/c63aa65913932beac7ec042e469e1a4f/single-dropdown.mov)
[Prototype](https://www.figma.com/proto/SsY1o3v6tRkOC7zX8URlxZ/Filter-alternatives?page-id=0%3A1&node-id=10%3A12973&viewport=401%2C-371%2C0.31&scaling=min-zoom&starting-point-node-id=10%3A12973&show-proto-sidebar=1)
## Drawer 1
Pro: Very flexible and gives designers a lot of space to work with.
Con: Isn't placed contextually (opposite of single dropdown) and adding numerous filters could get cumbersome.
![drawer-1](/uploads/88876445f51f7cacac2062e1f00629e8/drawer-1.mov)
[Prototype](https://www.figma.com/proto/SsY1o3v6tRkOC7zX8URlxZ/Filter-alternatives?page-id=0%3A1&node-id=16%3A10646&viewport=507%2C-779%2C0.31&scaling=min-zoom&starting-point-node-id=16%3A10646&show-proto-sidebar=1)
## Drawer 2
Pro: Very flexible and gives designers a lot of space to work with and it's fast to add filters.
Con: Isn't placed contextually (opposite of single dropdown) and adding numerous filters could get cumbersome. But because this option is faster, maybe less cumbersome than _Drawer 1_?
![drawer-2](/uploads/b7c6f23437ce1aa3a26851225fa08c65/drawer-2.mov)
[Prototype](https://www.figma.com/proto/SsY1o3v6tRkOC7zX8URlxZ/Filter-alternatives?page-id=0%3A1&node-id=18%3A19004&viewport=507%2C-1082%2C0.31&scaling=min-zoom&starting-point-node-id=18%3A19004&show-proto-sidebar=1)
## 3 dropdowns
Pro: Lots of flexibility contextually placed right in the UI.
Con: Problems with placement in condense UI when there's little room to work with.
![3-dropdowns](/uploads/f2af9ed374fa5a1914db81dd59f8dd1a/3-dropdowns.mov)
[Prototype](https://www.figma.com/proto/SsY1o3v6tRkOC7zX8URlxZ/Filter-alternatives?page-id=0%3A1&node-id=48%3A23030&viewport=553%2C-1897%2C0.31&scaling=min-zoom&starting-point-node-id=48%3A23030&show-proto-sidebar=1)
## Modal
Pro: High level of flexibility with amount of content and its placement, more contextual placement than the drawer.
Con: It's a modal 🤷♂️
![modal](/uploads/b73c44e7d4b3222950f7d0449f4d54f0/modal.mov)
[Prototype](https://www.figma.com/proto/SsY1o3v6tRkOC7zX8URlxZ/Filter-alternatives?page-id=0%3A1&node-id=144%3A30654&viewport=553%2C-2200%2C0.31&scaling=min-zoom&starting-point-node-id=144%3A30654&show-proto-sidebar=1)Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/535Add the Hotspot component2024-02-15T09:58:40ZMatej LatinAdd the Hotspot componentRight now, we use these components inconsistently. We also haven't aligned on its name. Sometimes it's referred to as "the dot", other times it's a "hotspot". We should decide on the name, as well as come up with a consistent design, how...Right now, we use these components inconsistently. We also haven't aligned on its name. Sometimes it's referred to as "the dot", other times it's a "hotspot". We should decide on the name, as well as come up with a consistent design, how users interact with this component and its guidelines (separate issue).
| Example 1 | Example 2 |
|-----------|-----------|
|![image](/uploads/d63d3098b5fc3d9176f8268365441546/image.png) | ![image](/uploads/6f8da2597ff1d34161c8b3912a5fa595/image.png) |
[Interactive and animated prototype of Example 2](https://codepen.io/matejlatin/pen/ExarvPr)
<!-- Start by making a copy of the component template to your own drafts.
In Figma:
1. Duplicate the component template https://www.figma.com/file/OmvFfWkqEsdGhXAND133ou/Component?node-id=0%3A1
2. Open the duplicate, then use the dropdown next to the file name to select “Move to Project…”
and select your Drafts as the new location.
3. Update the template with your component name and start designing ;)
-->
<!--Add a short description of the component. If it’s helpful, add a checklist of variations
and states to the description so that a reviewer can be sure to cross reference everything
that has been completed.-->
<!--Use the Figma share feature and make sure that “anyone with the link” can view. Then,
specifically invite the reviewer with “edit” permissions selected. Anyone can duplicate the
file to their own drafts and edit from there, but the reviewer can directly edit and
collaborate on the file. This will help maintain the integrity of the initial draft.-->
[View component in Figma →](ADD LINK TO FIGMA FRAME)
### Checklist
Make sure the following are completed before closing the issue:
1. [ ] **Assignee**: Create component in your own draft file in Figma using the
[component template](https://www.figma.com/file/OmvFfWkqEsdGhXAND133ou/%5BComponent%5D),
including all variations and states.
1. [ ] **Assignee**: Update the link to the Figma file in the issue description.
1. [ ] **Assignee**: Ask a [FE/UX Foundations designer](https://about.gitlab.com/company/team/?department=fe-ux-foundations-team)
to review your component (ensure they have edit permissions in Figma).
1. [ ] **Reviewer**: Review and approve assignee’s addition. Ensure that component
includes all variations/states and, if applicable, matches existing Sketch specs and
is responsive.
1. [ ] **Reviewer**: Assign to a [Figma maintainer](https://about.gitlab.com/handbook/engineering/projects/#design.gitlab.com) for final review (make sure they have edit permissions in Figma).
1. [ ] **Maintainer**: Review and approve assignee’s addition.
1. [ ] **Maintainer**: Add the component to the **Pajamas UI Kit** file, and view
the component in the Assets panel to ensure it aligns with what’s outlined in the
[document and asset library structure](https://gitlab.com/gitlab-org/gitlab-design/-/blob/master/CONTRIBUTING-Figma.md#document-and-asset-library-structure) documentation.
1. [ ] **Maintainer**: Publish the library changes along with a clear commit message.
1. [ ] **Assignee**: Move the draft file to the **Component archive** Figma project. If you're a community contributor, we ask that you [transfer 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. [ ] **Assignee** (or Maintainer, for community contributions): If it's a new
pattern or a significant change, add an agenda item to the next UX weekly call
to inform everyone.
1. [ ] **Assignee**: Create a merge request in this repository with the [component-guideline template](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/master/.gitlab/merge_request_templates/component-guideline.md)
to create or update the component's documentation page. Link it here as a related
merge request. Use `View design in Pajamas UI Kit →` for the link text. This replaces
any link to Sketch Measure specs. Anyone with the link should be able to view the file.
1. [ ] **Assignee**: Once the merge request is created, close this issue.Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1685Add more in-depth navigation guidelines for the stepper component2023-08-21T16:13:07ZGina Doylegdoyle@gitlab.comAdd more in-depth navigation guidelines for the stepper componentThe following discussion from !3418 should be addressed:
- [ ] @pedroms started a [discussion](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/3418#note_1517356140): (+1 comment)
> @gdoyle **sugges...The following discussion from !3418 should be addressed:
- [ ] @pedroms started a [discussion](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/3418#note_1517356140): (+1 comment)
> @gdoyle **suggestion (non-blocking)**: Maybe for another MR, but I'd like to see us highlight these navigational buttons in the structure image, and have a specific name for them — like you refer to the **Indicator** below. These buttons are a key element in the stepper.Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1465Figma > Filter (Token) - Make the friendly text option default for the filter...2023-02-17T00:14:22ZMatej LatinFigma > Filter (Token) - Make the friendly text option default for the filter component## Description
This MR (gitlab-org/gitlab-ui!3147) adds an option to enable "friendly text" for the filter component which switches from `=` and `!=` being used to `is` and `is not`. Should we make this the default option? If yes, do we...## Description
This MR (gitlab-org/gitlab-ui!3147) adds an option to enable "friendly text" for the filter component which switches from `=` and `!=` being used to `is` and `is not`. Should we make this the default option? If yes, do we need to keep the other one?
![image](/uploads/0079d51aeddeb98daf3561f20ca95d43/image.png)
## Proposal
* use the `friendly text` option as the default
* keep the operators in the dropdown
* remove the non friendly text version
<!--
- For changes or additions to an existing file, create a branch in Figma (this new file is considered the “working file”). Include the issue or MR number in the branch name. Make changes in the working file and request a review when ready. See https://www.figma.com/best-practices/branching-in-figma/ for details about branching.
- For new files, duplicate the template that is most relevant (https://www.figma.com/files/project/5846042/Templates) to the project that also is the most relevant. Update the file name and cover details (this new file is considered the “working file”) and proceed with the design.
- For community contributions, create a new file in your drafts, or duplicate an existing file to your drafts.
To move a duplicate file:
Open the duplicate, then use the dropdown next to the file name to select
“Move to Project…” and select the desired project as the new location. The duplicate is now the “working file.”
-->
### 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/file/qEddyqCrI7kPSBjGmwkZzQ/branch/UI2idKLAexeE2Pt7a2eZmx/%F0%9F%93%99-Component-library?node-id=425%3A141&t=w5PQjaAnIaLa792i-1)
## Checklist
Make sure the following are completed before closing the issue:
### Assignee tasks:
<details><summary>Getting started:</summary>
1. [x] Title the issue using this structure "Figma > [Component name] - [Description]". For example, Figma > Badges - Fix icon override bug.
1. [x] Add the relevant [component label](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/labels?subscribed=&search=component%3A). For example ~"component:badge".
1. [x] If you’re making updates or breaking changes to an existing component in the [Pajamas UI Kit](https://www.figma.com/community/file/781156790581391771), start with a [branch](https://www.figma.com/best-practices/branching-in-figma/) of the UI kit. Prefix the branch name with the issue, MR, or epic number, and add your GitLab username as the suffix. For example, `#860-table-component-updates-lvanc`.
1. [x] When applicable, follow our [structure][structure], [building][building], and [annotation][annotation] guidelines. If you have any questions, reach out to a [Foundations designer][foundations-team].
1. [x] Update the link to the working file under the **Figma link** section below.
1. [ ] If work was not done in a branch (a merged branch will automatically be archived), move your working file
to the shared Figma project:
1. For Component library changes, move your file to the [**Component archive**][component-archive] project.
1. For all other changes, move your file to the [**Misc archive**][misc-archive] project.
1. 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.
</details>
<details><summary>Prior to review:</summary>
The purpose of these tasks is to ensure consistency with the rest of the components and to save time during the review process. When you are finished with your update, please go through the following clean-up tasks in Figma:
1. [x] **Canvas**: Make sure no hidden elements have been accidentally left behind. Use **View > Show Outlines** (<kbd>⌘</kbd> + <kbd>Y</kbd>) to reveal invisible objects. Use **View > Zoom to Fit** (<kbd>Shift</kbd> + <kbd>1</kbd>) to view all items on the page.
1. [x] **Components**: Where applicable, make sure all components have updated descriptions and have external documentation links.
1. [x] **Frames**: Make spacing within and between frames consistent with components found on other pages.
1. [x] **Layers**: Make sure all your layers are correctly named and the order match visual from left to right. In the case of Auto Layout, Figma will determine layer order.
1. [x] **Variants**: Remove the default dashed purple stroke, border radius, and padding from all variants.
1. [x] **Variants**: Reorder variants in properties panel to match visual order. In the case of Auto Layout, Figma will determine layer order.
1. [ ] **Comments**: Make sure all comments and discussion are resolved.
If any of these tasks are unclear, see the [Table component](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=47785%3A58915) for reference.
</details>
<details><summary>Requesting a review:</summary>
Ask a [Foundations designer][foundations-team] to review your design.
1. [x] Ensure the designer that will be reviewing your file has edit permissions in Figma.
1. [x] From the dropdown to the right of the file name, select "Request review".
1. [x] Then from the modal window, remember to include a description of the changes being made and select a reviewer from the right hand column.
1. [x] Consider [creating a new version](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history#Create_a_new_version) (optional) titled "Review requested" in the history which will create a reference point in the file's history.
Once your file is in review, you should see a yellow "In review" badge to the right of the file name.
</details>
<details><summary>Post review:</summary>
Once the Reviewer or Maintainer has approved your update, consider the following tasks:
1. [ ] If it’s a new pattern or a significant change, add an agenda item to the next UX weekly call to inform the team.
1. [ ] When applicable, add or update relevant documentation and create an MR with your changes using the `Documentation` MR template. If you do not have the capacity, [create another issue using the `Component documentation` issue template][issue-component-template] so we don't forget about it. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] When applicable, [create a GitLab UI issue using the `Component` issue template][gitlab-ui-component-template] to build or update the component code. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] 🎉 Congrats, you made it! You can now close this issue.
</details>
### Reviewer tasks:
<details><summary>See tasks:</summary>
1. [ ] Review and approve assignee’s design. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
1. [ ] Make sure all layers are correctly named and organized.
1. [ ] Stress test final component by changing the component's size, editing content, and changing any available variants and properties.
1. [ ] Ensure component descriptions and external documentation links are clear and accurate.
1. [ ] Approve assignee’s design. Let the assigning know that their changes have been approved by mentioning them in this issue.
1. [ ] Assign to a [Figma maintainer][figma-maintainer] for final review (make sure they have edit permissions in Figma).
1. [ ] Ask a [Foundations designer][foundations-team] to review your design (ensure they have edit permissions in Figma).
</details>
### Maintainer tasks:
<details><summary>See tasks:</summary>
1. [ ] Review and approve assignee’s changes.
questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
1. [ ] Merge the branch or add the changes or additions to the
target file.
1. [ ] Ensure that all styles and components now belong to the target file.
1. [ ] For changes to the **Component Library** file, view the components in the Assets panel to ensure they align with our [asset library structure guidelines][structure].
1. [ ] When applicable, [publish][publishing] any library changes along with a clear commit message.
</details>
[annotation]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/pajamas-ui-kit.md#adding-descriptions-notes-and-annotations
[building]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/pajamas-ui-kit.md#building-components
[foundations-team]: https://about.gitlab.com/company/team/?department=ecosystem-foundations-team
[figma-maintainer]: https://about.gitlab.com/handbook/engineering/projects/#design.gitlab.com
[publishing]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/pajamas-ui-kit.md#publishing-changes
[structure]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/doc/pajamas-ui-kit.md#structure
[component-archive]: https://www.figma.com/files/project/5472112/Component-archive
[misc-archive]: https://www.figma.com/files/project/10620392/Misc-archive
[gitlab-ui-component-template]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new?issuable_template=Component
[issue-component-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation
<!-- Do not delete below this line -->Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1444Link > Consolidate efforts2023-09-01T04:20:32ZJeremy ElderLink > Consolidate efforts## Purpose
Collect links to relevant issues and MRs that address links to get a high-level view of the overlapping discussions and efforts.
**Link style and affordance:**
- ~~https://gitlab.com/gitlab-org/gitlab-services/design.gitlab...## Purpose
Collect links to relevant issues and MRs that address links to get a high-level view of the overlapping discussions and efforts.
**Link style and affordance:**
- ~~https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/3085+~~
- ~~https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/3073+~~
- ~~https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1041+~~
- ~~https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3051+~~
- ~~https://gitlab.com/gitlab-org/gitlab/-/issues/336819+~~
- ~~https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1266+~~
- https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/880+
- ~~https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/57+~~
- https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1217+
- https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1084+
- https://gitlab.com/gitlab-org/gitlab/-/issues/358093+
- https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1536+
- https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1554+
**External links:**
- https://gitlab.com/gitlab-org/gitlab-ui/-/issues/153+
- https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1287+
[![Figmacon.svg](/uploads/d1d0ca1fd737cb571f30d37a6e5fad9d/Figmacon.svg) Working file in Figma →](https://www.figma.com/file/ZXefvJWGkJSBuEAWRs40cG/Link-variant-proposal?node-id=0%3A1)
**Note:** This isn't an epic because it includes active issues _and_ MRs.Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1424Document filtering alternatives to the filter component2023-02-17T00:20:31ZMatej LatinDocument filtering alternatives to the filter componentCurrently we tend to default to using the filter component most of the time when filtering capabilities are required. The filter component is very complex and comes with certain usability and accessibility problems. It is also somewhat d...Currently we tend to default to using the filter component most of the time when filtering capabilities are required. The filter component is very complex and comes with certain usability and accessibility problems. It is also somewhat developer-focused.
Things to explore with this issue:
* decoupling filter and search capabilities of the filter component
* documenting alternative patterns and components (and combinations of those) to the filter components so that we have more options to choose from whenever filtering is required
* add guidance for placement of UI elements in filtering patterns
Related UI exploration: https://www.figma.com/file/n7rywDkSHdt8hsKlZhf6zG/KR-UI-redesign-session-5%3A-Filtering?node-id=0%3A1Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1396Filtered search > Exploration and guidelines update2024-03-29T00:12:03ZTaurie DavisFiltered search > Exploration and guidelines update# Background
In Pajamas, we currently have the following components related to filtered search:
- [Filter](https://design.gitlab.com/components/filter): Includes behavior but missing guidelines and design in UI Kit. The GitLab UI compo...# Background
In Pajamas, we currently have the following components related to filtered search:
- [Filter](https://design.gitlab.com/components/filter): Includes behavior but missing guidelines and design in UI Kit. The GitLab UI component shown is the filtered search component
- [Search](https://design.gitlab.com/components/search): Includes variants and behavior but missing guidelines and design in UI kit.
- [Token](https://design.gitlab.com/components/token): Complete except for missing accessibility considerations
We also have the following regions:
- [Filters](https://design.gitlab.com/regions/filters): Empty
- [Search](https://design.gitlab.com/regions/search): Largely empty, distinguishes between global search and list search
Additionally, some teams have utilized a dropdown approach for filtering. While this is laregly legacy, it has been adopted even in newer designs. For example, see a vulnerability report:
|Vulnerability report|
|--------------------|
|![Screen_Shot_2022-08-02_at_1.28.16_PM](/uploads/eb10e5635e2d09009ff5732c55bd96b1/Screen_Shot_2022-08-02_at_1.28.16_PM.png) |
Also, sometimes tabs are used in place of filters. This should be a legacy pattern, but is included here as an example of what is in the product today (members page in the Admin area):
|Tabs|
|----|
| ![tabs](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/uploads/c9e0644cb1c88dc2fd6237b15de42443/Screen_Shot_2022-01-14_at_4.11.08_PM.png) |
Jacki also pointed out that the global search page is using a separate radio design for filtering:
|Global search|
|-------------|
| ![Screen_Shot_2022-08-02_at_1.57.16_PM](/uploads/42cd173ab4a767a1842d664dc415aaf7/Screen_Shot_2022-08-02_at_1.57.16_PM.png) |
Lastly, GitLab UI includes both a [filtered search component](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default), as well as a [token selector component](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default). We do not have documentation for a token selector, but it is being currently used in the product.
# Task/Objective
- Review [existing issues related to filtered search](https://gitlab.com/groups/gitlab-org/-/issues?label_name%5B%5D=component%3Afilter) to get an understanding of the current state
- Determine what, if any, previous research has occurred related to filtered search
- Determine whether we can reduce the number of distinct pages related to filtered search in Pajamas in order to optimize documentation. For example, when working on the related accessibility audit, search, filtered search, and token were grouped under "[search components](https://gitlab.com/groups/gitlab-org/-/epics/8169)".
- Determine if what is in GitLab UI makes sense or if changes are needed
- Consolidate/update documentation and complete design todos (docs and UI kit)
- Create any necessary follow up issues for FE, as needed, to update component(s) in GitLab UI
# Further support
* #g_ecosystem_foundations is available for questions
* Foundations open office hours is every week, rotating Monday & Thursdays for support/questions/collaboration
* Feel free to reach out to @tauriedavis anytimeBackloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1247New icon proposal for import, export, download, upload2023-08-30T17:09:58ZBecka LippertNew icon proposal for import, export, download, upload### Problem to solve
A conversation about confusing icons for import, export, download, and upload started in this [Slack thread](https://gitlab.slack.com/archives/C03MSG8B7/p1644915586472439) (internal) where we realized a similar disc...### Problem to solve
A conversation about confusing icons for import, export, download, and upload started in this [Slack thread](https://gitlab.slack.com/archives/C03MSG8B7/p1644915586472439) (internal) where we realized a similar discussion was happening in Slack [here](https://gitlab.slack.com/archives/C72HPNV97/p1643989318522819).
I met with @jmandell to discuss and we came to the conclusion that it's logically incorrect to use the "container" part of these icons as 2 different things among them:
![image](/uploads/214fbb23d8681f53e37b6d93cae9ae4c/image.png)
cc @jdsalaro @johnhope
Furthermore, we're currently using these icons
### More info
This came up 2 years ago in [Competing icons: Import, download, and export](https://gitlab.com/gitlab-org/gitlab-design/-/issues/856) and again 1 year ago in [Swaps the export and import icons](https://gitlab.com/gitlab-org/gitlab-svgs/-/merge_requests/606). These icons are confusing to many and should be updated.
### Proposal
In the thread https://gitlab.com/gitlab-org/gitlab/-/issues/34769#note_234371751, I proposed the following:
![image](/uploads/340dfd8604589526745e3d34d6f24825/image.png)
@matejlatin then proposed a more box-like container to make it clearer:
<img src="/uploads/1b867f25083ca9b63004b482afc993cc/image.png" width="20%">
with the following implementation plan:
1. MVC: change the direction of the arrows to match my proposal above
1. Follow-up iteration: Create new icons for all to match the box-like containerBacklogBecka LippertBecka Lipperthttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1148Bulk actions from table pattern2023-03-07T02:09:03ZKatie MacoyBulk actions from table pattern### Description
<!-- Add a short description of the documentation addition or update. Remember to say why, not just what. -->
Bulk actions from a table is a common workflow but is not documented in Pajamas. Designers are approaching th...### Description
<!-- Add a short description of the documentation addition or update. Remember to say why, not just what. -->
Bulk actions from a table is a common workflow but is not documented in Pajamas. Designers are approaching this slightly differently, which could introduce inconsistencies. The issue assumes we can establish a pattern that works for most/all use cases.
### Audit of use cases
| Area | ex1 | ex2 |
| ------ | ------ | ------ |
| [Vulnerability report](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/security/vulnerability_report) | <img src="/uploads/11145ada2063e90133b0881fd07811e8/Screen_Shot_2022-08-09_at_4.09.09_PM.png"> | <img src="/uploads/cfa682ede420c541931eee76a5fbbb18/Screen_Shot_2022-08-09_at_4.09.03_PM.png"> |
| [Container registry](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/container_registry/3312367) | <img src="/uploads/b6c88c2cd5a034a8d95518eb4d2cf6a5/Screen_Shot_2022-08-09_at_4.10.17_PM.png"> | <img src="/uploads/317d1844a7c232c6502b5bf1f4468190/Screen_Shot_2022-08-09_at_4.10.13_PM.png"> |
| [Issues list](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues) | <img src="/uploads/7f22f9704ea6ea4e8411056610429528/Screen_Shot_2022-08-09_at_4.15.34_PM.png"> | <img src="/uploads/aa434eccf4d13406a14e018109b6f28a/Screen_Shot_2022-08-09_at_4.15.28_PM.png"> |
| [Runners (will be in prod soon)](https://gitlab.com/gitlab-org/gitlab/-/issues/339525) | ![Kapture_2022-08-09_at_09.58.53](/uploads/ad0fe6056feeff5f9e4e837c74222ead/Kapture_2022-08-09_at_09.58.53.gif) | |
| [Build artifacts (not implemented)](https://gitlab.com/gitlab-org/gitlab/-/issues/33348/designs/job-artifacts-bulk-delete-group.png) | <img src="/uploads/e8f68a280f4b127b73c57044acbd9242/Screen_Shot_2022-08-09_at_4.19.05_PM.png"> | <img src="/uploads/e5618be58000b618572a8c5bf1d855e5/Screen_Shot_2022-08-09_at_4.18.34_PM.png"> |
See more in-depth screenshots with linked issues in [Figma](https://www.figma.com/file/KyeuQrnvo5fmhza64zcAWG/Bulk-deletion-container-and-package-registry?node-id=15%3A6046)
### Considerations
* Keyboard shortcuts - bulk select with the shift key ([context](https://gitlab.com/gitlab-org/gitlab/-/issues/371467#note_1118907819))
## To-do
- [ ] come up with a recommendation
- [ ] apply recommendations to production instances of tables with bulk actions (in Figma)
- [ ] tag the design team for feedback
- [ ] rework based on feedback
- [ ] usability test
- [ ] potentially rework based on insights
- [ ] document in Pajamas
- [ ] revise table in Figma
<details><summary>Pajamas template details</summary>
### Checklist
Make sure the following are completed before closing the issue:
1. [x] Assign the correct component label to this issue.
1. [ ] Create an MR with the additions or updates needed.
1. [ ] When applicable, [create a new Pajamas issue using the "Figma update" issue template][pajamas-figma-update-template] to update the component in Figma. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
1. [ ] When applicable, [create an MR in GitLab UI][gitlab-ui-mr] to update the component. If you do not have capacity or are unable to update the component directly, [create a new GitLab UI issue using the "Component"][gitlab-ui-component-template] issue template. Bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
1. [ ] When introducing a major or breaking change, communicate the changes within the Engineering Week in Review and UX Weekly meeting.
1. [ ] 🎉 Congrats, you made it! You can now close this issue.
### Resources
* [Component Lifecycle][component-lifecycle]
* See attached designs. This is a rough proposal to get the discussion started. You can view more in-depth in [Figma](https://www.figma.com/file/KyeuQrnvo5fmhza64zcAWG/Bulk-deletion-container-and-package-registry?node-id=15%3A6046)
[gitlab-ui-mr]: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/new
[component-lifecycle]: https://design.gitlab.com/get-started/lifecycle
[pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update
[gitlab-ui-component-template]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new?issuable_template=Component
</details>Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/902Themes > Define how/which components change based on theme selection2023-10-18T12:31:06ZTaurie DavisThemes > Define how/which components change based on theme selectionCurrently, some components change their appearance based on which theme the user has selected. One example is the border on active tabs (https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2183).
We need to define when a component ...Currently, some components change their appearance based on which theme the user has selected. One example is the border on active tabs (https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2183).
We need to define when a component takes the coloring of the active theme and how those colors are applied.
# Proposal
Themes only extend to the header and left sidebar navigation and not controls within. This provides a more clear delineation between primary navigational elements, and in-page controls. Doing so means we can better audit controls for accessibility, and avoid the compounded effect of themes *and* dark UI combinations which we don't address today in Pajamas. From a user perspective, this means that in-page controls and function will visually have more parity and relationship.
# Next steps
- [ ] Document decision in Pajamas
- [ ] Update broadcast messages in GitLab UI to use hex values like labels, not themes
- [ ] Update colors of broadcast messages and tabs in Figma to use chromatic palette
- [ ] Remove theming from tabs in GitLab UI
- [ ] Remove theming from path in GitLab UIBackloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/787Clarify spacing docs with more explanation and examples2023-08-04T14:31:24ZJeremy ElderClarify spacing docs with more explanation and examples## Problem
Currently, in [Pajamas > Standard spacing guidelines](https://design.gitlab.com/layout/spacing#standard-spacing-guidelines) there are no visual examples for spacing and the descriptions of how to apply each size to content ar...## Problem
Currently, in [Pajamas > Standard spacing guidelines](https://design.gitlab.com/layout/spacing#standard-spacing-guidelines) there are no visual examples for spacing and the descriptions of how to apply each size to content are vague.
For example, in this discussion https://gitlab.com/gitlab-org/gitlab/-/issues/218591#note_482797196 it was unclear how the spacing should be applied between groups of inputs and individual inputs.
## Solution
- Add more detailed explanations for each type of spacing.
- Add examples for each type of spacing.
- Add visuals to support each spacing.
/cc @gitlab-com/gitlab-ux/ux-foundationsBackloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/738Define button wrap behavior for mobile viewports.2023-08-07T19:52:49ZDaniel MoraDefine button wrap behavior for mobile viewports.## Problem
In working in this [issue](https://gitlab.com/gitlab-org/gitlab/-/issues/267113) , @dennis brought up an interesting point that there is conflicting UI behaviors for wrapping objects ( `buttons` ).
There seems to be various w...## Problem
In working in this [issue](https://gitlab.com/gitlab-org/gitlab/-/issues/267113) , @dennis brought up an interesting point that there is conflicting UI behaviors for wrapping objects ( `buttons` ).
There seems to be various ways this is being done.
1. **Issues**
- Primary action buttons wrap to an Options `dropdown`
1. **Group overview**
- Primary buttons float left
1. **Project overview**
- Primary / Default / small / dropdown+icon buttons both expand to container width, or float left.
1. **Merge Requests**
- Primary action buttons wrap to an Options `dropdown`
- icon / dropdown buttons expand to full width
1. **Issues list**
- On mobile, it is entirely buttons. ([associated issue](https://gitlab.com/gitlab-org/gitlab/-/issues/224128))
## Examples
| Location | desktop | mobile |
| ------ | ------ | ------ |
| **Issue** | ![Screen_Shot_2020-10-21_at_10.04.00_AM](/uploads/c7d0ad628f8c05048ba9d963ffeb7ff9/Screen_Shot_2020-10-21_at_10.04.00_AM.png) | ![Screen_Shot_2020-10-21_at_10.04.17_AM](/uploads/f3da1305a78e9b731fc3768a6cf44f53/Screen_Shot_2020-10-21_at_10.04.17_AM.png) |
| **Group overview** | ![Screen_Shot_2020-10-21_at_10.07.13_AM](/uploads/15f5fa5256c59fdcba98e74075775a9a/Screen_Shot_2020-10-21_at_10.07.13_AM.png) | ![Screen_Shot_2020-10-21_at_10.07.21_AM](/uploads/c8b0635d80daf142e40b9dce0e3131d9/Screen_Shot_2020-10-21_at_10.07.21_AM.png) |
| **Project details** | ![Screen_Shot_2020-10-21_at_10.09.05_AM](/uploads/49d5d988e3f8c195938363b52828b8e1/Screen_Shot_2020-10-21_at_10.09.05_AM.png) | ![Screen_Shot_2020-10-21_at_10.09.19_AM](/uploads/55b746cb534590b47fb7b67ae89c0139/Screen_Shot_2020-10-21_at_10.09.19_AM.png) |
| **Merge requests** | ![Screen_Shot_2020-10-21_at_10.10.36_AM](/uploads/2f2f1a75f74885ad2e4683ce59a5346c/Screen_Shot_2020-10-21_at_10.10.36_AM.png) | ![Screen_Shot_2020-10-21_at_10.10.47_AM](/uploads/0acb45517ee254f7f9bfa5b7812dcfe8/Screen_Shot_2020-10-21_at_10.10.47_AM.png) |
| **Issues List** | ![Screen_Shot_2020-10-23_at_11.00.54_AM](/uploads/73ad32132287d356b48c0ba5e7481160/Screen_Shot_2020-10-23_at_11.00.54_AM.png) | ![Screen_Shot_2020-10-23_at_11.01.10_AM](/uploads/de00b769930bead1be5eb64be0f41834/Screen_Shot_2020-10-23_at_11.01.10_AM.png) |Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/730Update Accessibility > Best Practices page2023-08-22T17:12:27ZJeremy ElderUpdate Accessibility > Best Practices page## Problem
We don’t have a SSoT reference for our approach to accessibility. This could also document decisions that impact multiple components so that those decisions don’t have to be documented on every single component page.
## Solu...## Problem
We don’t have a SSoT reference for our approach to accessibility. This could also document decisions that impact multiple components so that those decisions don’t have to be documented on every single component page.
## Solution
Update the “Accessibility > Best Practices” page with our approach.
## Topics to add
- Document and link to the WCAG 2.1 AA guidelines.
- Talk about our normalized color palette.
- Mention how we still aim for at least a 3:1 contrast ratio for disabled and placeholder states.
- Form errors — complimentary use of alerts and in-line messages.
- Linking to help topics (when and when not to use `target="_blank"`).
- System and browser preferences that allow keyboard accessibility.
- On mobile, all features require a click action. Custom swipe actions on web pages will not work with screen readers turned on because screen reader software uses swipe actions.
- Link text should be clear and not repetitive, for example, "learn more." Link text should also be tested via screenreader to ensure it's purpose is clear without extra context.
- How to handle images with `alt`, `aria-label`, and `role="img"`. Some content exists under https://design.gitlab.com/product-foundations/illustration#accessibility, but could be expanded upon.
- Testing with users should happen after all know fixes have been addressed. See https://gitlab.com/gitlab-org/gitlab-design/-/issues/1586#note_563257584.
- Based on https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/879, add section that indicates not to use color alone to convey information.
- Based on https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/886, add content on Mac/browser keyboard defaults to Accessibility > Best Practices.
- Based on https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/896, add documentation that ensures CSS that is used to convey meaning is supplemented with actual text.
- Based on https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/885, determine if we are using any video or gifs within our docs. If so, ensure that text descriptions are provided for the media content and that best practices are documented in Pajamas.Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/533Using type scale in design.gitlab.com2023-08-24T12:57:37ZJeremy ElderUsing type scale in design.gitlab.comPer https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/1832#note_324671580 we should consider implementing the UI type scale for the Pajamas website.
**Update**: The [latest type scale](https://gitlab.com/g...Per https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/1832#note_324671580 we should consider implementing the UI type scale for the Pajamas website.
**Update**: The [latest type scale](https://gitlab.com/groups/gitlab-org/gitlab-services/-/epics/19) is what should be implemented in the Pajamas site.
/cc @tauriedavis @ealcantaraBackloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1790Figma > Button - make it easier to edit button text when button is in active ...2024-02-21T03:39:45ZKatie MacoyFigma > Button - make it easier to edit button text when button is in active and focus state## Description
This is a follow-up to https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1535
## Problem to solve
When a button is in `active` or `active focus` state, it is very difficult to select its text and ...## Description
This is a follow-up to https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1535
## Problem to solve
When a button is in `active` or `active focus` state, it is very difficult to select its text and edit it directly. Note: this is not the case with all active, active focus buttons.
I think the focus ring is too easily selected, and it gets in the way of editing the text.
![CleanShot_2024-02-21_at_16.20.15](/uploads/6180c0115d71d408fe7d7145e0416788/CleanShot_2024-02-21_at_16.20.15.gif)
### 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 →](ADD LINK TO FIGMA FILE/FRAME)
## Checklist
Make sure the following are completed before closing the issue:
### Assignee tasks:
<details><summary>Getting started:</summary>
1. [ ] Title the issue using this structure "Figma > [Component name] - [Description]". For example, Figma > Badges - Fix icon override bug.
1. [ ] Add the relevant [component label](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/labels?subscribed=&search=component%3A). For example ~"component:badge".
1. [ ] If you're making updates or [breaking changes][breaking-changes] to any file of the [Pajamas UI Kit](https://design.gitlab.com/get-started/uik-file-structure), start with a [branch](https://www.figma.com/best-practices/branching-in-figma/) of that file. Prefix the branch name with the issue, MR, or epic number, and add your GitLab username as the suffix. For example, `#860-table-component-updates-lvanc`.
1. [ ] When applicable, follow the [components][components] and [annotation][annotation] guidelines. If you have any questions, reach out to a [Foundations designer][foundations-team].
1. [ ] Update the link to the working file under the **Figma link** section.
1. [ ] If work was not done in a branch (a merged branch will automatically be archived), move your working file
to the shared Figma project:
1. For Component library changes, move your file to the [**Component archive**][component-archive] project.
1. For all other changes, move your file to the [**Misc archive**][misc-archive] project.
1. If you're a community contributor, please consider [transferring ownership of your draft file](https://help.figma.com/hc/en-us/articles/360038512093) to the maintainer so they can move it to our archive, along with its version history and comments.
</details>
<details><summary>Prior to review:</summary>
The purpose of these tasks is to ensure consistency with the rest of the components and to save time during the review process. When you are finished with your update, please go through the following clean-up tasks in Figma:
1. [ ] **Canvas**: Make sure no hidden elements have been accidentally left behind. Use **View > Show Outlines** (<kbd>⌘</kbd> + <kbd>Y</kbd>) to reveal invisible objects. Use **View > Zoom to Fit** (<kbd>Shift</kbd> + <kbd>1</kbd>) to view all items on the page.
1. [ ] **Components**: Make sure all components have correct names, properties, and descriptions along with external documentation links where applicable. View the [components][components] guides for details.
1. [ ] **Frames**: Make spacing within and between frames consistent with components found on other pages.
1. [ ] **Layers**: Make sure all your layers are correctly named and the order match visual from left to right. In the case of Auto Layout, Figma will determine layer order.
1. [ ] **Variants**: Remove the default dashed purple stroke, border radius, and padding from all variants.
1. [ ] **Variants**: Reorder variants in properties panel to match visual order. In the case of Auto Layout, Figma will determine layer order.
1. [ ] **Comments**: Make sure all comments and discussion are resolved.
</details>
<details><summary>Requesting a review:</summary>
Ask a [Foundations designer][foundations-team] to review your design.
1. [ ] Ensure the designer that will be reviewing your file has edit permissions in Figma.
1. [ ] From the dropdown to the right of the file name, select "Request review".
1. [ ] Then from the modal window, remember to include a description of the changes being made and select a reviewer from the right hand column.
1. [ ] Consider [creating a new version](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history#Create_a_new_version) (optional) titled "Review requested" in the history which will create a reference point in the file's history.
Once your file is in review, you should see a yellow "In review" badge to the right of the file name.
</details>
<details><summary>Post review:</summary>
Once the Reviewer and Maintainer have approved your update, consider the following tasks:
1. [ ] Follow the [release process][release-process] for publishing guidelines and be sure to add the update to the current [release notes](https://design.gitlab.com/get-started/uik-release-notes) draft MR. Ask a [Figma maintainer][figma-maintainer] if you need help.
1. [ ] When applicable, add or update relevant documentation and create an MR with your changes using the `Documentation` MR template. If you do not have the capacity, [create another issue using the `Component documentation` issue template][issue-component-template] so we don't forget about it. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] When applicable, [create a GitLab UI issue using the `Component` issue template][gitlab-ui-component-template] to build or update the component code. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] 🎉 Congrats, you made it! You can now close this issue.
</details>
### Reviewer tasks:
<details><summary>See tasks:</summary>
1. [ ] Review assignee's design and ensure that any [breaking change][breaking-changes] has been accounted for. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
1. [ ] Make sure all layers are correctly named and organized.
1. [ ] Stress test final component by changing the component's size, editing content, and changing any available variants and properties.
1. [ ] Ensure component descriptions and external documentation links are clear and accurate.
1. [ ] Approve assignee's design and mention them in this issue to let them know.
1. [ ] Assign to a [Figma maintainer][figma-maintainer] for final review and merge (make sure they have edit permissions in Figma).
</details>
### Maintainer tasks:
<details><summary>See tasks:</summary>
1. [ ] Review and approve assignee’s changes.
questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
1. [ ] Consider adding a new version to the file's [version history](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history) to indicate the state prior to merging the changes. The name of the version and description of the changes are saved in the file history and provide a meaningful reference point.
1. [ ] Merge the branch or add the changes or additions to the
target file.
1. [ ] Ensure that all styles and components now belong to the target file.
1. [ ] For changes to the **Component library** file, view the components in the Assets panel to ensure they align with the [components][components] guidelines.
1. [ ] Ensure that the [release process][release-process] has been followed and notes are accounted for.
</details>
[annotation]: https://design.gitlab.com/get-started/uik-annotation
[breaking-changes]: https://design.gitlab.com/get-started/uik-breaking-changes
[component-archive]: https://www.figma.com/files/project/5472112/Component-archive
[components]: https://design.gitlab.com/get-started/uik-components
[figma-maintainer]: https://about.gitlab.com/handbook/engineering/projects/#design.gitlab.com
[foundations-team]: https://about.gitlab.com/handbook/product/categories/#foundations-group
[gitlab-ui-component-template]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new?issuable_template=Component
[issue-component-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation
[misc-archive]: https://www.figma.com/files/project/10620392/Misc-archive
[release-process]: https://design.gitlab.com/get-started/uik-release-process
<!-- Do not delete below this line -->Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1789Figma > Badge - Check badge contrast on button/selected states2024-02-21T03:40:08ZKatie MacoyFigma > Badge - Check badge contrast on button/selected states## Description
This is a follow-up issue from https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1535
## Problem to solve:
When a button (with badge) is a selected state, the contrast between the badge text and it...## Description
This is a follow-up issue from https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1535
## Problem to solve:
When a button (with badge) is a selected state, the contrast between the badge text and its background seems low.
![CleanShot_2024-02-21_at_15.54.03_2x](/uploads/206d4287581612d870442f7ba6361081/CleanShot_2024-02-21_at_15.54.03_2x.png)
It also seems slightly different than how we handle badges on a selected item from the navigation, maybe we could consider aligning:
![CleanShot_2024-02-21_at_16.13.41](/uploads/7dd305399f429f76a29cd6d720419ae6/CleanShot_2024-02-21_at_16.13.41.gif)
### 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 →](ADD LINK TO FIGMA FILE/FRAME)
## Checklist
Make sure the following are completed before closing the issue:
### Assignee tasks:
<details><summary>Getting started:</summary>
1. [ ] Title the issue using this structure "Figma > [Component name] - [Description]". For example, Figma > Badges - Fix icon override bug.
1. [ ] Add the relevant [component label](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/labels?subscribed=&search=component%3A). For example ~"component:badge".
1. [ ] If you're making updates or [breaking changes][breaking-changes] to any file of the [Pajamas UI Kit](https://design.gitlab.com/get-started/uik-file-structure), start with a [branch](https://www.figma.com/best-practices/branching-in-figma/) of that file. Prefix the branch name with the issue, MR, or epic number, and add your GitLab username as the suffix. For example, `#860-table-component-updates-lvanc`.
1. [ ] When applicable, follow the [components][components] and [annotation][annotation] guidelines. If you have any questions, reach out to a [Foundations designer][foundations-team].
1. [ ] Update the link to the working file under the **Figma link** section.
1. [ ] If work was not done in a branch (a merged branch will automatically be archived), move your working file
to the shared Figma project:
1. For Component library changes, move your file to the [**Component archive**][component-archive] project.
1. For all other changes, move your file to the [**Misc archive**][misc-archive] project.
1. If you're a community contributor, please consider [transferring ownership of your draft file](https://help.figma.com/hc/en-us/articles/360038512093) to the maintainer so they can move it to our archive, along with its version history and comments.
</details>
<details><summary>Prior to review:</summary>
The purpose of these tasks is to ensure consistency with the rest of the components and to save time during the review process. When you are finished with your update, please go through the following clean-up tasks in Figma:
1. [ ] **Canvas**: Make sure no hidden elements have been accidentally left behind. Use **View > Show Outlines** (<kbd>⌘</kbd> + <kbd>Y</kbd>) to reveal invisible objects. Use **View > Zoom to Fit** (<kbd>Shift</kbd> + <kbd>1</kbd>) to view all items on the page.
1. [ ] **Components**: Make sure all components have correct names, properties, and descriptions along with external documentation links where applicable. View the [components][components] guides for details.
1. [ ] **Frames**: Make spacing within and between frames consistent with components found on other pages.
1. [ ] **Layers**: Make sure all your layers are correctly named and the order match visual from left to right. In the case of Auto Layout, Figma will determine layer order.
1. [ ] **Variants**: Remove the default dashed purple stroke, border radius, and padding from all variants.
1. [ ] **Variants**: Reorder variants in properties panel to match visual order. In the case of Auto Layout, Figma will determine layer order.
1. [ ] **Comments**: Make sure all comments and discussion are resolved.
</details>
<details><summary>Requesting a review:</summary>
Ask a [Foundations designer][foundations-team] to review your design.
1. [ ] Ensure the designer that will be reviewing your file has edit permissions in Figma.
1. [ ] From the dropdown to the right of the file name, select "Request review".
1. [ ] Then from the modal window, remember to include a description of the changes being made and select a reviewer from the right hand column.
1. [ ] Consider [creating a new version](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history#Create_a_new_version) (optional) titled "Review requested" in the history which will create a reference point in the file's history.
Once your file is in review, you should see a yellow "In review" badge to the right of the file name.
</details>
<details><summary>Post review:</summary>
Once the Reviewer and Maintainer have approved your update, consider the following tasks:
1. [ ] Follow the [release process][release-process] for publishing guidelines and be sure to add the update to the current [release notes](https://design.gitlab.com/get-started/uik-release-notes) draft MR. Ask a [Figma maintainer][figma-maintainer] if you need help.
1. [ ] When applicable, add or update relevant documentation and create an MR with your changes using the `Documentation` MR template. If you do not have the capacity, [create another issue using the `Component documentation` issue template][issue-component-template] so we don't forget about it. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] When applicable, [create a GitLab UI issue using the `Component` issue template][gitlab-ui-component-template] to build or update the component code. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
1. [ ] 🎉 Congrats, you made it! You can now close this issue.
</details>
### Reviewer tasks:
<details><summary>See tasks:</summary>
1. [ ] Review assignee's design and ensure that any [breaking change][breaking-changes] has been accounted for. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
1. [ ] Make sure all layers are correctly named and organized.
1. [ ] Stress test final component by changing the component's size, editing content, and changing any available variants and properties.
1. [ ] Ensure component descriptions and external documentation links are clear and accurate.
1. [ ] Approve assignee's design and mention them in this issue to let them know.
1. [ ] Assign to a [Figma maintainer][figma-maintainer] for final review and merge (make sure they have edit permissions in Figma).
</details>
### Maintainer tasks:
<details><summary>See tasks:</summary>
1. [ ] Review and approve assignee’s changes.
questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
1. [ ] Consider adding a new version to the file's [version history](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history) to indicate the state prior to merging the changes. The name of the version and description of the changes are saved in the file history and provide a meaningful reference point.
1. [ ] Merge the branch or add the changes or additions to the
target file.
1. [ ] Ensure that all styles and components now belong to the target file.
1. [ ] For changes to the **Component library** file, view the components in the Assets panel to ensure they align with the [components][components] guidelines.
1. [ ] Ensure that the [release process][release-process] has been followed and notes are accounted for.
</details>
[annotation]: https://design.gitlab.com/get-started/uik-annotation
[breaking-changes]: https://design.gitlab.com/get-started/uik-breaking-changes
[component-archive]: https://www.figma.com/files/project/5472112/Component-archive
[components]: https://design.gitlab.com/get-started/uik-components
[figma-maintainer]: https://about.gitlab.com/handbook/engineering/projects/#design.gitlab.com
[foundations-team]: https://about.gitlab.com/handbook/product/categories/#foundations-group
[gitlab-ui-component-template]: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new?issuable_template=Component
[issue-component-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation
[misc-archive]: https://www.figma.com/files/project/10620392/Misc-archive
[release-process]: https://design.gitlab.com/get-started/uik-release-process
<!-- Do not delete below this line -->Backloghttps://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1788Figma > Button: Swap between button components/properties bugs2024-03-06T19:52:09ZKatie MacoyFigma > Button: Swap between button components/properties bugs## Context
This is a follow-up to findings from this [issue](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1535 "Figma > Button - Update button group").
## Problem to solve
Swapping between different button ...## Context
This is a follow-up to findings from this [issue](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1535 "Figma > Button - Update button group").
## Problem to solve
Swapping between different button components has some bugs. This list is probably not comprehensive, but a starting point to investigate further:
| Img | Desc |
|-----|------|
| ![CleanShot_2024-02-19_at_14.50.03](/uploads/acc90a2de3bff9ef40488f7c86d4de18/CleanShot_2024-02-19_at_14.50.03.gif) | Swapping the default, primary, danger button to the link produce unexpected results. |
| ![CleanShot_2024-02-19_at_14.51.42](/uploads/ba333a5d9b8801f45f7a8d6b02a6ee06/CleanShot_2024-02-19_at_14.51.42.gif) | some icons swap in with black color |
| ![CleanShot_2024-02-19_at_14.53.09](/uploads/9adccd1c5d8fc055d1c5691145c38cd2/CleanShot_2024-02-19_at_14.53.09.gif) | Swapping from default, primary, danger to emoji button doesn't work well, overrides don't persist |
| ![CleanShot_2024-02-27_at_17.00.56](/uploads/b06ca48905edaddc9bd4ee46200748fe/CleanShot_2024-02-27_at_17.00.56.gif) | Swapping an icon button from default to danger loses icon override |
| ![buttons.gif](/uploads/08bcc17e539325f2754fe6087086a26e/buttons.gif) | Non-default variants do not swap with Disabled button (Disabled button lacks same properties) |
### Figma file
❖ View working file in Figma →
## Checklist
Make sure the following are completed before closing the issue:
### Assignee tasks:
<details>
<summary>Getting started:</summary>
1. [ ] Title the issue using this structure "Figma \> \[Component name\] - \[Description\]". For example, Figma \> Badges - Fix icon override bug.
2. [ ] Add the relevant [component label](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/labels?subscribed=&search=component%3A). For example ~"component:badge".
3. [ ] If you're making updates or [breaking changes](https://design.gitlab.com/get-started/uik-breaking-changes) to any file of the [Pajamas UI Kit](https://design.gitlab.com/get-started/uik-file-structure), start with a [branch](https://www.figma.com/best-practices/branching-in-figma/) of that file. Prefix the branch name with the issue, MR, or epic number, and add your GitLab username as the suffix. For example, `#860-table-component-updates-lvanc`.
4. [ ] When applicable, follow the [components](https://design.gitlab.com/get-started/uik-components) and [annotation](https://design.gitlab.com/get-started/uik-annotation) guidelines. If you have any questions, reach out to a [Foundations designer](https://about.gitlab.com/handbook/product/categories/#foundations-group).
5. [ ] Update the link to the working file under the **Figma link** section.
6. [ ] If work was not done in a branch (a merged branch will automatically be archived), move your working file to the shared Figma project:
1. For Component library changes, move your file to the [**Component archive**](https://www.figma.com/files/project/5472112/Component-archive) project.
2. For all other changes, move your file to the [**Misc archive**](https://www.figma.com/files/project/10620392/Misc-archive) project.
3. If you're a community contributor, please consider [transferring ownership of your draft file](https://help.figma.com/hc/en-us/articles/360038512093) to the maintainer so they can move it to our archive, along with its version history and comments.
</details>
<details>
<summary>Prior to review:</summary>
The purpose of these tasks is to ensure consistency with the rest of the components and to save time during the review process. When you are finished with your update, please go through the following clean-up tasks in Figma:
1. [ ] **Canvas**: Make sure no hidden elements have been accidentally left behind. Use **View \> Show Outlines** (<kbd>⌘</kbd> + <kbd>Y</kbd>) to reveal invisible objects. Use **View \> Zoom to Fit** (<kbd>Shift</kbd> + <kbd>1</kbd>) to view all items on the page.
2. [ ] **Components**: Make sure all components have correct names, properties, and descriptions along with external documentation links where applicable. View the [components](https://design.gitlab.com/get-started/uik-components) guides for details.
3. [ ] **Frames**: Make spacing within and between frames consistent with components found on other pages.
4. [ ] **Layers**: Make sure all your layers are correctly named and the order match visual from left to right. In the case of Auto Layout, Figma will determine layer order.
5. [ ] **Variants**: Remove the default dashed purple stroke, border radius, and padding from all variants.
6. [ ] **Variants**: Reorder variants in properties panel to match visual order. In the case of Auto Layout, Figma will determine layer order.
7. [ ] **Comments**: Make sure all comments and discussion are resolved.
</details>
<details>
<summary>Requesting a review:</summary>
Ask a [Foundations designer](https://about.gitlab.com/handbook/product/categories/#foundations-group) to review your design.
1. [ ] Ensure the designer that will be reviewing your file has edit permissions in Figma.
2. [ ] From the dropdown to the right of the file name, select "Request review".
3. [ ] Then from the modal window, remember to include a description of the changes being made and select a reviewer from the right hand column.
4. [ ] Consider [creating a new version](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history#Create_a_new_version) (optional) titled "Review requested" in the history which will create a reference point in the file's history.
Once your file is in review, you should see a yellow "In review" badge to the right of the file name.
</details>
<details>
<summary>Post review:</summary>
Once the Reviewer and Maintainer have approved your update, consider the following tasks:
1. [ ] Follow the [release process](https://design.gitlab.com/get-started/uik-release-process) for publishing guidelines and be sure to add the update to the current [release notes](https://design.gitlab.com/get-started/uik-release-notes) draft MR. Ask a [Figma maintainer](https://about.gitlab.com/handbook/engineering/projects/#design.gitlab.com) if you need help.
2. [ ] When applicable, add or update relevant documentation and create an MR with your changes using the `Documentation` MR template. If you do not have the capacity, [create another issue using the `Component documentation` issue template](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation) so we don't forget about it. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
3. [ ] When applicable, [create a GitLab UI issue using the `Component` issue template](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/new?issuable_template=Component) to build or update the component code. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling.
4. [ ] :tada: Congrats, you made it! You can now close this issue.
</details>
### Reviewer tasks:
<details>
<summary>See tasks:</summary>
1. [ ] Review assignee's design and ensure that any [breaking change](https://design.gitlab.com/get-started/uik-breaking-changes) has been accounted for. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
2. [ ] Make sure all layers are correctly named and organized.
3. [ ] Stress test final component by changing the component's size, editing content, and changing any available variants and properties.
4. [ ] Ensure component descriptions and external documentation links are clear and accurate.
5. [ ] Approve assignee's design and mention them in this issue to let them know.
6. [ ] Assign to a [Figma maintainer](https://about.gitlab.com/handbook/engineering/projects/#design.gitlab.com) for final review and merge (make sure they have edit permissions in Figma).
</details>
### Maintainer tasks:
<details>
<summary>See tasks:</summary>
1. [ ] Review and approve assignee’s changes. questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
2. [ ] Consider adding a new version to the file's [version history](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history) to indicate the state prior to merging the changes. The name of the version and description of the changes are saved in the file history and provide a meaningful reference point.
3. [ ] Merge the branch or add the changes or additions to the target file.
1. [ ] Ensure that all styles and components now belong to the target file.
2. [ ] For changes to the **Component library** file, view the components in the Assets panel to ensure they align with the [components](https://design.gitlab.com/get-started/uik-components) guidelines.
4. [ ] Ensure that the [release process](https://design.gitlab.com/get-started/uik-release-process) has been followed and notes are accounted for.
</details>Backlog