Skip to content

Commit 75d7598

Browse files
kimispencerspicydonuts
kimispencer
authored and
spicydonuts
committed
Modal & inputRow updates (#7)
* inputRow: checkbox/label flex-shrink rules * inputRow: leftAligned * inputRow_ * inputRow props * inputRow: inputProps style * ExtraLarge modal
1 parent 150f667 commit 75d7598

File tree

4 files changed

+97
-16
lines changed

4 files changed

+97
-16
lines changed

‎docs/Examples/Input.example.purs

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import Data.Maybe (Maybe(Just))
66
import Data.Nullable (toNullable)
77
import Lumi.Components.Size (Size(..))
88
import Lumi.Components.Column (column_)
9-
import Lumi.Components.Input (CheckboxState(..), alignToInput, checkbox, input, inputRow, radio, range, switch, text_)
9+
import Lumi.Components.Input (CheckboxState(..), alignToInput, checkbox, input, inputRow, inputRow_, radio, range, switch, text_)
1010
import Lumi.Components.Row (row_)
1111
import Lumi.Components.Text (body_, h2_, h4_, p_)
1212
import Lumi.Components.Example (example)
1313
import React.Basic (JSX)
14+
import React.Basic.DOM as R
1415

1516
docs :: JSX
1617
docs =
@@ -66,38 +67,69 @@ docs =
6667
]
6768

6869

70+
, h2_ "Input Row"
71+
72+
, h4_ "Padded"
73+
74+
, example
75+
$ inputRow_ "Field label" checkbox { checked = Off }
76+
77+
, example
78+
$ inputRow_ "Field label" checkbox
79+
{ size = Small
80+
, checked = Off
81+
}
82+
83+
, example
84+
$ inputRow_ "Field label" radio { checked = Off }
85+
86+
, h4_ "Left aligned"
87+
88+
, example
89+
$ inputRow { labelText: "Field label", leftAligned: true, style: R.css {} } checkbox { checked = Off }
90+
91+
, example
92+
$ inputRow { labelText: "Field label", leftAligned: true, style: R.css {} } checkbox
93+
{ size = Small
94+
, checked = Off
95+
}
96+
97+
, example
98+
$ inputRow { labelText: "Field label", leftAligned: true, style: R.css {} } radio { checked = Off }
99+
100+
69101
, h2_ "Checkbox"
70102

71103
, h4_ "Medium"
72104
, example
73-
$ inputRow "Field label" checkbox { checked = Off }
105+
$ inputRow_ "Field label" checkbox { checked = Off }
74106

75107

76108
, example
77-
$ inputRow "Field label" checkbox { checked = On }
109+
$ inputRow_ "Field label" checkbox { checked = On }
78110

79111

80112
, example
81-
$ inputRow "Field label" checkbox { checked = Indeterminate }
113+
$ inputRow_ "Field label" checkbox { checked = Indeterminate }
82114

83115

84116
, h4_ "Small"
85117
, example
86-
$ inputRow "Field label" checkbox
118+
$ inputRow_ "Field label" checkbox
87119
{ size = Small
88120
, checked = Off
89121
}
90122

91123

92124
, example
93-
$ inputRow "Field label" checkbox
125+
$ inputRow_ "Field label" checkbox
94126
{ size = Small
95127
, checked = On
96128
}
97129

98130

99131
, example
100-
$ inputRow "Field label" checkbox
132+
$ inputRow_ "Field label" checkbox
101133
{ size = Small
102134
, checked = Indeterminate
103135
}
@@ -107,23 +139,23 @@ docs =
107139

108140
, h4_ "Medium"
109141
, example
110-
$ inputRow "Field label" radio { checked = Off }
142+
$ inputRow_ "Field label" radio { checked = Off }
111143

112144

113145
, example
114-
$ inputRow "Field Label" radio { checked = On }
146+
$ inputRow_ "Field Label" radio { checked = On }
115147

116148

117149
, h4_ "Small"
118150
, example
119-
$ inputRow "Field Label" radio
151+
$ inputRow_ "Field Label" radio
120152
{ size = Small
121153
, checked = Off
122154
}
123155

124156

125157
, example
126-
$ inputRow "Field label" radio
158+
$ inputRow_ "Field label" radio
127159
{ size = Small
128160
, checked = On
129161
}

‎docs/Examples/Modal.example.purs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ data ModalTestId
1818
= SmallModal
1919
| MediumModal
2020
| LargeModal
21+
| ExtraLargeModal
2122
| DialogModal
2223
| LongModal
2324
| ErrorModal
@@ -115,6 +116,35 @@ docs = unit # make component
115116
]
116117
}
117118

119+
, example $
120+
button secondary
121+
{ onPress = capture_ $ self.setState _ { modalId = Just ExtraLargeModal }
122+
, title = "Open modal, extra large"
123+
}
124+
125+
, guard (self.state.modalId == Just ExtraLargeModal) $
126+
modal
127+
{ modalOpen: true
128+
, closeButton: true
129+
, onRequestClose: self.setState _ { modalId = Nothing }
130+
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
131+
, actionButtonTitle: "Add clicks"
132+
, actionButtonDisabled: false
133+
, size: ExtraLarge
134+
, title: "Modal title -- Extra Large"
135+
, variant: ""
136+
, internalBorders: false
137+
, children:
138+
fragment
139+
[ body_ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium nec tellus ornare tincidunt. Phasellus ultrices porta finibus. In id mollis diam. Praesent efficitur lectus quis odio convallis placerat. Suspendisse metus tortor, faucibus nec imperdiet quis, iaculis id risus. Pellentesque a auctor turpis, a lacinia nulla. Pellentesque malesuada suscipit ante, sed convallis est pharetra eu. In sed enim nec lacus dignissim malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus arcu, efficitur et magna a, fermentum lacinia nulla. Mauris ligula erat, posuere sed diam a, sodales vestibulum ante."
140+
, body_ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium nec tellus ornare tincidunt. Phasellus ultrices porta finibus. In id mollis diam. Praesent efficitur lectus quis odio convallis placerat. Suspendisse metus tortor, faucibus nec imperdiet quis, iaculis id risus. Pellentesque a auctor turpis, a lacinia nulla. Pellentesque malesuada suscipit ante, sed convallis est pharetra eu. In sed enim nec lacus dignissim malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus arcu, efficitur et magna a, fermentum lacinia nulla. Mauris ligula erat, posuere sed diam a, sodales vestibulum ante."
141+
, body_ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium nec tellus ornare tincidunt. Phasellus ultrices porta finibus. In id mollis diam. Praesent efficitur lectus quis odio convallis placerat. Suspendisse metus tortor, faucibus nec imperdiet quis, iaculis id risus. Pellentesque a auctor turpis, a lacinia nulla. Pellentesque malesuada suscipit ante, sed convallis est pharetra eu. In sed enim nec lacus dignissim malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus arcu, efficitur et magna a, fermentum lacinia nulla. Mauris ligula erat, posuere sed diam a, sodales vestibulum ante."
142+
, body_ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium nec tellus ornare tincidunt. Phasellus ultrices porta finibus. In id mollis diam. Praesent efficitur lectus quis odio convallis placerat. Suspendisse metus tortor, faucibus nec imperdiet quis, iaculis id risus. Pellentesque a auctor turpis, a lacinia nulla. Pellentesque malesuada suscipit ante, sed convallis est pharetra eu. In sed enim nec lacus dignissim malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus arcu, efficitur et magna a, fermentum lacinia nulla. Mauris ligula erat, posuere sed diam a, sodales vestibulum ante."
143+
, body_ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium nec tellus ornare tincidunt. Phasellus ultrices porta finibus. In id mollis diam. Praesent efficitur lectus quis odio convallis placerat. Suspendisse metus tortor, faucibus nec imperdiet quis, iaculis id risus. Pellentesque a auctor turpis, a lacinia nulla. Pellentesque malesuada suscipit ante, sed convallis est pharetra eu. In sed enim nec lacus dignissim malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus arcu, efficitur et magna a, fermentum lacinia nulla. Mauris ligula erat, posuere sed diam a, sodales vestibulum ante."
144+
, body_ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium nec tellus ornare tincidunt. Phasellus ultrices porta finibus. In id mollis diam. Praesent efficitur lectus quis odio convallis placerat. Suspendisse metus tortor, faucibus nec imperdiet quis, iaculis id risus. Pellentesque a auctor turpis, a lacinia nulla. Pellentesque malesuada suscipit ante, sed convallis est pharetra eu. In sed enim nec lacus dignissim malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus arcu, efficitur et magna a, fermentum lacinia nulla. Mauris ligula erat, posuere sed diam a, sodales vestibulum ante."
145+
]
146+
}
147+
118148
, example $
119149
button secondary
120150
{ onPress = capture_ $ self.setState _ { modalId = Just DialogModal }

‎src/Lumi/Components/Input.purs

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ module Lumi.Components.Input
3131
, label
3232
, label_
3333
, inputRow
34+
, inputRow_
3435
, alignToInput
3536
, styles
3637
, lumiInputStyles
@@ -282,16 +283,29 @@ label_ children = label
282283
, style: R.css {}
283284
}
284285

285-
inputRow :: String -> InputProps -> JSX
286-
inputRow labelText opts = label
287-
{ style: css { flexDirection: "row" }
286+
inputRow :: { labelText :: String, leftAligned :: Boolean, style :: CSS } -> InputProps -> JSX
287+
inputRow props opts = label
288+
{ style: R.mergeStyles
289+
[ props.style
290+
, R.css { flexDirection: "row" }
291+
]
288292
, for: toNullable Nothing
289293
, children:
290-
[ input opts { style = css { marginRight: 8 } }
291-
, alignToInput $ body_ labelText
294+
[ input opts
295+
{ style =
296+
R.mergeStyles
297+
[ opts.style
298+
, css { marginRight: 8, marginLeft: if props.leftAligned then 0 else 8 }
299+
]
300+
}
301+
, alignToInput $ body_ props.labelText
292302
]
293303
}
294304

305+
inputRow_ :: String -> InputProps -> JSX
306+
inputRow_ labelText opts =
307+
inputRow { labelText: labelText, leftAligned: false, style: R.css { flexDirection: "row" } } opts
308+
295309
alignToInputComponent :: Component JSX
296310
alignToInputComponent = createComponent "AlignToInput"
297311

@@ -345,6 +359,7 @@ styles = jss
345359
, display: "flex"
346360
, justifyContent: "center"
347361
, alignItems: "center"
362+
, flexShrink: "0"
348363
, padding: "0"
349364
, color: cssStringHSLA colors.white
350365
, backgroundColor: cssStringHSLA colors.white
@@ -596,6 +611,7 @@ styles = jss
596611
, display: "flex"
597612
, flexFlow: "row"
598613
, alignItems: "center"
614+
, flexShrink: "1"
599615
, fontSize: "14px"
600616
, lineHeight: "20px"
601617
, padding: inputAlignToPadding

‎src/Lumi/Components/Modal.purs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,9 @@ styles = jss
348348
, "&[data-size=\"large\"]":
349349
{ width: "60rem"
350350
}
351+
, "&[data-size=\"extra-large\"]":
352+
{ width: "84.8rem"
353+
}
351354
, maxWidth: "calc(100vw - (2.4rem * 2))"
352355
, background: "rgba(255, 255, 255, 1)"
353356
, borderRadius: "0.4rem"

0 commit comments

Comments
 (0)