From b6b0d685769152b9a7f612868554fcb2a2a1d4fd Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 17 Jul 2024 20:18:19 +0200
Subject: [PATCH] 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/form-kit/components/fk/collection.gjs |  2 +-
 .../components/fk/control/password.gjs        |  2 +-
 .../common/form-kit/_collection.scss          |  5 ++
 .../common/form-kit/_control-input.scss       |  5 +-
 .../common/form-kit/_control-password.scss    | 47 +++++++++++++++----
 .../stylesheets/common/form-kit/_index.scss   |  1 +
 .../stylesheets/common/form-kit/_row.scss     | 22 ---------
 7 files changed, 49 insertions(+), 35 deletions(-)
 create mode 100644 app/assets/stylesheets/common/form-kit/_collection.scss

diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/collection.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/collection.gjs
index b6aab139f01..1642c1fbcfb 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/collection.gjs
+++ b/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
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs
index 669d7a62755..59161c48a3f 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/password.gjs
+++ b/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
diff --git a/app/assets/stylesheets/common/form-kit/_collection.scss b/app/assets/stylesheets/common/form-kit/_collection.scss
new file mode 100644
index 00000000000..2f7303308f1
--- /dev/null
+++ b/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);
+}
diff --git a/app/assets/stylesheets/common/form-kit/_control-input.scss b/app/assets/stylesheets/common/form-kit/_control-input.scss
index 5a6bc74ffc4..bb694766afc 100644
--- a/app/assets/stylesheets/common/form-kit/_control-input.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/form-kit/_control-password.scss b/app/assets/stylesheets/common/form-kit/_control-password.scss
index c612b5052f3..ced73938360 100644
--- a/app/assets/stylesheets/common/form-kit/_control-password.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-password.scss
@@ -1,27 +1,54 @@
 .form-kit__control-password {
-  @include default-input;
-  border: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
+  width: auto !important;
+  height: 100%;
+  padding: 0 0 0 0.5em !important;
   margin: 0 !important;
-  appearance: none !important;
-  outline: none !important;
+  border: 0 !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;
-  padding: 0 !important;
-  width: inherit !important;
+  max-width: 100%;
+  width: auto !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);
+  }
 }
diff --git a/app/assets/stylesheets/common/form-kit/_index.scss b/app/assets/stylesheets/common/form-kit/_index.scss
index 53c04bf0cf1..7e8ef2e852b 100644
--- a/app/assets/stylesheets/common/form-kit/_index.scss
+++ b/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";
diff --git a/app/assets/stylesheets/common/form-kit/_row.scss b/app/assets/stylesheets/common/form-kit/_row.scss
index ead3b01762e..290d16286a2 100644
--- a/app/assets/stylesheets/common/form-kit/_row.scss
+++ b/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;