Add docs and test for table column header text inside a <span> (#1877)

# Pull Request

## 🤨 Rationale

[Some localization use
cases](https://dev.azure.com/ni/DevCentral/_git/Skyline/pullrequest/661277?_a=files&path=/Web/Workspaces/SystemLinkShared/projects/asset-manager-lib/src/assets/asset-move-dialog/asset-move-dialog.component.html)
require placing table header text inside a span rather than being text
content of the header. This works fine today (text is rendered all caps,
ellipsized when necessary, title set when necessary) but we don't
document or test this case.

## 👩‍💻 Implementation

1. Add a note in storybook that this is allowed
2. Add a unit test to ensure title is set

## 🧪 Testing

1. New unit test for title.
2. Looked for unit / chromatic tests for ellipsis but didn't see any to
copy and didn't think it was worth writing one for this case
3. Locally verified in Angular example app that header text in a span
behaves identically to header text as text content

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Milan Raj <[email protected]>

change/@ni-nimble-components-4ec55901-eaa7-4bbb-a68e-0fdfd13c03a7.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Docs and test for table column header text in span",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table-column/base/tests/table-column.stories.ts

@@ -210,7 +210,7 @@ interface HeaderContentTableArgs extends SharedTableArgs {
 }
 
 const headerContentIntro = 'The content of each column header comes from whatever is slotted in the column element.';
-const headerTextContent = `If you provide only text content, Nimble will style it
+const headerTextContent = `If you provide only text content (or text content inside a \`<span>\`), Nimble will style it
 and add a \`title\` to show a tooltip when truncated.`;
 const headerIconContent = 'If you provide icon content, you should set your own `title` on the icon element.';
 const headerTitleContent = 'Titles should use "Headline Casing" and Nimble will automatically capitalize them for display in the header.';

packages/nimble-components/src/table/tests/table.spec.ts

@@ -215,6 +215,20 @@ describe('Table', () => {
             expect(pageObject.getHeaderTitle(0)).toBe(headerContents);
         });
 
+        it('sets title when header text is ellipsized in a span', async () => {
+            const headerContents = 'a very long value that should get ellipsized due to not fitting within the default header width';
+            await element.setData(simpleTableData);
+            await connect();
+            await waitForUpdatesAsync();
+            const span = document.createElement('span');
+            span.textContent = headerContents;
+            element.columns[0]!.textContent = '';
+            element.columns[0]!.appendChild(span);
+            pageObject.dispatchEventToHeader(0, new MouseEvent('mouseover'));
+            await waitForUpdatesAsync();
+            expect(pageObject.getHeaderTitle(0)).toBe(headerContents);
+        });
+
         it('does not set title when header text is fully visible', async () => {
             const headerContents = 'short value';
             await element.setData(simpleTableData);