feat(EditableField): added unit prop to EditableField.Text DHP-1056

.creevey/config.js

@@ -7,13 +7,15 @@ module.exports = {
   browsers: {
     chrome: {
       browserName: 'chrome',
+      version: '101.0',
       // Define initial viewport size
       viewport: { width: 1024, height: 768 },
       // Increase parallel sessions
       limit: 2,
     },
     firefox: {
       browserName: 'firefox',
+      version: '99.0',
       viewport: { width: 1024, height: 768 },
       limit: 2,
     },

src/components/EditableField/Text/EditableFieldText.tsx

@@ -37,6 +37,7 @@ export interface EditableFieldTextProps {
   // When true renders a textarea instead of an input
   multiline?: boolean
   rows?: number
+  unit?: string
 }
 
 const EditableText = forwardRef<
@@ -57,6 +58,7 @@ const EditableText = forwardRef<
     controlsGroup = false,
     multiline,
     rows = 1,
+    unit,
   }: EditableFieldTextProps,
   ref
 ) {
@@ -279,6 +281,18 @@ const EditableText = forwardRef<
               }}
             />
           )}
+          {unit && (
+            <label
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                color: "text.40",
+              }}
+            >
+              {unit}
+            </label>
+          )}
           {
             {
               default: "",

src/components/EditableField/Text/Text.stories.tsx

@@ -36,6 +36,12 @@ Default.args = {
   value: "Handle 123",
 }
 
+export const WithUnit = Template.bind({})
+WithUnit.args = {
+  value: "123",
+  unit: "cm",
+}
+
 export const Loading = Template.bind({})
 Loading.args = {
   value: "Handle 123",