`
+
+
+ ${x => createTemplate(x.labelProviderTag)}
+
+ `),
+ argTypes: {
+ removeNamePrefix: {
+ table: {
+ disable: true
+ }
+ },
+ labelProviderTag: {
+ table: {
+ disable: true
+ }
+ },
+ labelTokens: {
+ table: {
+ disable: true
+ }
+ },
+ tableRef: {
+ table: {
+ disable: true
+ }
+ },
+ updateData: {
+ table: {
+ disable: true
+ }
+ }
+ },
+ args: {
+ removeNamePrefix: jsTokenName => jsTokenName,
+ tableRef: undefined,
+ updateData: x => {
+ void (async () => {
+ // Safari workaround: the table element instance is made at this point
+ // but doesn't seem to be upgraded to a custom element yet
+ await customElements.whenDefined('nimble-table');
+
+ const data = x.labelTokens.map(token => {
+ return {
+ tokenName: token[0],
+ htmlAttributeName: getAttributeName(
+ x.removeNamePrefix(token[0])
+ ),
+ jsPropertyName: getPropertyName(
+ x.removeNamePrefix(token[0])
+ ),
+ defaultValue: token[1].getValueFor(document.body)
+ };
+ });
+ await x.tableRef.setData(data);
+ })();
+ }
+ }
+};
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx b/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx
new file mode 100644
index 0000000000..26e742daa3
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx
@@ -0,0 +1,23 @@
+import { Canvas, Meta, Title } from '@storybook/blocks';
+import { coreLabelProvider } from '../../core/tests/label-provider-core.stories';
+import { tableLabelProvider } from '../../table/tests/label-provider-table.stories';
+
+
+Label Providers
+
+Most user-visible strings displayed by Nimble components are provided by the client application and are expected to be localized by the application if necessary. However, some strings are built into Nimble components and are provided only in English. An application can provide localized versions of these strings by using design tokens set on label provider elements.
+
+See the nimble-components readme and
+contributing docs for more information.
+
+## Core Label Provider
+
+Provides labels for all Nimble components besides the table component.
+
+
+
+## Table Label Provider
+
+Provides labels for the `nimble-table` and all associated table sub-components / column types.
+
+
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-user-stories-utils.ts b/packages/nimble-components/src/label-provider/base/tests/label-user-stories-utils.ts
new file mode 100644
index 0000000000..87ddd4726b
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/tests/label-user-stories-utils.ts
@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/html';
+import type { DesignToken } from '@microsoft/fast-foundation';
+
+export interface LabelUserArgs {
+ usedLabels: null;
+}
+
+export function addLabelUseMetadata(
+ metadata: Meta,
+ labelProviderTag: string,
+ ...labelTokens: DesignToken[]
+): void {
+ let tokenContent: string;
+ if (labelTokens.length === 0) {
+ tokenContent = '- (All tokens on this provider are used)';
+ } else {
+ tokenContent = labelTokens
+ .map(token => `- \`${token.name}\``)
+ .join('\n');
+ }
+ if (metadata.argTypes === undefined) {
+ metadata.argTypes = {};
+ }
+ metadata.argTypes.usedLabels = {
+ name: 'Localizable labels',
+ description: `Label Provider:\`${labelProviderTag}\`
+${tokenContent}
+
+See the "Tokens/Label Providers" docs page for more information.
+`,
+ control: { type: 'none' }
+ };
+}
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
new file mode 100644
index 0000000000..af5860a5d2
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -0,0 +1,47 @@
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { DesignTokensFor, LabelProviderBase } from '../base';
+import {
+ popupDismissLabel,
+ numericDecrementLabel,
+ numericIncrementLabel
+} from './label-tokens';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'nimble-label-provider-core': LabelProviderCore;
+ }
+}
+
+const supportedLabels = {
+ popupDismiss: popupDismissLabel,
+ numericDecrement: numericDecrementLabel,
+ numericIncrement: numericIncrementLabel
+} as const;
+
+/**
+ * Core label provider for Nimble
+ */
+export class LabelProviderCore
+ extends LabelProviderBase
+ implements DesignTokensFor {
+ @attr({ attribute: 'popup-dismiss' })
+ public popupDismiss: string | undefined;
+
+ @attr({ attribute: 'numeric-decrement' })
+ public numericDecrement: string | undefined;
+
+ @attr({ attribute: 'numeric-increment' })
+ public numericIncrement: string | undefined;
+
+ protected override readonly supportedLabels = supportedLabels;
+}
+
+const nimbleLabelProviderCore = LabelProviderCore.compose({
+ baseName: 'label-provider-core'
+});
+
+DesignSystem.getOrCreate()
+ .withPrefix('nimble')
+ .register(nimbleLabelProviderCore());
+export const labelProviderCoreTag = DesignSystem.tagFor(LabelProviderCore);
diff --git a/packages/nimble-components/src/label-provider/core/label-token-defaults.ts b/packages/nimble-components/src/label-provider/core/label-token-defaults.ts
new file mode 100644
index 0000000000..23a312e2f1
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/label-token-defaults.ts
@@ -0,0 +1,9 @@
+import type * as TokensNamespace from './label-tokens';
+
+type TokenName = keyof typeof TokensNamespace;
+
+export const coreLabelDefaults: { readonly [key in TokenName]: string } = {
+ popupDismissLabel: 'Close',
+ numericIncrementLabel: 'Increment',
+ numericDecrementLabel: 'Decrement'
+};
diff --git a/packages/nimble-components/src/label-provider/core/label-tokens.ts b/packages/nimble-components/src/label-provider/core/label-tokens.ts
new file mode 100644
index 0000000000..cddd101ce3
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/label-tokens.ts
@@ -0,0 +1,17 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import { coreLabelDefaults } from './label-token-defaults';
+
+export const popupDismissLabel = DesignToken.create({
+ name: 'popup-dismiss-label',
+ cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.popupDismissLabel);
+
+export const numericDecrementLabel = DesignToken.create({
+ name: 'numeric-decrement-label',
+ cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.numericDecrementLabel);
+
+export const numericIncrementLabel = DesignToken.create({
+ name: 'numeric-increment-label',
+ cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.numericIncrementLabel);
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
new file mode 100644
index 0000000000..5dca1cf8d0
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
@@ -0,0 +1,130 @@
+import { spinalCase } from '@microsoft/fast-web-utilities';
+import { html } from '@microsoft/fast-element';
+import * as labelTokensNamespace from '../label-tokens';
+import { LabelProviderCore, labelProviderCoreTag } from '..';
+import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
+import {
+ getAttributeName,
+ getPropertyName
+} from '../../base/tests/label-name-utils';
+import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
+import { Fixture, fixture } from '../../../utilities/tests/fixture';
+
+type DesignTokenPropertyName = keyof typeof labelTokensNamespace;
+const designTokenPropertyNames = Object.keys(
+ labelTokensNamespace
+) as DesignTokenPropertyName[];
+
+async function setup(): Promise> {
+ return fixture(html`
+ <${themeProviderTag}>
+ <${labelProviderCoreTag}>
+
+ `);
+}
+
+describe('Label Provider Core', () => {
+ let element: LabelProviderCore;
+ let themeProvider: ThemeProvider;
+ let connect: () => Promise;
+ let disconnect: () => Promise;
+
+ beforeEach(async () => {
+ ({ element: themeProvider, connect, disconnect } = await setup());
+ element = themeProvider.querySelector(labelProviderCoreTag)!;
+ await connect();
+ });
+
+ afterEach(async () => {
+ await disconnect();
+ });
+
+ it('can construct an element instance', () => {
+ expect(
+ document.createElement('nimble-label-provider-core')
+ ).toBeInstanceOf(LabelProviderCore);
+ });
+
+ describe('token JS key should match DesignToken.name', () => {
+ const tokenEntries = designTokenPropertyNames.map(
+ (name: DesignTokenPropertyName) => ({
+ name,
+ labelToken: labelTokensNamespace[name]
+ })
+ );
+
+ for (const tokenEntry of tokenEntries) {
+ const focused: DesignTokenPropertyName[] = [];
+ const disabled: DesignTokenPropertyName[] = [];
+ const specType = getSpecTypeByNamedList(
+ tokenEntry,
+ focused,
+ disabled
+ );
+ specType(`for token name ${tokenEntry.name}`, () => {
+ const convertedTokenValue = spinalCase(tokenEntry.name);
+ expect(tokenEntry.labelToken.name).toBe(convertedTokenValue);
+ });
+ }
+ });
+
+ describe('token JS key should match a LabelProvider property/attribute', () => {
+ const tokenEntries = designTokenPropertyNames.map(
+ (name: DesignTokenPropertyName) => ({
+ name,
+ labelToken: labelTokensNamespace[name]
+ })
+ );
+
+ for (const tokenEntry of tokenEntries) {
+ const focused: DesignTokenPropertyName[] = [];
+ const disabled: DesignTokenPropertyName[] = [];
+ const specType = getSpecTypeByNamedList(
+ tokenEntry,
+ focused,
+ disabled
+ );
+ // eslint-disable-next-line @typescript-eslint/no-loop-func
+ specType(`for token name ${tokenEntry.name}`, () => {
+ const expectedPropertyName = getPropertyName(tokenEntry.name);
+ const expectedAttributeName = getAttributeName(tokenEntry.name);
+ const attributeDefinition = element.$fastController.definition.attributes.find(
+ a => a.name === expectedPropertyName
+ );
+ expect(attributeDefinition).toBeDefined();
+ expect(expectedAttributeName).toEqual(
+ attributeDefinition!.attribute
+ );
+ });
+ }
+ });
+
+ describe('token value is updated after setting corresponding LabelProvider attribute', () => {
+ const tokenEntries = designTokenPropertyNames.map(
+ (name: DesignTokenPropertyName) => ({
+ name,
+ labelToken: labelTokensNamespace[name]
+ })
+ );
+
+ for (const tokenEntry of tokenEntries) {
+ const focused: DesignTokenPropertyName[] = [];
+ const disabled: DesignTokenPropertyName[] = [];
+ const specType = getSpecTypeByNamedList(
+ tokenEntry,
+ focused,
+ disabled
+ );
+ // eslint-disable-next-line @typescript-eslint/no-loop-func
+ specType(`for token name ${tokenEntry.name}`, () => {
+ const attributeName = getAttributeName(tokenEntry.name);
+ const updatedValue = `NewString-${tokenEntry.name}`;
+ element.setAttribute(attributeName, updatedValue);
+
+ expect(tokenEntry.labelToken.getValueFor(themeProvider)).toBe(
+ updatedValue
+ );
+ });
+ }
+ });
+});
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
new file mode 100644
index 0000000000..6eff6fb29a
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/html';
+import {
+ LabelProviderArgs,
+ labelProviderMetadata
+} from '../../base/tests/label-provider-stories-utils';
+import { labelProviderCoreTag } from '..';
+import * as labelTokensNamespace from '../label-tokens';
+
+const metadata = {
+ ...labelProviderMetadata,
+ title: 'Tokens/Label Providers'
+};
+
+export default metadata;
+
+export const coreLabelProvider: StoryObj = {
+ args: {
+ labelProviderTag: labelProviderCoreTag,
+ labelTokens: Object.entries(labelTokensNamespace)
+ }
+};
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
new file mode 100644
index 0000000000..1c3ada4972
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -0,0 +1,57 @@
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { DesignTokensFor, LabelProviderBase } from '../base';
+import {
+ tableCellActionMenuLabel,
+ tableColumnHeaderGroupedIndicatorLabel,
+ tableGroupCollapseLabel,
+ tableGroupExpandLabel,
+ tableGroupsCollapseAllLabel
+} from './label-tokens';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'nimble-label-provider-table': LabelProviderTable;
+ }
+}
+
+const supportedLabels = {
+ groupCollapse: tableGroupCollapseLabel,
+ groupExpand: tableGroupExpandLabel,
+ groupsCollapseAll: tableGroupsCollapseAllLabel,
+ cellActionMenu: tableCellActionMenuLabel,
+ columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
+} as const;
+
+/**
+ * Label provider for the Nimble table (and its sub-components and columns)
+ */
+export class LabelProviderTable
+ extends LabelProviderBase
+ implements DesignTokensFor {
+ @attr({ attribute: 'group-collapse' })
+ public groupCollapse: string | undefined;
+
+ @attr({ attribute: 'group-expand' })
+ public groupExpand: string | undefined;
+
+ @attr({ attribute: 'groups-collapse-all' })
+ public groupsCollapseAll: string | undefined;
+
+ @attr({ attribute: 'cell-action-menu' })
+ public cellActionMenu: string | undefined;
+
+ @attr({ attribute: 'column-header-grouped-indicator' })
+ public columnHeaderGroupedIndicator: string | undefined;
+
+ protected override readonly supportedLabels = supportedLabels;
+}
+
+const nimbleLabelProviderTable = LabelProviderTable.compose({
+ baseName: 'label-provider-table'
+});
+
+DesignSystem.getOrCreate()
+ .withPrefix('nimble')
+ .register(nimbleLabelProviderTable());
+export const labelProviderTableTag = DesignSystem.tagFor(LabelProviderTable);
diff --git a/packages/nimble-components/src/label-provider/table/label-token-defaults.ts b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts
new file mode 100644
index 0000000000..b2a31d3de2
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts
@@ -0,0 +1,11 @@
+import type * as TokensNamespace from './label-tokens';
+
+type TokenName = keyof typeof TokensNamespace;
+
+export const tableLabelDefaults: { readonly [key in TokenName]: string } = {
+ tableGroupCollapseLabel: 'Collapse group',
+ tableGroupExpandLabel: 'Expand group',
+ tableGroupsCollapseAllLabel: 'Collapse all groups',
+ tableCellActionMenuLabel: 'Options',
+ tableColumnHeaderGroupedIndicatorLabel: 'Grouped'
+};
diff --git a/packages/nimble-components/src/label-provider/table/label-tokens.ts b/packages/nimble-components/src/label-provider/table/label-tokens.ts
new file mode 100644
index 0000000000..5d8a41394a
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/label-tokens.ts
@@ -0,0 +1,27 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import { tableLabelDefaults } from './label-token-defaults';
+
+export const tableGroupCollapseLabel = DesignToken.create({
+ name: 'table-group-collapse-label',
+ cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableGroupCollapseLabel);
+
+export const tableGroupExpandLabel = DesignToken.create({
+ name: 'table-group-expand-label',
+ cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableGroupExpandLabel);
+
+export const tableGroupsCollapseAllLabel = DesignToken.create({
+ name: 'table-groups-collapse-all-label',
+ cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableGroupsCollapseAllLabel);
+
+export const tableCellActionMenuLabel = DesignToken.create({
+ name: 'table-cell-action-menu-label',
+ cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableCellActionMenuLabel);
+
+export const tableColumnHeaderGroupedIndicatorLabel = DesignToken.create({
+ name: 'table-column-header-grouped-indicator-label',
+ cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel);
diff --git a/packages/nimble-components/src/label-provider/table/name-utils.ts b/packages/nimble-components/src/label-provider/table/name-utils.ts
new file mode 100644
index 0000000000..27fa0784ca
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/name-utils.ts
@@ -0,0 +1,12 @@
+/**
+ * Removes the table prefix and camelCases the input token name.
+ * (The design token name has the table prefix, but the properties on the LabelProviderTable do not, as they're already
+ * scoped to the table only)
+ */
+export function removeTablePrefixAndCamelCase(jsTokenName: string): string {
+ // Example: 'tableGroupExpandLabel' => 'groupExpandLabel'
+ return jsTokenName.replace(
+ /^table(\w)(\w+)/,
+ (_match: string, firstChar: string, restOfString: string) => `${firstChar.toLowerCase()}${restOfString}`
+ );
+}
diff --git a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
new file mode 100644
index 0000000000..1659d7e4db
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
@@ -0,0 +1,137 @@
+import { spinalCase } from '@microsoft/fast-web-utilities';
+import { html } from '@microsoft/fast-element';
+import * as labelTokensNamespace from '../label-tokens';
+import { LabelProviderTable, labelProviderTableTag } from '..';
+import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
+import {
+ getAttributeName,
+ getPropertyName
+} from '../../base/tests/label-name-utils';
+import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
+import { Fixture, fixture } from '../../../utilities/tests/fixture';
+import { removeTablePrefixAndCamelCase } from '../name-utils';
+
+type DesignTokenPropertyName = keyof typeof labelTokensNamespace;
+const designTokenPropertyNames = Object.keys(
+ labelTokensNamespace
+) as DesignTokenPropertyName[];
+
+async function setup(): Promise> {
+ return fixture(html`
+ <${themeProviderTag}>
+ <${labelProviderTableTag}>
+
+ `);
+}
+
+describe('Label Provider Table', () => {
+ let element: LabelProviderTable;
+ let themeProvider: ThemeProvider;
+ let connect: () => Promise;
+ let disconnect: () => Promise;
+
+ beforeEach(async () => {
+ ({ element: themeProvider, connect, disconnect } = await setup());
+ element = themeProvider.querySelector(labelProviderTableTag)!;
+ await connect();
+ });
+
+ afterEach(async () => {
+ await disconnect();
+ });
+
+ it('can construct an element instance', () => {
+ expect(
+ document.createElement('nimble-label-provider-table')
+ ).toBeInstanceOf(LabelProviderTable);
+ });
+
+ describe('token JS key should match DesignToken.name', () => {
+ const tokenEntries = designTokenPropertyNames.map(
+ (name: DesignTokenPropertyName) => ({
+ name,
+ labelToken: labelTokensNamespace[name]
+ })
+ );
+
+ for (const tokenEntry of tokenEntries) {
+ const focused: DesignTokenPropertyName[] = [];
+ const disabled: DesignTokenPropertyName[] = [];
+ const specType = getSpecTypeByNamedList(
+ tokenEntry,
+ focused,
+ disabled
+ );
+ specType(`for token name ${tokenEntry.name}`, () => {
+ const convertedTokenValue = spinalCase(tokenEntry.name);
+ expect(tokenEntry.labelToken.name).toBe(convertedTokenValue);
+ });
+ }
+ });
+
+ describe('token JS key should match a LabelProvider property/attribute', () => {
+ const tokenEntries = designTokenPropertyNames.map(
+ (name: DesignTokenPropertyName) => ({
+ name,
+ labelToken: labelTokensNamespace[name]
+ })
+ );
+
+ for (const tokenEntry of tokenEntries) {
+ const focused: DesignTokenPropertyName[] = [];
+ const disabled: DesignTokenPropertyName[] = [];
+ const specType = getSpecTypeByNamedList(
+ tokenEntry,
+ focused,
+ disabled
+ );
+ // eslint-disable-next-line @typescript-eslint/no-loop-func
+ specType(`for token name ${tokenEntry.name}`, () => {
+ const tokenName = removeTablePrefixAndCamelCase(
+ tokenEntry.name
+ );
+ const expectedPropertyName = getPropertyName(tokenName);
+ const expectedAttributeName = getAttributeName(tokenName);
+ const attributeDefinition = element.$fastController.definition.attributes.find(
+ a => a.name === expectedPropertyName
+ );
+ expect(attributeDefinition).toBeDefined();
+ expect(expectedAttributeName).toEqual(
+ attributeDefinition!.attribute
+ );
+ });
+ }
+ });
+
+ describe('token value is updated after setting corresponding LabelProvider attribute', () => {
+ const tokenEntries = designTokenPropertyNames.map(
+ (name: DesignTokenPropertyName) => ({
+ name,
+ labelToken: labelTokensNamespace[name]
+ })
+ );
+
+ for (const tokenEntry of tokenEntries) {
+ const focused: DesignTokenPropertyName[] = [];
+ const disabled: DesignTokenPropertyName[] = [];
+ const specType = getSpecTypeByNamedList(
+ tokenEntry,
+ focused,
+ disabled
+ );
+ // eslint-disable-next-line @typescript-eslint/no-loop-func
+ specType(`for token name ${tokenEntry.name}`, () => {
+ const tokenName = removeTablePrefixAndCamelCase(
+ tokenEntry.name
+ );
+ const attributeName = getAttributeName(tokenName);
+ const updatedValue = `NewString-${tokenName}`;
+ element.setAttribute(attributeName, updatedValue);
+
+ expect(tokenEntry.labelToken.getValueFor(themeProvider)).toBe(
+ updatedValue
+ );
+ });
+ }
+ });
+});
diff --git a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
new file mode 100644
index 0000000000..4904d06b56
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/html';
+import {
+ LabelProviderArgs,
+ labelProviderMetadata
+} from '../../base/tests/label-provider-stories-utils';
+import { labelProviderTableTag } from '..';
+import { removeTablePrefixAndCamelCase } from '../name-utils';
+import * as labelTokensNamespace from '../label-tokens';
+
+const metadata = {
+ ...labelProviderMetadata,
+ title: 'Tokens/Label Providers'
+};
+
+export default metadata;
+
+export const tableLabelProvider: StoryObj = {
+ args: {
+ labelProviderTag: labelProviderTableTag,
+ labelTokens: Object.entries(labelTokensNamespace),
+ removeNamePrefix: removeTablePrefixAndCamelCase
+ }
+};
diff --git a/packages/nimble-components/src/number-field/index.ts b/packages/nimble-components/src/number-field/index.ts
index 9aecd6daae..9fdf5ea622 100644
--- a/packages/nimble-components/src/number-field/index.ts
+++ b/packages/nimble-components/src/number-field/index.ts
@@ -13,6 +13,10 @@ import { buttonTag } from '../button';
import { iconMinusWideTag } from '../icons/minus-wide';
import { iconAddTag } from '../icons/add';
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+import {
+ numericDecrementLabel,
+ numericIncrementLabel
+} from '../label-provider/core/label-tokens';
declare global {
interface HTMLElementTagNameMap {
@@ -64,28 +68,28 @@ const nimbleNumberField = NumberField.compose({
shadowOptions: {
delegatesFocus: true
},
- stepDownGlyph: html`
+ stepDownGlyph: html`
<${buttonTag}
class="step-up-down-button"
appearance="ghost"
content-hidden
tabindex="-1"
>
- "Decrement"
+ ${x => numericDecrementLabel.getValueFor(x)}
<${iconMinusWideTag}
slot="start"
>
`,
- stepUpGlyph: html`
+ stepUpGlyph: html`
<${buttonTag}
class="step-up-down-button"
appearance="ghost"
content-hidden
tabindex="-1"
>
- "Increment"
+ ${x => numericIncrementLabel.getValueFor(x)}
<${iconAddTag}
slot="start">
diff --git a/packages/nimble-components/src/number-field/tests/number-field.spec.ts b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
index a8d5d981c3..f4794170df 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.spec.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
@@ -1,4 +1,21 @@
+import { html } from '@microsoft/fast-element';
import { NumberField, numberFieldTag } from '..';
+import {
+ LabelProviderCore,
+ labelProviderCoreTag
+} from '../../label-provider/core';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { ThemeProvider, themeProviderTag } from '../../theme-provider';
+import { fixture, type Fixture } from '../../utilities/tests/fixture';
+
+async function setupWithLabelProvider(): Promise> {
+ return fixture(html`
+ <${themeProviderTag}>
+ <${labelProviderCoreTag}>
+ <${numberFieldTag}>
+
+ `);
+}
describe('NumberField', () => {
it('should export its tag', () => {
@@ -11,3 +28,41 @@ describe('NumberField', () => {
);
});
});
+
+describe('NumberField with LabelProviderCore', () => {
+ let element: NumberField;
+ let labelProvider: LabelProviderCore;
+ let connect: () => Promise;
+ let disconnect: () => Promise;
+
+ beforeEach(async () => {
+ let themeProvider: ThemeProvider;
+ ({
+ element: themeProvider,
+ connect,
+ disconnect
+ } = await setupWithLabelProvider());
+ await connect();
+ element = themeProvider.querySelector(numberFieldTag)!;
+ labelProvider = themeProvider.querySelector(labelProviderCoreTag)!;
+ });
+
+ afterEach(async () => {
+ await disconnect();
+ });
+
+ it('uses CoreLabelProvider numericIncrement/numericDecrement labels for the inc/dec buttons', async () => {
+ labelProvider.numericIncrement = 'Customized Increment';
+ labelProvider.numericDecrement = 'Customized Decrement';
+ await waitForUpdatesAsync();
+
+ const actualIncrementText = element
+ .shadowRoot!.querySelector('slot[name="step-up-glyph"]')!
+ .textContent!.trim();
+ expect(actualIncrementText).toEqual('Customized Increment');
+ const actualDecrementText = element
+ .shadowRoot!.querySelector('slot[name="step-down-glyph"]')!
+ .textContent!.trim();
+ expect(actualDecrementText).toEqual('Customized Decrement');
+ });
+});
diff --git a/packages/nimble-components/src/number-field/tests/number-field.stories.ts b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
index 9fbfe9c48e..d5d2fc5295 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
@@ -4,8 +4,17 @@ import type { Meta, StoryObj } from '@storybook/html';
import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
import { NumberFieldAppearance } from '../types';
import { numberFieldTag } from '..';
+import { labelProviderCoreTag } from '../../label-provider/core';
+import {
+ addLabelUseMetadata,
+ type LabelUserArgs
+} from '../../label-provider/base/tests/label-user-stories-utils';
+import {
+ numericDecrementLabel,
+ numericIncrementLabel
+} from '../../label-provider/core/label-tokens';
-interface NumberFieldArgs {
+interface NumberFieldArgs extends LabelUserArgs {
label: string;
value: number;
step: number;
@@ -71,6 +80,12 @@ const metadata: Meta = {
errorText: 'Value is invalid'
}
};
+addLabelUseMetadata(
+ metadata,
+ labelProviderCoreTag,
+ numericDecrementLabel,
+ numericIncrementLabel
+);
export default metadata;
diff --git a/packages/nimble-components/src/table/components/cell/template.ts b/packages/nimble-components/src/table/components/cell/template.ts
index 3d139147a9..2d835667ac 100644
--- a/packages/nimble-components/src/table/components/cell/template.ts
+++ b/packages/nimble-components/src/table/components/cell/template.ts
@@ -6,6 +6,7 @@ import {
ButtonAppearance,
MenuButtonToggleEventDetail
} from '../../../menu-button/types';
+import { tableCellActionMenuLabel } from '../../../label-provider/table/label-tokens';
// prettier-ignore
export const template = html`
@@ -21,7 +22,7 @@ export const template = html`
class="action-menu"
>
<${iconThreeDotsLineTag} slot="start">
- ${x => x.actionMenuLabel}
+ ${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}
`)}
diff --git a/packages/nimble-components/src/table/components/group-row/template.ts b/packages/nimble-components/src/table/components/group-row/template.ts
index 4f80284dcc..01c23cea95 100644
--- a/packages/nimble-components/src/table/components/group-row/template.ts
+++ b/packages/nimble-components/src/table/components/group-row/template.ts
@@ -5,6 +5,10 @@ import { buttonTag } from '../../../button';
import { ButtonAppearance } from '../../../button/types';
import { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';
import { checkboxTag } from '../../../checkbox';
+import {
+ tableGroupCollapseLabel,
+ tableGroupExpandLabel
+} from '../../../label-provider/table/label-tokens';
// prettier-ignore
export const template = html`
@@ -33,6 +37,7 @@ export const template = html`
tabindex="-1"
>
<${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}">
+ ${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}
diff --git a/packages/nimble-components/src/table/components/header/template.ts b/packages/nimble-components/src/table/components/header/template.ts
index f7a1c0afc0..cf0f48dcfb 100644
--- a/packages/nimble-components/src/table/components/header/template.ts
+++ b/packages/nimble-components/src/table/components/header/template.ts
@@ -4,6 +4,7 @@ import { iconArrowDownTag } from '../../../icons/arrow-down';
import { iconArrowUpTag } from '../../../icons/arrow-up';
import { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';
import { TableColumnSortDirection } from '../../types';
+import { tableColumnHeaderGroupedIndicatorLabel } from '../../../label-provider/table/label-tokens';
// prettier-ignore
export const template = html`
@@ -13,15 +14,15 @@ export const template = html`
@mousedown="${(_x, c) => !((c.event as MouseEvent).detail > 1)}"
>
-
+ ${'' /* Omit title attribute for sort indicators because aria-sort is set on the 1st sorted column */}
${when(x => x.sortDirection === TableColumnSortDirection.ascending, html`
<${iconArrowUpTag} class="sort-indicator" aria-hidden="true">
`)}
${when(x => x.sortDirection === TableColumnSortDirection.descending, html`
<${iconArrowDownTag} class="sort-indicator" aria-hidden="true">
`)}
- ${when(x => x.isGrouped, html`
- <${iconTwoSquaresInBracketsTag} class="grouped-indicator">
+ ${when(x => x.isGrouped, html`
+ <${iconTwoSquaresInBracketsTag} class="grouped-indicator" title="${x => tableColumnHeaderGroupedIndicatorLabel.getValueFor(x)}">
`)}
`;
diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts
index 77368bef7c..dc9df1b544 100644
--- a/packages/nimble-components/src/table/template.ts
+++ b/packages/nimble-components/src/table/template.ts
@@ -23,6 +23,7 @@ import { buttonTag } from '../button';
import { ButtonAppearance } from '../button/types';
import { iconTriangleTwoLinesHorizontalTag } from '../icons/triangle-two-lines-horizontal';
import { checkboxTag } from '../checkbox';
+import { tableGroupsCollapseAllLabel } from '../label-provider/table/label-tokens';
// prettier-ignore
export const template = html`
@@ -56,9 +57,11 @@ export const template = html`
class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
content-hidden
appearance="${ButtonAppearance.ghost}"
+ title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
@click="${x => x.handleCollapseAllGroupRows()}"
>
<${iconTriangleTwoLinesHorizontalTag} slot="start">
+ ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
diff --git a/packages/nimble-components/src/table/tests/table-labels.spec.ts b/packages/nimble-components/src/table/tests/table-labels.spec.ts
new file mode 100644
index 0000000000..89d0d3cd44
--- /dev/null
+++ b/packages/nimble-components/src/table/tests/table-labels.spec.ts
@@ -0,0 +1,128 @@
+import { html } from '@microsoft/fast-element';
+import { tableTag, type Table } from '..';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { type Fixture, fixture } from '../../utilities/tests/fixture';
+import type { TableRecord } from '../types';
+import { TablePageObject } from '../testing/table.pageobject';
+import { themeProviderTag, type ThemeProvider } from '../../theme-provider';
+import {
+ LabelProviderTable,
+ labelProviderTableTag
+} from '../../label-provider/table';
+import type { TableColumnText } from '../../table-column/text';
+import { tableGroupRowTag } from '../components/group-row';
+
+interface SimpleTableRecord extends TableRecord {
+ stringData: string;
+ moreStringData: string;
+}
+
+const simpleTableData = [
+ {
+ stringData: 'string 1',
+ moreStringData: 'foo'
+ },
+ {
+ stringData: 'hello world',
+ moreStringData: 'foo'
+ },
+ {
+ stringData: 'another string',
+ moreStringData: 'foo'
+ }
+] as const;
+
+// prettier-ignore
+async function setup(): Promise> {
+ return fixture(
+ html`
+ <${themeProviderTag}>
+ <${labelProviderTableTag}>
+
+ stringData
+ moreStringData
+
+ <${themeProviderTag}>`
+ );
+}
+
+describe('Table with LabelProviderTable', () => {
+ let element: Table;
+ let labelProvider: LabelProviderTable;
+ let connect: () => Promise;
+ let disconnect: () => Promise;
+ let pageObject: TablePageObject;
+ let column1: TableColumnText;
+
+ beforeEach(async () => {
+ let themeProvider: ThemeProvider;
+ ({ element: themeProvider, connect, disconnect } = await setup());
+ element = themeProvider.querySelector(tableTag)!;
+ labelProvider = themeProvider.querySelector(labelProviderTableTag)!;
+
+ pageObject = new TablePageObject(element);
+ column1 = element.querySelector('#first-column')!;
+ });
+
+ afterEach(async () => {
+ await disconnect();
+ });
+
+ it('uses correct labels when a column is grouped (groupCollapse/groupExpand/groupsCollapseAll/columnHeaderGroupedIndicator)', async () => {
+ await element.setData(simpleTableData);
+ await connect();
+
+ labelProvider.groupsCollapseAll = 'Customized Collapse All';
+ labelProvider.groupExpand = 'Customized Expand';
+ labelProvider.groupCollapse = 'Customized Collapse';
+ labelProvider.columnHeaderGroupedIndicator = 'Customized Grouped';
+ column1.groupIndex = 0;
+ await waitForUpdatesAsync();
+
+ const actualGroupsCollapseAllLabel = element
+ .shadowRoot!.querySelector('.collapse-all-button')!
+ .textContent!.trim();
+ expect(actualGroupsCollapseAllLabel).toBe('Customized Collapse All');
+ const actualColumnHeaderGroupedIndicatorLabel = pageObject
+ .getHeaderElement(0)
+ .shadowRoot!.querySelector('.grouped-indicator')!
+ .getAttribute('title');
+ expect(actualColumnHeaderGroupedIndicatorLabel).toBe(
+ 'Customized Grouped'
+ );
+ const firstGroupRow: HTMLElement = element.shadowRoot!.querySelector(tableGroupRowTag)!;
+ const actualGroupCollapseLabel = firstGroupRow
+ .shadowRoot!.querySelector('.expand-collapse-button')!
+ .textContent!.trim();
+ expect(actualGroupCollapseLabel).toBe('Customized Collapse');
+
+ firstGroupRow.click();
+ await waitForUpdatesAsync();
+
+ const actualGroupExpandLabel = firstGroupRow
+ .shadowRoot!.querySelector('.expand-collapse-button')!
+ .textContent!.trim();
+ expect(actualGroupExpandLabel).toBe('Customized Expand');
+ });
+
+ it('uses correct labels when a column has an action menu (cellActionMenu)', async () => {
+ const slot = 'my-action-menu';
+ column1.actionMenuSlot = slot;
+ const menu = document.createElement('nimble-menu');
+ const menuItem1 = document.createElement('nimble-menu-item');
+ menuItem1.textContent = 'menu item 1';
+ menu.appendChild(menuItem1);
+ menu.slot = slot;
+ element.appendChild(menu);
+ await element.setData(simpleTableData);
+ await connect();
+
+ labelProvider.cellActionMenu = 'Customized Cell Options';
+ await waitForUpdatesAsync();
+
+ const actualCellActionMenuLabel = pageObject
+ .getCellActionMenu(0, 0)!
+ .textContent!.trim();
+ expect(actualCellActionMenuLabel).toBe('Customized Cell Options');
+ });
+});
diff --git a/packages/nimble-components/src/table/tests/table.stories.ts b/packages/nimble-components/src/table/tests/table.stories.ts
index bec06acd6c..58d9189cbf 100644
--- a/packages/nimble-components/src/table/tests/table.stories.ts
+++ b/packages/nimble-components/src/table/tests/table.stories.ts
@@ -12,8 +12,13 @@ import { iconUserTag } from '../../icons/user';
import { menuTag } from '../../menu';
import { menuItemTag } from '../../menu-item';
import { tableColumnTextTag } from '../../table-column/text';
+import {
+ addLabelUseMetadata,
+ type LabelUserArgs
+} from '../../label-provider/base/tests/label-user-stories-utils';
+import { labelProviderTableTag } from '../../label-provider/table';
-interface TableArgs {
+interface TableArgs extends LabelUserArgs {
data: ExampleDataType;
selectionMode: keyof typeof TableRowSelectionMode;
idFieldName: undefined;
@@ -269,6 +274,7 @@ const metadata: Meta = {
}
}
};
+addLabelUseMetadata(metadata, labelProviderTableTag);
export default metadata;