feat(Table): added class names for table elements

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.54",
+    "@patternfly/patternfly": "5.0.0-alpha.55",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.54",
+    "@patternfly/patternfly": "5.0.0-alpha.55",
     "@patternfly/react-charts": "^7.0.0-alpha.27",
     "@patternfly/react-code-editor": "^5.0.0-alpha.110",
     "@patternfly/react-core": "^5.0.0-alpha.109",

packages/react-icons/package.json

@@ -32,7 +32,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "5.0.0-alpha.54",
+    "@patternfly/patternfly": "5.0.0-alpha.55",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.54",
+    "@patternfly/patternfly": "5.0.0-alpha.55",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",

packages/react-table/src/components/Table/Caption.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+import { css } from '@patternfly/react-styles';
 
 export interface CaptionProps {
   /** Content rendered inside the caption */
@@ -8,7 +10,7 @@ export interface CaptionProps {
 }
 
 export const Caption: React.FunctionComponent<CaptionProps> = ({ children, className, ...props }: CaptionProps) => (
-  <caption className={className} {...props}>
+  <caption className={css(styles.tableCaption, className)} {...props}>
     {children}
   </caption>
 );

packages/react-table/src/components/Table/Tbody.tsx

@@ -29,6 +29,7 @@ const TbodyBase: React.FunctionComponent<TbodyProps> = ({
   <tbody
     role="rowgroup"
     className={css(
+      styles.tableTbody,
       className,
       isExpanded && styles.modifiers.expanded,
       isOddStriped && styles.modifiers.striped,

packages/react-table/src/components/Table/Td.tsx

@@ -271,6 +271,7 @@ const TdBase: React.FunctionComponent<TdProps> = ({
       onBlur={() => setShowTooltip(false)}
       onMouseEnter={tooltip !== null ? onMouseEnter : onMouseEnterProp}
       className={css(
+        styles.tableTd,
         className,
         isActionCell && styles.tableAction,
         textCenter && styles.modifiers.center,

packages/react-table/src/components/Table/Th.tsx

@@ -179,6 +179,7 @@ const ThBase: React.FunctionComponent<ThProps> = ({
       scope={component === 'th' && children ? scope : null}
       ref={cellRef}
       className={css(
+        styles.tableTh,
         className,
         textCenter && styles.modifiers.center,
         isSubheader && styles.tableSubhead,

packages/react-table/src/components/Table/Thead.tsx

@@ -25,6 +25,7 @@ const TheadBase: React.FunctionComponent<TheadProps> = ({
 }: TheadProps) => (
   <thead
     className={css(
+      styles.tableThead,
       className,
       noWrap && styles.modifiers.nowrap,
       hasNestedHeader && styles.modifiers.nestedColumnHeader

packages/react-table/src/components/Table/Tr.tsx

@@ -92,6 +92,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
       {isSelectable && <output className="pf-v5-screen-reader">{ariaLabel}</output>}
       <tr
         className={css(
+          styles.tableTr,
           className,
           isExpanded !== undefined && styles.tableExpandableRow,
           isExpanded && styles.modifiers.expanded,

packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`RowWrapper renders correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class=""
+        class="pf-v5-c-table__tr"
         data-ouia-component-id="OUIA-Generated-TableRow-1"
         data-ouia-component-type="PF4/TableRow"
         data-ouia-safe="true"
@@ -20,7 +20,7 @@ exports[`RowWrapper renders expanded correctly 1`] = `
   <table>
     <tbody>
       <tr
-        class="pf-v5-c-table__expandable-row pf-m-expanded"
+        class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-TableRow-2"
         data-ouia-component-type="PF4/TableRow"
         data-ouia-safe="true"