replace ChevronUp/ChevronDown with SVG components

bcgov · Aug 13, 2024 · ca25172 · ca25172
1 parent c4ecae4
commit ca25172
Showing 1 changed file with 7 additions and 36 deletions.
diff --git a/packages/react-components/src/components/Select/Select.tsx b/packages/react-components/src/components/Select/Select.tsx
@@ -18,7 +18,12 @@ import {
   ValidationResult,
 } from "react-aria-components";
 
-import SvgExclamationIcon from "../Icons/SvgExclamationIcon";
+import {
+  SvgExclamationIcon,
+  SvgChevronUpIcon,
+  SvgChevronDownIcon,
+} from "@/components";
+
 import "./Select.css";
 
 export interface ListBoxItemProps extends ReactAriaListBoxItemProps {
@@ -59,40 +64,6 @@ export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
   errorMessage?: string | ((validation: ValidationResult) => string);
 }
 
-function ChevronDown() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-function ChevronUp() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 /** Select displays a collapsible list of options and allows a user to select one of them. */
 export default function Select<T extends object>({
   items,
@@ -131,7 +102,7 @@ export default function Select<T extends object>({
                 <SvgExclamationIcon />
               </span>
             )}
-            {isOpen ? <ChevronUp /> : <ChevronDown />}
+            {isOpen ? <SvgChevronUpIcon /> : <SvgChevronDownIcon />}
           </Button>
           {description && (
             <Text