Skip to content

Commit f669abd

Browse files
author
Madeline Trotter
authored
Remove then re-add/redo mobile-specific button, input, select, and native select resizing (#86)
* Invert NativeSelect media query * Adjust Select mobile styles * Nudged all the things * Restore inputRow * Fix right-aligned select padding
1 parent 176a3b9 commit f669abd

File tree

7 files changed

+218
-217
lines changed

7 files changed

+218
-217
lines changed

‎docs/Examples/Input.example.purs‎

Lines changed: 79 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
module Lumi.Components.Examples.Input where
22

33
import Prelude
4-
54
import Data.Maybe (Maybe(Just))
65
import Data.Nullable (toNullable)
7-
import Lumi.Components.Size (Size(..))
86
import Lumi.Components.Column (column_)
9-
import Lumi.Components.Input (CheckboxState(..), alignToInput, checkbox, input, inputRow, inputRow_, radio, range, switch, text_)
10-
import Lumi.Components.Row (row_)
11-
import Lumi.Components.Text (body_, h2_, h4_, p_)
127
import Lumi.Components.Example (example)
8+
import Lumi.Components.Input (CheckboxState(..), alignToInput, checkbox, input, radio, range, switch, text_)
9+
import Lumi.Components.Row (row_)
10+
import Lumi.Components.Size (Size(..))
11+
import Lumi.Components.Text (body, h2_, h4_, p_, text)
1312
import React.Basic (JSX)
1413
import React.Basic.DOM as R
1514

@@ -19,171 +18,101 @@ docs =
1918
[ h4_ "Simple text input"
2019
, example
2120
$ input text_ { placeholder = "Placeholder..." }
22-
23-
2421
, h4_ "Text input with a placeholder"
2522
, example
26-
$ input text_
27-
{ placeholder = "Placeholder..."
28-
, value = "This input contains a value"
29-
}
30-
31-
23+
$ input
24+
text_
25+
{ placeholder = "Placeholder..."
26+
, value = "This input contains a value"
27+
}
3228
, h4_ "Invalid input value"
3329
, example
34-
$ input text_
35-
{ placeholder = "Placeholder..."
36-
, pattern = toNullable $ Just "d+"
37-
, value = "An invalid value"
38-
}
39-
40-
30+
$ input
31+
text_
32+
{ placeholder = "Placeholder..."
33+
, pattern = toNullable $ Just "d+"
34+
, value = "An invalid value"
35+
}
4136
, h4_ "Disabled input"
4237
, example
43-
$ input text_
44-
{ placeholder = "Placeholder..."
45-
, disabled = true
46-
}
47-
48-
38+
$ input
39+
text_
40+
{ placeholder = "Placeholder..."
41+
, disabled = true
42+
}
4943
, h4_ "Disabled input with a value"
5044
, example
51-
$ input text_
52-
{ placeholder = "Placeholder..."
53-
, value = "Disabled with a value"
54-
, disabled = true
55-
}
56-
57-
45+
$ input
46+
text_
47+
{ placeholder = "Placeholder..."
48+
, value = "Disabled with a value"
49+
, disabled = true
50+
}
5851
, h4_ "Aligning components with input text"
5952
, p_ "`AlignToInput` applies the padding values inputs use to any child component. Use this to align elements with inputs instead of manually specifying padding."
6053
, example
6154
$ row_
62-
[ alignToInput $ body_ "Some aligned text"
63-
, input text_
64-
{ placeholder = "Placeholder..."
65-
, value = "Input value"
66-
}
55+
[ alignToInput
56+
$ text
57+
body
58+
{ children = [ R.text "Some aligned text" ]
59+
, style = R.css { whiteSpace: "nowrap" }
60+
}
61+
, input
62+
text_
63+
{ placeholder = "Placeholder..."
64+
, value = "Input value"
65+
}
6766
]
68-
69-
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-
10167
, h2_ "Checkbox"
102-
10368
, h4_ "Medium"
104-
, example
105-
$ inputRow_ "Field label" checkbox { checked = Off }
106-
107-
108-
, example
109-
$ inputRow_ "Field label" checkbox { checked = On }
110-
111-
112-
, example
113-
$ inputRow_ "Field label" checkbox { checked = Indeterminate }
114-
115-
69+
, exampleRow $ input checkbox { checked = Off }
70+
, exampleRow $ input checkbox { checked = On }
71+
, exampleRow $ input checkbox { checked = Indeterminate }
11672
, h4_ "Small"
117-
, example
118-
$ inputRow_ "Field label" checkbox
119-
{ size = Small
120-
, checked = Off
121-
}
122-
123-
124-
, example
125-
$ inputRow_ "Field label" checkbox
126-
{ size = Small
127-
, checked = On
128-
}
129-
130-
131-
, example
132-
$ inputRow_ "Field label" checkbox
133-
{ size = Small
134-
, checked = Indeterminate
135-
}
136-
137-
73+
, exampleRow
74+
$ input
75+
checkbox
76+
{ size = Small
77+
, checked = Off
78+
}
79+
, exampleRow
80+
$ input
81+
checkbox
82+
{ size = Small
83+
, checked = On
84+
}
85+
, exampleRow
86+
$ input
87+
checkbox
88+
{ size = Small
89+
, checked = Indeterminate
90+
}
13891
, h2_ "Radio"
139-
14092
, h4_ "Medium"
141-
, example
142-
$ inputRow_ "Field label" radio { checked = Off }
143-
144-
145-
, example
146-
$ inputRow_ "Field Label" radio { checked = On }
147-
148-
93+
, exampleRow $ input radio { checked = Off }
94+
, exampleRow $ input radio { checked = On }
14995
, h4_ "Small"
150-
, example
151-
$ inputRow_ "Field Label" radio
152-
{ size = Small
153-
, checked = Off
154-
}
155-
156-
157-
, example
158-
$ inputRow_ "Field label" radio
159-
{ size = Small
160-
, checked = On
161-
}
162-
96+
, exampleRow
97+
$ input
98+
radio
99+
{ size = Small
100+
, checked = Off
101+
}
102+
, exampleRow
103+
$ input
104+
radio
105+
{ size = Small
106+
, checked = On
107+
}
163108
, h2_ "Switch"
164-
165-
, example
166-
$ input switch { checked = Off }
167-
168-
169-
, example
170-
$ input switch { checked = On }
171-
109+
, exampleRow $ input switch { checked = Off }
110+
, exampleRow $ input switch { checked = On }
172111
, h2_ "Switch (Large)"
173-
174-
, example
175-
$ input switch { checked = Off, size = Large }
176-
177-
178-
, example
179-
$ input switch { checked = On, size = Large }
180-
181-
182-
112+
, exampleRow $ input switch { checked = Off, size = Large }
113+
, exampleRow $ input switch { checked = On, size = Large }
183114
, h2_ "Range"
184-
185-
, example
186-
$ input range
187-
188-
115+
, exampleRow $ input range
189116
]
117+
where
118+
exampleRow child = example $ row_ [ child ]

‎docs/Examples/NativeSelect.example.purs‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import Prelude
44

55
import Data.Maybe (fromMaybe)
66
import Lumi.Components.Column (column_)
7-
import Lumi.Components.NativeSelect (defaults, nativeSelect)
87
import Lumi.Components.Example (example)
8+
import Lumi.Components.NativeSelect (defaults, nativeSelect)
99
import React.Basic (Component, JSX, createComponent, make)
10+
import React.Basic.DOM as R
1011
import React.Basic.DOM.Events (targetValue)
1112
import React.Basic.Events (handler)
1213

@@ -38,4 +39,13 @@ docs = unit # make component
3839
self.setState _ { selectedOption = fromMaybe "" value }
3940
, value = self.state.selectedOption
4041
}
42+
43+
, example
44+
$ nativeSelect defaults
45+
{ options = opts
46+
, onChange = handler targetValue \value ->
47+
self.setState _ { selectedOption = fromMaybe "" value }
48+
, value = self.state.selectedOption
49+
, style = R.css { textAlignLast: "right" }
50+
}
4151
]

‎src/JSS/JSS.purs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ module JSS
33
, JSSInstance
44
, JSSStyleSheet
55
, JSS
6+
, JSSValue
67
, jss
78
, createInstance
89
, preset
910
, createStyleSheet
1011
, globalAttachStyleSheet
1112
, toStringStyleSheet
13+
, important
14+
, jssValue
1215
) where
1316

1417
import Prelude
@@ -25,6 +28,8 @@ foreign import data JSSStyleSheet :: Type
2528

2629
foreign import data JSS :: Type
2730

31+
foreign import data JSSValue :: Type
32+
2833
jss :: forall styles. {| styles } -> JSS
2934
jss = unsafeCoerce
3035

@@ -46,3 +51,16 @@ globalAttachStyleSheet = runEffectFn1 globalAttachStyleSheet_
4651
foreign import globalAttachStyleSheet_ :: EffectFn1 JSSStyleSheet Unit
4752

4853
foreign import toStringStyleSheet :: JSSStyleSheet -> String
54+
55+
-- | Allows the mixing of types in the values passed to JSS.
56+
-- | For example, to create `!important` properties JSS
57+
-- | sometimes requires heterogeneous arrays:
58+
-- |
59+
-- | ```purs
60+
-- | [ [ "10px" ], "!important" ]
61+
-- | ```
62+
jssValue :: forall a. a -> JSSValue
63+
jssValue = unsafeCoerce
64+
65+
important :: forall a. a -> JSSValue
66+
important a = jssValue [ jssValue [ a ], jssValue "!important" ]

0 commit comments

Comments
 (0)