diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index 1c988b9767fbec90c7d3f496cb1c1a76dd1bdd2b..bf8dea15c587befc5498ef901e3dfa439232a886 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -99,11 +99,11 @@ def restricted_level_checkboxes(form)
         checked_value: level,
         unchecked_value: nil
       ) do |c|
-        c.label do
+        c.with_label do
           visibility_level_icon(level) + content_tag(:span, label, { class: 'gl-ml-2' })
         end
 
-        c.help_text do
+        c.with_help_text do
           restricted_visibility_levels_help_text.fetch(level)
         end
       end
diff --git a/app/helpers/form_helper.rb b/app/helpers/form_helper.rb
index ed8cca2024123f557590a1bac669877a9dac6a17..3d0b899e867c044a1537061f40080e5e7335ae40 100644
--- a/app/helpers/form_helper.rb
+++ b/app/helpers/form_helper.rb
@@ -37,7 +37,7 @@ def form_errors(model, type: 'form', truncate: [], custom_message: [])
       dismissible: false,
       alert_options: { id: 'error_explanation', class: 'gl-mb-5' }
     ) do |c|
-      c.body do
+      c.with_body do
         tag.ul(class: 'gl-pl-5 gl-mb-0') do
           messages
         end
diff --git a/app/views/projects/mirrors/_branch_filter.html.haml b/app/views/projects/mirrors/_branch_filter.html.haml
index 49b0f8c39c88b5a1451fa231f1e5be1476135247..7d90906bfe8a949e670140935c1dc49092e60a92 100644
--- a/app/views/projects/mirrors/_branch_filter.html.haml
+++ b/app/views/projects/mirrors/_branch_filter.html.haml
@@ -2,8 +2,8 @@
   = render Pajamas::CheckboxTagComponent.new(name: :only_protected_branches,
     checkbox_options: { class: 'js-mirror-protected' },
     label_options: { class: 'gl-mb-0!' }) do |c|
-    = c.label do
+    - c.with_label do
       = _('Mirror only protected branches')
-    = c.help_text do
+    - c.with_help_text do
       = _('If enabled, only protected branches will be mirrored.')
       = link_to _('Learn more.'), help_page_path('user/project/repository/mirror/index.md', anchor: 'mirror-only-protected-branches'), target: '_blank', rel: 'noopener noreferrer'
diff --git a/app/views/projects/mirrors/_mirror_repos_push.html.haml b/app/views/projects/mirrors/_mirror_repos_push.html.haml
index 0947359a753832aad539fb90485f487f2a7403e9..5b02d6509897e5734165c09ab196322fa9ce5484 100644
--- a/app/views/projects/mirrors/_mirror_repos_push.html.haml
+++ b/app/views/projects/mirrors/_mirror_repos_push.html.haml
@@ -12,8 +12,8 @@
     = render Pajamas::CheckboxTagComponent.new(name: :keep_divergent_refs,
       checkbox_options: { class: 'js-mirror-keep-divergent-refs' },
       label_options: { class: 'gl-mb-0!' }) do |c|
-      = c.label do
+      - c.with_label do
         = _('Keep divergent refs')
-      = c.help_text do
+      - c.with_help_text do
         - link_opening_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe
         = html_escape(_('Do not force push over diverged refs. After the mirror is created, this setting can only be modified using the API. %{mirroring_docs_link_start}Learn more about this option%{link_closing_tag} and %{mirroring_api_docs_link_start}the API.%{link_closing_tag}')) % { mirroring_docs_link_start: link_opening_tag % {url: help_page_path('user/project/repository/mirror/push.md', anchor: 'keep-divergent-refs')}, mirroring_api_docs_link_start: link_opening_tag % {url: help_page_path('api/remote_mirrors')}, link_closing_tag: '</a>'.html_safe }
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index b31e89198320f6d56f2643ba2f4fcb1e2bf03bab..c4630eec1683bd51ee78040bb6e3608115ab57de 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -10,7 +10,7 @@
         = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'search')
         .form-group{ class: 'gl-ml-5 gl-mb-n3!' }
           = render Pajamas::CheckboxTagComponent.new(name: :filter_ref, checked: @options[:filter_ref]) do |c|
-            = c.label do
+            - c.with_label do
               = _("Begin with the selected commit")
 
     - if @commit
diff --git a/app/views/shared/_new_merge_request_checkbox.html.haml b/app/views/shared/_new_merge_request_checkbox.html.haml
index 75289e2e6a5204ebba33f831621162d9c66bce03..fb3dfba269192e82c94eaacc95bbaba8d3dac95f 100644
--- a/app/views/shared/_new_merge_request_checkbox.html.haml
+++ b/app/views/shared/_new_merge_request_checkbox.html.haml
@@ -3,7 +3,7 @@
   = render Pajamas::CheckboxTagComponent.new(name: 'create_merge_request',
     checked: true,
     checkbox_options: { class: 'js-create-merge-request', id: "create_merge_request-#{nonce}" }) do |c|
-    = c.label do
+    - c.with_label do
       - translation_variables = { new_merge_request: "<strong>#{_('new merge request')}</strong>" }
       - translation = _('Start a %{new_merge_request} with these changes') % translation_variables
       #{ translation.html_safe }
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
index 1dc24d205d02052807c6d0427a8b4e62fb82f858..1da0b82b634ffd50c30347484868eef1cc83fb9f 100644
--- a/app/views/shared/issuable/form/_metadata.html.haml
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -7,10 +7,10 @@
 - if @add_related_issue
   .form-group
     = render Pajamas::CheckboxTagComponent.new(name: :add_related_issue, value: @add_related_issue.iid, checked: true) do |c|
-      = c.label do
+      - c.with_label do
         - add_related_issue_link = link_to "\##{@add_related_issue.iid}", issue_path(@add_related_issue), class: ['has-tooltip'], title: @add_related_issue.title
         #{_('Relate to %{issuable_type} %{add_related_issue_link}').html_safe % { issuable_type: @add_related_issue.issue_type, add_related_issue_link: add_related_issue_link }}
-      = c.help_text do
+      - c.with_help_text do
         = _('Adds this %{issuable_type} as related to the %{issuable_type} it was created from') % { issuable_type: @add_related_issue.issue_type }
 
 - if issuable.respond_to?(:confidential) && can?(current_user, :set_confidentiality, issuable)
diff --git a/ee/app/views/admin/application_settings/_add_license.html.haml b/ee/app/views/admin/application_settings/_add_license.html.haml
index eaa8c4aaf51b6b26b7c6532a7155dc7a56cb9eae..3974ca9964f9d2b84c246fbf548497b0b76aaefe 100644
--- a/ee/app/views/admin/application_settings/_add_license.html.haml
+++ b/ee/app/views/admin/application_settings/_add_license.html.haml
@@ -39,7 +39,7 @@
           value: nil,
           checked: false,
           checkbox_options: { data: { qa_selector: 'accept_eula_checkbox'} }) do |c|
-          = c.label do
+          - c.with_label do
             = _('Unless otherwise agreed to in writing with GitLab, by clicking "Upload License" you agree that your use of GitLab Software is subject to the %{eula_link_start}Terms of Service%{eula_link_end}.').html_safe % { eula_link_start: eula_link_start, eula_url: eula_url, eula_link_end: '</a>'.html_safe }
       .form-actions
         = f.submit _('Add license'), pajamas_button: true, data: { qa_selector: 'license_upload_button' }, disabled: true
diff --git a/ee/app/views/groups/sso/_enforce_terms.html.haml b/ee/app/views/groups/sso/_enforce_terms.html.haml
index 4b89902f1313b3c577fbf90409f45188617fced1..bd443123554dab8d6d53c72b089c2328252682f9 100644
--- a/ee/app/views/groups/sso/_enforce_terms.html.haml
+++ b/ee/app/views/groups/sso/_enforce_terms.html.haml
@@ -3,7 +3,7 @@
     = render Pajamas::CheckboxTagComponent.new(name: :terms_opt_in,
       checkbox_options: { required: true },
       label_options: { class: 'label-bold' }) do |c|
-      = c.label do
+      - c.with_label do
         - terms_link = link_to _("Terms of Service and Privacy Policy"), terms_path, target: "_blank"
         - accept_terms_label = _("I accept the %{terms_link}") % { terms_link: terms_link }
         = accept_terms_label.html_safe
diff --git a/spec/components/previews/layouts/horizontal_section_component_preview.rb b/spec/components/previews/layouts/horizontal_section_component_preview.rb
index cc7e8c8c2b1c4792bbc4b86813aa1287eae07846..7393020077f6f742e1a3c6fd49d51bc60ce5ae50 100644
--- a/spec/components/previews/layouts/horizontal_section_component_preview.rb
+++ b/spec/components/previews/layouts/horizontal_section_component_preview.rb
@@ -13,9 +13,9 @@ def default(
       body: 'Settings fields here.'
     )
       render(::Layouts::HorizontalSectionComponent.new(border: border, options: { class: 'gl-mb-6 gl-pb-3' })) do |c|
-        c.title { title }
-        c.description { description }
-        c.body { body }
+        c.with_title { title }
+        c.with_description { description }
+        c.with_body { body }
       end
     end
   end
diff --git a/spec/components/previews/pajamas/banner_component_preview.rb b/spec/components/previews/pajamas/banner_component_preview.rb
index 19f4f5243c06baa493abe73ff45edf36716dbe8b..db9bf2c51d63a520245b48a783515869d04a114f 100644
--- a/spec/components/previews/pajamas/banner_component_preview.rb
+++ b/spec/components/previews/pajamas/banner_component_preview.rb
@@ -32,7 +32,7 @@ def default(
     # like rendering a partial that holds your button.
     def with_primary_action_slot
       render(Pajamas::BannerComponent.new) do |c|
-        c.primary_action do
+        c.with_primary_action do
           # You could also `render` another partial here.
           tag.button "I'm special", class: "btn btn-md btn-confirm gl-button"
         end
@@ -44,7 +44,7 @@ def with_primary_action_slot
     # but for example, an inline SVG via `custom_icon`.
     def with_illustration_slot
       render(Pajamas::BannerComponent.new) do |c|
-        c.illustration do
+        c.with_illustration do
           '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>'.html_safe # rubocop:disable Layout/LineLength
         end
         content_tag :p, "This banner uses the illustration slot."
diff --git a/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb b/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb
index 98fb154fb0501c34275400d46a1f2abf22d4b9de..b8829cc794c2a963a023bae6ead34b0e18fa4823 100644
--- a/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb
+++ b/spec/lib/gitlab/form_builders/gitlab_ui_form_builder_spec.rb
@@ -127,8 +127,8 @@
         form_builder.gitlab_ui_checkbox_component(
           :view_diffs_file_by_file
         ) do |c|
-          c.label { "Show one file at a time on merge request's Changes tab" }
-          c.help_text { 'Instead of all the files changed, show only one file at a time.' }
+          c.with_label { "Show one file at a time on merge request's Changes tab" }
+          c.with_help_text { 'Instead of all the files changed, show only one file at a time.' }
         end
       end
 
@@ -208,8 +208,8 @@
           :access_level,
           :admin
         ) do |c|
-          c.label { "Admin" }
-          c.help_text { 'Administrators have access to all groups, projects, and users and can manage all features in this installation' }
+          c.with_label { "Admin" }
+          c.with_help_text { 'Administrators have access to all groups, projects, and users and can manage all features in this installation' }
         end
       end