feat: add icons to inputs

measuredco · Jul 4, 2023 · f47482e · f47482e
1 parent aa0d2fe
commit f47482e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
@@ -4,7 +4,14 @@ import { ExternalInput } from "../ExternalInput";
 
 import styles from "./styles.module.css";
 import { replace } from "../../lib";
-import { Trash } from "react-feather";
+import {
+  Trash,
+  Type,
+  List,
+  ChevronDown,
+  CheckCircle,
+  Hash,
+} from "react-feather";
 
 const getClassName = getClassNameFactory("Input", styles);
 
@@ -30,7 +37,12 @@ export const InputOrGroup = ({
 
     return (
       <div className={getClassName()}>
-        <b className={getClassName("label")}>{label || name}</b>
+        <b className={getClassName("label")}>
+          <div className={getClassName("labelIcon")}>
+            <List size={16} />
+          </div>
+          {label || name}
+        </b>
         <div className={getClassName("item")}>
           {Array.isArray(value) ? (
             value.map((item, i) => (
@@ -114,7 +126,12 @@ export const InputOrGroup = ({
 
     return (
       <label className={getClassName()}>
-        <div className={getClassName("label")}>{label || name}</div>
+        <div className={getClassName("label")}>
+          <div className={getClassName("labelIcon")}>
+            <ChevronDown size={16} />
+          </div>
+          {label || name}
+        </div>
         <select
           className={getClassName("input")}
           onChange={(e) => onChange(e.currentTarget.value)}
@@ -135,7 +152,12 @@ export const InputOrGroup = ({
   if (field.type === "textarea") {
     return (
       <label className={getClassName({ readOnly })}>
-        <div className={getClassName("label")}>{label || name}</div>
+        <div className={getClassName("label")}>
+          <div className={getClassName("labelIcon")}>
+            <Type size={16} />
+          </div>
+          {label || name}
+        </div>
         <textarea
           className={getClassName("input")}
           autoComplete="off"
@@ -157,7 +179,12 @@ export const InputOrGroup = ({
     return (
       <div className={getClassName()}>
         <div className={getClassName("radioGroup")}>
-          <div className={getClassName("label")}>{field.label || name}</div>
+          <div className={getClassName("label")}>
+            <div className={getClassName("labelIcon")}>
+              <CheckCircle size={16} />
+            </div>
+            {field.label || name}
+          </div>
 
           <div className={getClassName("radioGroupItems")}>
             {field.options.map((option) => (
@@ -186,7 +213,13 @@ export const InputOrGroup = ({
 
   return (
     <label className={getClassName({ readOnly })}>
-      <div className={getClassName("label")}>{label || name}</div>
+      <div className={getClassName("label")}>
+        <div className={getClassName("labelIcon")}>
+          {field.type === "text" && <Type size={16} />}
+          {field.type === "number" && <Hash size={16} />}
+        </div>
+        {label || name}
+      </div>
       <input
         className={getClassName("input")}
         autoComplete="off"

diff --git a/packages/core/components/InputOrGroup/styles.module.css b/packages/core/components/InputOrGroup/styles.module.css
@@ -20,12 +20,17 @@
 }
 
 .Input-label {
-  display: block;
+  display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
   font-weight: 500;
 }
 
+.Input-labelIcon {
+  color: var(--puck-color-grey-6);
+  margin-right: 4px;
+}
+
 .Input-input {
   border-width: 1px;
   border-style: solid;
@@ -62,6 +67,7 @@
 
 .Input-array > summary {
   color: var(--puck-color-grey-3);
+  font-size: var(--puck-font-size-xxs);
   padding: 12px 16px;
   position: relative;
 }
@@ -75,6 +81,13 @@
   border: none;
   margin: 0;
 }
+.Input-array > fieldset .Input + .Input-array > fieldset .Input {
+  margin-top: 16px;
+}
+
+.Input-array > fieldset .Input-label {
+  padding-bottom: 4px;
+}
 
 .Input-array .Input-action {
   background: transparent;