@instructure/ui-calendar 9.5.2-snapshot-7 → 9.6.0

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 (17) hide show
  1. package/CHANGELOG.md +10 -4
  2. package/es/Calendar/Day/theme.js +7 -8
  3. package/es/Calendar/__new-tests__/Calendar.test.js +1 -1
  4. package/es/Calendar/index.js +16 -10
  5. package/es/Calendar/theme.js +2 -3
  6. package/lib/Calendar/Day/theme.js +7 -8
  7. package/lib/Calendar/__new-tests__/Calendar.test.js +1 -1
  8. package/lib/Calendar/index.js +16 -10
  9. package/lib/Calendar/theme.js +2 -3
  10. package/package.json +20 -20
  11. package/src/Calendar/Day/theme.ts +7 -7
  12. package/src/Calendar/__new-tests__/Calendar.test.tsx +1 -1
  13. package/src/Calendar/index.tsx +38 -14
  14. package/src/Calendar/theme.ts +2 -2
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/Calendar/index.d.ts +1 -1
  17. package/types/Calendar/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,17 +3,23 @@
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
- ## [9.5.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-7) (2024-07-31)
6
+ # [9.6.0](https://github.com/instructure/instructure-ui/compare/v9.5.2...v9.6.0) (2024-08-14)
7
7
 
8
8
 
9
9
  ### Features
10
10
 
11
- * **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
11
+ * **ui-calendar,ui-date-input:** improve DateInput2 onChange callback, add date formatting option, extend docs ([4e2c23c](https://github.com/instructure/instructure-ui/commit/4e2c23c3288885e49030f1f471d61b2fed29b54c))
12
12
 
13
13
 
14
- ### BREAKING CHANGES
15
14
 
16
- * **many:** Breaks color overrides in certain cases
15
+
16
+
17
+ ## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **ui-calendar,ui-date-input:** fix year picker for non latin based locales; return iso date string in onRequestValidateDate ([d7df0e8](https://github.com/instructure/instructure-ui/commit/d7df0e8d9fc0656e877bd243d9858dc3e5a47198))
17
23
 
18
24
 
19
25
 
package/es/Calendar/Day/theme.js CHANGED
@@ -28,7 +28,6 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
32
31
  const borders = theme.borders,
33
32
  colors = theme.colors,
34
33
  typography = theme.typography,
@@ -42,18 +41,18 @@ const generateComponentTheme = theme => {
42
41
  }
43
42
  };
44
43
  const componentVariables = {
45
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
46
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
44
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
45
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
47
46
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
48
47
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
49
48
  height: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
50
49
  minWidth: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
51
- outsideMonthColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,
52
- selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
53
- selectedColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
50
+ outsideMonthColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
51
+ selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
52
+ selectedColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
54
53
  selectedBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
55
- todayBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
56
- todayColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
54
+ todayBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
55
+ todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
57
56
  todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
58
57
  };
59
58
  return {
package/es/Calendar/__new-tests__/Calendar.test.js CHANGED
@@ -81,7 +81,7 @@ describe('<Calendar />', () => {
81
81
  expect(selectedDay).toBeDefined();
82
82
  if (selectedDay) {
83
83
  var _window$getComputedSt;
84
- expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(3, 137, 61)');
84
+ expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(11, 135, 75)');
85
85
  }
86
86
  });
87
87
  });
package/es/Calendar/index.js CHANGED
@@ -132,17 +132,18 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
132
132
  this.handleYearChange = (e, year) => {
133
133
  const withYearPicker = this.props.withYearPicker;
134
134
  const visibleMonth = this.state.visibleMonth;
135
+ const yearNumber = Number(DateTime.parse(year, this.locale(), this.timezone()).locale('en').format('YYYY'));
135
136
  const newDate = visibleMonth.clone();
136
137
  if (withYearPicker !== null && withYearPicker !== void 0 && withYearPicker.onRequestYearChange) {
137
- withYearPicker.onRequestYearChange(e, year);
138
+ withYearPicker.onRequestYearChange(e, yearNumber);
138
139
  return;
139
140
  }
140
- newDate.year(year);
141
+ newDate.year(yearNumber);
141
142
  this.setState({
142
143
  visibleMonth: newDate
143
144
  });
144
145
  };
145
- // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
146
+ // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
146
147
  this.handleDayClick = (event, {
147
148
  date
148
149
  }) => {
@@ -173,14 +174,18 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
173
174
  return this.props.role === 'listbox' ? this.props.role : void 0;
174
175
  }
175
176
  get hasPrevMonth() {
176
- return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().subtract({
177
+ // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
178
+ const yearNumber = Number(this.state.visibleMonth.clone().locale('en').subtract({
177
179
  months: 1
178
- }).format('YYYY')) >= this.props.withYearPicker.startYear;
180
+ }).format('YYYY'));
181
+ return !this.props.withYearPicker || this.props.withYearPicker && yearNumber >= this.props.withYearPicker.startYear;
179
182
  }
180
183
  get hasNextMonth() {
181
- return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().add({
184
+ // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
185
+ const yearNumber = Number(this.state.visibleMonth.clone().locale('en').subtract({
182
186
  months: 1
183
- }).format('YYYY')) <= this.props.withYearPicker.endYear;
187
+ }).format('YYYY'));
188
+ return !this.props.withYearPicker || this.props.withYearPicker && yearNumber <= this.props.withYearPicker.endYear;
184
189
  }
185
190
  renderHeader() {
186
191
  const _this$props5 = this.props,
@@ -200,7 +205,8 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
200
205
  const startYear = withYearPicker.startYear,
201
206
  endYear = withYearPicker.endYear;
202
207
  for (let year = endYear; year >= startYear; year--) {
203
- yearList.push(year);
208
+ // add the years to the list with the correct locale
209
+ yearList.push(DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
204
210
  }
205
211
  }
206
212
  return jsx("div", null, jsx("div", {
@@ -211,10 +217,10 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
211
217
  width: "90px",
212
218
  renderLabel: "",
213
219
  assistiveText: withYearPicker.screenReaderLabel,
214
- value: Number(visibleMonth.format('YYYY')),
220
+ value: visibleMonth.format('YYYY'),
215
221
  onChange: (e, {
216
222
  value
217
- }) => this.handleYearChange(e, Number(value))
223
+ }) => this.handleYearChange(e, `${value}`)
218
224
  }, yearList.map(year => jsx(SimpleSelect.Option, {
219
225
  key: year,
220
226
  id: `opt-${year}`,
package/es/Calendar/theme.js CHANGED
@@ -28,7 +28,6 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2;
32
31
  const colors = theme.colors,
33
32
  typography = theme.typography,
34
33
  spacing = theme.spacing,
@@ -42,8 +41,8 @@ const generateComponentTheme = theme => {
42
41
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
43
42
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
44
43
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
45
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
46
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
44
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
45
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
47
46
  navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
48
47
  navWithYearMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
49
48
  yearPickerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.mediumSmall,
package/lib/Calendar/Day/theme.js CHANGED
@@ -34,7 +34,6 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
38
37
  const borders = theme.borders,
39
38
  colors = theme.colors,
40
39
  typography = theme.typography,
@@ -48,18 +47,18 @@ const generateComponentTheme = theme => {
48
47
  }
49
48
  };
50
49
  const componentVariables = {
51
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
52
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
50
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
51
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
53
52
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
54
53
  padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
55
54
  height: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
56
55
  minWidth: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
57
- outsideMonthColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,
58
- selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.green4570,
59
- selectedColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
56
+ outsideMonthColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
57
+ selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
58
+ selectedColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
60
59
  selectedBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
61
- todayBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
62
- todayColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
60
+ todayBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
61
+ todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
63
62
  todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
64
63
  };
65
64
  return {
package/lib/Calendar/__new-tests__/Calendar.test.js CHANGED
@@ -84,7 +84,7 @@ describe('<Calendar />', () => {
84
84
  expect(selectedDay).toBeDefined();
85
85
  if (selectedDay) {
86
86
  var _window$getComputedSt;
87
- expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(3, 137, 61)');
87
+ expect((_window$getComputedSt = window.getComputedStyle(selectedDay)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.background).toBe('rgb(11, 135, 75)');
88
88
  }
89
89
  });
90
90
  });
package/lib/Calendar/index.js CHANGED
@@ -143,17 +143,18 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
143
143
  this.handleYearChange = (e, year) => {
144
144
  const withYearPicker = this.props.withYearPicker;
145
145
  const visibleMonth = this.state.visibleMonth;
146
+ const yearNumber = Number(_DateTime.DateTime.parse(year, this.locale(), this.timezone()).locale('en').format('YYYY'));
146
147
  const newDate = visibleMonth.clone();
147
148
  if (withYearPicker !== null && withYearPicker !== void 0 && withYearPicker.onRequestYearChange) {
148
- withYearPicker.onRequestYearChange(e, year);
149
+ withYearPicker.onRequestYearChange(e, yearNumber);
149
150
  return;
150
151
  }
151
- newDate.year(year);
152
+ newDate.year(yearNumber);
152
153
  this.setState({
153
154
  visibleMonth: newDate
154
155
  });
155
156
  };
156
- // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
157
+ // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
157
158
  this.handleDayClick = (event, {
158
159
  date
159
160
  }) => {
@@ -184,14 +185,18 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
184
185
  return this.props.role === 'listbox' ? this.props.role : void 0;
185
186
  }
186
187
  get hasPrevMonth() {
187
- return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().subtract({
188
+ // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
189
+ const yearNumber = Number(this.state.visibleMonth.clone().locale('en').subtract({
188
190
  months: 1
189
- }).format('YYYY')) >= this.props.withYearPicker.startYear;
191
+ }).format('YYYY'));
192
+ return !this.props.withYearPicker || this.props.withYearPicker && yearNumber >= this.props.withYearPicker.startYear;
190
193
  }
191
194
  get hasNextMonth() {
192
- return !this.props.withYearPicker || this.props.withYearPicker && Number(this.state.visibleMonth.clone().add({
195
+ // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
196
+ const yearNumber = Number(this.state.visibleMonth.clone().locale('en').subtract({
193
197
  months: 1
194
- }).format('YYYY')) <= this.props.withYearPicker.endYear;
198
+ }).format('YYYY'));
199
+ return !this.props.withYearPicker || this.props.withYearPicker && yearNumber <= this.props.withYearPicker.endYear;
195
200
  }
196
201
  renderHeader() {
197
202
  const _this$props5 = this.props,
@@ -211,7 +216,8 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
211
216
  const startYear = withYearPicker.startYear,
212
217
  endYear = withYearPicker.endYear;
213
218
  for (let year = endYear; year >= startYear; year--) {
214
- yearList.push(year);
219
+ // add the years to the list with the correct locale
220
+ yearList.push(_DateTime.DateTime.parse(year.toString(), this.locale(), this.timezone()).format('YYYY'));
215
221
  }
216
222
  }
217
223
  return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
@@ -222,10 +228,10 @@ let Calendar = exports.Calendar = (_dec = (0, _emotion.withStyle)(_styles.defaul
222
228
  width: "90px",
223
229
  renderLabel: "",
224
230
  assistiveText: withYearPicker.screenReaderLabel,
225
- value: Number(visibleMonth.format('YYYY')),
231
+ value: visibleMonth.format('YYYY'),
226
232
  onChange: (e, {
227
233
  value
228
- }) => this.handleYearChange(e, Number(value))
234
+ }) => this.handleYearChange(e, `${value}`)
229
235
  }, yearList.map(year => (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
230
236
  key: year,
231
237
  id: `opt-${year}`,
package/lib/Calendar/theme.js CHANGED
@@ -34,7 +34,6 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2;
38
37
  const colors = theme.colors,
39
38
  typography = theme.typography,
40
39
  spacing = theme.spacing,
@@ -48,8 +47,8 @@ const generateComponentTheme = theme => {
48
47
  fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
49
48
  fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
49
  fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
51
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
52
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
50
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
51
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
53
52
  navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
54
53
  navWithYearMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
55
54
  yearPickerMargin: spacing === null || spacing === void 0 ? void 0 : spacing.mediumSmall,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-calendar",
3
- "version": "9.5.2-snapshot-7",
3
+ "version": "9.6.0",
4
4
  "description": "A calendar component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,31 +23,31 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "9.5.2-snapshot-7",
27
- "@instructure/ui-color-utils": "9.5.2-snapshot-7",
28
- "@instructure/ui-test-locator": "9.5.2-snapshot-7",
29
- "@instructure/ui-test-utils": "9.5.2-snapshot-7",
30
- "@instructure/ui-themes": "9.5.2-snapshot-7",
26
+ "@instructure/ui-babel-preset": "9.6.0",
27
+ "@instructure/ui-color-utils": "9.6.0",
28
+ "@instructure/ui-test-locator": "9.6.0",
29
+ "@instructure/ui-test-utils": "9.6.0",
30
+ "@instructure/ui-themes": "9.6.0",
31
31
  "@testing-library/jest-dom": "^6.4.6",
32
32
  "@testing-library/react": "^15.0.7",
33
33
  "vitest": "^2.0.2"
34
34
  },
35
35
  "dependencies": {
36
36
  "@babel/runtime": "^7.24.5",
37
- "@instructure/console": "9.5.2-snapshot-7",
38
- "@instructure/emotion": "9.5.2-snapshot-7",
39
- "@instructure/shared-types": "9.5.2-snapshot-7",
40
- "@instructure/ui-a11y-content": "9.5.2-snapshot-7",
41
- "@instructure/ui-buttons": "9.5.2-snapshot-7",
42
- "@instructure/ui-i18n": "9.5.2-snapshot-7",
43
- "@instructure/ui-icons": "9.5.2-snapshot-7",
44
- "@instructure/ui-prop-types": "9.5.2-snapshot-7",
45
- "@instructure/ui-react-utils": "9.5.2-snapshot-7",
46
- "@instructure/ui-simple-select": "9.5.2-snapshot-7",
47
- "@instructure/ui-testable": "9.5.2-snapshot-7",
48
- "@instructure/ui-utils": "9.5.2-snapshot-7",
49
- "@instructure/ui-view": "9.5.2-snapshot-7",
50
- "@instructure/uid": "9.5.2-snapshot-7",
37
+ "@instructure/console": "9.6.0",
38
+ "@instructure/emotion": "9.6.0",
39
+ "@instructure/shared-types": "9.6.0",
40
+ "@instructure/ui-a11y-content": "9.6.0",
41
+ "@instructure/ui-buttons": "9.6.0",
42
+ "@instructure/ui-i18n": "9.6.0",
43
+ "@instructure/ui-icons": "9.6.0",
44
+ "@instructure/ui-prop-types": "9.6.0",
45
+ "@instructure/ui-react-utils": "9.6.0",
46
+ "@instructure/ui-simple-select": "9.6.0",
47
+ "@instructure/ui-testable": "9.6.0",
48
+ "@instructure/ui-utils": "9.6.0",
49
+ "@instructure/ui-view": "9.6.0",
50
+ "@instructure/uid": "9.6.0",
51
51
  "prop-types": "^15.8.1"
52
52
  },
53
53
  "peerDependencies": {
package/src/Calendar/Day/theme.ts CHANGED
@@ -41,21 +41,21 @@ const generateComponentTheme = (theme: Theme): CalendarDayTheme => {
41
41
  }
42
42
 
43
43
  const componentVariables: CalendarDayTheme = {
44
- color: colors?.contrasts?.grey125125,
45
- background: colors?.contrasts?.white1010,
44
+ color: colors?.textDarkest,
45
+ background: colors?.backgroundLightest,
46
46
  fontSize: typography?.fontSizeMedium,
47
47
  padding: spacing?.xxSmall,
48
48
  height: forms?.inputHeightSmall,
49
49
  minWidth: forms?.inputHeightSmall,
50
50
 
51
- outsideMonthColor: colors?.contrasts?.grey4570,
51
+ outsideMonthColor: colors?.textDark,
52
52
 
53
- selectedBackground: colors?.contrasts?.green4570,
54
- selectedColor: colors?.contrasts?.white1010,
53
+ selectedBackground: colors?.backgroundSuccess,
54
+ selectedColor: colors?.textLightest,
55
55
  selectedBorderRadius: borders?.radiusMedium,
56
56
 
57
- todayBackground: colors?.contrasts?.blue4570,
58
- todayColor: colors?.contrasts?.white1010,
57
+ todayBackground: colors?.backgroundBrand,
58
+ todayColor: colors?.textLightest,
59
59
  todayBorderRadius: forms?.inputHeightSmall
60
60
  }
61
61
 
package/src/Calendar/__new-tests__/Calendar.test.tsx CHANGED
@@ -94,7 +94,7 @@ describe('<Calendar />', () => {
94
94
  expect(selectedDay).toBeDefined()
95
95
  if (selectedDay) {
96
96
  expect(window.getComputedStyle(selectedDay)?.background).toBe(
97
- 'rgb(3, 137, 61)'
97
+ 'rgb(11, 135, 75)'
98
98
  )
99
99
  }
100
100
  })
package/src/Calendar/index.tsx CHANGED
@@ -145,22 +145,34 @@ class Calendar extends Component<CalendarProps, CalendarState> {
145
145
  }
146
146
 
147
147
  get hasPrevMonth() {
148
+ // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
149
+ const yearNumber = Number(
150
+ this.state.visibleMonth
151
+ .clone()
152
+ .locale('en')
153
+ .subtract({ months: 1 })
154
+ .format('YYYY')
155
+ )
148
156
  return (
149
157
  !this.props.withYearPicker ||
150
158
  (this.props.withYearPicker &&
151
- Number(
152
- this.state.visibleMonth.clone().subtract({ months: 1 }).format('YYYY')
153
- ) >= this.props.withYearPicker.startYear)
159
+ yearNumber >= this.props.withYearPicker.startYear)
154
160
  )
155
161
  }
156
162
 
157
163
  get hasNextMonth() {
164
+ // this is needed for locales that doesn't use the latin script for numbers e.g.: arabic
165
+ const yearNumber = Number(
166
+ this.state.visibleMonth
167
+ .clone()
168
+ .locale('en')
169
+ .subtract({ months: 1 })
170
+ .format('YYYY')
171
+ )
158
172
  return (
159
173
  !this.props.withYearPicker ||
160
174
  (this.props.withYearPicker &&
161
- Number(
162
- this.state.visibleMonth.clone().add({ months: 1 }).format('YYYY')
163
- ) <= this.props.withYearPicker.endYear)
175
+ yearNumber <= this.props.withYearPicker.endYear)
164
176
  )
165
177
  }
166
178
 
@@ -227,16 +239,21 @@ class Calendar extends Component<CalendarProps, CalendarState> {
227
239
 
228
240
  handleYearChange = (
229
241
  e: React.SyntheticEvent<Element, Event>,
230
- year: number
242
+ year: string
231
243
  ) => {
232
244
  const { withYearPicker } = this.props
233
245
  const { visibleMonth } = this.state
246
+ const yearNumber = Number(
247
+ DateTime.parse(year, this.locale(), this.timezone())
248
+ .locale('en')
249
+ .format('YYYY')
250
+ )
234
251
  const newDate = visibleMonth.clone()
235
252
  if (withYearPicker?.onRequestYearChange) {
236
- withYearPicker.onRequestYearChange(e, year)
253
+ withYearPicker.onRequestYearChange(e, yearNumber)
237
254
  return
238
255
  }
239
- newDate.year(year)
256
+ newDate.year(yearNumber)
240
257
  this.setState({ visibleMonth: newDate })
241
258
  }
242
259
 
@@ -261,12 +278,19 @@ class Calendar extends Component<CalendarProps, CalendarState> {
261
278
  ...(prevButton || nextButton ? [styles?.navigationWithButtons] : [])
262
279
  ]
263
280
 
264
- const yearList: number[] = []
281
+ const yearList: string[] = []
265
282
 
266
283
  if (withYearPicker) {
267
284
  const { startYear, endYear } = withYearPicker
268
285
  for (let year = endYear; year >= startYear!; year--) {
269
- yearList.push(year)
286
+ // add the years to the list with the correct locale
287
+ yearList.push(
288
+ DateTime.parse(
289
+ year.toString(),
290
+ this.locale(),
291
+ this.timezone()
292
+ ).format('YYYY')
293
+ )
270
294
  }
271
295
  }
272
296
 
@@ -295,7 +319,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
295
319
  width="90px"
296
320
  renderLabel=""
297
321
  assistiveText={withYearPicker.screenReaderLabel}
298
- value={Number(visibleMonth.format('YYYY'))}
322
+ value={visibleMonth.format('YYYY')}
299
323
  onChange={(
300
324
  e: React.SyntheticEvent<Element, Event>,
301
325
  {
@@ -304,7 +328,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
304
328
  value?: string | number | undefined
305
329
  id?: string | undefined
306
330
  }
307
- ) => this.handleYearChange(e, Number(value))}
331
+ ) => this.handleYearChange(e, `${value}`)}
308
332
  >
309
333
  {yearList.map((year) => (
310
334
  <SimpleSelect.Option key={year} id={`opt-${year}`} value={year}>
@@ -441,7 +465,7 @@ class Calendar extends Component<CalendarProps, CalendarState> {
441
465
  return DateTime.browserTimeZone()
442
466
  }
443
467
 
444
- // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
468
+ // date is returned as an ISO string, like 2021-09-14T22:00:00.000Z
445
469
  handleDayClick = (event: MouseEvent<any>, { date }: { date: string }) => {
446
470
  if (this.props.onDateSelected) {
447
471
  const parsedDate = DateTime.parse(date, this.locale(), this.timezone())
package/src/Calendar/theme.ts CHANGED
@@ -44,8 +44,8 @@ const generateComponentTheme = (theme: Theme): CalendarTheme => {
44
44
  fontFamily: typography?.fontFamily,
45
45
  fontWeight: typography?.fontWeightNormal,
46
46
 
47
- color: colors?.contrasts?.grey125125,
48
- background: colors?.contrasts?.white1010,
47
+ color: colors?.textDarkest,
48
+ background: colors?.backgroundLightest,
49
49
 
50
50
  navMargin: spacing?.small,
51
51
  navWithYearMargin: spacing?.xSmall,