Skip to content

Commit 28fc4d8

Browse files
kimispencerkimispencer
authored
Modal updates (#124)
* ExtraExtraLarge Size * Button2 ExtraLarge example * remove border-radius on mobile Modals (other than dialogs) * Modal title accept JSX over String * modalTitle * modalTitle fix * ExtraExtraLarge * remove mempty
1 parent a9e6ac0 commit 28fc4d8

File tree

5 files changed

+72
-19
lines changed

5 files changed

+72
-19
lines changed

‎docs/Examples/Modal.example.purs‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Data.Nullable (notNull, null)
88
import Lumi.Components.Button as Button
99
import Lumi.Components.Button (button, secondary)
1010
import Lumi.Components.Column (column_)
11-
import Lumi.Components.Modal (dialog, errorModal, modal)
11+
import Lumi.Components.Modal (dialog, errorModal, modal, modalTitle)
1212
import Lumi.Components.Size (Size(..))
1313
import Lumi.Components.Text (body_)
1414
import Lumi.Components.Example (example)
@@ -20,6 +20,7 @@ data ModalTestId
2020
| MediumModal
2121
| LargeModal
2222
| ExtraLargeModal
23+
| ExtraExtraLargeModal
2324
| DialogModal
2425
| NoCloseButtonModal
2526
| LongModal
@@ -57,7 +58,7 @@ docs = unit # make component
5758
, actionButtonTitle: "Add clicks"
5859
, actionButtonState: Button.Enabled
5960
, size: Small
60-
, title: "Modal title -- Small"
61+
, title: modalTitle "Modal title -- Small"
6162
, variant: ""
6263
, internalBorders: false
6364
, children:
@@ -82,7 +83,7 @@ docs = unit # make component
8283
, actionButtonTitle: "Add clicks"
8384
, actionButtonState: Button.Disabled
8485
, size: Medium
85-
, title: "Modal title -- Medium"
86+
, title: modalTitle "Modal title -- Medium"
8687
, variant: ""
8788
, internalBorders: false
8889
, children:
@@ -104,7 +105,7 @@ docs = unit # make component
104105
, actionButtonTitle: ""
105106
, actionButtonState: Button.Loading
106107
, size: Medium
107-
, title: "Modal title -- Medium"
108+
, title: modalTitle "Modal title -- Medium"
108109
, variant: ""
109110
, internalBorders: false
110111
, children:
@@ -126,7 +127,7 @@ docs = unit # make component
126127
, actionButtonTitle: "Add clicks"
127128
, actionButtonState: Button.Enabled
128129
, size: Large
129-
, title: "Modal title -- Large"
130+
, title: modalTitle "Modal title -- Large"
130131
, variant: ""
131132
, internalBorders: false
132133
, children:
@@ -155,7 +156,36 @@ docs = unit # make component
155156
, actionButtonTitle: "Add clicks"
156157
, actionButtonState: Button.Enabled
157158
, size: ExtraLarge
158-
, title: "Modal title -- Extra Large"
159+
, title: modalTitle "Modal title -- Extra Large"
160+
, variant: ""
161+
, internalBorders: false
162+
, children:
163+
fragment
164+
[ 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."
165+
, 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."
166+
, 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."
167+
, 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."
168+
, 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."
169+
, 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."
170+
]
171+
}
172+
173+
, example $
174+
button secondary
175+
{ onPress = capture_ $ self.setState _ { modalId = Just ExtraExtraLargeModal }
176+
, title = "Open modal, extra extra large"
177+
}
178+
179+
, guard (self.state.modalId == Just ExtraExtraLargeModal) $
180+
modal
181+
{ modalOpen: true
182+
, closeButton: true
183+
, onRequestClose: self.setState _ { modalId = Nothing }
184+
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
185+
, actionButtonTitle: "Add clicks"
186+
, actionButtonState: Button.Enabled
187+
, size: ExtraExtraLarge
188+
, title: modalTitle "Modal title -- Extra Extra Large"
159189
, variant: ""
160190
, internalBorders: false
161191
, children:
@@ -201,7 +231,7 @@ docs = unit # make component
201231
, actionButtonTitle: "Add clicks"
202232
, actionButtonState: Button.Enabled
203233
, size: Small
204-
, title: "Modal title -- Small"
234+
, title: modalTitle "Modal title -- Small"
205235
, variant: ""
206236
, internalBorders: false
207237
, children:
@@ -226,7 +256,7 @@ docs = unit # make component
226256
, actionButtonTitle: "Add clicks"
227257
, actionButtonState: Button.Enabled
228258
, size: Large
229-
, title: "Modal title -- Internall scrolling content"
259+
, title: modalTitle "Modal title -- Internall scrolling content"
230260
, variant: "internal-scrolling"
231261
, internalBorders: true
232262
, children:

‎src/Lumi/Components/Form.purs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ import Lumi.Components.Input as Input
8585
import Lumi.Components.LabeledField (RequiredField(..), labeledField, labeledFieldValidationErrorStyles, labeledFieldValidationWarningStyles)
8686
import Lumi.Components.Link as Link
8787
import Lumi.Components.Loader (loader)
88-
import Lumi.Components.Modal (modalLink)
88+
import Lumi.Components.Modal (modalLink, modalTitle)
8989
import Lumi.Components.NativeSelect as NativeSelect
9090
import Lumi.Components.Orientation (Orientation(..))
9191
import Lumi.Components.Row (row)
@@ -796,7 +796,7 @@ arrayModal { label, addLabel, defaultValue, summary, component, componentProps }
796796
then summary props x
797797
else modalLink
798798
{ label: summary props x
799-
, title: addLabel
799+
, title: modalTitle addLabel
800800
, value: x
801801
, onChange: onChange <<< editAt i <<< const
802802
, actionButtonTitle: addLabel
@@ -813,7 +813,7 @@ arrayModal { label, addLabel, defaultValue, summary, component, componentProps }
813813
Input.alignToInput $
814814
modalLink
815815
{ label: body_ ("+ " <> addLabel)
816-
, title: addLabel
816+
, title: modalTitle addLabel
817817
, value: defaultValue
818818
, onChange: \x -> onChange (flip append [x])
819819
, actionButtonTitle: addLabel

‎src/Lumi/Components/Modal.purs‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import Data.Foldable (foldMap, for_)
77
import Data.Maybe (Maybe(..))
88
import Data.Monoid (guard)
99
import Data.Nullable (Nullable, toMaybe, toNullable)
10-
import Data.String (null)
1110
import Effect (Effect)
1211
import Effect.Uncurried (EffectFn2, mkEffectFn1, runEffectFn2)
1312
import JSS (JSS, jss)
@@ -34,7 +33,7 @@ foreign import toggleBodyClass :: EffectFn2 String Boolean Unit
3433

3534
type ModalLinkProps value props =
3635
{ label :: JSX
37-
, title :: String
36+
, title :: JSX
3837
, component :: { value :: value
3938
, onChange :: value -> Effect Unit
4039
| props
@@ -135,7 +134,7 @@ type CommonProps rest =
135134
, children :: JSX
136135
, internalBorders :: Boolean
137136
, closeButton :: Boolean
138-
, title :: String
137+
, title :: JSX
139138
| rest
140139
}
141140

@@ -149,6 +148,9 @@ modal_ = modalBuilder modalPortal
149148
modal :: ModalProps -> JSX
150149
modal = element modal_
151150

151+
modalTitle :: String -> JSX
152+
modalTitle s = sectionHeader_ s
153+
152154
type DialogProps =
153155
{ modalOpen :: Boolean
154156
, onRequestClose :: Effect Unit
@@ -180,7 +182,7 @@ dialog = makeStateless dialogComponent render
180182
, children = [ props.children ]
181183
}
182184
, internalBorders: false
183-
, title: ""
185+
, title: modalTitle ""
184186
}
185187

186188
type ErrorModalProps =
@@ -209,7 +211,7 @@ errorModal = makeStateless errorModalComponent render
209211
, variant: ""
210212
, children: props.children
211213
, internalBorders: false
212-
, title: "Error"
214+
, title: modalTitle "Error"
213215
}
214216

215217
type ModalPortalProps = CommonProps (requestClose :: Effect Unit)
@@ -266,9 +268,7 @@ modalPortal = toReactComponent identity modalPortalComponent
266268
props.requestClose
267269
closeModal
268270
}
269-
, if not null props.title
270-
then sectionHeader_ props.title
271-
else empty
271+
, props.title
272272
]
273273
}
274274
, lumiModalContent
@@ -374,6 +374,9 @@ styles = jss
374374
, "&[data-size=\"extra-large\"]":
375375
{ width: "848px"
376376
}
377+
, "&[data-size=\"extra-extra-large\"]":
378+
{ width: "1048px"
379+
}
377380
, maxWidth: "calc(100vw - (24px * 2))"
378381
, background: "rgba(255, 255, 255, 1)"
379382
, borderRadius: "4px"
@@ -463,6 +466,7 @@ styles = jss
463466
, height: "100%"
464467
, width: "100vw"
465468
, maxWidth: "100vw"
469+
, borderRadius: "0"
466470
, "&[data-size=\"small\"], &[data-size=\"medium\"], &[data-size=\"large\"]":
467471
{ width: "100vw"
468472
}

‎src/Lumi/Components/Size.purs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ module Lumi.Components.Size where
22

33
import Prelude
44

5+
56
data Size
67
= Small
78
| Medium
89
| Large
910
| ExtraLarge
11+
| ExtraExtraLarge
1012

1113
derive instance eqSize :: Eq Size
1214
derive instance ordSize :: Ord Size
@@ -16,6 +18,7 @@ instance showSize :: Show Size where
1618
show Medium = "medium"
1719
show Large = "large"
1820
show ExtraLarge = "extra-large"
21+
show ExtraExtraLarge = "extra-extra-large"
1922

2023
small :: Size
2124
small = Small
@@ -28,3 +31,6 @@ large = Large
2831

2932
extraLarge :: Size
3033
extraLarge = ExtraLarge
34+
35+
extraExtraLarge :: Size
36+
extraExtraLarge = ExtraExtraLarge

‎src/Lumi/Styles/Button.purs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,13 @@ button colo kind state size = case kind of
214214
, padding: str "16px 32px"
215215
, height: int 64
216216
}
217+
ExtraExtraLarge ->
218+
css
219+
{ fontSize: int 20
220+
, lineHeight: int 32
221+
, padding: str "16px 32px"
222+
, height: int 64
223+
}
217224
]
218225
}
219226
)
@@ -245,6 +252,12 @@ button colo kind state size = case kind of
245252
nested
246253
$ mkLoader theme { radius: "34px", borderWidth: "4px" }
247254
}
255+
ExtraExtraLarge ->
256+
css
257+
{ "&:after":
258+
nested
259+
$ mkLoader theme { radius: "34px", borderWidth: "4px" }
260+
}
248261
}
249262
]
250263

0 commit comments

Comments
 (0)