Share button state definition between original and new button

Author: Madeline Trotter

src/Lumi/Components/Button.purs

@@ -1,4 +1,7 @@
-module Lumi.Components.Button where
+module Lumi.Components.Button
+  ( module Lumi.Components.Button
+  , module Lumi.Components2.Button
+  ) where
 
 import Prelude
 
@@ -16,13 +19,12 @@ import Lumi.Components.Color (ColorName, colorNames, colors)
 import Lumi.Components.Icon (IconType, icon)
 import Lumi.Components.Loader (spinnerMixin)
 import Lumi.Components.Size (Size(..))
+import Lumi.Components2.Button (ButtonState(..))
 import React.Basic.Classic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
 import React.Basic.DOM as R
 import React.Basic.Events (EventHandler)
 
-data ButtonState = Enabled | Disabled | Loading
-
 type CommonButtonProps rest =
   { accessibilityLabel :: Nullable String
   , color :: Nullable ColorName

src/Lumi/Components2/Button.purs

@@ -16,7 +16,7 @@ module Lumi.Components2.Button
   , varButtonHueDisabled, varButtonGrey1, varButtonGrey2
   , varButtonBlack, varButtonWhite
 
-  , submit, reset, onPress, onPress'
+  , submit, reset, state, onPress, onPress'
   , autoFocus, tabIndex, ariaLabel
   ) where
 
@@ -31,7 +31,6 @@ import Effect.Class (liftEffect)
 import Effect.Unsafe (unsafePerformEffect)
 import Foreign.Object (fromHomogeneous)
 import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, propsModifier, unsafeMaybeToNullableAttr)
-import Lumi.Components.Button (invisibleSpace)
 import Lumi.Components.Color (ColorMap, shade)
 import Lumi.Components.Size (Size(..))
 import Lumi.Components2.Box as Box
@@ -523,15 +522,29 @@ varButtonWhite = var "--button-white"
 -- | rather than providing an `onPress` action to the button
 -- | itself.
 submit :: forall c. ButtonState -> ButtonModifier c
-submit state = propsModifier _ { type = Submit, state = state }
+submit s = propsModifier _ { type = Submit, state = s }
 
 -- | A form reset button. This helper takes the button state
 -- | as an argument because a form's buttons are generally
 -- | tied to the validity and `onSubmit` behavior of the form,
 -- | rather than providing an `onPress` action to the button
 -- | itself.
 reset :: forall c. ButtonState -> ButtonModifier c
-reset state = propsModifier _ { type = Reset, state = state }
+reset s = propsModifier _ { type = Reset, state = s }
+
+-- | Set the button state. Generally you'll want to use `submit` or
+-- | `reset` instead, but this can still be useful for `onPress`
+-- | buttons which need to be disabled while some page state is
+-- | invalid or share in a collective page loading state.
+-- |
+-- | Note: When a page is in a loading state, any buttons which
+-- |   were _not_ interacted with should be set to `Disabled`, not
+-- |   `Loading`. A row of buttons containing the same spinner
+-- |   looks strange. You also do not need to track which button
+-- |   was interacted with, usually, because the `onPress` loading
+-- |   state will override this one within the button pressed.
+state :: forall c. ButtonState -> ButtonModifier c
+state s = propsModifier _ { state = s }
 
 -- | A button with customized `onPress` behavior. The button will
 -- | automatically display a loading state while the action is in-progress.
@@ -558,3 +571,8 @@ tabIndex i = propsModifier _ { tabIndex = Just i }
 -- | label to "Close".
 ariaLabel :: forall c. String -> ButtonModifier c
 ariaLabel l = propsModifier _ { ariaLabel = Just l }
+
+----------------------------
+
+invisibleSpace :: String
+invisibleSpace = "\x2063"