1560 Adds new Heroicons with arrows for the sorting.

workfloworchestrator · Nov 19, 2024 · 3001b63 · 3001b63
1 parent 7c591c4
commit 3001b63
Show file tree

Hide file tree

Showing 10 changed files with 95 additions and 38 deletions.
diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx b/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,

diff --git a/...i-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoSortDirectionIcon.tsx b/...i-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoSortDirectionIcon.tsx
@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoArrowNarrowDown, WfoArrowNarrowUp, WfoArrowsUpDown } from '@/icons';
+import { WfoArrowsUpDown } from '@/icons';
+import { WfoArrowLongDown } from '@/icons/heroicons/WfoArrowLongDown';
+import { WfoArrowLongUp } from '@/icons/heroicons/WfoArrowLongUp';
 import { SortOrder } from '@/types';
 
 import { SORTABLE_ICON_CLASS } from './styles';
@@ -18,24 +20,19 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     if (!sortDirection) {
         return (
             <WfoArrowsUpDown
+                height={16}
+                width={16}
                 className={SORTABLE_ICON_CLASS}
                 css={{ visibility: 'hidden' }}
                 color={theme.colors.subduedText}
             />
         );
     }
 
+    // Todo replace with Heroicons (0 margin)
     return sortDirection === SortOrder.ASC ? (
-        <WfoArrowNarrowUp
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowLongUp color={theme.colors.subduedText} />
     ) : (
-        <WfoArrowNarrowDown
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowLongDown color={theme.colors.subduedText} />
     );
 };
diff --git a/.../orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts b/.../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',

diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts b/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,

diff --git a/packages/orchestrator-ui-components/src/icons/WfoArrowNarrowDown.tsx b/packages/orchestrator-ui-components/src/icons/WfoArrowNarrowDown.tsx
@@ -10,7 +10,7 @@ export const WfoArrowNarrowDown: FC<WfoIconProps> = ({
     <svg
         width={width}
         height={height}
-        viewBox="0 0 16 20"
+        viewBox="4 5 8 10"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         className="wfoArrowNarrowIcon"

diff --git a/packages/orchestrator-ui-components/src/icons/WfoArrowNarrowUp.tsx b/packages/orchestrator-ui-components/src/icons/WfoArrowNarrowUp.tsx
@@ -10,7 +10,7 @@ export const WfoArrowNarrowUp: FC<WfoIconProps> = ({
     <svg
         width={width}
         height={height}
-        viewBox="0 0 16 20"
+        viewBox="4 5 8 10"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         className="wfoArrowNarrowIcon"

diff --git a/packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowLongDown.tsx b/packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowLongDown.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowLongDownSvg: FC<WfoIconProps> = ({
+    width = 8,
+    height = 16,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="6 2 8 16"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 2a.75.75 0 0 1 .75.75v12.59l1.95-2.1a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 1 1 1.1-1.02l1.95 2.1V2.75A.75.75 0 0 1 10 2Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowLongDown = withWfoHeroIconsWrapper(WfoArrowLongDownSvg);
diff --git a/packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowLongUp.tsx b/packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowLongUp.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowLongUpSvg: FC<WfoIconProps> = ({
+    width = 8,
+    height = 16,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="6 2 8 16"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 18a.75.75 0 0 1-.75-.75V4.66L7.3 6.76a.75.75 0 0 1-1.1-1.02l3.25-3.5a.75.75 0 0 1 1.1 0l3.25 3.5a.75.75 0 1 1-1.1 1.02l-1.95-2.1v12.59A.75.75 0 0 1 10 18Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowLongUp = withWfoHeroIconsWrapper(WfoArrowLongUpSvg);
diff --git a/packages/orchestrator-ui-components/src/icons/heroicons/WfoArrowsUpDown.tsx b/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"
     >

diff --git a/packages/orchestrator-ui-components/src/icons/heroicons/WfoHeroIconsWrapper.tsx b/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 = ({