feat(react): update table component colors to align with the design g…

…uidelines (#737)

* fix: fix incorrect text color in table header fields

* fix: correct background color for selected menu items in light mode

* feat: refine table styles

* test: update test snapshots for the Menu component

* docs: update table.mdx

* docs: update progress.mdx

* feat: rename "flex: 0 0 auto" to "flex: none"

* chore: update TableBody component

* docs: update tooltip and overflowtooltip

* docs: update progress.mdx

* docs: update table.mdx

* docs: update styles.css

* feat: add ARIA role attribute to table components

* docs: update table.mdx

* feat: add support for passing the `role` property to `useTableHeaderCellCSS` and `useTableCellCSS` Hooks

packages/react-docs/pages/components/overflowtooltip.mdx

@@ -62,23 +62,25 @@ To mitigate this issue, you can pass `PopperProps={{ usePortal: true }}` to `Ove
 | :--- | :--- | :------ | :---------- |
 | PopperComponent | ElementType | Popper | The component used for the popover. |
 | PopperProps | object | | Props applied to the Popper component. |
-| PopperArrowComponent | ElementType | PopperArrow | The component used for the popover arrow. |
-| PopperArrowProps | object | | Props applied to the PopoverArrow component. |
+| TooltipArrowComponent | ElementType | TooltipArrow | The component used for the tooltip arrow. |
+| TooltipArrowProps | object | | Props applied to the `TooltipArrow` component. |
 | TransitionComponent | ElementType | Grow | The component used for the transition. |
 | TransitionProps | object | | Props applied to the [Transition](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |
 | TransitionProps.appear | boolean | true | |
-| arrowAt | string | | The position of the arrow. One of: 'left', 'right', 'top', 'bottom' |
-| children | ReactNode \| `({ getTooltipTriggerProps }) => ReactNode` | | |
+| arrow | boolean | true | If `true`, adds an arrow to the tooltip. |
+| children | ReactNode \| `(context) => ReactNode` | | |
 | closeOnClick | boolean | true | If `true`, close the tooltip on click. |
 | closeOnEsc | boolean | true | If `true`, close the tooltip when pressing the escape key. |
 | closeOnMouseDown | boolean | false | If `true`, close the tooltip while the mouse is down. |
 | defaultIsOpen | boolean | false | Whether the tooltip will be open by default. |
 | disabled | boolean | | If `true`, the tooltip will not display. |
 | enterDelay | number | 100 | The delay in milliseconds before the tooltip appears. |
-| hideArrow | boolean | | If `true`, hide the arrow tip on the tooltip. |
+| followCursor | boolean | | If `true`, the tooltip will follow the cursor. |
 | isOpen | boolean | | If `true`, show the tooltip. |
 | label | string \| ReactNode | | If the tooltip label is a blank or empty string, the tooltip will not display. |
 | leaveDelay | number | 0 | The delay in milliseconds before the tooltip disappears. |
+| nextToCursor | boolean | | If `true`, the tooltip will be positioned next to the cursor. |
+| offset | [skidding, distance] | [0, 8] | The skidding and distance of the tooltip. |
 | onClose| function | | Callback fired when the tooltip is closed. |
 | onOpen | function | | Callback fired when the tooltip is opened. |
 | placement | PopperJS.Placement | 'bottom' | Position the tooltip relative to the trigger element as well as surrounding elements. One of: 'top', 'bottom', 'right', 'left', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end' |

packages/react-docs/pages/components/progress.mdx

@@ -13,7 +13,7 @@ import {
 } from '@tonic-ui/react';
 ```
 
-## Linear
+## Usage
 
 ```jsx noInline
 const FormGroup = (props) => (
@@ -50,6 +50,11 @@ render(() => {
 
   return (
     <>
+      <Box mb="4x">
+        <Text fontSize="lg" lineHeight="lg">
+          LinearProgress props
+        </Text>
+      </Box>
       <FormGroup>
         <Box mb="2x">
           <TextLabel>
@@ -125,7 +130,7 @@ render(() => {
 });
 ```
 
-### Linear color
+### Custom color
 
 You can use the `color` prop to change the color of the progress bar. The default color is `blue:60`.