fix(Input): adds placeholder space if no title is present to force In…

…put render (#3) * fix(Input): rebasing * fix(Input): uses or operator instead of conditional
rdkcentral · Jun 28, 2024 · 5b6d5e1 · 5b6d5e1
1 parent f71e7b0
commit 5b6d5e1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 24 deletions.
diff --git a/packages/solid/components/Input/Input.styles.ts b/packages/solid/components/Input/Input.styles.ts
@@ -24,24 +24,10 @@ import type { InputStyles, InputConfig } from './Input.types.js';
 const { Input: { defaultTone, ...themeStyles } = { themeStyles: {} } } = theme?.componentConfig;
 
 const container: InputConfig = {
-  themeKeys: {
-    justifyContent: 'justify'
-  },
-  base: {
-    display: 'flex',
-    justifyContent: 'flexStart',
-    flexDirection: 'column',
-    width: 100,
-    height: 100,
-    actualTitle: ''
-  },
-  themeStyles
-};
-
-const input: InputConfig = {
   themeKeys: {
     borderRadius: 'radius',
-    color: 'backgroundColor'
+    color: 'backgroundColor',
+    justifyContent: 'justify'
   },
   base: {
     // TODO clew uses strokeColor, but we currently don't account for nested properties (border.color)
@@ -54,7 +40,8 @@ const input: InputConfig = {
     color: theme.color.interactiveNeutral,
     contentColor: theme.color.fillInverse,
     borderRadius: theme.radius.sm,
-    marginX: theme.spacer.xxxl
+    marginX: theme.spacer.xxxl,
+    actualTitle: ''
   },
   themeStyles
 };
@@ -72,14 +59,12 @@ const text: InputConfig = {
 };
 
 const Container = makeComponentStyles<InputStyles['Container']>(container);
-const InputContainer = makeComponentStyles<InputStyles['InputContainer']>(input);
 const Text = makeComponentStyles<InputStyles['Text']>(text);
 
 const styles: InputStyles = {
   tone: defaultTone || 'neutral',
   Container,
-  Text,
-  InputContainer
+  Text
 };
 
 export default styles;
diff --git a/packages/solid/components/Input/Input.tsx b/packages/solid/components/Input/Input.tsx
@@ -109,8 +109,8 @@ const Input: Component<InputProps> = props => {
       // @ts-expect-error TODO type needs to be fixed in framework
       style={[
         props.style, //
-        styles.InputContainer.tones[props.tone ?? styles.tone],
-        styles.InputContainer.base
+        styles.Container.tones[props.tone ?? styles.tone],
+        styles.Container.base
       ]}
     >
       <Text
@@ -121,7 +121,7 @@ const Input: Component<InputProps> = props => {
           styles.Text.base
         ]}
       >
-        {formatTitleText()}
+        {formatTitleText() || ' '}
       </Text>
     </View>
   );

diff --git a/packages/solid/components/Input/Input.types.ts b/packages/solid/components/Input/Input.types.ts
@@ -85,7 +85,6 @@ export interface InputStyleProperties {
 export interface InputStyles {
   tone: Tone;
   Container: NodeStyleSet;
-  InputContainer: NodeStyleSet;
   Text: TextStyleSet;
 }