Style on-hand button

Had to update the form controller a little bit to hand buttons.

Also the popout is now a dialog element, which hides by default.

Getting some weird SCSS behaviour here.. maybe I'm trying to be too clever.

app/views/admin/products_v3/_table.html.haml

@@ -83,7 +83,8 @@
                   = variant_form.text_field :price, 'aria-label': t('admin.products_page.columns.price'), value: number_to_currency(variant.price, unit: '')&.strip # TODO: add a spec to prove that this formatting is necessary. If so, it should be in a shared form helper for currency inputs
                   = error_message_on variant, :price
                 %td.field.on-hand__wrapper
-                  %div.on-hand__popout
+                  %button.on-hand__button= variant.on_demand ? t(:on_demand) : variant.on_hand
+                  %dialog.on-hand__popout
                     .field
                       = variant_form.number_field :on_hand, 'aria-label': t('admin.products_page.columns.on_hand')
                       = error_message_on variant, :on_hand

app/webpacker/controllers/bulk_form_controller.js

@@ -100,6 +100,6 @@ export default class BulkFormController extends Controller {
   }
 
   #isChanged(element) {
-    return element.value != element.defaultValue;
+    return element.defaultValue !== undefined && element.value != element.defaultValue;
   }
 }

app/webpacker/css/admin/products_v3.scss

@@ -280,6 +280,52 @@
     &__wrapper {
       position: relative;
     }
+
+    &__button {
+      // override button styles
+      &.on-hand__button {
+        background: $color-tbl-cell-bg;
+        color: $color-txt-text;
+        white-space: nowrap;
+        border-color: transparent;
+        font-weight: normal;
+        padding-left: $border-radius; // Super compact
+        padding-right: 1rem; // Retain space for arrow
+        height: auto;
+
+        &:hover,
+        &:active,
+        &:focus {
+          background: $color-tbl-cell-bg;
+          color: $color-txt-text;
+          position: relative;
+        }
+      }
+
+      &:hover:not(:active):not(:focus) {
+        border-color: transparent;
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        // for some reason, sass ignores &:active, &:focus here. we could make this a mixin and include it in multiple rules instead
+        &:before {
+          // for some reason, sass seems to extends the selector to include every other :before selector in the app! probably causing the above, and potentially breaking other styles.
+          // extending .icon-chevron-down causes infinite loop in compilation. does @include work for classes?
+          font-family: FontAwesome;
+          text-decoration: inherit;
+          display: inline-block;
+          speak: none;
+          content: "\f078";
+
+          position: absolute;
+          right: $border-radius;
+          font-size: 0.67em;
+        }
+      }
+    }
+
     &__popout {
       position: absolute;
       top: -1em;

spec/javascripts/stimulus/bulk_form_controller_test.js

@@ -36,6 +36,7 @@ describe("BulkFormController", () => {
           <div data-record-id="1">
             <input id="input1a" type="text" value="initial1a">
             <input id="input1b" type="text" value="initial1b">
+            <button>a button is an element, but never changed</button>
           </div>
           <div data-record-id="2">
             <input id="input2" type="text" value="initial2">