@instructure/ui-rating 10.12.1-snapshot-2 → 10.12.1-snapshot-5

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 (8) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/RatingIcon/index.js +3 -2
  3. package/lib/RatingIcon/index.js +3 -2
  4. package/package.json +14 -14
  5. package/src/Rating/README.md +70 -47
  6. package/src/RatingIcon/index.tsx +7 -8
  7. package/tsconfig.build.tsbuildinfo +1 -1
  8. package/types/RatingIcon/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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.12.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-2) (2025-03-04)
6
+ ## [10.12.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-5) (2025-03-06)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-rating
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-rating:** add text value to Rating examples ([502449d](https://github.com/instructure/instructure-ui/commit/502449d2ab32f0fbc5a5e039d503fa1b97726538))
9
12
 
10
13
 
11
14
 
package/es/RatingIcon/index.js CHANGED
@@ -84,11 +84,12 @@ let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
84
84
  const animateFill = this.props.animateFill;
85
85
  const Icon = this.state.filled ? IconStarSolid : IconStarLightSolid;
86
86
  return jsx("span", {
87
+ "aria-hidden": "true",
87
88
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.ratingIcon,
88
89
  ref: el => {
89
90
  this.ref = el;
90
91
  }
91
- }, jsx("span", null, this.state.filled && animateFill ? jsx(Transition, {
92
+ }, this.state.filled && animateFill ? jsx(Transition, {
92
93
  in: true,
93
94
  transitionOnMount: true,
94
95
  type: "scale"
@@ -96,7 +97,7 @@ let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
96
97
  css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
97
98
  })) : jsx(Icon, {
98
99
  css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
99
- })));
100
+ }));
100
101
  }
101
102
  }, _RatingIcon.displayName = "RatingIcon", _RatingIcon.componentId = 'Rating.Icon', _RatingIcon.allowedProps = allowedProps, _RatingIcon.propTypes = propTypes, _RatingIcon.defaultProps = {
102
103
  animationDelay: 200,
package/lib/RatingIcon/index.js CHANGED
@@ -90,11 +90,12 @@ let RatingIcon = exports.RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.de
90
90
  const animateFill = this.props.animateFill;
91
91
  const Icon = this.state.filled ? _IconStarSolid.IconStarSolid : _IconStarLightSolid.IconStarLightSolid;
92
92
  return (0, _emotion.jsx)("span", {
93
+ "aria-hidden": "true",
93
94
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.ratingIcon,
94
95
  ref: el => {
95
96
  this.ref = el;
96
97
  }
97
- }, (0, _emotion.jsx)("span", null, this.state.filled && animateFill ? (0, _emotion.jsx)(_Transition.Transition, {
98
+ }, this.state.filled && animateFill ? (0, _emotion.jsx)(_Transition.Transition, {
98
99
  in: true,
99
100
  transitionOnMount: true,
100
101
  type: "scale"
@@ -102,7 +103,7 @@ let RatingIcon = exports.RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.de
102
103
  css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
103
104
  })) : (0, _emotion.jsx)(Icon, {
104
105
  css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
105
- })));
106
+ }));
106
107
  }
107
108
  }, _RatingIcon.displayName = "RatingIcon", _RatingIcon.componentId = 'Rating.Icon', _RatingIcon.allowedProps = _props.allowedProps, _RatingIcon.propTypes = _props.propTypes, _RatingIcon.defaultProps = {
108
109
  animationDelay: 200,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-rating",
3
- "version": "10.12.1-snapshot-2",
3
+ "version": "10.12.1-snapshot-5",
4
4
  "description": "A static rating component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,22 +24,22 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.12.1-snapshot-2",
28
- "@instructure/emotion": "10.12.1-snapshot-2",
29
- "@instructure/shared-types": "10.12.1-snapshot-2",
30
- "@instructure/ui-a11y-content": "10.12.1-snapshot-2",
31
- "@instructure/ui-dom-utils": "10.12.1-snapshot-2",
32
- "@instructure/ui-icons": "10.12.1-snapshot-2",
33
- "@instructure/ui-motion": "10.12.1-snapshot-2",
34
- "@instructure/ui-react-utils": "10.12.1-snapshot-2",
35
- "@instructure/ui-testable": "10.12.1-snapshot-2",
36
- "@instructure/ui-view": "10.12.1-snapshot-2",
27
+ "@instructure/console": "10.12.1-snapshot-5",
28
+ "@instructure/emotion": "10.12.1-snapshot-5",
29
+ "@instructure/shared-types": "10.12.1-snapshot-5",
30
+ "@instructure/ui-a11y-content": "10.12.1-snapshot-5",
31
+ "@instructure/ui-dom-utils": "10.12.1-snapshot-5",
32
+ "@instructure/ui-icons": "10.12.1-snapshot-5",
33
+ "@instructure/ui-motion": "10.12.1-snapshot-5",
34
+ "@instructure/ui-react-utils": "10.12.1-snapshot-5",
35
+ "@instructure/ui-testable": "10.12.1-snapshot-5",
36
+ "@instructure/ui-view": "10.12.1-snapshot-5",
37
37
  "prop-types": "^15.8.1"
38
38
  },
39
39
  "devDependencies": {
40
- "@instructure/ui-axe-check": "10.12.1-snapshot-2",
41
- "@instructure/ui-babel-preset": "10.12.1-snapshot-2",
42
- "@instructure/ui-themes": "10.12.1-snapshot-2",
40
+ "@instructure/ui-axe-check": "10.12.1-snapshot-5",
41
+ "@instructure/ui-babel-preset": "10.12.1-snapshot-5",
42
+ "@instructure/ui-themes": "10.12.1-snapshot-5",
43
43
  "@testing-library/jest-dom": "^6.6.3",
44
44
  "@testing-library/react": "^16.0.1",
45
45
  "vitest": "^2.1.8"
package/src/Rating/README.md CHANGED
@@ -20,27 +20,32 @@ this feature using the `animateFill` prop.
20
20
  ---
21
21
  type: example
22
22
  ---
23
- <div>
24
- <Rating
25
- formatValueText={function (currentRating, maxRating) {
26
- return currentRating + ' out of ' + maxRating
27
- }}
28
- label="Overall rating of freshman year experience"
29
- valueNow={68.45}
30
- valueMax={100}
31
- />
32
- <br />
33
- <Rating
34
- animateFill
35
- formatValueText={function (currentRating, maxRating) {
36
- return currentRating + ' out of ' + maxRating
37
- }}
38
- label="Overall rating of freshman year experience"
39
- iconCount={5}
40
- valueNow={68.45}
41
- valueMax={100}
42
- />
43
- </div>
23
+ <Flex gap="large">
24
+ <Flex gap="x-small">
25
+ <Rating
26
+ formatValueText={function (currentRating, maxRating) {
27
+ return currentRating + ' out of ' + maxRating
28
+ }}
29
+ label="Overall rating of freshman year experience"
30
+ valueNow={68.45}
31
+ valueMax={100}
32
+ />
33
+ <div>2/3</div>
34
+ </Flex>
35
+ <Flex gap="x-small">
36
+ <Rating
37
+ animateFill
38
+ formatValueText={function (currentRating, maxRating) {
39
+ return currentRating + ' out of ' + maxRating
40
+ }}
41
+ label="Overall rating of freshman year experience"
42
+ iconCount={5}
43
+ valueNow={68.45}
44
+ valueMax={100}
45
+ />
46
+ <div>3/5</div>
47
+ </Flex>
48
+ </Flex>
44
49
  ```
45
50
 
46
51
  ### Sizes
@@ -52,30 +57,48 @@ space around the actual rating.
52
57
  ---
53
58
  type: example
54
59
  ---
55
- <div>
56
- <Rating
57
- label="Product rating"
58
- size="small"
59
- iconCount={5}
60
- valueNow={3.76}
61
- valueMax={5}
62
- margin="x-small medium xx-small none"
63
- />
64
- <Rating
65
- label="Overall rating of college experience"
66
- iconCount={5}
67
- valueNow={30}
68
- valueMax={100}
69
- margin="x-small xx-large"
70
- />
71
- <Rating
72
- animateFill
73
- label="Rating of professor"
74
- size="large"
75
- iconCount={5}
76
- valueNow={8}
77
- valueMax={8}
78
- margin="medium"
79
- />
80
- </div>
60
+ <Flex gap="large">
61
+ <Flex>
62
+ <Rating
63
+ label="Product rating"
64
+ size="small"
65
+ iconCount={5}
66
+ valueNow={3.76}
67
+ valueMax={5}
68
+ margin="small"/>
69
+ <div>4/5</div>
70
+ </Flex>
71
+ <Flex>
72
+ <Rating
73
+ label="Overall rating of college experience"
74
+ iconCount={5}
75
+ valueNow={30}
76
+ valueMax={100}
77
+ margin="small"
78
+ />
79
+ <div>2/5</div>
80
+ </Flex>
81
+ <Flex>
82
+ <Rating
83
+ animateFill
84
+ label="Rating of professor"
85
+ size="large"
86
+ iconCount={5}
87
+ valueNow={8}
88
+ valueMax={8}
89
+ margin="small"/>
90
+ <div>5/5</div>
91
+ </Flex>
92
+ </Flex>
93
+ ```
94
+
95
+ ```js
96
+ ---
97
+ type: embed
98
+ ---
99
+ <Guidelines>
100
+ <Figure recommendation="a11y" title="Accessibility">
101
+ <Figure.Item>Display a textual value for the rating to meet WCAG 2.1 Use of Color standards. "Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator where state depends on whether it's filled or empty is likely to fail the Use of color criterion"</Figure.Item>
102
+ </Figure>
103
+ </Guidelines>
81
104
  ```
package/src/RatingIcon/index.tsx CHANGED
@@ -110,20 +110,19 @@ class RatingIcon extends Component<RatingIconProps, RatingIconState> {
110
110
 
111
111
  return (
112
112
  <span
113
+ aria-hidden="true"
113
114
  css={this.props.styles?.ratingIcon}
114
115
  ref={(el) => {
115
116
  this.ref = el
116
117
  }}
117
118
  >
118
- <span>
119
- {this.state.filled && animateFill ? (
120
- <Transition in transitionOnMount type="scale">
121
- <Icon css={this.props.styles?.icon} />
122
- </Transition>
123
- ) : (
119
+ {this.state.filled && animateFill ? (
120
+ <Transition in transitionOnMount type="scale">
124
121
  <Icon css={this.props.styles?.icon} />
125
- )}
126
- </span>
122
+ </Transition>
123
+ ) : (
124
+ <Icon css={this.props.styles?.icon} />
125
+ )}
127
126
  </span>
128
127
  )
129
128
  }