diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 0c7b74684ccbda37ce56f591ab92ca0c915c4bbd..ba10fab90fb87df3e94e1b702e6c30a5a8588184 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -156,39 +156,21 @@ } .visibility-level-setting { - .form-check { - margin-bottom: 10px; - - .option-title { - font-weight: $gl-font-weight-normal; - display: inline-block; - color: $gl-text-color; - vertical-align: top; - } + .option-disabled-reason { + display: none; + } - .option-description, - .option-disabled-reason { - margin-left: 20px; - color: $project-option-descr-color; - margin-top: -5px; + &.disabled { + svg { + opacity: 0.5; } - .option-disabled-reason { + .option-description { display: none; } - &.disabled { - svg { - opacity: 0.5; - } - - .option-description { - display: none; - } - - .option-disabled-reason { - display: block; - } + .option-disabled-reason { + display: block; } } } diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml index 58a78a8adc1a6728029b8e337d382609d53c7b30..3fb2b88dadd48e0a7eb5767ee53bf14157f4e34b 100644 --- a/app/views/groups/new.html.haml +++ b/app/views/groups/new.html.haml @@ -10,7 +10,7 @@ .row{ 'v-cloak': true } #create-group-pane.tab-pane - = form_for @group, html: { class: 'group-form gl-show-field-errors gl-mt-3' } do |f| + = gitlab_ui_form_for @group, html: { class: 'group-form gl-show-field-errors gl-mt-3' } do |f| = render 'new_group_fields', f: f, group_name_id: 'create-group-name' #import-group-pane.tab-pane diff --git a/app/views/groups/settings/_general.html.haml b/app/views/groups/settings/_general.html.haml index ad0780e869c8831d69f5028622a861c57f877446..fab95c0ee2d01663e32e0d9605bd15652b84512d 100644 --- a/app/views/groups/settings/_general.html.haml +++ b/app/views/groups/settings/_general.html.haml @@ -1,4 +1,4 @@ -= form_for @group, html: { multipart: true, class: 'gl-show-field-errors js-general-settings-form' }, authenticity_token: true do |f| += gitlab_ui_form_for @group, html: { multipart: true, class: 'gl-show-field-errors js-general-settings-form' }, authenticity_token: true do |f| %input{ type: 'hidden', name: 'update_section', value: 'js-general-settings' } = form_errors(@group) diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml index 4e4738ebd2563257232da336eb787a9de12496b5..247107d462bb2a067da1d30b880df278cb660783 100644 --- a/app/views/projects/new.html.haml +++ b/app/views/projects/new.html.haml @@ -12,7 +12,7 @@ .row{ 'v-cloak': true } #blank-project-pane.tab-pane.active - = form_for @project, html: { class: 'new_project gl-mt-3' } do |f| + = gitlab_ui_form_for @project, html: { class: 'new_project gl-mt-3' } do |f| = render 'new_project_fields', f: f, project_name_id: "blank-project-name" #create-from-template-pane.tab-pane @@ -22,7 +22,7 @@ - contributing_templates_url = 'https://gitlab.com/gitlab-org/project-templates/contributing' - link_start = ''.html_safe % { url: contributing_templates_url } = _('Learn how to %{link_start}contribute to the built-in templates%{link_end}').html_safe % { link_start: link_start, link_end: ''.html_safe } - = form_for @project, html: { class: 'new_project' } do |f| + = gitlab_ui_form_for @project, html: { class: 'new_project' } do |f| .project-template .form-group %div diff --git a/app/views/shared/_visibility_radios.html.haml b/app/views/shared/_visibility_radios.html.haml index 760fe18ddece06598fc7a794526ca6fa76e281da..843872d95c354c55f4aec7989dfdcb6f99bc2c4b 100644 --- a/app/views/shared/_visibility_radios.html.haml +++ b/app/views/shared/_visibility_radios.html.haml @@ -2,15 +2,17 @@ - selected_level = snippets_selected_visibility_level(available_visibility_levels, selected_level) - available_visibility_levels.each do |level| - .form-check - = form.radio_button model_method, level, checked: (selected_level == level), class: 'form-check-input', data: { track_label: "blank_project", track_action: "activate_form_input", track_property: "#{model_method}_#{level}", track_value: "", qa_selector: "#{visibility_level_label(level).downcase}_radio" } - = form.label "#{model_method}_#{level}", class: 'form-check-label' do - = visibility_level_icon(level) - .option-title - = visibility_level_label(level) - .option-description - = visibility_level_description(level, form_model) - .option-disabled-reason + - labelIcon = visibility_level_icon(level) + - labelText = (" " + visibility_level_label(level)).html_safe + - labelDescription = ('' + ( visibility_level_description(level, form_model) || "" ) + '').html_safe + - labelDisableReason = ''.html_safe + - options = { checked: selected_level == level, data: { track_label: "blank_project", track_action: "activate_form_input", track_property: "#{model_method}_#{level}", track_value: "", qa_selector: "#{visibility_level_label(level).downcase}_radio" } } + + = form.gitlab_ui_radio_component model_method, + level, + labelIcon + labelText, + help_text: labelDescription + labelDisableReason, + radio_options: options .text-muted - if all_visibility_levels_restricted? diff --git a/ee/app/views/registrations/projects/new.html.haml b/ee/app/views/registrations/projects/new.html.haml index 302986039ac058b2ffb9501766943bccd8289043..ca1691ce39bef21e95e5a38988faed4608a68b4c 100644 --- a/ee/app/views/registrations/projects/new.html.haml +++ b/ee/app/views/registrations/projects/new.html.haml @@ -28,7 +28,7 @@ .tab-content.gitlab-tab-content.gl-bg-white #blank-project-pane.tab-pane.js-toggle-container.active{ role: 'tabpanel' } - = form_for @project, url: users_sign_up_projects_path(trial_onboarding_flow: params[:trial_onboarding_flow]), html: { class: 'new_project' } do |f| + = gitlab_ui_form_for @project, url: users_sign_up_projects_path(trial_onboarding_flow: params[:trial_onboarding_flow]), html: { class: 'new_project' } do |f| = form_errors(@project) = f.hidden_field :namespace_id, value: @project.namespace_id #blank-project-name.row diff --git a/ee/app/views/subscriptions/groups/edit.html.haml b/ee/app/views/subscriptions/groups/edit.html.haml index 1e01ab6c6f2fef41716b90a7e65a5231e522b1ff..b27d3bff24209c715c77e8ec2121cbd231c6ba96 100644 --- a/ee/app/views/subscriptions/groups/edit.html.haml +++ b/ee/app/views/subscriptions/groups/edit.html.haml @@ -11,7 +11,7 @@ %div= _('A group represents your organization in GitLab. Groups allow you to manage users and collaborate across multiple projects.') %div= _('Your %{plan} plan will be applied to your group.' % { plan: plan_title }) - = form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-5' } do |f| + = gitlab_ui_form_for [:subscriptions, @group], html: { class: 'gl-show-field-errors card w-100 gl-p-5' } do |f| = hidden_field_tag :new_user, params[:new_user] = form_errors(@group) .row diff --git a/spec/support/helpers/features/snippet_helpers.rb b/spec/support/helpers/features/snippet_helpers.rb index 3e32b0e4c676864bebfea6e7cabc516e5720edf7..1bd442182df0e011d113d8f0fcf1421bbe0a2d03 100644 --- a/spec/support/helpers/features/snippet_helpers.rb +++ b/spec/support/helpers/features/snippet_helpers.rb @@ -42,7 +42,9 @@ def snippet_description_value end def snippet_fill_in_visibility(text) - page.find('#visibility-level-setting').choose(text) + levels = { 'Private' => 0, 'Internal' => 1, 'Public' => 2 } + + page.find('#visibility-level-setting').choose({ option: levels[text] }) end def snippet_fill_in_title(value)