chore: style resize button

Author: mcoker

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableResizableColumnsExample.tsx

@@ -124,9 +124,31 @@ export const ResizableColumnsExample: FunctionComponent = () => {
         screenReaderText
       }
     },
-    'Pull requests',
-    { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } },
-    { cell: 'Last commit', props: { sort: { sortBy: {}, columnIndex: 4 } } }
+    {
+      cell: 'Pull requests',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        screenReaderText
+      },
+      props: { info: { tooltip: 'More information' } }
+    },
+    {
+      cell: 'This is a really long title',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        screenReaderText
+      },
+      props: { info: { tooltip: 'More information' } }
+    },
+    { cell: 'Last commit',
+      resizableProps: {
+        isResizable: true,
+        onResize,
+        screenReaderText
+      },
+      props: { sort: { sortBy: {}, columnIndex: 4 } } }
   ];
 
   return <DataViewTable isResizable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={rows} />;

packages/module/src/DataViewTh/DataViewTh.tsx

@@ -11,6 +11,29 @@ import {
 } from 'react';
 import { Th, ThProps } from '@patternfly/react-table';
 import { Button, getLanguageDirection } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss';
+
+import c_table_cell_PaddingBlockEnd from '@patternfly/react-tokens/dist/esm/c_table_cell_PaddingBlockEnd';
+import c_table_cell_PaddingInlineEnd from '@patternfly/react-tokens/dist/esm/c_table_cell_PaddingInlineEnd';
+import t_global_font_size_body_default from '@patternfly/react-tokens/dist/esm/t_global_font_size_body_default';
+
+const ResizeIcon = () => (
+  <svg className="pf-v6-svg" width="1em" height="1em" viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fillRule="evenodd" d="M52.7,529.8l190.5,161.9c18.6,15.9,50.5,4.7,50.5-17.8v-324c0-22.4-31.8-33.6-50.5-17.8L52.7,494.2c-11.5,9.8-11.5,25.8,0,35.6ZM480.8,12.9h62.4v998.3h-62.4V12.9ZM971.3,529.8l-190.5,161.9c-18.6,15.9-50.5,4.7-50.5-17.8v-324c0-22.4,31.8-33.6,50.5-17.8l190.5,161.9c11.5,9.8,11.5,25.8,0,35.6Z"/>
+  </svg>
+);
+
+const useStyles = createUseStyles({
+  dataViewResizeableTh: {
+    [c_table_cell_PaddingInlineEnd.name]: `calc(${t_global_font_size_body_default.var} * 2)`
+  },
+  dataViewResizableButton: {
+    position: 'absolute',
+    insetInlineEnd: `calc(${t_global_font_size_body_default.var} / 2)`,
+    insetBlockEnd: c_table_cell_PaddingBlockEnd.var,
+    cursor: 'grab'
+  },
+});
 export interface DataViewThResizableProps {
   /** Whether the column is resizable */
   isResizable?: boolean;
@@ -53,13 +76,15 @@ export const DataViewTh: FC<DataViewThProps> = ({
   const thRef = useRef<HTMLTableCellElement>(null);
 
   const [ width, setWidth ] = useState(resizableProps?.width ? resizableProps.width : 0);
+  const classes = useStyles();
 
   const isResizable = resizableProps?.isResizable || false;
   const increment = resizableProps?.increment || 5;
   const shiftIncrement = resizableProps?.shiftIncrement || 25;
   const resizeButtonAriaLabel = resizableProps?.resizeButtonAriaLabel;
   const onResize = resizableProps?.onResize || undefined;
   const screenReaderText = resizableProps?.screenReaderText || `Column ${width.toFixed(0)} pixels`;
+  const dataViewThClassName = isResizable ? classes.dataViewResizeableTh : undefined;
 
   const resizeButtonRef = useRef<HTMLButtonElement>(null);
   const setInitialVals = useRef(true);
@@ -260,20 +285,22 @@ export const DataViewTh: FC<DataViewThProps> = ({
   };
 
   return (
-    <Th {...thProps} {...props} style={width > 0 ? { minWidth: width } : undefined} ref={thRef}>
-      {content}
+    <Th {...thProps} {...props} style={width > 0 ? { minWidth: width } : undefined} ref={thRef} modifier="truncate" className={dataViewThClassName}>
+      <span className="pf-v6-c-table__text">
+        {content}
+      </span>
       {isResizable && (
         <Button
           ref={resizeButtonRef}
           variant="plain"
+          hasNoPadding
+          icon={<ResizeIcon />}
           onMouseDown={handleMousedown}
           onKeyDown={handleKeys}
           onTouchStart={handleTouchStart}
-          style={{ float: 'inline-end' }}
           aria-label={resizeButtonAriaLabel}
-        >
-          test
-        </Button>
+          className={classes.dataViewResizableButton}
+        />
       )}
       {isResizable && (
         <div aria-live="polite" className="pf-v6-screen-reader">