### Description During a recent discussion, we identified some inconsistencies with the font-weight used for toggles within dropdowns across our main repo. Specifically, there are cases where the font-weight is overridden from bold to normal, which may not be consistent with our design guidelines. Our usual [GlToggle](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-toggle--docs) has a default font-weight of bold for the label. In the main repo, some toggles within dropdowns have their font-weight set to normal (400) instead of bold, which seems to be intentional in some cases but inconsistent overall. Here are two examples: | Link to component | Screenshot | | ------ | ------ | | [Screenshot_2024-08-19_at_14.15.40](/uploads/e491d62d16b54ae9456d475624c330ec/Screenshot_2024-08-19_at_14.15.40.png) | | [Screenshot_2024-08-19_at_14.15.13](/uploads/96bb72e2a0b597f1581dd3f524e2332b/Screenshot_2024-08-19_at_14.15.13.png) | There was a rough check in the main repo done, and it appears that this issue mainly occurs within dropdowns, with only one instance found outside a dropdown. However, the normal font-weight isn't consistently applied because of nesting issues. The core question is whether a font-weight of 400 (normal) is more appropriate for toggles from a UX perspective. ### Proposed Solution Consider the creation of a gl-dropdown-toggle component that: 1. Has the font-weight set to normal (400) by default. 1. Includes an extra class to position the label on the left and the toggle on the right. Currently this is done in the main repo with using CSS classes such as `gl-justify-between` or else. ### Next Steps 1. Determine if we want to offer two font-weight options for toggles by adding a prop in gitlab-ui. 1. Create a gl-dropdown-toggle component as described. Or a similar solution 1. Replace the 3+ occurrences in the main repo ### Checklist Make sure the following are completed before closing the issue: 1. [ ] Assign the correct component label to this issue. 1. [ ] Create an MR with the additions or updates needed. 1. [ ] Be sure to get your MR reviewed by a [FE/UX Foundations designer][foundations-team]. 1. [ ] When applicable, create an [MR in Pajamas][pajamas-mr] to update the demos. If you do not have capacity to complete the demos, [create an issue in Pajamas][pajamas-issue] and 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 Pajamas][pajamas-mr] to update the component status. 1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Component Documentation"][pajamas-component-documentation-template] issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. 1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Figma update"][pajamas-figma-update-template] issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. 1. [ ] When introducing a major or breaking change, communicate the changes within the [Engineering Week in Review][eng-week-in-review-doc]. 1. [ ] 🎉 Congrats, you made it! You can now close this issue. <!-- ### Resources * [Compontent Lifecycle][component-lifecycle] * [Adding component][adding-components] * [Adding CSS][adding-css] * [Breaking changes][breaking-changes] --> [foundations-team]: https://about.gitlab.com/company/team/?department=fe-ux-foundations-team [pajamas-mr]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/new [pajamas-issue]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new [pajamas-component-documentation-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation [pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update [component-lifecycle]: https://design.gitlab.com/get-started/lifecycle [adding-components]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_components.md [adding-css]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md [breaking-changes]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/breaking_changes_to_components.md [eng-week-in-review-doc]: https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edit