[#49] update Loading spinner

bower.json

@@ -18,6 +18,7 @@
     "purescript-coroutines": "^5.0.0",
     "purescript-fixed-precision": "^4.0.0",
     "purescript-foldable-traversable": "^4.0.0",
+    "purescript-foreign-generic": "^10.0.0",
     "purescript-foreign-object": ">= 1.0.0 < 3.0.0",
     "purescript-generics-rep": "^6.0.0",
     "purescript-foreign": "^5.0.0",

docs/Examples/Button.example.purs

@@ -114,6 +114,10 @@ docs =
         , example
             $ button primary { buttonState = Loading, size = ExtraLarge }
         ]
+      , [ h4_ "Secondary + Loading"
+        , example
+            $ button secondary { buttonState = Loading }
+        ]
       ]
 
 sections :: Array (Array JSX) -> Array JSX

docs/Examples/Loader.example.purs

@@ -2,8 +2,10 @@ module Lumi.Components.Examples.Loader where
 
 import Prelude
 
+import Color (cssStringHSLA, desaturate, lighten)
 import Data.Nullable (null)
-import Lumi.Components.Column (column_)
+import Lumi.Components.Color (Color(..), colorNames, colors)
+import Lumi.Components.Column (column, column_)
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Example (example)
 import React.Basic (JSX)
@@ -13,5 +15,123 @@ docs :: JSX
 docs =
   column_
     [ example $
-        loader { style: R.css {}, testId: null }
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.white
+                , bgColor: colorNames.primary
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA $ colors.primary }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black1
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black2
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black3
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black4
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black5
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black6
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black7
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
+    , example $
+        column {
+          children:
+            [ loader
+                { style: R.css {}
+                , testId: null
+                , color: colorNames.black8
+                , bgColor: colorNames.white
+                }
+            ]
+          , style: R.css { backgroundColor: cssStringHSLA colors.white }
+        }
     ]

src/Lumi/Components/Button.purs

@@ -7,15 +7,16 @@ import Data.Array as Array
 import Data.Char (fromCharCode)
 import Data.Foldable (fold)
 import Data.Maybe (Maybe(..))
-import Data.Nullable (Nullable, toNullable)
+import Data.Newtype (unwrap)
+import Data.Nullable (Nullable, toMaybe, toNullable)
 import Data.String (null)
 import Data.String.CodeUnits (fromCharArray)
 import Effect.Uncurried (mkEffectFn1)
 import Foreign (isNull, isUndefined, unsafeToForeign)
 import JSS (JSS, jss)
 import Lumi.Components.Color (ColorName, colorNames, colors)
 import Lumi.Components.Icon (IconType, icon)
-import Lumi.Components.Loader (spinnerMixin)
+import Lumi.Components.Loader (loader)
 import Lumi.Components.Size (Size(..))
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
@@ -83,9 +84,32 @@ button = makeStateless component render
             }
       where
         children =
-          if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
-            then props.title
-            else invisibleSpace -- preserves button size
+          case props.buttonState of
+            Loading ->
+              loader
+                  { style:
+                      case props.size of
+                        Small -> R.css { width: "12px", height: "12px" }
+                        Medium -> R.css { width: "18px", height: "18px" }
+                        Large -> R.css { width: "24px", height: "24px" }
+                        ExtraLarge -> R.css { width: "34px", height: "34px" }
+                  , testId: toNullable Nothing
+                  , color:
+                      case map unwrap $ toMaybe props.color of
+                        Just "primary" -> colorNames.white
+                        Just "secondary" -> colorNames.secondary
+                        Just _ -> colorNames.secondary
+                        Nothing -> colorNames.secondary
+                  , bgColor:
+                      case toMaybe props.color of
+                        Nothing -> colorNames.white
+                        Just c -> c
+                  }
+            _ ->
+              if not null props.title && not (isNull || isUndefined) (unsafeToForeign props.title)
+                then R.text props.title
+                else R.text invisibleSpace -- preserves button size
+
 
 defaults :: ButtonProps
 defaults =
@@ -191,8 +215,7 @@ styles = jss
           , "&:hover": { backgroundColor: cssStringHSLA $ darken 0.1 colors.primary }
           , "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 colors.primary }
           , "&:disabled, &[data-loading=\"true\"]":
-              { backgroundColor: cssStringHSLA colors.primary2
-              , cursor: "default"
+              { cursor: "default"
               }
           , "&:focus":
               { outline: 0
@@ -231,19 +254,8 @@ styles = jss
               , "&:disabled, &[data-loading=\"true\"]":
                   { color: cssStringHSLA colors.black2
                   , borderColor: cssStringHSLA colors.black3
-                  }
-              }
-          , "&[data-loading=\"true\"]":
-              { "&:after": spinnerMixin { radius: "16px", borderWidth: "2px" }
-              , "@media (min-width: $break-point-mobile)":
-                  { "&[data-size=\"small\"]":
-                      { "&:after": spinnerMixin { radius: "12px", borderWidth: "2px" }
-                      }
-                  , "&[data-size=\"large\"]":
-                      { "&:after": spinnerMixin { radius: "24px", borderWidth: "3px" }
-                      }
-                  , "&[data-size=\"extra-large\"]":
-                      { "&:after": spinnerMixin { radius: "34px", borderWidth: "4px" }
+                  , "& lumi-loader":
+                      { "&::after": { background: cssStringHSLA colors.white }
                       }
                   }
               }
@@ -309,5 +321,8 @@ styles = jss
       , "&:active": { backgroundColor: cssStringHSLA $ darken 0.15 value }
       , "&:disabled, &[data-loading=\"true\"]":
           { backgroundColor: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value
+          , "& lumi-loader":
+              { "&::after": { background: cssStringHSLA $ lighten 0.4137 $ desaturate 0.1972 $ value }
+              }
           }
       }

src/Lumi/Components/Color.purs

@@ -9,12 +9,15 @@ module Lumi.Components.Color
 import Color (rgb, rgba)
 import Color as C
 import Data.Newtype (class Newtype)
+import Foreign.Generic (class Decode, class Encode)
 
 type Color = C.Color
 
 newtype ColorName = ColorName String
 
 derive instance newtypeColorName :: Newtype ColorName _
+derive newtype instance decodeColorName :: Decode ColorName
+derive newtype instance encodeColorName :: Encode ColorName
 
 type ColorMap a =
   { black :: a
@@ -89,4 +92,3 @@ colorNames =
   , white: ColorName "white"
   , transparent: ColorName "transparent"
   }
-

src/Lumi/Components/Form.purs

@@ -62,7 +62,7 @@ import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Class (liftEffect)
 import JSS (JSS, jss)
-import Lumi.Components.Color (colors)
+import Lumi.Components.Color (colorNames, colors)
 import Lumi.Components.Column (column)
 import Lumi.Components.FetchCache as FetchCache
 import Lumi.Components.Form.Defaults (formDefaults) as Defaults
@@ -448,10 +448,13 @@ asyncSelectByKey getData loadOptions fromId toId toSelectOption optionRenderer =
               Nothing -> empty
               Just _  -> alignToInput
                 case data_ of
-                  Nothing     -> loader
-                    { style: R.css { width: "20px", height: "20px", borderWidth: "2px" }
-                    , testId: toNullable Nothing
-                    }
+                  Nothing     ->
+                    loader
+                      { style: R.css { width: "20px", height: "20px", borderWidth: "2px" }
+                      , testId: toNullable Nothing
+                      , color: colorNames.secondary
+                      , bgColor: colorNames.white
+                      }
                   Just data_' -> text body
                         { children = [ optionRenderer data_' ]
                         }