@instructure/ui-range-input 10.2.3-snapshot-1 → 10.2.3-snapshot-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +18 -18
  3. package/src/RangeInput/README.md +93 -33
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.2.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-1) (2024-09-17)
6
+ ## [10.2.3-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-3) (2024-09-20)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-range-input
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-range-input",
3
- "version": "10.2.3-snapshot-1",
3
+ "version": "10.2.3-snapshot-3",
4
4
  "description": "A styled HTML range input",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,26 +24,26 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.24.5",
27
- "@instructure/console": "10.2.3-snapshot-1",
28
- "@instructure/emotion": "10.2.3-snapshot-1",
29
- "@instructure/shared-types": "10.2.3-snapshot-1",
30
- "@instructure/ui-color-utils": "10.2.3-snapshot-1",
31
- "@instructure/ui-dom-utils": "10.2.3-snapshot-1",
32
- "@instructure/ui-form-field": "10.2.3-snapshot-1",
33
- "@instructure/ui-i18n": "10.2.3-snapshot-1",
34
- "@instructure/ui-prop-types": "10.2.3-snapshot-1",
35
- "@instructure/ui-react-utils": "10.2.3-snapshot-1",
36
- "@instructure/ui-testable": "10.2.3-snapshot-1",
37
- "@instructure/ui-utils": "10.2.3-snapshot-1",
38
- "@instructure/ui-view": "10.2.3-snapshot-1",
39
- "@instructure/uid": "10.2.3-snapshot-1",
27
+ "@instructure/console": "10.2.3-snapshot-3",
28
+ "@instructure/emotion": "10.2.3-snapshot-3",
29
+ "@instructure/shared-types": "10.2.3-snapshot-3",
30
+ "@instructure/ui-color-utils": "10.2.3-snapshot-3",
31
+ "@instructure/ui-dom-utils": "10.2.3-snapshot-3",
32
+ "@instructure/ui-form-field": "10.2.3-snapshot-3",
33
+ "@instructure/ui-i18n": "10.2.3-snapshot-3",
34
+ "@instructure/ui-prop-types": "10.2.3-snapshot-3",
35
+ "@instructure/ui-react-utils": "10.2.3-snapshot-3",
36
+ "@instructure/ui-testable": "10.2.3-snapshot-3",
37
+ "@instructure/ui-utils": "10.2.3-snapshot-3",
38
+ "@instructure/ui-view": "10.2.3-snapshot-3",
39
+ "@instructure/uid": "10.2.3-snapshot-3",
40
40
  "prop-types": "^15.8.1"
41
41
  },
42
42
  "devDependencies": {
43
- "@instructure/ui-babel-preset": "10.2.3-snapshot-1",
44
- "@instructure/ui-test-locator": "10.2.3-snapshot-1",
45
- "@instructure/ui-test-utils": "10.2.3-snapshot-1",
46
- "@instructure/ui-themes": "10.2.3-snapshot-1"
43
+ "@instructure/ui-babel-preset": "10.2.3-snapshot-3",
44
+ "@instructure/ui-test-locator": "10.2.3-snapshot-3",
45
+ "@instructure/ui-test-utils": "10.2.3-snapshot-3",
46
+ "@instructure/ui-themes": "10.2.3-snapshot-3"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "react": ">=16.8 <=18"
package/src/RangeInput/README.md CHANGED
@@ -4,54 +4,114 @@ describes: RangeInput
4
4
 
5
5
  An html5 range input/slider component.
6
6
 
7
- ```js
8
- ---
9
- type: example
10
- ---
11
- class Example extends React.Component {
12
- state = {
13
- size: "small",
14
- thumbVariant: "accessible",
15
- }
7
+ - ```js
8
+ class Example extends React.Component {
9
+ state = {
10
+ size: 'small',
11
+ thumbVariant: 'accessible'
12
+ }
16
13
 
17
- handleSizeChange = (event, value) => {
18
- this.setState({ size: value })
19
- }
14
+ handleSizeChange = (event, value) => {
15
+ this.setState({ size: value })
16
+ }
17
+
18
+ handleThumbVariantChange = (event, value) => {
19
+ this.setState({ thumbVariant: value })
20
+ }
21
+
22
+ render() {
23
+ return (
24
+ <div>
25
+ <View as="div" padding="medium" background="primary">
26
+ <RangeInput
27
+ label="Grading range"
28
+ defaultValue={30}
29
+ max={100}
30
+ min={0}
31
+ size={this.state.size}
32
+ thumbVariant={this.state.thumbVariant}
33
+ />
34
+ </View>
20
35
 
21
- handleThumbVariantChange = (event, value) => {
22
- this.setState({ thumbVariant: value })
36
+ <View as="div" margin="medium 0 0">
37
+ <FormFieldGroup
38
+ description={
39
+ <ScreenReaderContent>
40
+ RangeInput Example Settings
41
+ </ScreenReaderContent>
42
+ }
43
+ layout="columns"
44
+ vAlign="top"
45
+ >
46
+ <RadioInputGroup
47
+ onChange={this.handleSizeChange}
48
+ name="labelSize"
49
+ value={this.state.size}
50
+ description="Label size"
51
+ >
52
+ <RadioInput label="small" value="small" />
53
+ <RadioInput label="medium" value="medium" />
54
+ <RadioInput label="large" value="large" />
55
+ </RadioInputGroup>
56
+
57
+ <RadioInputGroup
58
+ onChange={this.handleThumbVariantChange}
59
+ name="thumbVariant"
60
+ value={this.state.thumbVariant}
61
+ description="Thumb variant"
62
+ >
63
+ <RadioInput label="accessible" value="accessible" />
64
+ <RadioInput label="deprecated" value="deprecated" />
65
+ </RadioInputGroup>
66
+ </FormFieldGroup>
67
+ </View>
68
+ </div>
69
+ )
70
+ }
23
71
  }
72
+ render(<Example />)
73
+ ```
74
+
75
+ - ```js
76
+ const Example = () => {
77
+ const [size, setSize] = useState('small')
78
+ const [thumbVariant, setThumbVariant] = useState('accessible')
79
+
80
+ const handleSizeChange = (event, value) => {
81
+ setSize(value)
82
+ }
83
+
84
+ const handleThumbVariantChange = (event, value) => {
85
+ setThumbVariant(value)
86
+ }
24
87
 
25
- render() {
26
88
  return (
27
89
  <div>
28
- <View
29
- as="div"
30
- padding="medium"
31
- background="primary"
32
- >
90
+ <View as="div" padding="medium" background="primary">
33
91
  <RangeInput
34
92
  label="Grading range"
35
93
  defaultValue={30}
36
94
  max={100}
37
95
  min={0}
38
- size={this.state.size}
39
- thumbVariant={this.state.thumbVariant}
96
+ size={size}
97
+ thumbVariant={thumbVariant}
40
98
  />
41
99
  </View>
42
100
 
43
- <View as="div" margin='medium 0 0'>
101
+ <View as="div" margin="medium 0 0">
44
102
  <FormFieldGroup
45
103
  description={
46
- <ScreenReaderContent>RangeInput Example Settings</ScreenReaderContent>
104
+ <ScreenReaderContent>
105
+ RangeInput Example Settings
106
+ </ScreenReaderContent>
47
107
  }
48
- layout='columns'
49
- vAlign='top'
108
+ layout="columns"
109
+ vAlign="top"
50
110
  >
51
111
  <RadioInputGroup
52
- onChange={this.handleSizeChange}
112
+ onChange={handleSizeChange}
53
113
  name="labelSize"
54
- value={this.state.size}
114
+ value={size}
55
115
  description="Label size"
56
116
  >
57
117
  <RadioInput label="small" value="small" />
@@ -60,9 +120,9 @@ class Example extends React.Component {
60
120
  </RadioInputGroup>
61
121
 
62
122
  <RadioInputGroup
63
- onChange={this.handleThumbVariantChange}
123
+ onChange={handleThumbVariantChange}
64
124
  name="thumbVariant"
65
- value={this.state.thumbVariant}
125
+ value={thumbVariant}
66
126
  description="Thumb variant"
67
127
  >
68
128
  <RadioInput label="accessible" value="accessible" />
@@ -73,6 +133,6 @@ class Example extends React.Component {
73
133
  </div>
74
134
  )
75
135
  }
76
- }
77
- render(<Example />)
78
- ```
136
+
137
+ render(<Example />)
138
+ ```