DEV: various form-kit tweaks (#27950)

- removes unused css code
- improves password control sizing
- adds more spacing between collection items
- correct a typo in collection class

---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>

app/assets/javascripts/discourse/app/form-kit/components/fk/collection.gjs

@@ -14,7 +14,7 @@ export default class FKCollection extends Component {
   }
 
   <template>
-    <div class="form-kit__colection">
+    <div class="form-kit__collection">
       {{#each this.collectionValue key="index" as |data index|}}
         {{yield
           (hash

app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs

@@ -54,7 +54,7 @@ export default class FKControlInput extends Component {
     <div
       class={{concatClass
         "form-kit__control-password-wrapper"
-        (if this.isFocused "--focused")
+        (if this.isFocused "is-focused")
       }}
     >
       <input

app/assets/stylesheets/common/form-kit/_collection.scss

@@ -0,0 +1,5 @@
+.form-kit__collection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-kit-gutter-y);
+}

app/assets/stylesheets/common/form-kit/_control-input.scss

@@ -1,7 +1,6 @@
 .form-kit__control-input {
   @include default-input;
   z-index: 1;
-
   margin: 0 !important;
   width: 100% !important;
   min-width: auto !important;
@@ -39,6 +38,10 @@
   background: var(--primary-low);
   display: flex;
   align-items: center;
+
+  @include breakpoint(mobile-large) {
+    height: 2.25em;
+  }
 }
 
 .form-kit__before-input {

app/assets/stylesheets/common/form-kit/_control-password.scss

@@ -1,27 +1,54 @@
 .form-kit__control-password {
-  @include default-input;
+  width: auto !important;
-  border: 0 !important;
+  height: 100%;
-  height: 100% !important;
+  padding: 0 0 0 0.5em !important;
-  width: 100% !important;
   margin: 0 !important;
-  appearance: none !important;
+  border: 0 !important;
-  outline: none !important;
+  min-width: 0;
+
+  @include breakpoint(mobile-large) {
+    width: 100% !important;
+  }
 
   &:hover,
   &:focus {
     border: 0 !important;
+    outline: 0 !important;
   }
 }
 
 .form-kit__control-password-wrapper {
   display: flex;
-  @include default-input;
+  max-width: 100%;
-  padding: 0 !important;
+  width: auto !important;
-  width: inherit !important;
+  height: 2em;
+  background: var(--secondary);
+  border: 1px solid var(--primary-low-mid);
+  border-radius: var(--d-input-border-radius);
+  box-sizing: border-box;
 
-  &.--focused {
+  @include breakpoint(mobile-large) {
+    width: 100% !important;
+    height: 2.25em;
+  }
+
+  .form-kit__control-password-toggle {
+    height: 100%;
+  }
+
+  &.is-focused {
     border-color: var(--tertiary);
     outline: 2px solid var(--tertiary);
     outline-offset: -2px;
   }
+
+  &:hover:not(:disabled) {
+    .discourse-no-touch & {
+      border-color: var(--tertiary);
+    }
+  }
+
+  &.has-errors {
+    border-color: var(--danger);
+  }
 }

app/assets/stylesheets/common/form-kit/_index.scss

@@ -2,6 +2,7 @@
 @import "_alert";
 @import "_char-counter";
 @import "_col";
+@import "_collection";
 @import "_conditional-display";
 @import "_container";
 @import "_control-checkbox";

app/assets/stylesheets/common/form-kit/_row.scss

@@ -1,25 +1,3 @@
-// .form-kit__row {
-//   display: grid;
-//   grid-auto-flow: column;
-//   column-gap: 0.5em;
-//   row-gap: 0.25em;
-//   max-width: 100%;
-
-//   .form-kit__col,
-//   .form-kit__container {
-//     display: contents;
-//   }
-
-//   .form-kit__container-content {
-//     width: auto !important;
-//   }
-
-//   .form-kit__button {
-//     grid-row: 2;
-//     height: 2em;
-//   }
-// }
-
 .form-kit__row {
   display: flex;
   flex-wrap: wrap;