Commit 336e1756 authored by GitLab Bot's avatar GitLab Bot

Add latest changes from gitlab-org/gitlab@master

parent 76cea6be
# Components ---
redirect_to: 'https://design.gitlab.com/components/status/'
## Contents ---
- [Dropdowns](#dropdowns)
## Dropdowns
See also the [corresponding UX guide](https://design.gitlab.com/#/components/dropdowns).
### How to style a Bootstrap dropdown
1. Use the HTML structure provided by the [docs][bootstrap-dropdowns]
1. Add a specific class to the top level `.dropdown` element
```Haml
.dropdown.my-dropdown
%button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false }
%span.dropdown-toggle-text
Toggle Dropdown
= icon('chevron-down')
%ul.dropdown-menu
%li
%a
item!
```
Or use the helpers
```Haml
.dropdown.my-dropdown
= dropdown_toggle('Toogle!', { toggle: 'dropdown' })
= dropdown_content
%li
%a
item!
```
[bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns
This page has moved [here](components.md#dropdowns). ---
redirect_to: 'https://design.gitlab.com/components/dropdowns/'
---
...@@ -41,6 +41,11 @@ or make changes to our frontend development guidelines. ...@@ -41,6 +41,11 @@ or make changes to our frontend development guidelines.
How we write frontend tests, run the GitLab test suite, and debug test related How we write frontend tests, run the GitLab test suite, and debug test related
issues. issues.
## Pajamas Design System
Reusable components with technical and usage guidelines can be found in our
[Pajamas Design System](https://design.gitlab.com/).
## [Design Patterns](design_patterns.md) ## [Design Patterns](design_patterns.md)
Common JavaScript design patterns in GitLab's codebase. Common JavaScript design patterns in GitLab's codebase.
...@@ -65,10 +70,6 @@ How to use GraphQL ...@@ -65,10 +70,6 @@ How to use GraphQL
How we use SVG for our Icons and Illustrations. How we use SVG for our Icons and Illustrations.
## [Components](components.md)
How we use UI components.
## Frontend FAQ ## Frontend FAQ
Read the [frontend's FAQ](frontend_faq.md) for common small pieces of helpful information. Read the [frontend's FAQ](frontend_faq.md) for common small pieces of helpful information.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment