fix: table tooltip, turn off dark mode

Atnic · Mar 13, 2024 · 3adcc7d · 3adcc7d
1 parent 0b1ac5c
commit 3adcc7d
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 24 deletions.
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
@@ -56,8 +56,7 @@
     "@react-stately/table": "^3.11.2",
     "@react-stately/virtualizer": "^3.6.4",
     "@react-types/grid": "^3.2.2",
-    "@react-types/table": "^3.9.0",
-    "react-feather": "^2.0.10"
+    "@react-types/table": "^3.9.0"
   },
   "devDependencies": {
     "@jala-banyu/theme": "workspace: *",

diff --git a/packages/components/table/src/table-column-header.tsx b/packages/components/table/src/table-column-header.tsx
@@ -8,11 +8,8 @@ import {mergeProps} from "@react-aria/utils";
 import {useFocusRing} from "@react-aria/focus";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {useHover} from "@react-aria/interactions";
-import {SortAscIcon} from "@jala-banyu/shared-icons/src/sort-asc";
-import {SortIcon} from "@jala-banyu/shared-icons/src/sort";
-import {SortDescIcon} from "@jala-banyu/shared-icons/src/sort-desc";
 import {Tooltip} from "@jala-banyu/tooltip";
-import {HelpCircle} from "react-feather";
+import {HelpCircleIcon, SortAscIcon, SortDescIcon, SortIcon} from "@jala-banyu/shared-icons";
 
 import {ValuesType} from "./use-table";
 
@@ -82,7 +79,9 @@ const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref)
   if (tooltip) {
     tooltipIndicator = (
       <Tooltip content={tooltip} placement="top">
-        <HelpCircle className={slots.tooltipIcon?.({class: classNames?.tooltipIcon})} size={16} />
+        <p className={"inline-block"}>
+          <HelpCircleIcon className={slots.tooltipIcon?.({class: classNames?.tooltipIcon})} />
+        </p>
       </Tooltip>
     );
   }

diff --git a/packages/core/theme/src/colors/semantic.ts b/packages/core/theme/src/colors/semantic.ts
@@ -339,7 +339,8 @@ export const themeColorsDark: ThemeColors = {
   },
 };
 
+// turn off dark mode for now
 export const semanticColors = {
   light: themeColorsLight,
-  dark: themeColorsDark,
+  dark: themeColorsLight,
 };
diff --git a/packages/hooks/use-pagination/__tests__/use-pagination.test.tsx b/packages/hooks/use-pagination/__tests__/use-pagination.test.tsx
@@ -13,7 +13,7 @@ describe("usePagination", () => {
   it("should return correct initial state", () => {
     const {result} = renderHook(() => usePagination({total: 10}));
 
-    expect(result.current.range).toStrictEqual([1, 2, 3, "dots", 10]);
+    expect(result.current.range).toStrictEqual([1, 2, 3, 4, 5, "dots", 10]);
     expect(result.current.activePage).toBe(1);
   });
 

diff --git a/packages/utilities/shared-icons/src/help-circle.tsx b/packages/utilities/shared-icons/src/help-circle.tsx
@@ -0,0 +1,22 @@
+import {IconSvgProps} from "./types";
+
+export const HelpCircleIcon = (props: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+    <line x1="12" x2="12.01" y1="17" y2="17" />
+  </svg>
+);
diff --git a/packages/utilities/shared-icons/src/index.ts b/packages/utilities/shared-icons/src/index.ts
@@ -36,6 +36,7 @@ export * from "./arrow-left";
 export * from "./link";
 export * from "./selector";
 export * from "./home";
+export * from "./help-circle";
 
 // sets
 export * from "./bulk";

diff --git a/packages/utilities/shared-icons/src/search.tsx b/packages/utilities/shared-icons/src/search.tsx
@@ -12,18 +12,11 @@ export const SearchIcon = (props: IconSvgProps) => (
     {...props}
   >
     <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
+      clipRule="evenodd"
+      d="M4.29953 11.4757C5.15038 12.0442 6.15069 12.3476 7.17397 12.3476C7.85365 12.3495 8.52694 12.2165 9.1549 11.9565C9.55524 11.7907 9.93209 11.5753 10.2769 11.3161C10.3041 11.3554 10.3352 11.3928 10.3702 11.4278L12.3725 13.4301C12.6873 13.7449 13.1976 13.7449 13.5123 13.4301C13.827 13.1154 13.8273 12.6048 13.5126 12.2901L11.5103 10.2878C11.4705 10.248 11.4276 10.2133 11.3824 10.1835C12.0061 9.31132 12.3477 8.26024 12.3477 7.17394C12.3477 5.80173 11.8026 4.48572 10.8323 3.51541C9.862 2.54511 8.54599 2 7.17377 2C5.80156 2 4.48555 2.54511 3.51524 3.51541C2.7917 4.23902 2.29898 5.16092 2.09938 6.16455C1.89978 7.16819 2.00228 8.20847 2.3939 9.15385C2.78552 10.0992 3.44869 10.9073 4.29953 11.4757ZM5.22697 4.25988C5.80326 3.87473 6.48082 3.66912 7.17397 3.66904C8.10319 3.67009 8.99406 4.03966 9.65115 4.69668C10.3082 5.3537 10.6779 6.24453 10.6791 7.17375C10.6791 7.8669 10.4735 8.54448 10.0885 9.12082C9.70337 9.69715 9.15604 10.1464 8.51566 10.4116C7.87528 10.6769 7.17062 10.7463 6.49078 10.6111C5.81095 10.4759 5.18647 10.1422 4.69631 9.65209C4.20615 9.16199 3.87233 8.53755 3.73705 7.85772C3.60178 7.1779 3.67113 6.47324 3.93633 5.83283C4.20153 5.19242 4.65068 4.64503 5.22697 4.25988Z"
+      fill="currentColor"
+      fillRule="evenodd"
+      id="primaryFill"
     />
   </svg>
 );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml