fix: Exclude margin from EnterpriseBadge component styles

Added a `className` prop to the `EnterpriseBadge` component to allow external styling. Updated usage instances in CreateProject and GeneralSettings pages to apply a margin class for proper spacing. Also removed hardcoded margin from the component's default styles.
HumanSignal · Mar 7, 2025 · b3f01b5 · b3f01b5
1 parent 390dbc4
commit b3f01b5
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx b/web/apps/labelstudio/src/pages/CreateProject/CreateProject.jsx
@@ -53,7 +53,7 @@ const ProjectName = ({ name, setName, onSaveName, onSubmit, error, description,
         <div className="field field--wide">
           <label>
             Workspace
-            <EnterpriseBadge />
+            <EnterpriseBadge className="ml-2" />
           </label>
           <Select placeholder="Select an option" disabled options={[]} />
           <Caption>

diff --git a/web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx b/web/apps/labelstudio/src/pages/Settings/GeneralSettings.jsx
@@ -39,7 +39,7 @@ export const GeneralSettings = () => {
                 <Block name="workspace-placeholder">
                   <Elem name="badge-wrapper">
                     <Elem name="title">Workspace</Elem>
-                    <EnterpriseBadge />
+                    <EnterpriseBadge className="ml-2" />
                   </Elem>
                   <Select placeholder="Select an option" disabled options={[]} />
                   <Caption>
@@ -83,7 +83,7 @@ export const GeneralSettings = () => {
                     value=""
                     label={
                       <>
-                        Uncertainty sampling <EnterpriseBadge />
+                        Uncertainty sampling <EnterpriseBadge className="ml-2" />
                       </>
                     }
                     disabled

diff --git a/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.module.scss b/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.module.scss
@@ -3,7 +3,6 @@
   border-radius: 4px;
   background: linear-gradient(135deg, #FFA663 0%, #FF7557 51.56%, #E37BD3 100%);
   vertical-align: middle;
-  margin: 0 8px;
   height: 20px;
 }
 

diff --git a/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.tsx b/web/libs/ui/src/lib/enterprise-badge/enterprise-badge.tsx
@@ -5,14 +5,13 @@ import styles from "./enterprise-badge.module.scss";
 
 /* eslint-disable-next-line */
 export interface EnterpriseBadgeProps {
+  className?: string;
   filled?: boolean;
 }
 
-export const EnterpriseBadge: FC<{
-  filled?: boolean;
-}> = ({ filled }) => {
+export const EnterpriseBadge: FC<EnterpriseBadgeProps> = ({ className, filled }) => {
   return (
-    <div className={clsx(styles.badge, { [styles.filled]: filled })}>
+    <div className={clsx(styles.badge, { [styles.filled]: filled }, className)}>
       <div className={clsx(styles.label)}>
         <IconSpark className={clsx(styles.icon)} />
         Enterprise