1560 table header improvements

.changeset/smart-pans-notice.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+1560 Table Header: for narrow columns, moving the sort icons as much as possible to the right

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -29,8 +29,14 @@ export const WfoTableDataRows = <T extends object>({
     onRowClick,
     className,
 }: WfoTableDataRowsProps<T>) => {
-    const { cellStyle, rowStyle, dataRowStyle, clickableStyle, setWidth } =
-        useWithOrchestratorTheme(getWfoTableStyles);
+    const {
+        cellStyle,
+        cellContentStyle,
+        rowStyle,
+        dataRowStyle,
+        clickableStyle,
+        setWidth,
+    } = useWithOrchestratorTheme(getWfoTableStyles);
 
     const sortedVisibleColumns = getSortedVisibleColumns(
         columnConfig,
@@ -70,7 +76,7 @@ export const WfoTableDataRows = <T extends object>({
                                             setWidth(columnConfig.width),
                                         ]}
                                     >
-                                        <div>
+                                        <div css={cellContentStyle}>
                                             {columnConfig.renderControl(row)}
                                         </div>
                                     </td>
@@ -91,7 +97,7 @@ export const WfoTableDataRows = <T extends object>({
                                         setWidth(columnConfig.width),
                                     ]}
                                 >
-                                    <div>
+                                    <div css={cellContentStyle}>
                                         <WfoDataCell
                                             customTooltip={columnConfig.renderTooltip?.(
                                                 result,

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoSortDirectionIcon.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoArrowNarrowDown, WfoArrowNarrowUp, WfoArrowsUpDown } from '@/icons';
+import { WfoArrowDown, WfoArrowUp, WfoArrowsUpDown } from '@/icons';
 import { SortOrder } from '@/types';
 
 import { SORTABLE_ICON_CLASS } from './styles';
@@ -18,6 +18,8 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     if (!sortDirection) {
         return (
             <WfoArrowsUpDown
+                height={16}
+                width={16}
                 className={SORTABLE_ICON_CLASS}
                 css={{ visibility: 'hidden' }}
                 color={theme.colors.subduedText}
@@ -26,16 +28,8 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     }
 
     return sortDirection === SortOrder.ASC ? (
-        <WfoArrowNarrowUp
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowUp color={theme.colors.subduedText} />
     ) : (
-        <WfoArrowNarrowDown
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowDown color={theme.colors.subduedText} />
     );
 };

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts

@@ -116,6 +116,7 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
         });
 
     const sortButtonStyle = css({
+        paddingLeft: theme.size.xxs,
         display: 'flex',
         flex: '0 0 auto',
         alignItems: 'center',

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts

@@ -83,6 +83,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
     });
 
     const headerCellStyle = css({
+        paddingRight: 0,
         [`&:hover`]: {
             [`.${SORTABLE_ICON_CLASS}`]: {
                 visibility: 'visible',
@@ -100,6 +101,10 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         verticalAlign: 'middle',
     });
 
+    const cellContentStyle = css({
+        display: 'inline-block',
+    });
+
     const emptyTableMessageStyle = css({
         textAlign: 'center',
     });
@@ -127,6 +132,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         expandedRowStyle,
         headerCellStyle,
         cellStyle,
+        cellContentStyle,
         emptyTableMessageStyle,
         clickableStyle,
         setWidth,

packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowDown.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowDownSvg: FC<WfoIconProps> = ({
+    width = 12,
+    height = 14,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="4 3 12 14"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowDown = withWfoHeroIconsWrapper(WfoArrowDownSvg);

packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowUp.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowUpSvg: FC<WfoIconProps> = ({
+    width = 12,
+    height = 14,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="4 3 12 14"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowUp = withWfoHeroIconsWrapper(WfoArrowUpSvg);

packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowsUpDown.tsx

@@ -7,12 +7,12 @@ import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
 const WfoArrowsUpDownSvg: FC<WfoIconProps> = ({
     width = 20,
     height = 20,
-    color = '#000000',
+    color = 'currentColor',
 }) => (
     <svg
         width={width}
         height={height}
-        viewBox="0 0 24 24"
+        viewBox="2 2 20 20"
         fill={color}
         xmlns="http://www.w3.org/2000/svg"
     >

packages/orchestrator-ui-components/src/icons/heroicons/WfoHeroIconsWrapper.tsx

@@ -1,6 +1,5 @@
 import React, { FC, ReactElement } from 'react';
 
-import { useOrchestratorTheme } from '@/hooks';
 import { WfoIconProps } from '@/icons';
 
 export type WfoHeroIconsWrapperProps = {
@@ -11,24 +10,18 @@ export type WfoHeroIconsWrapperProps = {
 export const WfoHeroIconsWrapper: FC<WfoHeroIconsWrapperProps> = ({
     children,
     className,
-}) => {
-    const { theme } = useOrchestratorTheme();
-
-    return (
-        <div
-            className={className}
-            css={{
-                marginLeft: theme.size.xs,
-                marginRight: theme.size.xs,
-                display: 'flex',
-                alignItems: 'center',
-                height: '100%',
-            }}
-        >
-            {children}
-        </div>
-    );
-};
+}) => (
+    <div
+        className={className}
+        css={{
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+        }}
+    >
+        {children}
+    </div>
+);
 
 export const withWfoHeroIconsWrapper = (Icon: FC<WfoIconProps>) => {
     const wfoHeroIconsWrapperWithIcon = ({

packages/orchestrator-ui-components/src/icons/heroicons/index.ts

@@ -1,4 +1,6 @@
 export * from './WfoHeroIconsWrapper';
 
+export * from './WfoArrowDown';
 export * from './WfoArrowsUpDown';
+export * from './WfoArrowUp';
 export * from './WfoWrench';

packages/orchestrator-ui-components/src/icons/index.ts

@@ -13,9 +13,7 @@ export * from './WfoChevronUp';
 export * from './WfoBoltFill';
 export * from './WfoBoltSlashFill';
 export * from './WfoCubeSolid';
-export * from './WfoArrowNarrowDown';
 export * from './WfoRefresh';
-export * from './WfoArrowNarrowUp';
 export * from './WfoMinusCircleFill';
 export * from './WfoPlayCircle';
 export * from './WfoSearchStrikethrough';