Rename composable examples

packages/react-docs/patternfly-a11y.config.js

@@ -66,8 +66,8 @@ module.exports = {
       viewportDimensions: { width: 400, height: 900 }
     },
     {
-      url: '/components/table/react-legacy',
-      label: 'legacy table content on mobile screen',
+      url: '/components/table/react-deprecated',
+      label: 'deprecated table content on mobile screen',
       viewportDimensions: { width: 400, height: 900 }
     },
     ...urls

packages/react-table/src/components/TableComposable/examples/ComposableTable.md → packages/react-table/src/components/TableComposable/examples/Table.md

@@ -36,7 +36,7 @@ propComponents:
 ouia: true
 ---
 
-# Table Composable
+# Table
 
 Note: Table lives in its own package at [@patternfly/react-table](https://www.npmjs.com/package/@patternfly/react-table)!
 
@@ -58,35 +58,33 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
-## TableComposable examples
+## Table examples
 
-The `TableComposable` component differs from the regular `Table` component, in that it allows you to compose the table by nesting the relevant `Thead`, `Tbody`, `Tr`, `Th` and `Td` components within it. For a less declarative and more implicit approach, use the `Table` component instead.
+This `TableComposable` component differs from the deprecated `Table` component, in that it allows you to compose the table by nesting the relevant `Thead`, `Tbody`, `Tr`, `Th` and `Td` components within it. For a less declarative and more implicit approach, use the `Table` component instead.
 
 Some general notes:
 
 - Provide `dataLabel` prop to the `Td` components so that in mobile view the cell has a label to provide context.
 - If you want a table caption, simply place a `<Caption>My caption</Caption>` as the first child within a `TableComposable`.
 - You can set the `TableComposable` variant to `compact`
 
-### Composable: Basic
-
-```ts file="ComposableTableBasic.tsx"
+### Basic
 
+```ts file="TableBasic.tsx"
 ```
 
-### Composable: Custom row wrapper, header tooltips & popovers
+### Custom row wrapper, header tooltips & popovers
 
 - If you add the `noWrap` prop to `Thead`, it won't wrap it if there is no space
 - You can add the `textCenter` prop to `Th` or `Td` to center the contents
 - You can pass `className`, `style` and more to `Tr`
 
 To add a header tooltip or popover to `Th`, pass a `ThInfoType` object via the `info` prop.
 
-```ts file="ComposableTableMisc.tsx"
-
+```ts file="TableMisc.tsx"
 ```
 
-### Composable: Sortable & wrapping headers
+### Sortable & wrapping headers
 
 To make a column sortable, pass a `ThSortType` object via the `sort` prop on a column's `Th`.
 
@@ -104,19 +102,17 @@ type OnSort = (
 
 The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. To see a full page demo of a responsive sortable table, utilizing a toolbar item to control sorting for small screens, view the `Sortable - responsive` demo in the `React demos` tab.
 
-```ts file="ComposableTableSortable.tsx"
-
+```ts file="TableSortable.tsx"
 ```
 
-### Composable: Sortable - custom control
+### Sortable - custom control
 
 Sorting a table may also be controlled manually with a toolbar control. To see a full page demo of a responsive table, view the `Sortable - responsive` demo in the `React demos` tab.
 
-```ts file="ComposableTableSortableCustom.tsx"
-
+```ts file="TableSortableCustom.tsx"
 ```
 
-### Composable: Selectable with checkbox
+### Selectable with checkbox
 
 To make a row selectable, the table needs a selection column.
 The selection column is just another column, but with selection specific props added.
@@ -143,47 +139,42 @@ type OnSelect = (
 **Note:** This example has a `shift + select` feature where holding shift while
 checking checkboxes will check intermediate rows' checkboxes.
 
-```ts file="ComposableTableSelectable.tsx"
-
+```ts file="TableSelectable.tsx"
 ```
 
-### Composable: Selectable radio input
+### Selectable radio input
 
 Similarly to the selectable example above, the radio buttons use the first column. The first header cell is empty, and each body row's first cell has radio button props.
 
-```ts file="ComposableTableSelectableRadio.tsx"
-
+```ts file="TableSelectableRadio.tsx"
 ```
 
-### Composable: Row click handler, hoverable & selected rows
+### Row click handler, hoverable & selected rows
 
 This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view.
 
-```ts file="ComposableTableHoverable.tsx"
-
+```ts file="TableHoverable.tsx"
 ```
 
-### Composable: Actions
+### Actions
 
 This example demonstrates adding actions as the last column. The header's last cell is an empty cell, and each body row's last cell is an action cell.
 
 To make a cell an action cell, render an `ActionsColumn` component inside a row's last `Td` and pass an array of `IAction` objects via the `items` prop of `ActionsColumn`.
 
 If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `ActionsColumn` can be passed a `menuAppendTo` prop to adjust where the actions menu is appended.
 
-```ts file="ComposableTableActions.tsx"
-
+```ts file="TableActions.tsx"
 ```
 
-### Composable: Actions Overflow
+### Actions Overflow
 
 Useing an `OverflowMenu` in the actions column, allowing the actions to condense into a dropdown if necessary for space.
 
-```ts file="ComposableTableActionsOverflow.tsx"
-
+```ts file="TableActionsOverflow.tsx"
 ```
 
-### Composable: Expandable
+### Expandable
 
 To make a parent/child row pair expandable:
 
@@ -205,11 +196,10 @@ type OnCollapse = (
 
 Note: Table column widths will respond automatically when toggling expanded rows. To retain column widths between expanded and collapsed states, column header and/or data cell widths must be set.
 
-```ts file="ComposableTableExpandable.tsx"
-
+```ts file="TableExpandable.tsx"
 ```
 
-### Composable: Compound expandable
+### Compound expandable
 
 To make a parent/child row pair compound expandable:
 
@@ -230,35 +220,30 @@ export type OnExpand = (
 ) => void;
 ```
 
-```ts file="ComposableTableCompoundExpandable.tsx"
-
+```ts file="TableCompoundExpandable.tsx"
 ```
 
-### Composable: Cell width, breakpoint modifiers
-
-```ts file="ComposableTableCellWidth.tsx"
+### Cell width, breakpoint modifiers
 
+```ts file="TableCellWidth.tsx"
 ```
 
-### Composable: Controlling text
-
-```ts file="ComposableTableControllingText.tsx"
+### Controlling text
 
+```ts file="TableControllingText.tsx"
 ```
 
-### Composable: Modifiers with table text
-
-```ts file="ComposableTableTextModifiers.tsx"
+### Modifiers with table text
 
+```ts file="TableTextModifiers.tsx"
 ```
 
-### Composable: Empty state
-
-```ts file="ComposableTableEmptyState.tsx"
+### Empty state
 
+```ts file="TableEmptyState.tsx"
 ```
 
-### Composable: Favoritable (implemented with sortable)
+### Favoritable (implemented with sortable)
 
 To make a row favoritable, the table needs a favoritable column.
 Pass a `TdFavoritesType` object via the `favorites` prop on each rows's first `Td` in the favoritable column.
@@ -277,11 +262,10 @@ type OnFavorite = (
 
 To make a favoritable column sortable, pass a `ThSortType` object to the favoritable column's `Th` with `isFavorites` set to true.
 
-```ts file="ComposableTableFavoritable.tsx"
-
+```ts file="TableFavoritable.tsx"
 ```
 
-### Composable: Tree table
+### Tree table
 
 To enable a tree table:
 
@@ -311,11 +295,10 @@ Note: If this table is going to be tested using axe-core, the tests will flag th
 aria-posinset, and aria-setsize as violations. This is an intentional choice at this time so that
 the voice over technologies will recognize the flat table structure as a tree.
 
-```ts file="ComposableTableTree.tsx"
-
+```ts file="TableTree.tsx"
 ```
 
-### Composable: Draggable row table
+### Draggable row table
 
 To make a row draggable:
 
@@ -325,11 +308,10 @@ To make a row draggable:
 4. While the user is dragging a row, the `pf-m-drag-over` class needs to be applied to `TableComposable`.
 5. The draggable `Td` in each row needs a `TdDraggableType` object passed to its `draggable` prop.
 
-```ts isBeta file="ComposableTableDraggable.tsx"
-
+```ts isBeta file="TableDraggable.tsx"
 ```
 
-## Sticky table modifiers
+### Sticky table modifiers
 
 To make certain columns and the header sticky, the table must be wrapped in a combination of `OuterScrollContainer` and `InnerScrollContainer`. For sticky columns, only `InnerScrollContainer` is required. For sticky headers, and sticky headers with sticky columns, both containers are required to ensure the sticky behavior behaves correctly.
 
@@ -341,31 +323,28 @@ There are a few ways this can be handled:
 - Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the table's parent element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
 - In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
 
-### Composable: Sticky column
+### Sticky column
 
 To make a column sticky, wrap `TableComposable` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: `isStickyColumn` and `hasRightBorder`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property.
 
-```ts file="ComposableTableStickyColumn.tsx"
-
+```ts file="TableStickyColumn.tsx"
 ```
 
-### Composable: Multiple sticky columns
+### Multiple sticky columns
 
 To make multiple columns sticky, wrap `TableComposable` with `InnerScrollContainer` and add `isStickyColumn` to all columns that should be sticky. The rightmost column should also have the `hasRightBorder` property, and each sticky column after the first must define a `stickyLeftOffset` property that equals the combined width of the previous sticky columns - set by `stickyMinWidth`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property.
 
-```ts file="ComposableTableMultipleStickyColumns.tsx"
-
+```ts file="TableMultipleStickyColumns.tsx"
 ```
 
-### Composable: Sticky columns and header
+### Sticky columns and header
 
 To maintain proper sticky behavior across sticky columns and header, `TableComposable` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.
 
-```ts file="ComposableTableStickyColumnsAndHeader.tsx"
-
+```ts file="TableStickyColumnsAndHeader.tsx"
 ```
 
-## Nested column headers
+### Nested column headers
 
 To make a nested column header:
 
@@ -378,60 +357,48 @@ The first `Tr` represents the top level of columns, and each must pass either `r
 
 The second `Tr` represents the second level of sub columns. The `Th` in this row each should pass `isSubHeader`, and the last sub column of a column should also pass `hasRightBorder`.
 
-### Composable: Nested column headers
-
-```ts file="ComposableTableNestedHeaders.tsx"
-
+```ts file="TableNestedHeaders.tsx"
 ```
 
-### Composable: Nested column headers and expandable rows
-
-```ts file="ComposableTableNestedExpandable.tsx"
+### Nested column headers and expandable rows
 
+```ts file="TableNestedExpandable.tsx"
 ```
 
-### Composable: Expandable with nested table
-
-```ts file="ComposableTableNestedTableExpandable.tsx"
+### Expandable with nested table
 
+```ts file="TableNestedTableExpandable.tsx"
 ```
 
-### Composable: Nested sticky header
-
-```ts file="ComposableTableNestedStickyHeader.tsx"
+### Nested sticky header
 
+```ts file="TableNestedStickyHeader.tsx"
 ```
 
-## Striped
-
-### Composable: Striped
+### Striped
 
 To apply striping to a basic table, add the `isStriped` property to `TableComposable`.
 
-```ts file="ComposableTableStriped.tsx"
-
+```ts file="TableStriped.tsx"
 ```
 
-### Composable: Striped expandable
+### Striped expandable
 
 To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `TableComposable`.
 
-```ts file="ComposableTableStripedExpandable.tsx"
-
+```ts file="TableStripedExpandable.tsx"
 ```
 
-### Composable: Striped multiple tobdy
+### Striped multiple tobdy
 
 When there are multiple `Tbody` components within a table, a more granular application of striping may be controlled by adding either the `isEvenStriped` or `isOddStriped` properties to `Tbody`. These properties will stripe even or odd rows within that `Tbody` respectively.
 
-```ts file="ComposableTableStripedMultipleTbody.tsx"
-
+```ts file="TableStripedMultipleTbody.tsx"
 ```
 
-### Composable: Striped tr
+### Striped tr
 
 To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `TableComposable`.
 
-```ts file="ComposableTableStripedTr.tsx"
-
+```ts file="TableStripedTr.tsx"
 ```

packages/react-table/src/components/TableComposable/examples/ComposableTableActions.tsx → packages/react-table/src/components/TableComposable/examples/TableActions.tsx

@@ -25,7 +25,7 @@ interface Repository {
 
 type ExampleType = 'defaultToggle' | 'customToggle';
 
-export const ComposableTableActions: React.FunctionComponent = () => {
+export const TableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
   const repositories: Repository[] = [
     { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five', singleAction: 'Start' },
@@ -44,7 +44,7 @@ export const ComposableTableActions: React.FunctionComponent = () => {
     singleAction: 'Single action'
   };
 
-  // This state is just for the ToggleGroup in this example and isn't necessary for TableComposable usage.
+  // This state is just for the ToggleGroup in this example and isn't necessary for Table usage.
   const [exampleChoice, setExampleChoice] = React.useState<ExampleType>('defaultToggle');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (_isSelected, event) => {
     const id = event.currentTarget.id;

packages/react-table/src/components/TableComposable/examples/ComposableTableActionsOverflow.tsx → packages/react-table/src/components/TableComposable/examples/TableActionsOverflow.tsx

@@ -24,7 +24,7 @@ interface Repository {
   isMenuOpen: boolean;
 }
 
-export const ComposableTableActions: React.FunctionComponent = () => {
+export const TableActions: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
   const repositories: Repository[] = [
     { name: 'one', branches: 'two', prs: 'a', workspaces: 'four', lastCommit: 'five', isMenuOpen: false },