Skip to content

Commit 1e57196

Browse files
author
Madeline Trotter
authored
Button2 refactor (#177)
* wip button refactor * Additional button modifiers * Add alternate content for loading link buttons * PR feedback
1 parent 0e16f88 commit 1e57196

22 files changed

+971
-730
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"purescript-react-basic": "^15.0.0",
3333
"purescript-react-basic-dom": "lumihq/purescript-react-basic-dom#^2.0.0",
3434
"purescript-react-basic-classic": "lumihq/purescript-react-basic-classic#^1.0.1",
35-
"purescript-react-basic-emotion": "^4.2.2",
35+
"purescript-react-basic-emotion": "^5.0.0",
3636
"purescript-react-basic-hooks": "^6.0.0",
3737
"purescript-react-dnd-basic": "^7.0.0",
3838
"purescript-record": ">= 1.0.0 < 3.0.0",

‎docs/Examples2/Button.example.purs‎

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

33
import Prelude
4+
5+
import Color (lighten)
6+
import Color.Scheme.MaterialDesign as Colors
47
import Data.Array (intercalate)
8+
import Effect.Aff (Milliseconds(..), delay)
9+
import Effect.Class (liftEffect)
10+
import Lumi.Components (($$$))
511
import Lumi.Components.Column (column_)
612
import Lumi.Components.Example (example)
713
import Lumi.Components.Icon (IconType(..), icon)
814
import Lumi.Components.Size (Size(..))
915
import Lumi.Components.Spacing (Space(..), hspace, vspace)
1016
import Lumi.Components.Text (h2_, h4_)
11-
import Lumi.Components2.Button (_linkStyle, button, _secondary)
17+
import Lumi.Components2.Button (ButtonState(..), button, linkButton, loadingContent, onPress, resize, secondary, submit)
18+
import Lumi.Styles (style_)
19+
import Lumi.Styles as S
1220
import Lumi.Styles.Box (_interactive)
13-
import Lumi.Styles.Button (ButtonState(..))
1421
import React.Basic.Classic (JSX)
1522
import React.Basic.DOM as R
1623
import Web.HTML (window)
@@ -22,162 +29,156 @@ docs =
2229
$ intercalate [ vspace S16 ]
2330
[ [ example
2431
$ button
25-
$ _ { content = [ R.text "Button" ] }
32+
$ onPress do
33+
delay $ Milliseconds 1000.0
34+
$$$ [ column_ [ R.text "Click me" ] ]
2635
]
2736
, [ h2_ "Disabled"
2837
, example
2938
$ button
30-
$ _ { content = [ R.text "Button" ] }
39+
$$$ [ R.text "Button" ]
3140
]
3241
, [ h2_ "Size"
3342
, h4_ "Medium (default)"
3443
, example
3544
$ button
36-
$ _
37-
{ content = [ R.text "Button" ]
38-
, size = Medium
39-
}
45+
$ resize Medium
46+
$$$ [ R.text "Button" ]
4047
]
4148
, [ h4_ "Small"
4249
, example
4350
$ button
44-
$ _
45-
{ content = [ R.text "Button" ]
46-
, size = Small
47-
}
51+
$ resize Small
52+
$$$ [ R.text "Button" ]
4853
]
4954
, [ h4_ "Large"
5055
, example
5156
$ button
52-
$ _
53-
{ content = [ R.text "Button" ]
54-
, size = Large
55-
}
57+
$ resize Large
58+
$$$ [ R.text "Button" ]
5659
]
5760
, [ h4_ "Extra Large"
5861
, example
5962
$ button
60-
$ _
61-
{ content = [ R.text "Button" ]
62-
, size = ExtraLarge
63-
}
63+
$ resize ExtraLarge
64+
$$$ [ R.text "Button" ]
6465
]
6566
, [ h2_ "Color"
6667
, h4_ "Primary (default)"
6768
, example
6869
$ button
6970
$ _interactive
70-
$ _ { content = [ R.text "Button" ] }
71+
$$$ [ R.text "Button" ]
7172
]
7273
, [ h4_ "Primary + Disabled"
7374
, example
7475
$ button
75-
$ _
76-
{ content = [ R.text "Button" ]
77-
, state = Disabled
78-
}
76+
$ submit Disabled
77+
$$$ [ R.text "Button" ]
7978
]
8079
, [ h4_ "Secondary (outline)"
8180
, example
8281
$ button
83-
$ _secondary
84-
$ _ { content = [ R.text "Button" ] }
82+
$ secondary
83+
$$$ [ R.text "Button" ]
8584
]
8685
, [ h4_ "Secondary Small"
8786
, example
8887
$ button
89-
$ _secondary
90-
$ _
91-
{ content = [ R.text "Button" ]
92-
, size = Small
93-
}
88+
$ secondary
89+
$ resize Small
90+
$$$ [ R.text "Button" ]
9491
]
9592
, [ h4_ "Secondary Large"
9693
, example
9794
$ button
98-
$ _secondary
99-
$ _
100-
{ content = [ R.text "Button" ]
101-
, size = Large
102-
}
95+
$ secondary
96+
$ resize Large
97+
$$$ [ R.text "Button" ]
10398
]
10499
, [ h4_ "Secondary Extra Large"
105100
, example
106101
$ button
107-
$ _secondary
108-
$ _
109-
{ content = [ R.text "Button" ]
110-
, size = ExtraLarge
111-
}
102+
$ secondary
103+
$ resize ExtraLarge
104+
$$$ [ R.text "Button" ]
112105
]
113106
, [ h4_ "Secondary + Disabled"
114107
, example
115108
$ button
116-
$ _secondary
117-
$ _
118-
{ content = [ R.text "Button" ]
119-
, state = Disabled
120-
}
109+
$ secondary
110+
$ submit Disabled
111+
$$$ [ R.text "Button" ]
121112
]
122113
, [ h4_ "Icon button"
123114
, example
124115
$ button
125-
$ _ { content = [ buttonIcon Plus, hspace S8, R.text "Add new item" ] }
116+
$$$ [ buttonIcon Plus, hspace S8, R.text "Add new item" ]
126117
]
127118
, [ h4_ "Icon button"
128119
, example
129120
$ button
130-
$ _secondary
131-
$ _ { content = [ buttonIcon Plus, hspace S8, R.text "Add new item" ] }
121+
$ secondary
122+
$$$ [ buttonIcon Plus, hspace S8, R.text "Add new item" ]
132123
]
133124
, [ h4_ "Icon button"
134125
, example
135126
$ button
136-
$ _ { content = [ R.text "Add new item", hspace S8, buttonIcon Plus ] }
127+
$$$ [ R.text "Add new item", hspace S8, buttonIcon Plus ]
137128
]
138129
, [ h4_ "Link style"
139130
, example
140-
$ button
141-
$ _linkStyle
142-
$ _ { content = [ R.text "Button w/ link style" ]
143-
, onPress = alert "asdf" =<< window
144-
}
145-
, example
146-
$ button
147-
$ _linkStyle
148-
$ _ { state = Disabled
149-
, content = [ R.text "Button w/ link style" ]
150-
, onPress = alert "asdf" =<< window
151-
}
131+
$ linkButton
132+
$ onPress do
133+
liftEffect do alert "asdf" =<< window
134+
$ loadingContent [ R.text "Loading..." ]
135+
$$$ [ R.text "Button w/ link style" ]
136+
, example
137+
$ linkButton
138+
$ style_
139+
( S.css
140+
{ borderColor: S.color $ lighten 0.4 Colors.purple
141+
, borderStyle: S.solid
142+
, borderSize: S.px 2
143+
}
144+
)
145+
$ onPress do
146+
delay $ Milliseconds 1000.0
147+
$ loadingContent [ R.text "Border size remains unchanged -->" ]
148+
$$$ [ R.text "Link buttons retain their size when displaying their loading state (click me)" ]
149+
, example
150+
$ linkButton
151+
$ submit Disabled
152+
$ onPress do
153+
liftEffect do alert "asdf" =<< window
154+
$$$ [ R.text "Button w/ link style (disabled)" ]
152155
]
153156
, [ h4_ "Loading (Medium/default)"
154157
, example
155158
$ button
156-
$ _ { state = Loading }
159+
$ submit Loading
160+
$$$ [ R.text "Save" ]
157161
]
158162
, [ h4_ "Loading (Small) "
159163
, example
160164
$ button
161-
$ _
162-
{ state = Loading
163-
, size = Small
164-
}
165+
$ resize Small
166+
$ submit Loading
167+
$$$ [ R.text "Save" ]
165168
]
166169
, [ h4_ "Loading (Large) "
167170
, example
168171
$ button
169-
$ _
170-
{ state = Loading
171-
, size = Large
172-
}
172+
$ resize Large
173+
$ submit Loading
174+
$$$ [ R.text "Save" ]
173175
]
174176
, [ h4_ "Loading (ExtraLarge) "
175177
, example
176178
$ button
177-
$ _
178-
{ state = Loading
179-
, size = ExtraLarge
180-
}
179+
$ resize ExtraLarge
180+
$ submit Loading
181+
$$$ [ R.text "Save" ]
181182
]
182183
]
183184
where

0 commit comments

Comments
 (0)