feat: Enable readOnly for pills without buttons (#396)

* feat: Enable readOnly for pills when no buttons are present in them Co-authored-by: sunny <sunny@MacBook-Pro-Sunny-Zhang-W1Y9W09WW0.local>
EightfoldAI · Sep 29, 2022 · 66954ef · 66954ef
1 parent d363abb
commit 66954ef
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/components/Pills/Pill.tsx b/src/components/Pills/Pill.tsx
@@ -74,6 +74,10 @@ export const Pill: FC<PillProps> = React.forwardRef(
             { [styles.xsmall]: size === PillSize.XSmall },
             { [styles.tagPillsDisabled]: mergedDisabled },
             { [styles.tagPillsRtl]: htmlDir === 'rtl' },
+            {
+                [styles.readOnly]:
+                    type !== PillType.withButton && type !== PillType.closable,
+            },
         ]);
         return (
             <div

diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss
@@ -27,6 +27,11 @@
         }
     }
 
+    &.readOnly {
+        cursor: default;
+        pointer-events: none;
+    }
+
     &.xsmall {
         background: none;
         border: none;