refactor: improve the styling of the text input component

Author: aradzie

packages/keybr-keyboard-ui/lib/custom/LayoutJson.tsx

@@ -5,10 +5,10 @@ export function LayoutJson() {
   const { layout } = useCustomLayout();
   return (
     <TextField
-      size="full"
       type="textarea"
       value={JSON.stringify(layout.toJSON(), null, 2)}
       readOnly={true}
+      rows={20}
     />
   );
 }

packages/keybr-keyboard-ui/lib/custom/LiveImport.tsx

@@ -22,7 +22,7 @@ export function LiveImport({
       <Field>Live import:</Field>
       <Field>
         <TextField
-          type="text"
+          size={6}
           value={String.fromCodePoint(inputData?.codePoint ?? 0x0020)}
           onKeyDown={(event) => {
             const { code } = event;

packages/keybr-widget/lib/components/textfield/TextField.module.less

@@ -2,21 +2,12 @@
 
 .root {
   .is-blurred();
-  display: inline-block;
-  min-block-size: @field-height;
   margin: 0;
-  padding-inline: 1rem;
-  padding-block: 0;
   border: 1px solid var(--TextField__border-color);
   color: var(--TextField__color);
   background-color: var(--TextField__background-color);
   font-family: var(--default-font-family);
   font-size: 0.85rem;
-  font-weight: normal;
-  font-style: normal;
-  line-height: normal;
-  text-align: start;
-  text-transform: none;
 }
 
 .root:focus {
@@ -26,7 +17,16 @@
   outline: none;
 }
 
+input.root {
+  display: inline-block;
+  min-block-size: @field-height;
+  padding-inline: 1rem;
+  padding-block: 0;
+}
+
 textarea.root {
+  display: block;
+  inline-size: 100%;
   min-block-size: 10em;
   padding-inline: 1rem;
   padding-block: 0.5rem;

packages/keybr-widget/lib/components/textfield/TextField.tsx

@@ -18,6 +18,7 @@ export const TextField = forwardRef(function TextField(
     name,
     placeholder,
     readOnly,
+    rows,
     size,
     tabIndex,
     title,
@@ -56,6 +57,7 @@ export const TextField = forwardRef(function TextField(
         name={name}
         placeholder={placeholder}
         readOnly={readOnly}
+        rows={rows}
         tabIndex={tabIndex}
         title={title}
         value={value}

packages/keybr-widget/lib/components/textfield/TextField.types.ts

@@ -14,6 +14,7 @@ export type TextFieldProps = {
   readonly name?: string;
   readonly placeholder?: string;
   readonly readOnly?: boolean;
+  readonly rows?: number;
   readonly size?: SizeName;
   readonly title?: string;
   readonly type?: TextFieldType;

packages/keybr-widget/lib/styles/size.less

@@ -35,21 +35,21 @@
 }
 
 .width6() {
-  min-inline-size: 6rem !important;
+  inline-size: 6rem !important;
 }
 
 .width10() {
-  min-inline-size: 10rem !important;
+  inline-size: 10rem !important;
 }
 
 .width16() {
-  min-inline-size: 16rem !important;
+  inline-size: 16rem !important;
 }
 
 .width24() {
-  min-inline-size: 24rem !important;
+  inline-size: 24rem !important;
 }
 
 .width32() {
-  min-inline-size: 32rem !important;
+  inline-size: 32rem !important;
 }

packages/page-practice/lib/settings/lesson/CustomTextLessonSettings.tsx

@@ -86,7 +86,6 @@ function CustomTextInput(): ReactNode {
       </Para>
       <Para>
         <TextField
-          size="full"
           type="textarea"
           placeholder={formatMessage({
             id: "settings.customTextInput.placeholder",

packages/page-practice/lib/settings/lesson/WordListLessonSettings.tsx

@@ -101,7 +101,6 @@ function WordListPreview({
       </FieldList>
       <Para>
         <TextField
-          size="full"
           type="textarea"
           value={[...lesson.wordList].join(", ")}
           readOnly={true}

packages/page-typing-test/lib/components/settings/text/CommonWordsSettings.tsx

@@ -92,7 +92,6 @@ function Content({ wordList }: { readonly wordList: WordList }): ReactNode {
 
       <Para>
         <TextField
-          size="full"
           type="textarea"
           value={wordList.join(", ")}
           readOnly={true}

packages/page-word-count/lib/WordCountPage.tsx

@@ -20,7 +20,6 @@ export function WordCountPage() {
         }
       />
       <TextField
-        size="full"
         type="textarea"
         placeholder={formatMessage({
           id: "wordCount.textInput.placeholder",