Array JSX

Author: kimispencer

docs/Examples/Tooltip.example.purs

@@ -9,7 +9,6 @@ import Lumi.Components.Column (column_)
 import Lumi.Components.Link as Link
 import Lumi.Components.Row (row_)
 import Lumi.Components.Text (body_)
-import Lumi.Components.Text as T
 import Lumi.Components.Example (example)
 import Lumi.Components.Tooltip (tooltip)
 import React.Basic (JSX)
@@ -23,7 +22,7 @@ docs =
         $ tooltip
             { variant: "basic"
             , style: R.css {}
-            , text: R.text "Lorem ipsum"
+            , text: [ R.text "Lorem ipsum" ]
             , content: body_ "Basic example"
             , size: toNullable Nothing
             }
@@ -32,7 +31,7 @@ docs =
         $ tooltip
             { variant: "top"
             , style: R.css {}
-            , text: R.text "Lorem ipsum"
+            , text: [ R.text "Lorem ipsum" ]
             , content: body_ "Top example"
             , size: toNullable Nothing
             }
@@ -41,7 +40,7 @@ docs =
         $ tooltip
             { variant: "bottom"
             , style: R.css {}
-            , text: R.text "Lorem ipsum"
+            , text: [ R.text "Lorem ipsum" ]
             , content: body_ "Bottom example"
             , size: toNullable Nothing
             }
@@ -50,7 +49,7 @@ docs =
         $ tooltip
             { variant: "left"
             , style: R.css {}
-            , text: R.text "Lorem ipsum"
+            , text: [ R.text "Lorem ipsum" ]
             , content: body_ "Left example"
             , size: toNullable Nothing
             }
@@ -61,7 +60,7 @@ docs =
               , tooltip
                   { variant: "top"
                   , style: R.css { padding: "0 2px", textDecoration: "underline" }
-                  , text: R.text "Lorem ipsum"
+                  , text: [ R.text "Lorem ipsum" ]
                   , content: body_ "here"
                   , size: toNullable Nothing
                   }
@@ -74,7 +73,7 @@ docs =
               , tooltip
                   { variant: "top"
                   , style: R.css { padding: "0 2px", textDecoration: "underline" }
-                  , text: R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus."
+                  , text: [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus." ]
                   , content: body_ "here"
                   , size: toNullable $ Just $ Large
                   }
@@ -88,18 +87,14 @@ docs =
                   { variant: "top"
                   , style: R.css { padding: "0 2px", textDecoration: "underline" }
                   , text:
-                      T.text T.body
-                        { style = R.css {}
-                        , children =
-                            [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus "
-                            , Link.link Link.defaults
-                                { href = URL "#/link"
-                                , text = R.text "click here"
-                                , target = Just "_blank"
-                                }
-                            , R.text "."
-                            ]
-                        }
+                      [ R.text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor libero non libero consequat, at iaculis diam venenatis. Donec nec porttitor tellus "
+                      , Link.link Link.defaults
+                          { href = URL "#/link"
+                          , text = R.text "click here"
+                          , target = Just "_blank"
+                          }
+                      , R.text "."
+                      ]
                   , content: body_ "here"
                   , size: toNullable $ Just $ Large
                   }

src/Lumi/Components/Tooltip.purs

@@ -14,7 +14,7 @@ import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
 type TooltipProps =
   { variant :: String
   , style :: CSS
-  , text :: JSX
+  , text :: Array JSX
   , content :: JSX
   , size :: Nullable Size
   }
@@ -35,7 +35,7 @@ tooltip = makeStateless component render
         , "data-variant": props.variant
         , children:
             [ lumiTooltipTextElement
-                { children: [ props.text ] }
+                { children: props.text }
             , props.content
             ]
         }