InlineInputText was mis-rendering underlying text and not absorbing text-align from parent element (#1016)

Author: Luke Bowerman

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.8.2]
+
+### Fixed
+
+- `InlineInputText` was mis-rendering underlying text and not absorbing `text-align` from parent element
+
 ## [0.8.1]
 
 ### Fixed

packages/components/src/Form/Inputs/InlineInputText/InlineInputText.tsx

@@ -97,6 +97,7 @@ const Input = styled.input.attrs({ type: 'text' })<InlineInputTextProps>`
   outline: none;
   padding: 0;
   position: absolute;
+  text-align: inherit;
   text-transform: inherit;
   top: 0;
   width: 100%;
@@ -105,10 +106,12 @@ const Input = styled.input.attrs({ type: 'text' })<InlineInputTextProps>`
 interface VisibleTextProps {
   displayValue?: string
 }
+
 const VisibleText = styled.div<VisibleTextProps>`
   white-space: pre;
   color: ${({ displayValue, theme }) =>
-    displayValue ? theme.colors.text0 : theme.colors.text5};
+    displayValue ? 'transparent' : theme.colors.text5};
+  text-align: inherit;
 `
 
 export const InlineInputText = styled(InlineInputTextInternal)`

packages/components/src/Form/Inputs/InlineInputText/__snapshots__/InlineInputText.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`InlineInputText renders an input with a placeholder 1`] = `
   outline: none;
   padding: 0;
   position: absolute;
+  text-align: inherit;
   text-transform: inherit;
   top: 0;
   width: 100%;
@@ -20,6 +21,7 @@ exports[`InlineInputText renders an input with a placeholder 1`] = `
 .c2 {
   white-space: pre;
   color: #939BA5;
+  text-align: inherit;
 }
 
 .c0 {
@@ -84,6 +86,7 @@ exports[`InlineInputText renders an input with no value 1`] = `
   outline: none;
   padding: 0;
   position: absolute;
+  text-align: inherit;
   text-transform: inherit;
   top: 0;
   width: 100%;
@@ -92,6 +95,7 @@ exports[`InlineInputText renders an input with no value 1`] = `
 .c2 {
   white-space: pre;
   color: #939BA5;
+  text-align: inherit;
 }
 
 .c0 {
@@ -156,14 +160,16 @@ exports[`InlineInputText renders an input with specific predefined value 1`] = `
   outline: none;
   padding: 0;
   position: absolute;
+  text-align: inherit;
   text-transform: inherit;
   top: 0;
   width: 100%;
 }
 
 .c2 {
   white-space: pre;
-  color: #262D33;
+  color: transparent;
+  text-align: inherit;
 }
 
 .c0 {