Merge pull request #10337 from marmelab/datagrid-header-sort-label-capitalize

Fix Datagrid header tooltip shows column names with a capital letter

Author: djhi

packages/ra-language-english/src/index.ts

@@ -139,7 +139,7 @@ const englishMessages: TranslationMessages = {
             skip_nav: 'Skip to content',
         },
         sort: {
-            sort_by: 'Sort by %{field} %{order}',
+            sort_by: 'Sort by %{field_lower_first} %{order}',
             ASC: 'ascending',
             DESC: 'descending',
         },

packages/ra-language-french/src/index.ts

@@ -144,7 +144,7 @@ const frenchMessages: TranslationMessages = {
             skip_nav: 'Aller au contenu',
         },
         sort: {
-            sort_by: 'Trier par %{field} %{order}',
+            sort_by: 'Trier par %{field_lower_first} %{order}',
             ASC: 'croissant',
             DESC: 'décroissant',
         },

packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.spec.tsx

@@ -39,13 +39,13 @@ describe('<DatagridHeaderCell />', () => {
     it('should use the default inferred field label in its tooltip when using a React element as the field label', async () => {
         render(<LabelElements />);
         await screen.findByText('ID');
-        await screen.findByLabelText('Sort by Id descending');
+        await screen.findByLabelText('Sort by id descending');
         await screen.findByText('TITLE');
-        await screen.findByLabelText('Sort by Title ascending');
+        await screen.findByLabelText('Sort by title ascending');
         await screen.findByText('AUTHOR');
-        await screen.findByLabelText('Sort by Author ascending');
+        await screen.findByLabelText('Sort by author ascending');
         await screen.findByText('YEAR');
-        await screen.findByLabelText('Sort by Year ascending');
+        await screen.findByLabelText('Sort by year ascending');
     });
 
     describe('sorting on a column', () => {

packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx

@@ -32,17 +32,22 @@ export const DatagridHeaderCell = (
             : // non active sort field, use default order
               field?.props.sortByOrder ?? 'ASC'
         : undefined;
+    const fieldLabel = field
+        ? translateLabel({
+              label:
+                  typeof field.props.label === 'string'
+                      ? field.props.label
+                      : undefined,
+              resource,
+              source: field.props.source,
+          })
+        : undefined;
     const sortLabel = translate('ra.sort.sort_by', {
-        field: field
-            ? translateLabel({
-                  label:
-                      typeof field.props.label === 'string'
-                          ? field.props.label
-                          : undefined,
-                  resource,
-                  source: field.props.source,
-              })
-            : undefined,
+        field: fieldLabel,
+        field_lower_first:
+            typeof fieldLabel === 'string'
+                ? fieldLabel.charAt(0).toLowerCase() + fieldLabel.slice(1)
+                : undefined,
         order: translate(`ra.sort.${nextSortOrder}`),
         _: translate('ra.action.sort'),
     });