.
{columnOperationBehavior}
-
-
+
+
## Usage
diff --git a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.react.tsx b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.react.tsx
new file mode 100644
index 0000000000..e49be17b85
--- /dev/null
+++ b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.react.tsx
@@ -0,0 +1,4 @@
+import { TableColumnMapping } from '@ni/nimble-components/dist/esm/table-column/mapping';
+import { wrap } from '../../../utilities/react-wrapper';
+
+export const NimbleTableColumnMapping = wrap(TableColumnMapping);
diff --git a/packages/storybook/src/nimble/table-column/icon/table-column-icon.stories.ts b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
similarity index 85%
rename from packages/storybook/src/nimble/table-column/icon/table-column-icon.stories.ts
rename to packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
index 3a4a90d816..b294bd5d50 100644
--- a/packages/storybook/src/nimble/table-column/icon/table-column-icon.stories.ts
+++ b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts
@@ -9,8 +9,8 @@ import { mappingIconTag } from '@ni/nimble-components/dist/esm/mapping/icon';
import { mappingSpinnerTag } from '@ni/nimble-components/dist/esm/mapping/spinner';
import { sharedMappingValidityDescription } from '@ni/nimble-components/dist/esm/table-column/enum-base/tests/shared-storybook-docs';
import { mappingTextTag } from '@ni/nimble-components/dist/esm/mapping/text';
-import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/icon/types';
-import { tableColumnIconTag } from '@ni/nimble-components/dist/esm/table-column/icon';
+import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/mapping/types';
+import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping';
import {
SharedTableArgs,
sharedTableArgTypes,
@@ -57,14 +57,14 @@ const simpleData = [
}
] as const;
-const metadata: Meta = {
- title: 'Components/Table Column: Icon',
+const metadata: Meta = {
+ title: 'Components/Table Column: Mapping',
parameters: {}
};
export default metadata;
-interface IconColumnTableArgs extends SharedTableArgs {
+interface MappingColumnTableArgs extends SharedTableArgs {
fieldName: string;
keyType: string;
widthMode: keyof typeof TableColumnMappingWidthMode;
@@ -78,12 +78,12 @@ to \`default\`, the column will be resizable and be sized based on its fractiona
should not be the right-most column in the table.`;
const validityDescription = `${sharedMappingValidityDescription}
-- \`invalidIconName\`: \`true\` when a mapping's \`icon\` value is not the tag name of a valid, loaded Nimble icon (e.g. \`nimble-icon-check\`)
+- \`invalidIconName\`: \`true\` when an icon mapping's \`icon\` value is not the tag name of a valid, loaded Nimble icon (e.g. \`nimble-icon-check\`)
`;
-export const iconColumn: StoryObj = {
+export const mappingColumn: StoryObj = {
// prettier-ignore
- render: createUserSelectedThemeStory(html`
+ render: createUserSelectedThemeStory(html`
<${tableTag}
${ref('tableRef')}
data-unused="${x => x.updateData(x)}"
@@ -92,24 +92,24 @@ export const iconColumn: StoryObj = {
<${tableColumnTextTag} field-name="firstName" >
Name
- <${tableColumnIconTag} field-name="status" group-index="0">
+ <${tableColumnMappingTag} field-name="status" group-index="0">
Status
<${mappingIconTag} key="fail" icon="${iconXmarkTag}" severity="error" text="Not a Simpson">
<${mappingIconTag} key="success" icon="${iconCheckLargeTag}" severity="success" text="Is a Simpson">
<${mappingSpinnerTag} key="calculating" text="Calculating" text-hidden>
<${mappingIconTag} key="unknown" text="Unknown" text-hidden>
-
- <${tableColumnIconTag} field-name="isChild" key-type="boolean" width-mode="${x => TableColumnMappingWidthMode[x.widthMode]}">
+
+ <${tableColumnMappingTag} field-name="isChild" key-type="boolean" width-mode="${x => TableColumnMappingWidthMode[x.widthMode]}">
<${iconChartDiagramChildFocusTag} title="Is child">
<${mappingIconTag} key="false" icon="${iconXmarkTag}" severity="error" text="Not a child" text-hidden>
<${mappingIconTag} key="true" icon="${iconCheckLargeTag}" severity="success" text="Is a child" text-hidden>
-
- <${tableColumnIconTag} field-name="gender" key-type="string">
+
+ <${tableColumnMappingTag} field-name="gender" key-type="string">
Gender
<${mappingTextTag} key="male" text="Male">
<${mappingTextTag} key="female" text="Female">
-
+
`),
argTypes: {
diff --git a/packages/storybook/src/nimble/tests/component-status.stories.ts b/packages/storybook/src/nimble/tests/component-status.stories.ts
index 890947e218..45638adcf0 100644
--- a/packages/storybook/src/nimble/tests/component-status.stories.ts
+++ b/packages/storybook/src/nimble/tests/component-status.stories.ts
@@ -2,7 +2,7 @@ import { html, ref } from '@microsoft/fast-element';
import type { Meta, StoryObj } from '@storybook/html';
import { Table, tableTag } from '@ni/nimble-components/dist/esm/table';
import { tableColumnAnchorTag } from '@ni/nimble-components/dist/esm/table-column/anchor';
-import { tableColumnIconTag } from '@ni/nimble-components/dist/esm/table-column/icon';
+import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping';
import { mappingIconTag } from '@ni/nimble-components/dist/esm/mapping/icon';
import { iconCheckTag } from '@ni/nimble-components/dist/esm/icons/check';
import { iconTriangleTag } from '@ni/nimble-components/dist/esm/icons/triangle';
@@ -581,30 +581,30 @@ const metadata: Meta = {
>
Issue
- <${tableColumnIconTag}
+ <${tableColumnMappingTag}
column-id="component-status-column"
field-name="componentStatus"
?column-hidden="${x => x.status === 'future'}"
>
Web Component
${iconMappings}
-
- <${tableColumnIconTag}
+
+ <${tableColumnMappingTag}
column-id="angular-status-column"
field-name="angularStatus"
?column-hidden="${x => x.status === 'future'}"
>
Angular
${iconMappings}
-
- <${tableColumnIconTag}
+
+ <${tableColumnMappingTag}
column-id="blazor-status-column"
field-name="blazorStatus"
?column-hidden="${x => x.status === 'future'}"
>
Blazor
${iconMappings}
-
+
`),
diff --git a/specs/labels-and-localization/README.md b/specs/labels-and-localization/README.md
index d2cc0442dd..04dd93a578 100644
--- a/specs/labels-and-localization/README.md
+++ b/specs/labels-and-localization/README.md
@@ -27,7 +27,7 @@ The Nimble table will have many labels, which are summarized here:
- Sort indicators (ascending/descending icon) in table column headers: No accessible label specifically for these icons is currently planned. The primary sorted column is already indicated with `aria-sort="ascending"` or `aria-sort="descending"`. The [ARIA APG's sortable table example](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/) follows similar logic, and says sort labels are not added to each column header button "to prevent repetitious verbosity that could interfere with understanding of the column titles".
- Grouped indicator in table column headers: Currently no ARIA attributes indicate a grouped column, so we'll probably want to add a label for this (probably via a `title` / tooltip)
- Client-provided icon elements in the table (e.g. icons as the primary content of table headers): Follows the same guidance in [accessibility.md](../../packages/nimble-components/docs/accessibility.md), i.e. the icons should provide accessible text via the `title` attribute (and clients will handle localizing it themselves).
-- (Mapping/ Icon Columns: As currently specced, `nimble-table-column-icon`'s `nimble-mapping-icon` has a `label` attribute which will become the icon `title`)
+- Mapping Columns: `nimble-table-column-mapping`'s mapping elements have `text` attributes which will become the icon or spinner `title` when necessary
## Localization