3 files changed, 16 insertions, 14 deletions
diff --git a/doc/development/fe_guide/haml.md b/doc/development/fe_guide/haml.md
index 9dc5b265783..9281f01d750 100644
--- a/doc/development/fe_guide/haml.md
+++ b/doc/development/fe_guide/haml.md
@@ -67,10 +67,10 @@ For example:
 
     .form-group.gl-mb-3
       = f.gitlab_ui_checkbox_component :lfs_enabled, checkbox_options: { checked: @group.lfs_enabled? } do |c|
-        = c.label do
+        - c.with_label do
           = _('Allow projects within this group to use Git LFS')
           = link_to sprite_icon('question-o'), help_page_path('topics/git/lfs/index')
-        = c.help_text do
+        - c.with_help_text do
           = _('This setting can be overridden in each project.')
   ```
 
diff --git a/doc/development/fe_guide/view_component.md b/doc/development/fe_guide/view_component.md
index 0245110ec75..cfd78597501 100644
--- a/doc/development/fe_guide/view_component.md
+++ b/doc/development/fe_guide/view_component.md
@@ -66,7 +66,7 @@ In its simplest form the banner component looks like this:
 ```haml
 = render Pajamas::BannerComponent.new(button_text: 'Learn more', button_link: example_path,
   svg_path: 'illustrations/example.svg') do |c|
-  - c.title { 'Hello world!' }
+  - c.with_title { 'Hello world!' }
   %p Content of your banner goes here...
 ```
 
@@ -75,11 +75,11 @@ instead of `svg_path` and the `primary_action` slot instead of `button_text` and
 
 ```haml
 = render Pajamas::BannerComponent.new do |c|
-  - c.illustration do
+  - c.with_illustration do
     = custom_icon('my_inline_svg')
-  - c.title do
+  - c.with_title do
     Hello world!
-  - c.primary_action do
+  - c.with_primary_action do
     = render 'my_button_in_a_partial'
 ```
 
@@ -133,12 +133,12 @@ The card has one mandatory `body` slot and optional `header` and `footer` slots:
 
 ```haml
 = render Pajamas::CardComponent.new do |c|
-  - c.header do
+  - c.with_header do
     I'm the header.
-  - c.body do
+  - c.with_body do
     %p Multiple line
     %p body content.
-  - c.footer do
+  - c.with_footer do
     Footer goes here.
 ```
 
@@ -164,9 +164,9 @@ For example:
 ```haml
 = render Pajamas::CheckboxTagComponent.new(name: 'project[initialize_with_sast]',
   checkbox_options: { data: { qa_selector: 'initialize_with_sast_checkbox', track_label: track_label, track_action: 'activate_form_input', track_property: 'init_with_sast' } }) do |c|
-  = c.label do
+  - c.with_label do
     = s_('ProjectsNew|Enable Static Application Security Testing (SAST)')
-  = c.help_text do
+  - c.with_help_text do
     = s_('ProjectsNew|Analyze your source code for known security vulnerabilities.')
     = link_to _('Learn more.'), help_page_path('user/application_security/sast/index'), target: '_blank', rel: 'noopener noreferrer', data: { track_action: 'followed' }
 ```
@@ -219,11 +219,11 @@ Many of the settings pages use a layout where the title and description are on t
 
 ```haml
 = render ::Layouts::HorizontalSectionComponent.new(options: { class: 'gl-mb-6' }) do |c|
-  = c.title { _('Naming, visibility') }
-  = c.description do
+  - c.with_title { _('Naming, visibility') }
+  - c.with_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
+  - c.with_body do
     .form-group.gl-form-group
       = f.label :name, _('New group name')
       = f.text_field :name
diff --git a/doc/user/profile/preferences.md b/doc/user/profile/preferences.md
index e72113dc321..ab7cc96d4c1 100644
--- a/doc/user/profile/preferences.md
+++ b/doc/user/profile/preferences.md
@@ -129,6 +129,8 @@ You can choose between 2 options:
 The **Project overview content** setting allows you to choose what content you want to
 see on a project's home page.
 
+If **Files and Readme** is selected, you can show or hide the shortcut buttons above the file list on the project overview with the **Show shortcut buttons above files on project overview** setting.
+
 ### Tab width
 
 You can set the displayed width of tab characters across various parts of