Fixes

eldh · Oct 4, 2019 · 3b17516 · 3b17516
1 parent fb6c9a8
commit 3b17516
Show file tree

Hide file tree

Showing 13 changed files with 344 additions and 164 deletions.
diff --git a/TODO.md b/TODO.md
@@ -6,4 +6,5 @@
 - Use border radii
 - Easier access to border styles
 - More font weights?
+- Grid component
 - Same kindo of api for borders as for margin/padding
diff --git a/revy/src/Box.re b/revy/src/Box.re
@@ -1,7 +1,6 @@
-[@bs.config {jsx: 3}];
-
 let useBoxStyle =
     (
+      ~position as position_,
       ~align as align_,
       ~alignSelf as alignSelf_,
       ~alignContent as alignContent_,
@@ -24,6 +23,7 @@ let useBoxStyle =
 
   [
     Css.[
+      position(position_),
       alignSelf(alignSelf_),
       alignItems(align_),
       backgroundColor(Core.Styles.useColor(backgroundColor_)),
@@ -51,29 +51,33 @@ let make =
       ~tag="div",
       ~a11yTitle as _a11yTitle=?,
       ~style as style_=[],
+      ~position=`relative,
       ~align=`flexStart,
       ~alignSelf=`auto,
       ~alignContent=`flexStart,
       ~backgroundColor=`transparent,
       ~grow=1.,
       ~wrap=`wrap,
-      ~shrink=1.,
+      ~shrink=0.,
       ~basis=`auto,
       ~justify=`flexStart,
       ~direction=`column,
-      ~padding=`padding(`noSpace),
-      ~margin=`margin(`noSpace),
+      ~padding=?,
+      ~margin=?,
       ~height=`auto,
       ~width=`auto,
       ~overflow=`initial,
       ~borderRadius=Css.px(0),
+      ~onMouseOver=?,
+      ~onMouseOut=?,
       ~domProps=?,
       ~children=?,
       (),
     ) => {
   let style =
     [
       useBoxStyle(
+        ~position,
         ~align,
         ~alignSelf,
         ~alignContent,
@@ -97,6 +101,6 @@ let make =
     |> List.concat;
 
   <Core.BackgroundColorContext.Provider value=backgroundColor>
-    <View tag style domProps> children </View>
+    <View tag style domProps ?onMouseOut ?onMouseOver> children </View>
   </Core.BackgroundColorContext.Provider>;
 };
diff --git a/revy/src/Button.re b/revy/src/Button.re
@@ -16,7 +16,7 @@ let useButtonStyles =
     (
       ~variant,
       ~outline as outline_,
-      ~margin as margin_,
+      ~margin as margin_=?,
       ~size,
       ~disabled as _disabled_,
       (),
@@ -34,6 +34,7 @@ let useButtonStyles =
       textDecoration(`none),
       textAlign(`center),
       alignContent(`center),
+      position(`relative),
       flexGrow(0.),
       overflow(`visible),
       cursor(`pointer),
@@ -52,7 +53,7 @@ let useButtonStyles =
       | Error => `error
       | Success => `success
       | Primary => `primary
-      | Secondary => `highlight((50, `neutral))
+      | Secondary => `highlight((1, `body))
       };
     let styleStyles = [
       outline_
@@ -96,12 +97,13 @@ let useButtonStyles =
         opacity(0.7),
         hover([backgroundColor(Styles.useColor(bgVariant))]),
       ]),
-      focus([outlineStyle(`none), ...Animations.focus]),
+      focus([outlineStyle(`none)]),
+      selector(":focus:not(:active)", Animations.focus),
       active([
         backgroundColor(
           outline_
             ? outlineHighlightBg(0.15)
-            : Styles.useColor(~highlight=15, bgVariant),
+            : Styles.useColor(~highlight=5, bgVariant),
         ),
       ]),
       ...styleStyles,
@@ -172,4 +174,53 @@ module Link = {
       children
     </a>;
   };
+};
+module Round = {
+  [@react.component]
+  let make =
+      (
+        ~onClick,
+        ~variant=Secondary,
+        ~size=Medium,
+        ~disabled=false,
+        ~outline=false,
+        ~style=[],
+        ~onlyFocusOnTab=true,
+        ~margin=?,
+        ~children,
+        (),
+      ) => {
+    let w =
+      switch (size) {
+      | Small => `triple
+      | Medium => `quad
+      | Large => `number(6)
+      };
+    let btnStyle =
+      useButtonStyles(~variant, ~outline, ~margin?, ~size, ~disabled, ());
+    <TouchableOpacity
+      tag="button"
+      onlyFocusOnTab
+      justify=`center
+      align=`center
+      alignContent=`center
+      style={
+        [
+          btnStyle,
+          Css.[
+            width(Styles.useSpace(w)),
+            height(Styles.useSpace(w)),
+            padding(px(0)),
+            borderRadius(pct(50.)),
+          ],
+          style,
+        ]
+        |> List.concat
+      }
+      basis=`auto
+      onPress=onClick
+      domProps={"disabled": disabled}>
+      children
+    </TouchableOpacity>;
+  };
 };
diff --git a/revy/src/Card.re b/revy/src/Card.re
@@ -1,20 +1,27 @@
 open Core;
 
-let useCardStyle = (~padding as p, ~margin as m, ()) => {
+let useCardStyle = (~padding as p=?, ~margin as m=?, ()) => {
+  let alpha = Styles.useIsLight() ? 0.05 : 0.2;
   [
     Css.[
-      backgroundColor(Styles.useColor(`highlight((3, `body)))),
+      backgroundColor(
+        Styles.(
+          useColor(useIsLight() ? `transparent : `highlight((4, `body)))
+        ),
+      ),
       flexWrap(`wrap),
+      flexDirection(`column),
+      alignItems(`stretch),
       borderRadius(Css.px(6)),
-      borderWidth(px(1)),
-      borderColor(Styles.useColor(`highlight((8, `body)))),
-      borderStyle(`solid),
+      // borderWidth(px(1)),
+      // borderColor(Styles.useColor(`highlight((8, `body)))),
+      // borderStyle(`solid),
       unsafe("willChange", "transition"),
-      boxShadow(
-        ~y=px(4),
-        ~blur=px(10),
-        rgba(0, 0, 0, Styles.useIsLight() ? 0.15 : 0.45),
-      ),
+      boxShadows([
+        `shadow("0 0px 4px " ++ string_of_rgba(0, 0, 0, alpha)),
+        `shadow("0 5px 12px " ++ string_of_rgba(0, 0, 0, alpha)),
+        `shadow("0 10px 16px " ++ string_of_rgba(0, 0, 0, alpha)),
+      ]),
     ],
     Styles.usePadding(p),
     Styles.useMargin(m),
@@ -30,12 +37,12 @@ let make =
       ~style as style_=[],
       ~grow=1.,
       ~padding=`padding(`single),
-      ~margin=`margin(`noSpace),
+      ~margin=?,
       ~domProps=?,
       ~children=?,
       (),
     ) => {
-  let style = [useCardStyle(~padding, ~margin, ()), style_] |> List.concat;
+  let style = [useCardStyle(~padding, ~margin?, ()), style_] |> List.concat;
 
   <View tag style domProps> children </View>;
 };
diff --git a/revy/src/Checkbox.re b/revy/src/Checkbox.re
@@ -57,9 +57,8 @@ let make =
       ~id="",
       ~disabled=false,
       ~styles=?,
-      ~onFocus=ignore,
-      ~onBlur=ignore,
-      ~margin=`margin(`noSpace),
+      ~onFocus=?,
+      ~onBlur=?,
       ~checked,
       ~value,
       ~name="",
@@ -79,8 +78,8 @@ let make =
       id
       disabled
       onChange
-      onFocus
-      onBlur
+      ?onFocus
+      ?onBlur
       label
       className={
         (