Add Carbon Icons and upgrade Ant Design (#5416)

ethyca · Oct 24, 2024 · 04a0873 · 04a0873
1 parent 4bec008
commit 04a0873
Show file tree

Hide file tree

Showing 5 changed files with 192 additions and 169 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,9 @@ The types of changes are:
 ### Fixed
 - Fixed Snowflake DSR integration failing with syntax error [#5417](https://github.com/ethyca/fides/pull/5417)
 
+### Developer Experience
+- Added Carbon Icons to FidesUI [#5416](https://github.com/ethyca/fides/pull/5416)
+
 ## [2.48.0](https://github.com/ethyca/fidesplus/compare/2.47.1...2.48.0)
 
 ### Added

diff --git a/clients/admin-ui/src/features/common/ClipboardButton.tsx b/clients/admin-ui/src/features/common/ClipboardButton.tsx
@@ -15,32 +15,16 @@ enum TooltipText {
 
 const useClipboardButton = (copyText: string) => {
   const { onCopy } = useClipboard(copyText);
-
-  const [highlighted, setHighlighted] = useState(false);
   const [tooltipText, setTooltipText] = useState(TooltipText.COPY);
 
-  const handleMouseDown = () => {
+  const handleClick = () => {
     setTooltipText(TooltipText.COPIED);
     onCopy();
   };
-  const handleMouseUp = () => {
-    setHighlighted(false);
-  };
-
-  const handleMouseEnter = () => {
-    setHighlighted(true);
-  };
-  const handleMouseLeave = () => {
-    setHighlighted(false);
-  };
 
   return {
     tooltipText,
-    highlighted,
-    handleMouseDown,
-    handleMouseUp,
-    handleMouseEnter,
-    handleMouseLeave,
+    handleClick,
     setTooltipText,
   };
 };
@@ -54,17 +38,8 @@ interface ClipboardButtonProps
 }
 
 const ClipboardButton = ({ copyText, ...props }: ClipboardButtonProps) => {
-  const {
-    tooltipText,
-    highlighted,
-    handleMouseDown,
-    handleMouseUp,
-    handleMouseEnter,
-    handleMouseLeave,
-    setTooltipText,
-  } = useClipboardButton(copyText);
-
-  const iconColor = !highlighted ? "gray.600" : "complimentary.500";
+  const { tooltipText, handleClick, setTooltipText } =
+    useClipboardButton(copyText);
 
   return (
     <Tooltip
@@ -80,15 +55,11 @@ const ClipboardButton = ({ copyText, ...props }: ClipboardButtonProps) => {
     >
       <Button
         icon={<CopyIcon />}
-        color={iconColor}
         aria-label="copy"
         type="text"
         data-testid="clipboard-btn"
         {...props}
-        onClick={handleMouseDown}
-        onMouseUp={handleMouseUp}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
       />
     </Tooltip>
   );

diff --git a/clients/fidesui/package.json b/clients/fidesui/package.json
@@ -12,9 +12,10 @@
     "clean": "rm -rf node_modules"
   },
   "dependencies": {
+    "@carbon/icons-react": "^11.51.0",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
-    "antd": "^5.20.0",
+    "antd": "^5.21.5",
     "chakra-react-select": "^4.7.6",
     "typescript": "^4.9.5"
   },

diff --git a/clients/fidesui/src/index.ts b/clients/fidesui/src/index.ts
@@ -33,6 +33,13 @@ export { AddIcon, LinkIcon, QuestionIcon, WarningIcon } from "./icons";
 export * from "./icons";
 /* eslint-enable import/export */
 
+/**
+ * prefixed icons from Carbon Icons
+ * @example <Icons.download size={14} />
+ */
+export * as Icons from "@carbon/icons-react";
+/* end prefixed icons */
+
 export * from "./FidesUIProvider";
 export { extendTheme, theme } from "./FidesUITheme";