refactor: use blueprint classnames safely (#847)

Closes: #803
zakodium-oss · Jan 3, 2025 · 0399118 · 0399118
1 parent 238e55a
commit 0399118
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/src/components/activity_bar/activity_bar.tsx b/src/components/activity_bar/activity_bar.tsx
@@ -45,13 +45,13 @@ const ActivityButton = styled(Button)`
     color: ${Colors.DARK_GRAY3};
   }
 
-  .bp5-icon {
+  .${Classes.ICON} {
     width: 20px;
     height: 20px;
     font-size: 14px;
   }
 
-  .bp5-tag {
+  .${Classes.TAG} {
     font-size: 12px;
     line-height: 14px;
     min-width: 18px;
@@ -83,8 +83,8 @@ export function ActivityBarItem(props: ActivityBarItemProps) {
       ? icon
       : cloneElement(icon, {
           className: icon.props.className
-            ? `${icon.props.className} bp5-icon`
-            : 'bp5-icon',
+            ? `${icon.props.className} ${Classes.ICON}`
+            : Classes.ICON,
         });
 
   return (

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -1,16 +1,17 @@
-import type {
-  AnchorButtonProps as BlueprintAnchorButtonProps,
-  ButtonProps as BlueprintButtonProps,
-  TagProps,
-  TooltipProps,
-} from '@blueprintjs/core';
 import {
   AnchorButton,
   Button as BlueprintButton,
+  Classes,
   Icon,
   Tag,
   Tooltip,
 } from '@blueprintjs/core';
+import type {
+  AnchorButtonProps as BlueprintAnchorButtonProps,
+  ButtonProps as BlueprintButtonProps,
+  TagProps,
+  TooltipProps,
+} from '@blueprintjs/core';
 import type { CSSObject } from '@emotion/styled';
 import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
@@ -51,7 +52,7 @@ function getStyledCss(
   return {
     lineHeight: 1.15,
     position: 'relative',
-    '.bp5-icon': !buttonProps.children && { marginRight: 0 },
+    [`.${Classes.ICON}`]: !buttonProps.children && { marginRight: 0 },
   };
 }
 

diff --git a/src/components/dialog/ConfirmDialog.tsx b/src/components/dialog/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
+import { Classes, Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import type { DialogProps } from '@blueprintjs/core';
-import { Dialog, DialogBody, DialogFooter } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 
 import { Button } from '../button/index.js';
@@ -15,7 +15,7 @@ interface ConfirmDialogProps extends Omit<DialogProps, 'isCloseButtonShown'> {
 const DialogWithHeaderColor = styled(Dialog, {
   shouldForwardProp: (prop) => prop !== 'headerColor',
 })<{ headerColor: string }>`
-  .bp5-dialog-header {
+  .${Classes.DIALOG_HEADER} {
     background-color: ${(props) => props.headerColor};
     min-height: 0;
   }

diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
@@ -59,15 +59,12 @@ const border = '1px solid rgb(247, 247, 247)';
 const ToolbarButton = styled(Button)`
   .${Classes.ICON} {
     color: ${Colors.DARK_GRAY3};
-  }
-
-  .bp5-icon {
     width: 16px;
     height: 16px;
     font-size: 12px;
   }
 
-  .bp5-tag {
+  .${Classes.TAG} {
     font-size: 10px;
     line-height: 12px;
     min-width: 12px;
@@ -164,13 +161,14 @@ function ToolbarItemInternal(props: ToolbarItemInternalProps) {
   } = useToolbarContext();
   const intent = itemIntent ?? toolbarIntent;
   const disabled = itemDisabled ?? toolbarDisabled;
+
   const resizedIcon =
     !icon || typeof icon === 'string'
       ? icon
       : cloneElement(icon, {
           className: icon.props.className
-            ? `${icon.props.className} bp5-icon`
-            : 'bp5-icon',
+            ? `${icon.props.className} ${Classes.ICON}`
+            : Classes.ICON,
         });
 
   return (