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

…#191)
micromedio · May 26, 2022 · 37debed · 37debed · github-actions · May 26, 2022
1 parent 65e8bd0
commit 37debed
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 0 deletions.
diff --git a/.creevey/config.js b/.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,
     },

diff --git a/src/components/EditableField/Text/EditableFieldText.tsx b/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: "",

diff --git a/src/components/EditableField/Text/Text.stories.tsx b/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",

diff --git a/tests/images/Design System/EditableField/Text/With Unit/chrome.png b/tests/images/Design System/EditableField/Text/With Unit/chrome.png
diff --git a/tests/images/Design System/EditableField/Text/With Unit/firefox.png b/tests/images/Design System/EditableField/Text/With Unit/firefox.png