Dropdown button updates (#125)

* secondary button should always be white (not transparent)

* dropdown-menu-content min-width

* set minWidth

* set width/height

Author: kimispencer

src/Lumi/Components/Button.purs

@@ -221,7 +221,7 @@ styles = jss
               }
           , "&[data-color=\"secondary\"]":
               { extend: buttonSecondary
-              , backgroundColor: cssStringHSLA colors.transparent
+              , backgroundColor: cssStringHSLA colors.white
               , "&:hover":
                   { color: cssStringHSLA colors.primary
                   , borderColor: cssStringHSLA colors.primary
@@ -296,7 +296,7 @@ styles = jss
       }
 
     buttonSecondary =
-      { backgroundColor: cssStringHSLA colors.transparent
+      { backgroundColor: cssStringHSLA colors.white
       , color: cssStringHSLA colors.black
       , border: [ "1px", "solid", cssStringHSLA colors.black3 ]
       }

src/Lumi/Components/DropdownButton.purs

@@ -67,6 +67,7 @@ dropdownButton =
     initialState =
       { isOpen: false
       , root: Nothing
+      , width: 0.0
       , position:
           { bottom: 0.0
           , left: 0.0
@@ -110,9 +111,10 @@ dropdownButton =
           then close self
           else do
             p <- getAbsolutePosition el
+            d <- getDimensions el
             when state.isOpen $
               void $ requestAnimationFrame (capturePosition self ref (Just p0')) =<< HTML.window
-            self.setState _{ position = p }
+            self.setState _{ position = p, width = d.width }
 
     toggleOpen self refM = do
       self.setStateThen
@@ -149,6 +151,7 @@ dropdownButton =
                               { style: R.mergeStyles
                                   [ R.css
                                       { top: show (state.position.bottom + 4.0) <> "px"
+                                      , minWidth: show state.width <> "px"
                                       }
                                   , if maybe false (_ == "right") (toMaybe props.alignment) then
                                       R.css { left: "auto", right: show (state.position.right - 1.0) <> "px" }
@@ -269,6 +272,14 @@ dropdownIcon props =
 
 foreign import checkIsEventTargetInTree :: EffectFn2 Node Event Boolean
 
+getDimensions :: HTML.HTMLElement -> Effect { width :: Number, height :: Number }
+getDimensions el = do
+  { width, height } <- HTML.getBoundingClientRect el
+  pure
+    { width: width
+    , height: height
+    }
+
 getAbsolutePosition :: HTML.HTMLElement -> Effect { bottom :: Number, left :: Number, right :: Number }
 getAbsolutePosition el = do
   window <- HTML.window