feat: add lock icon when field is read-only

measuredco · Oct 31, 2023 · a051000 · a051000
1 parent 1530de7
commit a051000
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
@@ -11,6 +11,7 @@ import {
   DefaultField,
   TextareaField,
 } from "./fields";
+import { Lock } from "react-feather";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -35,6 +36,12 @@ export const FieldLabel = ({
       <div className={getClassName("label")}>
         {icon ? <div className={getClassName("labelIcon")}>{icon}</div> : <></>}
         {label}
+
+        {readOnly && (
+          <div className={getClassName("disabledIcon")} title="Read-only">
+            <Lock size="12" />
+          </div>
+        )}
       </div>
       {children}
     </El>

diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
@@ -34,6 +34,12 @@
 .Input-labelIcon {
   color: var(--puck-color-grey-6);
   margin-right: 4px;
+  padding-left: 4px;
+}
+
+.Input-disabledIcon {
+  color: var(--puck-color-grey-4);
+  margin-left: auto;
 }
 
 .Input-input {