[#135] Change direction of composition in propsModifier

docs/Examples2/QRCode.example.purs

@@ -48,13 +48,13 @@ qrcodeExample =
       { qrcode, url } <- useQRCode ECLLow props.value
       pure
         $ box
-        <<< Box._align Center
+        $ Box._align Center
         $ _
             { content =
               [ qrcode
-                  <<< Border.border
-                  >>> Border._round
-                  >>> S.styleModifier_
+                  $ Border.border
+                  $ Border._round
+                  $ S.styleModifier_
                       ( S.css
                           { padding: S.int 16
                           , width: S.int 140

src/Lumi/Components.purs

@@ -40,8 +40,14 @@ type PropsModifier props
     (LumiProps props -> LumiProps props)
 
 -- | Lift a `props -> props` function for composition with other `PropsModifier` functions.
+-- |
+-- | The composition of `PropsModifier`s should be read like that of an optic,
+-- | that is, from left to right. As an example, if you have props modifiers
+-- | `a` and `b`, where both modify the same property, their composition
+-- | `a <<< b` favours the modifications in `b`, as it first applies `a`, and
+-- | then `b`.
 propsModifier :: forall props. (LumiProps props -> LumiProps props) -> PropsModifier props
-propsModifier = (>>>)
+propsModifier = (<<<)
 
 -- | Create a `LumiComponent` from a name, set of defaults, and a render function.
 -- | The render function behaves the same as in the [hooks API](https://github.com/spicydonuts/purescript-react-basic-hooks/blob/master/examples/counter/src/Counter.purs#L12).

src/Lumi/Components2/Clip.purs

@@ -72,7 +72,7 @@ clip =
                   , css:
                     toCSS theme props
                       $ Styles.Box.box
-                      >>> Styles.Box._justify Center
+                      <<< Styles.Box._justify Center
                   , ref
                   , children: props.content
                   }

src/Lumi/Components2/Slat.purs

@@ -72,11 +72,11 @@ slat =
 
   slatStyle =
     Styles.Slat.Hidden.slat
-      >>> styleModifier_ (E.css { appearance: E.none })
+      <<< styleModifier_ (E.css { appearance: E.none })
 
   slatStyleInteractive =
     slatStyle
-      >>> Styles.Slat.Hidden._interactive
+      <<< Styles.Slat.Hidden._interactive
 
 _interactive :: SlatInteraction -> PropsModifier SlatProps
 _interactive interaction =
@@ -91,7 +91,7 @@ _interactiveBackground interaction =
     _
       { interaction = Just interaction
       }
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< styleModifier \(LumiTheme theme) ->
         E.css
           { "&:hover":
             E.nested

src/Lumi/Styles/Border.purs

@@ -13,7 +13,7 @@ import React.Basic.Emotion (color, css, int, nested, none, prop, str)
 border :: forall props. PropsModifier props
 border =
   box
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< styleModifier \(LumiTheme theme) ->
       css
         { label: str "border"
         , borderWidth: int 1
@@ -44,8 +44,8 @@ _topBottom =
 _interactive :: forall props. PropsModifier props
 _interactive =
   Box._interactive
-    >>> Box._focusable
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< Box._focusable
+    <<< styleModifier \(LumiTheme theme) ->
         css
           { "&:hover":
             nested

src/Lumi/Styles/Button.purs

@@ -34,7 +34,7 @@ button ::
 button colo kind state size = case kind of
   Primary ->
     buttonStyle
-      >>> styleModifier \theme@(LumiTheme { colors }) ->
+      <<< styleModifier \theme@(LumiTheme { colors }) ->
           let
             { hue, hueDarker, hueDarkest, hueDisabled, white } =
               makeColorShades
@@ -79,7 +79,7 @@ button colo kind state size = case kind of
                   ]
   Secondary ->
     buttonStyle
-      >>> styleModifier \theme@(LumiTheme { colors }) ->
+      <<< styleModifier \theme@(LumiTheme { colors }) ->
           let
             { hueDarker, hueDarkest, grey1, grey2, white, black } =
               makeColorShades
@@ -126,7 +126,7 @@ button colo kind state size = case kind of
                   ]
   Link ->
     Link.link
-      >>> styleModifier \(LumiTheme { colors }) ->
+      <<< styleModifier \(LumiTheme { colors }) ->
           let
             { hueDisabled } =
               makeColorShades
@@ -163,14 +163,14 @@ button colo kind state size = case kind of
   where
   buttonStyle =
     box
-      >>> _row
-      >>> _align Center
-      >>> _justify Center
-      >>> case state of
+      <<< _row
+      <<< _align Center
+      <<< _justify Center
+      <<< case state of
           Disabled -> identity
           Loading -> identity
-          Enabled -> _interactive >>> _focusable
-      >>> styleModifier_
+          Enabled -> _interactive <<< _focusable
+      <<< styleModifier_
           ( css
               { label: str "button"
               , appearance: none
@@ -274,9 +274,9 @@ button colo kind state size = case kind of
 buttonGroup :: forall props. Boolean -> PropsModifier props
 buttonGroup joined =
   box
-    >>> _row
-    >>> styleModifier_ (css { label: str "buttonGroup" })
-    >>> styleModifier_
+    <<< _row
+    <<< styleModifier_ (css { label: str "buttonGroup" })
+    <<< styleModifier_
         if not joined then
           css
             { label: str "notJoined"

src/Lumi/Styles/Clip.purs

@@ -11,10 +11,10 @@ import React.Basic.Emotion (color, css)
 clip :: forall props. PropsModifier props
 clip =
   border
-    >>> _round
-    >>> _row
-    >>> _justify SpaceBetween
-    >>> styleModifier \(LumiTheme { colors }) ->
+    <<< _round
+    <<< _row
+    <<< _justify SpaceBetween
+    <<< styleModifier \(LumiTheme { colors }) ->
         css
           { borderColor: color colors.black5
           , backgroundColor: color colors.black5

src/Lumi/Styles/Link.purs

@@ -10,7 +10,7 @@ import React.Basic.Emotion (css)
 link :: forall props. PropsModifier props
 link =
   box
-    >>> styleModifier \(LumiTheme theme) ->
+    <<< styleModifier \(LumiTheme theme) ->
         css
           { color: color theme.colors.primary
           , textDecoration: none

src/Lumi/Styles/QRCode.purs

@@ -9,7 +9,7 @@ import React.Basic.Emotion (css, str)
 qrcode :: forall props. PropsModifier props
 qrcode =
   box
-    >>> styleModifier_
+    <<< styleModifier_
         ( css
             { label: str "qrcode"
             }

src/Lumi/Styles/Slat.purs

@@ -15,10 +15,10 @@ import React.Basic.Emotion (css, str, unset)
 slat :: forall props. PropsModifier props
 slat =
   border
-    >>> _row
-    >>> _align Center
-    >>> _justify SpaceBetween
-    >>> styleModifier_
+    <<< _row
+    <<< _align Center
+    <<< _justify SpaceBetween
+    <<< styleModifier_
         ( css
             { label: str "slat"
             , flex: str "0 0 content"