Skip to content

Button2 refactor #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 11, 2020
Merged

Button2 refactor #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
52edf80
wip button refactor
Aug 6, 2020
c8760a8
Additional button modifiers
Aug 8, 2020
1e9244e
Add alternate content for loading link buttons
Aug 9, 2020
8cad651
PR feedback
Aug 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"purescript-react-basic": "^15.0.0",
"purescript-react-basic-dom": "lumihq/purescript-react-basic-dom#^2.0.0",
"purescript-react-basic-classic": "lumihq/purescript-react-basic-classic#^1.0.1",
"purescript-react-basic-emotion": "^4.2.2",
"purescript-react-basic-emotion": "^5.0.0",
"purescript-react-basic-hooks": "^6.0.0",
"purescript-react-dnd-basic": "^7.0.0",
"purescript-record": ">= 1.0.0 < 3.0.0",
Expand Down
153 changes: 77 additions & 76 deletions docs/Examples2/Button.example.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
module Lumi.Components2.Examples.Button where

import Prelude

import Color (lighten)
import Color.Scheme.MaterialDesign as Colors
import Data.Array (intercalate)
import Effect.Aff (Milliseconds(..), delay)
import Effect.Class (liftEffect)
import Lumi.Components (($$$))
import Lumi.Components.Column (column_)
import Lumi.Components.Example (example)
import Lumi.Components.Icon (IconType(..), icon)
import Lumi.Components.Size (Size(..))
import Lumi.Components.Spacing (Space(..), hspace, vspace)
import Lumi.Components.Text (h2_, h4_)
import Lumi.Components2.Button (_linkStyle, button, _secondary)
import Lumi.Components2.Button (ButtonState(..), button, linkButton, loadingContent, onPress, resize, secondary, submit)
import Lumi.Styles (style_)
import Lumi.Styles as S
import Lumi.Styles.Box (_interactive)
import Lumi.Styles.Button (ButtonState(..))
import React.Basic.Classic (JSX)
import React.Basic.DOM as R
import Web.HTML (window)
Expand All @@ -22,162 +29,156 @@ docs =
$ intercalate [ vspace S16 ]
[ [ example
$ button
$ _ { content = [ R.text "Button" ] }
$ onPress do
delay $ Milliseconds 1000.0
$$$ [ column_ [ R.text "Click me" ] ]
]
, [ h2_ "Disabled"
, example
$ button
$ _ { content = [ R.text "Button" ] }
$$$ [ R.text "Button" ]
]
, [ h2_ "Size"
, h4_ "Medium (default)"
, example
$ button
$ _
{ content = [ R.text "Button" ]
, size = Medium
}
$ resize Medium
$$$ [ R.text "Button" ]
]
, [ h4_ "Small"
, example
$ button
$ _
{ content = [ R.text "Button" ]
, size = Small
}
$ resize Small
$$$ [ R.text "Button" ]
]
, [ h4_ "Large"
, example
$ button
$ _
{ content = [ R.text "Button" ]
, size = Large
}
$ resize Large
$$$ [ R.text "Button" ]
]
, [ h4_ "Extra Large"
, example
$ button
$ _
{ content = [ R.text "Button" ]
, size = ExtraLarge
}
$ resize ExtraLarge
$$$ [ R.text "Button" ]
]
, [ h2_ "Color"
, h4_ "Primary (default)"
, example
$ button
$ _interactive
$ _ { content = [ R.text "Button" ] }
$$$ [ R.text "Button" ]
]
, [ h4_ "Primary + Disabled"
, example
$ button
$ _
{ content = [ R.text "Button" ]
, state = Disabled
}
$ submit Disabled
$$$ [ R.text "Button" ]
]
, [ h4_ "Secondary (outline)"
, example
$ button
$ _secondary
$ _ { content = [ R.text "Button" ] }
$ secondary
$$$ [ R.text "Button" ]
]
, [ h4_ "Secondary Small"
, example
$ button
$ _secondary
$ _
{ content = [ R.text "Button" ]
, size = Small
}
$ secondary
$ resize Small
$$$ [ R.text "Button" ]
]
, [ h4_ "Secondary Large"
, example
$ button
$ _secondary
$ _
{ content = [ R.text "Button" ]
, size = Large
}
$ secondary
$ resize Large
$$$ [ R.text "Button" ]
]
, [ h4_ "Secondary Extra Large"
, example
$ button
$ _secondary
$ _
{ content = [ R.text "Button" ]
, size = ExtraLarge
}
$ secondary
$ resize ExtraLarge
$$$ [ R.text "Button" ]
]
, [ h4_ "Secondary + Disabled"
, example
$ button
$ _secondary
$ _
{ content = [ R.text "Button" ]
, state = Disabled
}
$ secondary
$ submit Disabled
$$$ [ R.text "Button" ]
]
, [ h4_ "Icon button"
, example
$ button
$ _ { content = [ buttonIcon Plus, hspace S8, R.text "Add new item" ] }
$$$ [ buttonIcon Plus, hspace S8, R.text "Add new item" ]
]
, [ h4_ "Icon button"
, example
$ button
$ _secondary
$ _ { content = [ buttonIcon Plus, hspace S8, R.text "Add new item" ] }
$ secondary
$$$ [ buttonIcon Plus, hspace S8, R.text "Add new item" ]
]
, [ h4_ "Icon button"
, example
$ button
$ _ { content = [ R.text "Add new item", hspace S8, buttonIcon Plus ] }
$$$ [ R.text "Add new item", hspace S8, buttonIcon Plus ]
]
, [ h4_ "Link style"
, example
$ button
$ _linkStyle
$ _ { content = [ R.text "Button w/ link style" ]
, onPress = alert "asdf" =<< window
}
, example
$ button
$ _linkStyle
$ _ { state = Disabled
, content = [ R.text "Button w/ link style" ]
, onPress = alert "asdf" =<< window
}
$ linkButton
$ onPress do
liftEffect do alert "asdf" =<< window
$ loadingContent [ R.text "Loading..." ]
$$$ [ R.text "Button w/ link style" ]
, example
$ linkButton
$ style_
( S.css
{ borderColor: S.color $ lighten 0.4 Colors.purple
, borderStyle: S.solid
, borderSize: S.px 2
}
)
$ onPress do
delay $ Milliseconds 1000.0
$ loadingContent [ R.text "Border size remains unchanged -->" ]
$$$ [ R.text "Link buttons retain their size when displaying their loading state (click me)" ]
, example
$ linkButton
$ submit Disabled
$ onPress do
liftEffect do alert "asdf" =<< window
$$$ [ R.text "Button w/ link style (disabled)" ]
]
, [ h4_ "Loading (Medium/default)"
, example
$ button
$ _ { state = Loading }
$ submit Loading
$$$ [ R.text "Save" ]
]
, [ h4_ "Loading (Small) "
, example
$ button
$ _
{ state = Loading
, size = Small
}
$ resize Small
$ submit Loading
$$$ [ R.text "Save" ]
]
, [ h4_ "Loading (Large) "
, example
$ button
$ _
{ state = Loading
, size = Large
}
$ resize Large
$ submit Loading
$$$ [ R.text "Save" ]
]
, [ h4_ "Loading (ExtraLarge) "
, example
$ button
$ _
{ state = Loading
, size = ExtraLarge
}
$ resize ExtraLarge
$ submit Loading
$$$ [ R.text "Save" ]
]
]
where
Expand Down
Loading