Skip to content

Commit 38bee6b

Browse files
author
Madeline Trotter
committed
wip button refactor
1 parent 0e16f88 commit 38bee6b

File tree

14 files changed

+723
-553
lines changed

14 files changed

+723
-553
lines changed

‎docs/Examples2/Button.example.purs‎

Lines changed: 51 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
module Lumi.Components2.Examples.Button where
22

33
import Prelude
4+
45
import Data.Array (intercalate)
6+
import Effect.Aff (Milliseconds(..), delay)
7+
import Effect.Class (liftEffect)
8+
import Lumi.Components (propsModifier, ($$$))
59
import Lumi.Components.Column (column_)
610
import Lumi.Components.Example (example)
711
import Lumi.Components.Icon (IconType(..), icon)
812
import Lumi.Components.Size (Size(..))
913
import Lumi.Components.Spacing (Space(..), hspace, vspace)
1014
import Lumi.Components.Text (h2_, h4_)
11-
import Lumi.Components2.Button (_linkStyle, button, _secondary)
15+
import Lumi.Components2.Button (ButtonState(..), button, linkButton, primary, resize, secondary)
1216
import Lumi.Styles.Box (_interactive)
13-
import Lumi.Styles.Button (ButtonState(..))
1417
import React.Basic.Classic (JSX)
1518
import React.Basic.DOM as R
1619
import Web.HTML (window)
@@ -22,45 +25,38 @@ docs =
2225
$ intercalate [ vspace S16 ]
2326
[ [ example
2427
$ button
25-
$ _ { content = [ R.text "Button" ] }
28+
$ propsModifier _ { onPress = delay $ Milliseconds 1000.0 }
29+
$$$ [ column_ [ R.text "Click me" ] ]
2630
]
2731
, [ h2_ "Disabled"
2832
, example
2933
$ button
30-
$ _ { content = [ R.text "Button" ] }
34+
$$$ [ R.text "Button" ]
3135
]
3236
, [ h2_ "Size"
3337
, h4_ "Medium (default)"
3438
, example
3539
$ button
36-
$ _
37-
{ content = [ R.text "Button" ]
38-
, size = Medium
39-
}
40+
$ resize Medium
41+
$$$ [ R.text "Button" ]
4042
]
4143
, [ h4_ "Small"
4244
, example
4345
$ button
44-
$ _
45-
{ content = [ R.text "Button" ]
46-
, size = Small
47-
}
46+
$ resize Small
47+
$$$ [ R.text "Button" ]
4848
]
4949
, [ h4_ "Large"
5050
, example
5151
$ button
52-
$ _
53-
{ content = [ R.text "Button" ]
54-
, size = Large
55-
}
52+
$ resize Large
53+
$$$ [ R.text "Button" ]
5654
]
5755
, [ h4_ "Extra Large"
5856
, example
5957
$ button
60-
$ _
61-
{ content = [ R.text "Button" ]
62-
, size = ExtraLarge
63-
}
58+
$ resize ExtraLarge
59+
$$$ [ R.text "Button" ]
6460
]
6561
, [ h2_ "Color"
6662
, h4_ "Primary (default)"
@@ -80,104 +76,90 @@ docs =
8076
, [ h4_ "Secondary (outline)"
8177
, example
8278
$ button
83-
$ _secondary
79+
$ secondary
8480
$ _ { content = [ R.text "Button" ] }
8581
]
8682
, [ h4_ "Secondary Small"
8783
, example
8884
$ button
89-
$ _secondary
90-
$ _
91-
{ content = [ R.text "Button" ]
92-
, size = Small
93-
}
85+
$ secondary
86+
$ resize Small
87+
$$$ [ R.text "Button" ]
9488
]
9589
, [ h4_ "Secondary Large"
9690
, example
9791
$ button
98-
$ _secondary
99-
$ _
100-
{ content = [ R.text "Button" ]
101-
, size = Large
102-
}
92+
$ secondary
93+
$ resize Large
94+
$$$ [ R.text "Button" ]
10395
]
10496
, [ h4_ "Secondary Extra Large"
10597
, example
10698
$ button
107-
$ _secondary
108-
$ _
109-
{ content = [ R.text "Button" ]
110-
, size = ExtraLarge
111-
}
99+
$ secondary
100+
$ resize ExtraLarge
101+
$$$ [ R.text "Button" ]
112102
]
113103
, [ h4_ "Secondary + Disabled"
114104
, example
115105
$ button
116-
$ _secondary
117-
$ _
118-
{ content = [ R.text "Button" ]
119-
, state = Disabled
120-
}
106+
$ secondary
107+
$ propsModifier _ { state = Disabled }
108+
$$$ [ R.text "Button" ]
121109
]
122110
, [ h4_ "Icon button"
123111
, example
124112
$ button
125-
$ _ { content = [ buttonIcon Plus, hspace S8, R.text "Add new item" ] }
113+
$$$ [ buttonIcon Plus, hspace S8, R.text "Add new item" ]
126114
]
127115
, [ h4_ "Icon button"
128116
, example
129117
$ button
130-
$ _secondary
131-
$ _ { content = [ buttonIcon Plus, hspace S8, R.text "Add new item" ] }
118+
$ secondary
119+
$$$ [ buttonIcon Plus, hspace S8, R.text "Add new item" ]
132120
]
133121
, [ h4_ "Icon button"
134122
, example
135123
$ button
136-
$ _ { content = [ R.text "Add new item", hspace S8, buttonIcon Plus ] }
124+
$$$ [ R.text "Add new item", hspace S8, buttonIcon Plus ]
137125
]
138126
, [ h4_ "Link style"
139127
, example
140-
$ button
141-
$ _linkStyle
142-
$ _ { content = [ R.text "Button w/ link style" ]
143-
, onPress = alert "asdf" =<< window
144-
}
128+
$ linkButton
129+
$ propsModifier _ { onPress = liftEffect do alert "asdf" =<< window }
130+
$$$ [ R.text "Button w/ link style" ]
145131
, example
146-
$ button
147-
$ _linkStyle
148-
$ _ { state = Disabled
149-
, content = [ R.text "Button w/ link style" ]
150-
, onPress = alert "asdf" =<< window
151-
}
132+
$ linkButton
133+
$ propsModifier _ { onPress = liftEffect do alert "asdf" =<< window }
134+
$ propsModifier _ { state = Disabled }
135+
$$$ [ R.text "Button w/ link style" ]
152136
]
153137
, [ h4_ "Loading (Medium/default)"
154138
, example
155139
$ button
156-
$ _ { state = Loading }
140+
$ propsModifier _ { state = Loading }
141+
$$$ [ R.text "Save" ]
157142
]
158143
, [ h4_ "Loading (Small) "
159144
, example
160145
$ button
161-
$ _
162-
{ state = Loading
163-
, size = Small
164-
}
146+
$ resize Small
147+
$ propsModifier _ { state = Loading }
148+
$$$ [ R.text "Save" ]
165149
]
166150
, [ h4_ "Loading (Large) "
167151
, example
168152
$ button
169-
$ _
170-
{ state = Loading
171-
, size = Large
172-
}
153+
$ resize Large
154+
$ propsModifier _ { state = Loading }
155+
$$$ [ R.text "Save" ]
173156
]
174157
, [ h4_ "Loading (ExtraLarge) "
175158
, example
176159
$ button
177-
$ _
178-
{ state = Loading
179-
, size = ExtraLarge
180-
}
160+
$ resize ExtraLarge
161+
$ propsModifier _ { state = Loading }
162+
$$$ [ R.text "Save" ]
181163
]
182164
]
183165
where

‎docs/Examples2/ButtonGroup.example.purs‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
module Lumi.Components2.Examples.ButtonGroup where
22

33
import Prelude
4+
45
import Effect.Console (log)
56
import Effect.Uncurried (mkEffectFn1)
7+
import Lumi.Components (($$$))
68
import Lumi.Components.Column (column_)
79
import Lumi.Components.Example (example)
810
import Lumi.Components.NativeSelect (nativeSelect, defaults)
911
import Lumi.Components.Text (h2_)
10-
import Lumi.Components2.Button (button, _secondary)
11-
import Lumi.Components2.ButtonGroup (buttonGroup)
12+
import Lumi.Components2.Button (button, secondary)
13+
import Lumi.Components2.ButtonGroup (buttonGroup, joined)
1214
import React.Basic.Classic (JSX)
1315
import React.Basic.DOM as R
1416

@@ -22,7 +24,7 @@ docs =
2224
{ content =
2325
[ button _ { content = [ R.text "Button" ] }
2426
, button
25-
$ _secondary
27+
$ secondary
2628
$ _ { content = [ R.text "Button" ] }
2729
]
2830
}
@@ -33,10 +35,10 @@ docs =
3335
{ content =
3436
[ button _ { content = [ R.text "Button" ] }
3537
, button
36-
$ _secondary
38+
$ secondary
3739
$ _ { content = [ R.text "Button" ] }
3840
, button
39-
$ _secondary
41+
$ secondary
4042
$ _ { content = [ R.text "Button" ] }
4143
]
4244
}
@@ -53,39 +55,35 @@ docs =
5355
, value = "Foo bar"
5456
}
5557
, button
56-
$ _secondary
58+
$ secondary
5759
$ _ { content = [ R.text "Button" ] }
5860
]
5961
}
6062
, h2_ "Joined"
6163
, example
6264
$ buttonGroup
63-
$ _
64-
{ joined = true
65-
, content =
66-
[ button
67-
$ _secondary
68-
$ _ { content = [ R.text "Button" ] }
69-
, button
70-
$ _secondary
71-
$ _ { content = [ R.text "Button" ] }
72-
]
73-
}
65+
$ joined
66+
$$$
67+
[ button
68+
$ secondary
69+
$ _ { content = [ R.text "Button" ] }
70+
, button
71+
$ secondary
72+
$ _ { content = [ R.text "Button" ] }
73+
]
7474
, h2_ "Joined"
7575
, example
7676
$ buttonGroup
77-
$ _
78-
{ joined = true
79-
, content =
80-
[ button
81-
$ _secondary
82-
$ _ { content = [ R.text "Button" ] }
83-
, button
84-
$ _secondary
85-
$ _ { content = [ R.text "Button" ] }
86-
, button
87-
$ _secondary
88-
$ _ { content = [ R.text "Button" ] }
89-
]
90-
}
77+
$ joined
78+
$$$
79+
[ button
80+
$ secondary
81+
$ _ { content = [ R.text "Button" ] }
82+
, button
83+
$ secondary
84+
$ _ { content = [ R.text "Button" ] }
85+
, button
86+
$ secondary
87+
$ _ { content = [ R.text "Button" ] }
88+
]
9189
]

‎src/Lumi/Components.purs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,21 @@ module Lumi.Components
77
, lumiComponent
88
, lumiComponentFromHook
99
, withContent, ($$$)
10+
, unsafeMaybeToNullableAttr
1011
) where
1112

1213
import Prelude
1314

15+
import Data.Maybe (Maybe)
16+
import Data.Nullable (toNullable)
1417
import Data.String (toLower)
1518
import Effect (Effect)
1619
import Lumi.Styles.Theme (LumiTheme)
1720
import Prim.Row (class Lacks)
1821
import React.Basic.Emotion as Emotion
1922
import React.Basic.Hooks (Hook, JSX, ReactComponent, Render, element, reactComponent, reactComponentFromHook)
2023
import Record.Unsafe.Union (unsafeUnion)
24+
import Unsafe.Coerce (unsafeCoerce)
2125

2226
-- | A `LumiComponent` takes a function that updates its default props instead
2327
-- | of the plain record of props itself. This helps reduce the surface area for
@@ -129,3 +133,13 @@ lumiElement (LumiInternalComponent { component, defaults, className }) modifyPro
129133
props
130134
{ className = className <> " " <> props.className
131135
}
136+
137+
-- | WARNING: This is for JS interop -- don't use this to unwrap Maybes!
138+
-- |
139+
-- | Unsafely nulls out a value so the resulting html attributes are less noisy
140+
-- | Ex: `R.input { type: unsafeMaybeToNullableAttr Nothing }` avoids rendering
141+
-- | the `type` attribute while still validating the type of the Maybe's content
142+
-- | matches the type of the DOM field. It's slightly safer than using
143+
-- | `unsafeCreateDOMComponent` to avoid DOM type checking entirely.
144+
unsafeMaybeToNullableAttr :: forall a. Maybe a -> a
145+
unsafeMaybeToNullableAttr = unsafeCoerce <<< toNullable

‎src/Lumi/Components/Color.purs‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ module Lumi.Components.Color
44
, ColorMap
55
, colors
66
, colorNames
7+
, shade
78
) where
89

9-
import Color (rgb, rgba)
10+
import Prelude
11+
12+
import Color (darken, desaturate, lighten, rgb, rgba)
1013
import Color as C
1114
import Data.Newtype (class Newtype)
1215

@@ -114,3 +117,23 @@ colorNames =
114117
, transparent: ColorName "transparent"
115118
}
116119

120+
shade ::
121+
{ hue :: Color, white :: Color, black :: Color } ->
122+
{ black :: Color
123+
, grey1 :: Color
124+
, grey2 :: Color
125+
, hue :: Color
126+
, hueDarker :: Color
127+
, hueDarkest :: Color
128+
, hueDisabled :: Color
129+
, white :: Color
130+
}
131+
shade { hue, white, black } =
132+
let
133+
hueDarker = darken 0.1 hue
134+
hueDarkest = darken 0.15 hue
135+
hueDisabled = lighten 0.4137 $ desaturate 0.1972 hue
136+
grey1 = lighten 0.7 black
137+
grey2 = lighten 0.82 black
138+
in
139+
{ hue, hueDarker, hueDarkest, hueDisabled, grey1, grey2, white, black }

0 commit comments

Comments
 (0)