Add focus helper to range test, update button styles (#11134)
When testing range input change events, clicking the knob would cause it to move if the click region wasn't precisely on the center of the knob. This is annoying! This commit adds a button to focus the range input knob and takes a small pass at styling buttons. A label would work here too, however it does not generate a focus ring in all browsers.
Nathan Hunzaker committed
Oct 6, 2017 at 12:58 UTC
09ed79a9429833cf213a36ec4b8af7afc68cdda0
2 files changed
+16
-7
fixtures/dom/src/components/fixtures/input-change-events/RangeKeyboardFixture.js
+10
-5
@@ -54,11 +54,16 @@ class RangeKeyboardFixture extends React.Component {
54
55
return (
56
<Fixture>
57
- <input
58
- type="range"
59
- ref={r => (this.input = r)}
60
- onChange={this.handleChange}
61
- />
57
+ <div>
58
+ <input
59
+ type="range"
60
+ ref={r => (this.input = r)}
61
+ onChange={this.handleChange}
62
+ />
63
+ <button onClick={() => this.input.focus()}>
64
+ Focus Knob
65
+ </button>
66
+ </div>
67
{' '}
68
69
<p style={{color}}>
fixtures/dom/src/style.css
+6
-2
@@ -17,9 +17,13 @@ body {
17
}
18
19
button {
20
+ background: white;
21
+ border-radius: 2px;
22
+ border: 1px solid rgba(0, 0, 0, 0.24);
23
+ cursor: pointer;
24
+ font-size: 16px;
25
margin: 10px;
21
- font-size: 18px;
22
- padding: 5px;
26
+ padding: 6px 8px;
27
}
28
29
.header {