forked from pkp/ui-library
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
pkp/pkp-lib#9744 Rename the "TableNext" component to "Table" and migr…
…ate native tables with class "pkpTable" (pkp#407) * pkp/pkp-lib#9744 Delete old Table component * pkp/pkp-lib#9744 Rename TableNext component to Table * pkp/pkp-lib#9744 Change how aria-labelledby and aria-describedby is assigned in the table * pkp/pkp-lib#9744 Update documentation for Table component * pkp/pkp-lib#9744 Migrate native tables that use class pkpTable to use the new table component * pkp/pkp-lib#9744 Update logic of noContent in TableBody component * pkp/pkp-lib#9744 Remove unused classes related to table component
- Loading branch information
1 parent
b978d50
commit 7cd7278
Showing
45 changed files
with
394 additions
and
1,801 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks'; | ||
|
|
||
| import * as TableStories from './Table.stories.js'; | ||
| import TableColumn from './TableColumn.vue'; | ||
| import TableCell from './TableCell.vue'; | ||
|
|
||
| <Meta of={TableStories} /> | ||
|
|
||
| # Table | ||
|
|
||
| ## Usage | ||
|
|
||
| Use the `Table` component to display tabular data when the user will sort, search, filter, or if interactive elements such as a button appear within the table. | ||
|
|
||
| ## Accessibility | ||
|
|
||
| ### General Guidelines | ||
|
|
||
| To ensure the `Table` component is accessible: | ||
|
|
||
| - The `aria-labelledby` and `aria-describedby` attributes are automatically linked when using the `label` and `description` slots, or they can be manually set with the `labelledBy` and `describedBy` props if using external labels and description for the table. | ||
| - If neither `labelledBy`/`describedBy` props nor `label`/`description` slots are provided, use the `ariaLabel` prop to provide accessible information about the table. | ||
| - One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader) to improve screen reader experience. It's a prop on TableCell, not on TableColumn as one would expect as it allows for significantly easier implementation. | ||
|
|
||
| ### Slots and ARIA Attributes | ||
|
|
||
| If the table has a label or description, ensure that: | ||
|
|
||
| - The `labelledBy` and `describedBy` props point to the correct element IDs, especially if the label or description is external to the component. | ||
| - If you're using the `label` or `description` slots, the component will automatically assign IDs and link them to the table via `aria-labelledby` and `aria-describedby`. | ||
|
|
||
| ## Slots | ||
|
|
||
| ### `label` | ||
|
|
||
| This slot is used to provide a custom label for the table. | ||
|
|
||
| ### `description` | ||
|
|
||
| Use this slot to provide additional information or context about the table's content. | ||
|
|
||
| ### `top-controls` | ||
|
|
||
| The `top-controls` slot is used to add buttons or other interactive elements that appear above the table. | ||
|
|
||
| ### `bottom-controls` | ||
|
|
||
| The `bottom-controls` slot is used for adding controls below the table, such as pagination controls, summary information, or other actionable elements. | ||
|
|
||
| ## Table Props | ||
|
|
||
| <ArgTypes /> | ||
|
|
||
| ## TableColumn Props | ||
|
|
||
| <ArgTypes of={TableColumn} /> | ||
|
|
||
| ## TableCell Props | ||
|
|
||
| <ArgTypes of={TableCell} /> | ||
|
|
||
| <Primary /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.