💄 - style: alter the styling of forms

src/components/form/form/form.tsx

@@ -33,6 +33,9 @@ export type FormProps = Omit<
   /** The direction in which to render the form. */
   direction?: "vertical" | "horizontal";
 
+  /** Justification type. */
+  justify?: "baseline" | "stretch";
+
   /** The classname to use for the fieldset. */
   fieldsetClassName?: string;
 
@@ -103,6 +106,7 @@ export const Form: React.FC<FormProps> = ({
   errors,
   fields = [],
   fieldsetClassName = "mykn-form__fieldset",
+  justify,
   initialValues = {},
   secondaryActions = [],
   labelSubmit = "",
@@ -242,10 +246,12 @@ export const Form: React.FC<FormProps> = ({
 
             return (
               <FormControl
+                // @ts-expect-error - FIXME
                 key={field.id || index}
                 direction={direction}
                 error={message}
                 forceShowError={!validateOnChange}
+                justify={justify}
                 value={value}
                 onChange={defaultOnChange}
                 {...field}

src/components/form/formcontrol/formcontrol.scss

@@ -1,16 +1,16 @@
 .mykn-form-control {
+  align-items: baseline;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-v);
 
-  .mykn-input,
-  .mykn-select {
-    width: 100%;
-  }
-
   &--direction-horizontal {
     align-items: center;
     flex-direction: row;
     white-space: nowrap;
   }
+
+  &--justify-stretch {
+    align-items: stretch;
+  }
 }

src/components/form/formcontrol/formcontrol.tsx

@@ -24,6 +24,9 @@ export type FormControlProps = FormField & {
   /** The direction in which to render the form. */
   direction?: "vertical" | "horizontal";
 
+  /** Justification type. */
+  justify?: "baseline" | "stretch";
+
   /** An error message to show. */
   error?: string;
 
@@ -35,19 +38,22 @@ export type FormControlProps = FormField & {
  * Renders the correct form widget (based on its props shape) along with its
  * label and `error` message.
  * @param direction
+ * @param justify
  * @param error
  * @param forceShowError
  * @param props
  * @constructor
  */
 export const FormControl: React.FC<FormControlProps> = ({
   direction = "vertical",
+  justify = "baseline",
   error = "",
   forceShowError,
   ...props
 }) => {
   const [isDirty, setIsDirty] = useState(false);
   const id = useId();
+  // @ts-expect-error - fixme
   const _id = props.id || id;
   // Keep in sync with CheckboxGroup, possibly add constant?
   const htmlFor =
@@ -59,6 +65,7 @@ export const FormControl: React.FC<FormControlProps> = ({
       className={clsx(
         "mykn-form-control",
         `mykn-form-control--direction-${direction}`,
+        `mykn-form-control--justify-${justify}`,
       )}
     >
       {props.label && <Label htmlFor={htmlFor}>{props.label}</Label>}

src/components/form/input/input.scss

@@ -20,7 +20,6 @@
   padding-block: var(--mykn-input-padding-v);
   padding-inline: var(--mykn-input-padding-h);
   position: relative;
-  width: min(320px, 100%);
   max-width: 100%;
 
   &--pad-h {
@@ -62,6 +61,7 @@
     color: var(--typography-color-muted);
   }
 
+  &[maxlength],
   &[size] {
     width: auto;
   }

src/components/form/input/input.tsx

@@ -7,7 +7,7 @@ import "./input.scss";
 
 export type InputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  "value" | "onChange"
+  "size" | "value" | "onChange"
 > & {
   /** Component to use as icon. */
   icon?: React.ReactNode;

src/templates/login/login.tsx

@@ -73,6 +73,7 @@ export const LoginTemplate: React.FC<LoginTemplateProps> = ({
           {slotLogo || CustomLogo || <Logo />}
           <Hr />
           <Form
+            justify="stretch"
             labelSubmit={ucFirst(_labelLogin)}
             secondaryActions={secondaryActions}
             {...formProps}