[Data Grid] Pluralization of sort button

[babs20]

Summary

Fixes #5037

Updated the EuiDataGrid sort button text to include pluralization of the text when fields are sorted.

Before:

After:

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
  - [ ] Props have proper autodocs and playground toggles
  - [ ] Added documentation
• Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[babs20]

To the reviewer, not sure if I need to add any tests for this change. I didn't see any test checking the text of the sort button after sorting a column, so I assumed it was not needed.

Let me know if you need me to implement a test for this change.

[elizabetdev]

Thanks for opening this PR! 🎉 

Let me get our CI running our tests, build a preview, and then I can start a review: jenkins test this.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5043/

[elizabetdev]

Thanks @babs20! Tested, looked at the code, and LGTM! 🎉

I don't think we need tests for this but let me confirm with @chandlerprall.

[chandlerprall]

Thank you for the change, @babs20 ! Some languages have different rules instead of 1 vs 0 or 2+; e.g. pluralization for 2 items is different than 3 items, and we may need to try and account for that. Let me track down some more information before we move forward with this change.

It would be great to have a new test covering this change; but I'll research this first.

[chandlerprall]

Instead of concatenating / performing the pluralizing logic in the template string, we can move it into the i18n token itself which will allow applications full control over how they want to localize/translate:

The Interpolation example shows how the value can be included in the token defaults, but it will require a small refactor because our i18n utility doesn't support passing values to more than one tokens. Instead of nesting EuiI18n, that render prop function can be replaced by our useEuiI18n hook (also in that Interpolation section).

As an additional reference, color_picker_swatch.tsx:32 has an instance of useEuiI18n with a value.

Let me know if any of that doesn't make sense or isn't clear how to implement.

[babs20]

After looking over this again, I believe I misunderstood the useEuiI18n values prop, so this solution will not work, as it gives applications no way to manipulate the text.

I will go back and take a look at this again.

[chandlerprall]

I missed mentioning that the token's default can be a function and hold that extra logic. Something like:

const button = useEuiI18n('euiColumnSorting.button', 'Sort fields');
const buttonActive = useEuiI18n(
  'euiColumnSorting.buttonActive',
  ({ numberOfSortedFields }) => `${numberOfSortedFields} field${numberOfSortedFields === 1 ? '' : 's'} sorted`,
  { numberOfSortedFields }
);

...

        <EuiButtonEmpty
          size="xs"
          iconType="sortable"
          color="text"
          className={controlBtnClasses}
          data-test-subj="dataGridColumnSortingButton"
          onClick={() => setIsOpen(!isOpen)}>
          {numberOfSortedFields > 0 ? buttonActive : button}
        </EuiButtonEmpty>

Which keeps all of the token definitions in the localization system, and ensures numberOfSortedFields is available to any token overrides provided by the application

[babs20]

I missed mentioning that the token's default can be a function and hold that extra logic.

Ahhh, I got it now. Thanks for the clarification!

[cee-chen]

@cchaos Thanks a million for getting the merge upstream on this PR! 🙏

[chandlerprall]

Changes LGTM, will merge when CI passes

Thanks for the fix & unit test @babs20 !

[chandlerprall]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5043/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5043/