From cd1e312190c4bf8e62c5dedc5d69f2d03cd50401 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20V=C3=A9lez?= <pablovv2012@gmail.com>
Date: Fri, 27 Jun 2025 23:03:59 +0200
Subject: [PATCH] MM-64690 - fix channel name input label (#32157)

* MM-64690 - fix channel name input label

* add correct font-weight

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../channel_settings_info_tab.tsx                    |  9 ++++-----
 .../channel_settings_modal.scss                      |  2 +-
 .../start_trial_form_modal.test.tsx.snap             | 12 ++++++++++--
 .../inputs/input/__snapshots__/input.test.tsx.snap   |  5 ++++-
 .../src/components/widgets/inputs/input/input.scss   |  1 +
 .../src/components/widgets/inputs/input/input.tsx    |  6 ++++--
 webapp/channels/src/i18n/en.json                     |  2 +-
 7 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/webapp/channels/src/components/channel_settings_modal/channel_settings_info_tab.tsx b/webapp/channels/src/components/channel_settings_modal/channel_settings_info_tab.tsx
index 42a8bfac3c..e894f7e2ef 100644
--- a/webapp/channels/src/components/channel_settings_modal/channel_settings_info_tab.tsx
+++ b/webapp/channels/src/components/channel_settings_modal/channel_settings_info_tab.tsx
@@ -344,12 +344,11 @@ function ChannelSettingsInfoTab({
             />
 
             {/* Channel Name Section*/}
-            <label
-                htmlFor='input_channel-settings-name'
-                className='Input_legend'
+            <div
+                className='ChannelSettingsModal__infoTabTitle'
             >
-                {formatMessage({id: 'channel_settings.label.name', defaultMessage: 'Channel Name'})}
-            </label>
+                {formatMessage({id: 'channel_settings.channel_info_tab.name', defaultMessage: 'Channel Info'})}
+            </div>
             <ChannelNameFormField
                 value={displayName}
                 name='channel-settings-name'
diff --git a/webapp/channels/src/components/channel_settings_modal/channel_settings_modal.scss b/webapp/channels/src/components/channel_settings_modal/channel_settings_modal.scss
index 7eeb5a4dea..4545b20251 100644
--- a/webapp/channels/src/components/channel_settings_modal/channel_settings_modal.scss
+++ b/webapp/channels/src/components/channel_settings_modal/channel_settings_modal.scss
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 .ChannelSettingsModal {
-    label.Input_legend {
+    &__infoTabTitle {
         margin-bottom: 4px;
         color: var(--center-channel-color);
         font-family: Metropolis, sans-serif;
diff --git a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
index 47f2aa7c68..7ffc943b10 100644
--- a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
+++ b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
@@ -72,7 +72,10 @@ Object {
                 >
                   <label
                     class="Input_legend"
-                  />
+                    for="input_name"
+                  >
+                                            
+                  </label>
                   <div
                     class="Input_wrapper"
                   >
@@ -97,7 +100,9 @@ Object {
                 >
                   <label
                     class="Input_legend Input_legend___focus"
+                    for="input_email"
                   >
+                                            
                     Business Email
                   </label>
                   <div
@@ -141,7 +146,10 @@ Object {
                 >
                   <label
                     class="Input_legend"
-                  />
+                    for="input_company_name"
+                  >
+                                            
+                  </label>
                   <div
                     class="Input_wrapper"
                   >
diff --git a/webapp/channels/src/components/widgets/inputs/input/__snapshots__/input.test.tsx.snap b/webapp/channels/src/components/widgets/inputs/input/__snapshots__/input.test.tsx.snap
index a9a3d8a5d9..1fb2b866f9 100644
--- a/webapp/channels/src/components/widgets/inputs/input/__snapshots__/input.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/inputs/input/__snapshots__/input.test.tsx.snap
@@ -11,7 +11,10 @@ exports[`components/widgets/inputs/Input should match snapshot 1`] = `
     >
       <label
         class="Input_legend"
-      />
+        for="input_"
+      >
+                                
+      </label>
       <div
         class="Input_wrapper"
       >
diff --git a/webapp/channels/src/components/widgets/inputs/input/input.scss b/webapp/channels/src/components/widgets/inputs/input/input.scss
index ed85a6c48d..438cd397f4 100644
--- a/webapp/channels/src/components/widgets/inputs/input/input.scss
+++ b/webapp/channels/src/components/widgets/inputs/input/input.scss
@@ -192,6 +192,7 @@
         background-color: var(--center-channel-bg);
         color: rgba(var(--center-channel-color-rgb), 0.75);
         font-size: 10px;
+        font-weight: normal;
         line-height: 14px;
         opacity: 0;
         transform: translateY(8px);
diff --git a/webapp/channels/src/components/widgets/inputs/input/input.tsx b/webapp/channels/src/components/widgets/inputs/input/input.tsx
index 7b0d185da7..61f8273de8 100644
--- a/webapp/channels/src/components/widgets/inputs/input/input.tsx
+++ b/webapp/channels/src/components/widgets/inputs/input/input.tsx
@@ -266,8 +266,10 @@ const Input = React.forwardRef((
                 data-testid='input-wrapper'
             >
                 {useLegend && (
-                    <label className={classNames('Input_legend', {Input_legend___focus: showLegend})}>
-                        {showLegend ? formatAsString(formatMessage, label || placeholder) : null}
+                    <label
+                        htmlFor={inputId}
+                        className={classNames('Input_legend', {Input_legend___focus: showLegend})}
+                    >                        {showLegend ? formatAsString(formatMessage, label || placeholder) : null}
                     </label>
                 )}
                 <div className={classNames('Input_wrapper', wrapperClassName)}>
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 53196aab4b..9462f0b06c 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -3654,12 +3654,12 @@
   "channel_settings_modal.purpose.placeholder": "Enter a purpose for this channel (optional)",
   "channel_settings.archive.button": "Archive this channel",
   "channel_settings.archive.warning": "Archiving a channel removes it from the user interface, but doesn't permanently delete the channel. New messages can't be posted to archived channels.",
+  "channel_settings.channel_info_tab.name": "Channel Info",
   "channel_settings.error_banner_color_required": "Banner color is required",
   "channel_settings.error_banner_text_required": "Banner text is required",
   "channel_settings.error_display_name_required": "Channel name is required",
   "channel_settings.error_purpose_length": "The text entered exceeds the character limit. The channel purpose is limited to {maxLength} characters.",
   "channel_settings.header.label": "Channel Header",
-  "channel_settings.label.name": "Channel Name",
   "channel_settings.modal.archiveTitle": "Archive Channel?",
   "channel_settings.modal.confirmArchive": "Confirm",
   "channel_settings.modal.title": "Channel Settings",