diff --git a/packages/solid/components/Input/Input.styles.ts b/packages/solid/components/Input/Input.styles.ts index 3be95614..4b708fbd 100644 --- 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(container); -const InputContainer = makeComponentStyles(input); const Text = makeComponentStyles(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 index 6a1bbe08..4b24d451 100644 --- a/packages/solid/components/Input/Input.tsx +++ b/packages/solid/components/Input/Input.tsx @@ -109,8 +109,8 @@ const Input: Component = 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 ]} > = props => { styles.Text.base ]} > - {formatTitleText()} + {formatTitleText() === '' ? ' ' : formatTitleText()} ); diff --git a/packages/solid/components/Input/Input.types.ts b/packages/solid/components/Input/Input.types.ts index 8a13f113..4fc61e00 100644 --- a/packages/solid/components/Input/Input.types.ts +++ b/packages/solid/components/Input/Input.types.ts @@ -67,7 +67,6 @@ export interface InputStyleProperties { export interface InputStyles { tone: Tone; Container: NodeStyleSet; - InputContainer: NodeStyleSet; Text: TextStyleSet; }