Merge branch '53020-user-specific-profile-page-settings-fields-don-t-have-help-text-placeholders' into 'master'

Add explanatory help text to text inputs on user profile settings page

Closes #53020

See merge request gitlab-org/gitlab-ce!23673

8 files changed, 77 insertions, 31 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index afd888af672..4da2243981e 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -256,7 +256,12 @@ label {
   }
 }
 
+.input-md {
+  max-width: $input-md-width;
+  width: 100%;
+}
+
 .input-lg {
-  max-width: 320px;
+  max-width: $input-lg-width;
   width: 100%;
 }
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 7f0edd88dfb..a68f1e4e570 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -1,6 +1,11 @@
 /** Select2 selectbox style override **/
 .select2-container {
   width: 100% !important;
+
+  &.input-md,
+  &.input-lg {
+    display: block;
+  }
 }
 
 .select2-container,
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c0bba30944a..ce5aaa8963c 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -509,6 +509,8 @@ $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
 $input-short-width: 200px;
 $input-short-md-width: 280px;
+$input-md-width: 240px;
+$input-lg-width: 320px;
 
 /*
 * Help
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index a4831b64344..b813eb16dad 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -456,4 +456,15 @@ table.u2f-registrations {
       }
     }
   }
+
+  @include media-breakpoint-down(sm) {
+    .input-md,
+    .input-lg {
+      max-width: 100%;
+    }
+  }
+}
+
+.help-block {
+  color: $gl-text-color-secondary;
 }
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
index bde9ca0cbf2..73c1402eae5 100644
--- a/app/helpers/users_helper.rb
+++ b/app/helpers/users_helper.rb
@@ -8,7 +8,7 @@ module UsersHelper
   end
 
   def user_email_help_text(user)
-    return 'We also use email for avatar detection if no avatar is uploaded.' unless user.unconfirmed_email.present?
+    return 'We also use email for avatar detection if no avatar is uploaded' unless user.unconfirmed_email.present?
 
     confirmation_link = link_to 'Resend confirmation e-mail', user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
 
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 2603c558c0f..2629b374e7c 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -71,43 +71,43 @@
       %h4.prepend-top-0
         = s_("Profiles|Main settings")
       %p
-        = s_("Profiles|This information will appear on your profile.")
+        = s_("Profiles|This information will appear on your profile")
         - if current_user.ldap_user?
           = s_("Profiles|Some options are unavailable for LDAP accounts")
     .col-lg-8
       .row
         - if @user.read_only_attribute?(:name)
           = f.text_field :name, required: true, readonly: true, wrapper: { class: 'col-md-9' },
-          help: s_("Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you.") % { provider_label: attribute_provider_label(:name) }
+          help: s_("Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you") % { provider_label: attribute_provider_label(:name) }
         - else
-          = f.text_field :name, label: 'Full name', required: true, wrapper: { class: 'col-md-9' }, help: "Enter your name, so people you know can recognize you."
+          = f.text_field :name, label: 'Full name', required: true, wrapper: { class: 'col-md-9' }, help: s_("Profiles|Enter your name, so people you know can recognize you")
         = f.text_field :id, readonly: true, label: 'User ID', wrapper: { class: 'col-md-3' }
 
       - if @user.read_only_attribute?(:email)
-        = f.text_field :email, required: true, readonly: true, help: s_("Profiles|Your email address was automatically set based on your %{provider_label} account.") % { provider_label: attribute_provider_label(:email) }
+        = f.text_field :email, required: true, class: 'input-lg', readonly: true, help: s_("Profiles|Your email address was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:email) }
       - else
-        = f.text_field :email, required: true, value: (@user.email unless @user.temp_oauth_email?),
+        = f.text_field :email, required: true, class: 'input-lg', value: (@user.email unless @user.temp_oauth_email?),
           help: user_email_help_text(@user)
       = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email),
-        { help: s_("Profiles|This email will be displayed on your public profile."), include_blank: s_("Profiles|Do not show on profile") },
-        control_class: 'select2'
+        { help: s_("Profiles|This email will be displayed on your public profile"), include_blank: s_("Profiles|Do not show on profile") },
+        control_class: 'select2 input-lg'
       - commit_email_docs_link = link_to s_('Profiles|Learn more'), help_page_path('user/profile/index', anchor: 'commit-email', target: '_blank')
       = f.select :commit_email, options_for_select(commit_email_select_options(@user), selected: selected_commit_email(@user)),
         { help: s_("Profiles|This email will be used for web based operations, such as edits and merges. %{learn_more}").html_safe % { learn_more: commit_email_docs_link } },
-        control_class: 'select2'
+        control_class: 'select2 input-lg'
       = f.select :preferred_language, Gitlab::I18n::AVAILABLE_LANGUAGES.map { |value, label| [label, value] },
-        { help: s_("Profiles|This feature is experimental and translations are not complete yet.") },
-        control_class: 'select2'
-      = f.text_field :skype
-      = f.text_field :linkedin
-      = f.text_field :twitter
-      = f.text_field :website_url, label: s_("Profiles|Website")
+        { help: s_("Profiles|This feature is experimental and translations are not complete yet") },
+        control_class: 'select2 input-lg'
+      = f.text_field :skype, class: 'input-md', placeholder: s_("Profiles|username")
+      = f.text_field :linkedin, class: 'input-md', help: s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
+      = f.text_field :twitter, class: 'input-md', placeholder: s_("Profiles|@username")
+      = f.text_field :website_url, class: 'input-lg', placeholder: s_("Profiles|website.com")
       - if @user.read_only_attribute?(:location)
-        = f.text_field :location, readonly: true, help: s_("Profiles|Your location was automatically set based on your %{provider_label} account.") % { provider_label: attribute_provider_label(:location) }
+        = f.text_field :location, readonly: true, help: s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
       - else
-        = f.text_field :location
-      = f.text_field :organization
-      = f.text_area :bio, rows: 4, maxlength: 250, help: s_("Profiles|Tell us about yourself in fewer than 250 characters.")
+        = f.text_field :location, class: 'input-lg', placeholder: s_("Profiles|City, country")
+      = f.text_field :organization, class: 'input-md', help: s_("Profiles|Who you represent or work for")
+      = f.text_area :bio, rows: 4, maxlength: 250, help: s_("Profiles|Tell us about yourself in fewer than 250 characters")
       %hr
       %h5= ("Private profile")
       .checkbox-icon-inline-wrapper
@@ -118,7 +118,7 @@
       %h5= s_("Profiles|Private contributions")
       = f.check_box :include_private_contributions, label: 'Include private contributions on my profile'
       .help-block
-        = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information.")
+        = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
       .prepend-top-default.append-bottom-default
         = f.submit s_("Profiles|Update profile settings"), class: 'btn btn-success'
         = link_to _("Cancel"), user_path(current_user), class: 'btn btn-cancel'
diff --git a/changelogs/unreleased/53020-user-specific-profile-page-settings-fields-don-t-have-help-text-placeholders.yml b/changelogs/unreleased/53020-user-specific-profile-page-settings-fields-don-t-have-help-text-placeholders.yml
new file mode 100644
index 00000000000..99da02dd31a
--- /dev/null
+++ b/changelogs/unreleased/53020-user-specific-profile-page-settings-fields-don-t-have-help-text-placeholders.yml
@@ -0,0 +1,5 @@
+---
+title: Adds explanatory text to input fields on user profile settings page
+merge_request: 23673
+author:
+type: other
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9f9844e2140..61fb56d2fa2 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5006,6 +5006,9 @@ msgstr ""
 msgid "Profiles| You are going to change the username %{currentUsernameBold} to %{newUsernameBold}. Profile and projects will be redirected to the %{newUsername} namespace but this redirect will expire once the %{currentUsername} namespace is registered by another user or group. Please update your Git repository remotes as soon as possible."
 msgstr ""
 
+msgid "Profiles|@username"
+msgstr ""
+
 msgid "Profiles|Account scheduled for removal."
 msgstr ""
 
@@ -5027,7 +5030,10 @@ msgstr ""
 msgid "Profiles|Choose file..."
 msgstr ""
 
-msgid "Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information."
+msgid "Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information"
+msgstr ""
+
+msgid "Profiles|City, country"
 msgstr ""
 
 msgid "Profiles|Clear status"
@@ -5060,6 +5066,9 @@ msgstr ""
 msgid "Profiles|Edit Profile"
 msgstr ""
 
+msgid "Profiles|Enter your name, so people you know can recognize you"
+msgstr ""
+
 msgid "Profiles|Invalid password"
 msgstr ""
 
@@ -5099,7 +5108,7 @@ msgstr ""
 msgid "Profiles|Some options are unavailable for LDAP accounts"
 msgstr ""
 
-msgid "Profiles|Tell us about yourself in fewer than 250 characters."
+msgid "Profiles|Tell us about yourself in fewer than 250 characters"
 msgstr ""
 
 msgid "Profiles|The maximum file size allowed is 200KB."
@@ -5108,7 +5117,7 @@ msgstr ""
 msgid "Profiles|This doesn't look like a public SSH key, are you sure you want to add it?"
 msgstr ""
 
-msgid "Profiles|This email will be displayed on your public profile."
+msgid "Profiles|This email will be displayed on your public profile"
 msgstr ""
 
 msgid "Profiles|This email will be used for web based operations, such as edits and merges. %{learn_more}"
@@ -5117,10 +5126,10 @@ msgstr ""
 msgid "Profiles|This emoji and message will appear on your profile and throughout the interface."
 msgstr ""
 
-msgid "Profiles|This feature is experimental and translations are not complete yet."
+msgid "Profiles|This feature is experimental and translations are not complete yet"
 msgstr ""
 
-msgid "Profiles|This information will appear on your profile."
+msgid "Profiles|This information will appear on your profile"
 msgstr ""
 
 msgid "Profiles|Type your %{confirmationValue} to confirm:"
@@ -5147,10 +5156,10 @@ msgstr ""
 msgid "Profiles|Username successfully changed"
 msgstr ""
 
-msgid "Profiles|Website"
+msgid "Profiles|What's your status?"
 msgstr ""
 
-msgid "Profiles|What's your status?"
+msgid "Profiles|Who you represent or work for"
 msgstr ""
 
 msgid "Profiles|You can change your avatar here"
@@ -5171,16 +5180,19 @@ msgstr ""
 msgid "Profiles|You must transfer ownership or delete these groups before you can delete your account."
 msgstr ""
 
+msgid "Profiles|Your LinkedIn profile name from linkedin.com/in/profilename"
+msgstr ""
+
 msgid "Profiles|Your account is currently an owner in these groups:"
 msgstr ""
 
-msgid "Profiles|Your email address was automatically set based on your %{provider_label} account."
+msgid "Profiles|Your email address was automatically set based on your %{provider_label} account"
 msgstr ""
 
-msgid "Profiles|Your location was automatically set based on your %{provider_label} account."
+msgid "Profiles|Your location was automatically set based on your %{provider_label} account"
 msgstr ""
 
-msgid "Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you."
+msgid "Profiles|Your name was automatically set based on your %{provider_label} account, so people you know can recognize you"
 msgstr ""
 
 msgid "Profiles|Your status"
@@ -5189,6 +5201,12 @@ msgstr ""
 msgid "Profiles|e.g. My MacBook key"
 msgstr ""
 
+msgid "Profiles|username"
+msgstr ""
+
+msgid "Profiles|website.com"
+msgstr ""
+
 msgid "Profiles|your account"
 msgstr ""