Merge pull request #117 from mergestat/editable-text-adjustments

chore(editable-text): Adjusting Editable Text component
mergestat · Feb 10, 2023 · a75c360 · a75c360
2 parents f79a838 + 3837229
commit a75c360
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 33 deletions.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mergestat/blocks",
-  "version": "1.5.41",
+  "version": "1.5.43",
   "description": "Set of UI components for MergeStat project",
   "license": "MIT",
   "repository": {

diff --git a/packages/blocks/src/components/molecules/EditableText/EditableText.tsx b/packages/blocks/src/components/molecules/EditableText/EditableText.tsx
@@ -3,18 +3,17 @@ import React from 'react';
 import { ColoredBox } from '../../atoms/ColoredBox';
 import { Input } from '../../atoms/Form';
 
-interface InputEditableText extends React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
-> {
-  error?: boolean
-}
-
 export type EditableTextProps = {
   className?: string
   icon?: React.ReactElement
-  title: InputEditableText
-  desc: InputEditableText
+  title: React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  >
+  desc: React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  >
 }
 
 export const EditableText: React.FC<EditableTextProps> = ({ className, icon, title, desc }) => {
@@ -26,22 +25,31 @@ export const EditableText: React.FC<EditableTextProps> = ({ className, icon, tit
         {icon}
       </ColoredBox>}
       <div className='ml-2 flex-grow'>
-        <Input variant={title.error ? 'ghost-error' : 'ghost'}
-          className={cx(
-            't-input-title leading-none', {
-            't-input-readonly': title.readOnly,
-            't-input-onclick': !!title.onClick
-          })}
-          {...title}
-        />
-        <Input variant={desc.error ? 'ghost-error' : 'ghost'}
-          className={cx(
-            't-input-desc leading-none', {
-            't-input-readonly': desc.readOnly,
-            't-input-onclick': !!desc.onClick
-          })}
-          {...desc}
-        />
+        {title.readOnly ?
+          <h4 onClick={title.onClick}
+            className={cx(
+              't-h4 px-3 mb-0 bg-transparent', {
+              't-input-onclick': !!title.onClick
+            })}>
+            {title?.value}
+          </h4>
+          : <Input variant={title.required ? 'ghost-error' : 'ghost'}
+            className={cx('t-input-title leading-none')}
+            {...title}
+          />}
+
+        {desc.readOnly ?
+          <p onClick={desc.onClick}
+            className={cx(
+              't-h4 px-3 mb-0 bg-transparent t-input-desc', {
+              't-input-onclick': !!desc.onClick
+            })}>
+            {desc?.value}
+          </p>
+          : <Input variant={desc.required ? 'ghost-error' : 'ghost'}
+            className={cx('t-input-desc leading-none')}
+            {...desc}
+          />}
       </div>
     </div>
   )

diff --git a/packages/blocks/styles/components/t-input.css b/packages/blocks/styles/components/t-input.css
@@ -81,16 +81,11 @@
 }
 
 .t-input-desc {
-  @apply text-sm
+  @apply font-normal
+         text-sm
          text-gray-500
 }
 
-.t-input-readonly {
-  @apply hover_bg-transparent
-         focus_bg-transparent
-         focus_border-transparent
-}
-
 .t-input-onclick {
   @apply cursor-pointer
          hover_text-blue-600