diff options
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/documentation/styleguide/index.md | 7 | ||||
| -rw-r--r-- | doc/development/fe_guide/view_component.md | 29 |
2 files changed, 33 insertions, 3 deletions
diff --git a/doc/development/documentation/styleguide/index.md b/doc/development/documentation/styleguide/index.md index 802bc5910d6..1256b2282c3 100644 --- a/doc/development/documentation/styleguide/index.md +++ b/doc/development/documentation/styleguide/index.md @@ -1363,7 +1363,10 @@ It renders on the GitLab documentation site as: ## Tabs -Use tabs to show different options. +On the docs site, you can format text so it's displayed as tabs. + +NOTE: +For now, tabs are for testing only. Do not use them on the production docs site. To create a set of tabs, follow this example: @@ -1389,7 +1392,7 @@ The headings determine the tab titles. Each tab is populated with the content be Use brief words for the titles, ensure they are parallel, and start each with a capital letter. For example: -- `Omnibus`, `Chart`, `Source` +- `Omnibus package`, `Helm chart`, `Source` - `15.1 and earlier`, `15.2 and later` See [Pajamas](https://design.gitlab.com/components/tabs/#guidelines) for details. diff --git a/doc/development/fe_guide/view_component.md b/doc/development/fe_guide/view_component.md index cb76f9a0d7a..7ddce609ee7 100644 --- a/doc/development/fe_guide/view_component.md +++ b/doc/development/fe_guide/view_component.md @@ -205,7 +205,34 @@ To actually initialize this component, make sure to call the `initToggle` helper For the full list of options, see its [source](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/components/pajamas/toggle_component.rb). -### Best practices +## Layouts + +Layout components can be used to create common layout patterns used in GitLab. + +### Available components + +#### Horizontal section + +Many of the settings pages use a layout where the title and description are on the left and the settings fields are on the right. The `Layouts::HorizontalSectionComponent` can be used to create this layout. + +**Example:** + +```haml += render ::Layouts::HorizontalSectionComponent.new(options: { class: 'gl-mb-6' }) do |c| + = c.title { _('Naming, visibility') } + = c.description do + = _('Update your group name, description, avatar, and visibility.') + = link_to _('Learn more about groups.'), help_page_path('user/group/index') + = c.body do + .form-group.gl-form-group + = f.label :name, _('New group name') + = f.text_field :name +``` + +For the full list of options, see its +[source](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/components/layouts/horizontal_section_component.rb). + +## Best practices - If you are about to create a new view in Haml, use the available components over creating plain Haml tags with CSS classes. |