@instructure/ui-calendar 8.17.1-snapshot.81 → 8.18.1-snapshot.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.
- package/CHANGELOG.md +4 -0
- package/es/Calendar/Day/index.js +20 -16
- package/es/Calendar/Day/theme.js +13 -13
- package/es/Calendar/index.js +18 -14
- package/es/Calendar/theme.js +7 -7
- package/lib/Calendar/Day/index.js +20 -16
- package/lib/Calendar/Day/theme.js +13 -13
- package/lib/Calendar/index.js +18 -14
- package/lib/Calendar/theme.js +7 -7
- package/package.json +18 -18
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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
|
+
# [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-calendar
|
|
9
|
+
|
|
6
10
|
# [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
|
|
7
11
|
|
|
8
12
|
### Bug Fixes
|
package/es/Calendar/Day/index.js
CHANGED
|
@@ -85,11 +85,15 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
componentDidMount() {
|
|
88
|
-
|
|
88
|
+
var _this$props$makeStyle, _this$props3;
|
|
89
|
+
|
|
90
|
+
(_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, this.makeStylesVariables);
|
|
89
91
|
}
|
|
90
92
|
|
|
91
93
|
componentDidUpdate() {
|
|
92
|
-
|
|
94
|
+
var _this$props$makeStyle2, _this$props4;
|
|
95
|
+
|
|
96
|
+
(_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, this.makeStylesVariables);
|
|
93
97
|
}
|
|
94
98
|
|
|
95
99
|
get makeStylesVariables() {
|
|
@@ -115,25 +119,25 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
|
|
|
115
119
|
}
|
|
116
120
|
|
|
117
121
|
render() {
|
|
118
|
-
const _this$
|
|
119
|
-
children = _this$
|
|
120
|
-
label = _this$
|
|
121
|
-
interaction = _this$
|
|
122
|
-
isOutsideMonth = _this$
|
|
123
|
-
isSelected = _this$
|
|
124
|
-
isToday = _this$
|
|
125
|
-
onClick = _this$
|
|
126
|
-
onKeyDown = _this$
|
|
127
|
-
as = _this$
|
|
128
|
-
styles = _this$
|
|
129
|
-
props = _objectWithoutProperties(_this$
|
|
122
|
+
const _this$props5 = this.props,
|
|
123
|
+
children = _this$props5.children,
|
|
124
|
+
label = _this$props5.label,
|
|
125
|
+
interaction = _this$props5.interaction,
|
|
126
|
+
isOutsideMonth = _this$props5.isOutsideMonth,
|
|
127
|
+
isSelected = _this$props5.isSelected,
|
|
128
|
+
isToday = _this$props5.isToday,
|
|
129
|
+
onClick = _this$props5.onClick,
|
|
130
|
+
onKeyDown = _this$props5.onKeyDown,
|
|
131
|
+
as = _this$props5.as,
|
|
132
|
+
styles = _this$props5.styles,
|
|
133
|
+
props = _objectWithoutProperties(_this$props5, _excluded);
|
|
130
134
|
|
|
131
135
|
const elementType = this.elementType,
|
|
132
136
|
isDisabled = this.isDisabled;
|
|
133
137
|
const passthroughProps = View.omitViewProps(omitProps(props, Day.allowedProps), Day);
|
|
134
138
|
return jsx(View, Object.assign({}, passthroughProps, {
|
|
135
139
|
as: elementType,
|
|
136
|
-
css: styles
|
|
140
|
+
css: styles === null || styles === void 0 ? void 0 : styles.calendarDay,
|
|
137
141
|
display: "inline-block",
|
|
138
142
|
margin: "xxx-small",
|
|
139
143
|
borderWidth: "none",
|
|
@@ -147,7 +151,7 @@ let Day = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
|
|
|
147
151
|
onKeyDown: onKeyDown && this.handleKeyDown,
|
|
148
152
|
elementRef: this.handleElementRef
|
|
149
153
|
}), jsx("span", {
|
|
150
|
-
css: styles
|
|
154
|
+
css: styles === null || styles === void 0 ? void 0 : styles.day
|
|
151
155
|
}, jsx(AccessibleContent, {
|
|
152
156
|
alt: label
|
|
153
157
|
}, callRenderProp(children))));
|
package/es/Calendar/Day/theme.js
CHANGED
|
@@ -41,19 +41,19 @@ const generateComponentTheme = theme => {
|
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
const componentVariables = {
|
|
44
|
-
color: colors
|
|
45
|
-
background: colors
|
|
46
|
-
fontSize: typography
|
|
47
|
-
padding: spacing
|
|
48
|
-
height: forms
|
|
49
|
-
minWidth: forms
|
|
50
|
-
outsideMonthColor: colors
|
|
51
|
-
selectedBackground: colors
|
|
52
|
-
selectedColor: colors
|
|
53
|
-
selectedBorderRadius: borders
|
|
54
|
-
todayBackground: colors
|
|
55
|
-
todayColor: colors
|
|
56
|
-
todayBorderRadius: forms
|
|
44
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
45
|
+
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
46
|
+
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
47
|
+
padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
|
|
48
|
+
height: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
|
|
49
|
+
minWidth: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
|
|
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,
|
|
53
|
+
selectedBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
|
|
54
|
+
todayBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
55
|
+
todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
56
|
+
todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
|
|
57
57
|
};
|
|
58
58
|
return { ...componentVariables,
|
|
59
59
|
...themeSpecificStyle[themeName]
|
package/es/Calendar/index.js
CHANGED
|
@@ -60,11 +60,15 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
componentDidMount() {
|
|
63
|
-
|
|
63
|
+
var _this$props$makeStyle, _this$props;
|
|
64
|
+
|
|
65
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
componentDidUpdate() {
|
|
67
|
-
|
|
69
|
+
var _this$props$makeStyle2, _this$props2;
|
|
70
|
+
|
|
71
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
get role() {
|
|
@@ -72,13 +76,13 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
renderHeader() {
|
|
75
|
-
const _this$
|
|
76
|
-
renderNextMonthButton = _this$
|
|
77
|
-
renderPrevMonthButton = _this$
|
|
78
|
-
renderNavigationLabel = _this$
|
|
79
|
-
onRequestRenderNextMonth = _this$
|
|
80
|
-
onRequestRenderPrevMonth = _this$
|
|
81
|
-
styles = _this$
|
|
79
|
+
const _this$props3 = this.props,
|
|
80
|
+
renderNextMonthButton = _this$props3.renderNextMonthButton,
|
|
81
|
+
renderPrevMonthButton = _this$props3.renderPrevMonthButton,
|
|
82
|
+
renderNavigationLabel = _this$props3.renderNavigationLabel,
|
|
83
|
+
onRequestRenderNextMonth = _this$props3.onRequestRenderNextMonth,
|
|
84
|
+
onRequestRenderPrevMonth = _this$props3.onRequestRenderPrevMonth,
|
|
85
|
+
styles = _this$props3.styles;
|
|
82
86
|
const nextButton = callRenderProp(renderNextMonthButton);
|
|
83
87
|
const prevButton = callRenderProp(renderPrevMonthButton);
|
|
84
88
|
|
|
@@ -86,7 +90,7 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
86
90
|
onClick: createChainedFunction(button.props.onClick, onClick)
|
|
87
91
|
});
|
|
88
92
|
|
|
89
|
-
const style = [styles
|
|
93
|
+
const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
|
|
90
94
|
return jsx("div", {
|
|
91
95
|
css: style
|
|
92
96
|
}, prevButton && cloneButton(prevButton, onRequestRenderPrevMonth), callRenderProp(renderNavigationLabel), nextButton && cloneButton(nextButton, onRequestRenderNextMonth));
|
|
@@ -99,16 +103,16 @@ let Calendar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
99
103
|
}
|
|
100
104
|
|
|
101
105
|
renderWeekdayHeaders() {
|
|
102
|
-
const _this$
|
|
103
|
-
renderWeekdayLabels = _this$
|
|
104
|
-
styles = _this$
|
|
106
|
+
const _this$props4 = this.props,
|
|
107
|
+
renderWeekdayLabels = _this$props4.renderWeekdayLabels,
|
|
108
|
+
styles = _this$props4.styles;
|
|
105
109
|
const length = renderWeekdayLabels.length;
|
|
106
110
|
error(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
|
|
107
111
|
return jsx("tr", null, renderWeekdayLabels.map((label, i) => {
|
|
108
112
|
return jsx("th", {
|
|
109
113
|
key: i,
|
|
110
114
|
scope: "col",
|
|
111
|
-
css: styles
|
|
115
|
+
css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
|
|
112
116
|
id: this._weekdayHeaderIds[i]
|
|
113
117
|
}, callRenderProp(label));
|
|
114
118
|
}));
|
package/es/Calendar/theme.js
CHANGED
|
@@ -38,13 +38,13 @@ const generateComponentTheme = theme => {
|
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
const componentVariables = {
|
|
41
|
-
fontSize: typography
|
|
42
|
-
fontFamily: typography
|
|
43
|
-
fontWeight: typography
|
|
44
|
-
color: colors
|
|
45
|
-
background: colors
|
|
46
|
-
navMargin: spacing
|
|
47
|
-
maxHeaderWidth: spacing
|
|
41
|
+
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
42
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
43
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
44
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
45
|
+
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
46
|
+
navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
47
|
+
maxHeaderWidth: spacing === null || spacing === void 0 ? void 0 : spacing.medium
|
|
48
48
|
};
|
|
49
49
|
return { ...componentVariables,
|
|
50
50
|
...themeSpecificStyle[themeName]
|
|
@@ -82,11 +82,15 @@ let Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
componentDidMount() {
|
|
85
|
-
|
|
85
|
+
var _this$props$makeStyle, _this$props3;
|
|
86
|
+
|
|
87
|
+
(_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, this.makeStylesVariables);
|
|
86
88
|
}
|
|
87
89
|
|
|
88
90
|
componentDidUpdate() {
|
|
89
|
-
|
|
91
|
+
var _this$props$makeStyle2, _this$props4;
|
|
92
|
+
|
|
93
|
+
(_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, this.makeStylesVariables);
|
|
90
94
|
}
|
|
91
95
|
|
|
92
96
|
get makeStylesVariables() {
|
|
@@ -112,18 +116,18 @@ let Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
|
112
116
|
}
|
|
113
117
|
|
|
114
118
|
render() {
|
|
115
|
-
const _this$
|
|
116
|
-
children = _this$
|
|
117
|
-
label = _this$
|
|
118
|
-
interaction = _this$
|
|
119
|
-
isOutsideMonth = _this$
|
|
120
|
-
isSelected = _this$
|
|
121
|
-
isToday = _this$
|
|
122
|
-
onClick = _this$
|
|
123
|
-
onKeyDown = _this$
|
|
124
|
-
as = _this$
|
|
125
|
-
styles = _this$
|
|
126
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
119
|
+
const _this$props5 = this.props,
|
|
120
|
+
children = _this$props5.children,
|
|
121
|
+
label = _this$props5.label,
|
|
122
|
+
interaction = _this$props5.interaction,
|
|
123
|
+
isOutsideMonth = _this$props5.isOutsideMonth,
|
|
124
|
+
isSelected = _this$props5.isSelected,
|
|
125
|
+
isToday = _this$props5.isToday,
|
|
126
|
+
onClick = _this$props5.onClick,
|
|
127
|
+
onKeyDown = _this$props5.onKeyDown,
|
|
128
|
+
as = _this$props5.as,
|
|
129
|
+
styles = _this$props5.styles,
|
|
130
|
+
props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
|
|
127
131
|
const elementType = this.elementType,
|
|
128
132
|
isDisabled = this.isDisabled;
|
|
129
133
|
|
|
@@ -131,7 +135,7 @@ let Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
|
131
135
|
|
|
132
136
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
|
|
133
137
|
as: elementType,
|
|
134
|
-
css: styles
|
|
138
|
+
css: styles === null || styles === void 0 ? void 0 : styles.calendarDay,
|
|
135
139
|
display: "inline-block",
|
|
136
140
|
margin: "xxx-small",
|
|
137
141
|
borderWidth: "none",
|
|
@@ -145,7 +149,7 @@ let Day = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
|
|
|
145
149
|
onKeyDown: onKeyDown && this.handleKeyDown,
|
|
146
150
|
elementRef: this.handleElementRef
|
|
147
151
|
}), (0, _emotion.jsx)("span", {
|
|
148
|
-
css: styles
|
|
152
|
+
css: styles === null || styles === void 0 ? void 0 : styles.day
|
|
149
153
|
}, (0, _emotion.jsx)(_AccessibleContent.AccessibleContent, {
|
|
150
154
|
alt: label
|
|
151
155
|
}, (0, _callRenderProp.callRenderProp)(children))));
|
|
@@ -48,19 +48,19 @@ const generateComponentTheme = theme => {
|
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
50
|
const componentVariables = {
|
|
51
|
-
color: colors
|
|
52
|
-
background: colors
|
|
53
|
-
fontSize: typography
|
|
54
|
-
padding: spacing
|
|
55
|
-
height: forms
|
|
56
|
-
minWidth: forms
|
|
57
|
-
outsideMonthColor: colors
|
|
58
|
-
selectedBackground: colors
|
|
59
|
-
selectedColor: colors
|
|
60
|
-
selectedBorderRadius: borders
|
|
61
|
-
todayBackground: colors
|
|
62
|
-
todayColor: colors
|
|
63
|
-
todayBorderRadius: forms
|
|
51
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
52
|
+
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
53
|
+
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
54
|
+
padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
|
|
55
|
+
height: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
|
|
56
|
+
minWidth: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
|
|
57
|
+
outsideMonthColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
|
|
58
|
+
selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
|
|
59
|
+
selectedColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
60
|
+
selectedBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
|
|
61
|
+
todayBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
62
|
+
todayColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
63
|
+
todayBorderRadius: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall
|
|
64
64
|
};
|
|
65
65
|
return { ...componentVariables,
|
|
66
66
|
...themeSpecificStyle[themeName]
|
package/lib/Calendar/index.js
CHANGED
|
@@ -61,11 +61,15 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
componentDidMount() {
|
|
64
|
-
|
|
64
|
+
var _this$props$makeStyle, _this$props;
|
|
65
|
+
|
|
66
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
componentDidUpdate() {
|
|
68
|
-
|
|
70
|
+
var _this$props$makeStyle2, _this$props2;
|
|
71
|
+
|
|
72
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
69
73
|
}
|
|
70
74
|
|
|
71
75
|
get role() {
|
|
@@ -73,13 +77,13 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
73
77
|
}
|
|
74
78
|
|
|
75
79
|
renderHeader() {
|
|
76
|
-
const _this$
|
|
77
|
-
renderNextMonthButton = _this$
|
|
78
|
-
renderPrevMonthButton = _this$
|
|
79
|
-
renderNavigationLabel = _this$
|
|
80
|
-
onRequestRenderNextMonth = _this$
|
|
81
|
-
onRequestRenderPrevMonth = _this$
|
|
82
|
-
styles = _this$
|
|
80
|
+
const _this$props3 = this.props,
|
|
81
|
+
renderNextMonthButton = _this$props3.renderNextMonthButton,
|
|
82
|
+
renderPrevMonthButton = _this$props3.renderPrevMonthButton,
|
|
83
|
+
renderNavigationLabel = _this$props3.renderNavigationLabel,
|
|
84
|
+
onRequestRenderNextMonth = _this$props3.onRequestRenderNextMonth,
|
|
85
|
+
onRequestRenderPrevMonth = _this$props3.onRequestRenderPrevMonth,
|
|
86
|
+
styles = _this$props3.styles;
|
|
83
87
|
const nextButton = (0, _callRenderProp.callRenderProp)(renderNextMonthButton);
|
|
84
88
|
const prevButton = (0, _callRenderProp.callRenderProp)(renderPrevMonthButton);
|
|
85
89
|
|
|
@@ -87,7 +91,7 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
87
91
|
onClick: (0, _createChainedFunction.createChainedFunction)(button.props.onClick, onClick)
|
|
88
92
|
});
|
|
89
93
|
|
|
90
|
-
const style = [styles
|
|
94
|
+
const style = [styles === null || styles === void 0 ? void 0 : styles.navigation, ...(prevButton || nextButton ? [styles === null || styles === void 0 ? void 0 : styles.navigationWithButtons] : [])];
|
|
91
95
|
return (0, _emotion.jsx)("div", {
|
|
92
96
|
css: style
|
|
93
97
|
}, prevButton && cloneButton(prevButton, onRequestRenderPrevMonth), (0, _callRenderProp.callRenderProp)(renderNavigationLabel), nextButton && cloneButton(nextButton, onRequestRenderNextMonth));
|
|
@@ -100,16 +104,16 @@ let Calendar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
100
104
|
}
|
|
101
105
|
|
|
102
106
|
renderWeekdayHeaders() {
|
|
103
|
-
const _this$
|
|
104
|
-
renderWeekdayLabels = _this$
|
|
105
|
-
styles = _this$
|
|
107
|
+
const _this$props4 = this.props,
|
|
108
|
+
renderWeekdayLabels = _this$props4.renderWeekdayLabels,
|
|
109
|
+
styles = _this$props4.styles;
|
|
106
110
|
const length = renderWeekdayLabels.length;
|
|
107
111
|
(0, _console.logError)(length === 7, `[Calendar] \`renderWeekdayLabels\` should be an array with 7 labels (one for each weekday). ${length} provided.`);
|
|
108
112
|
return (0, _emotion.jsx)("tr", null, renderWeekdayLabels.map((label, i) => {
|
|
109
113
|
return (0, _emotion.jsx)("th", {
|
|
110
114
|
key: i,
|
|
111
115
|
scope: "col",
|
|
112
|
-
css: styles
|
|
116
|
+
css: styles === null || styles === void 0 ? void 0 : styles.weekdayHeader,
|
|
113
117
|
id: this._weekdayHeaderIds[i]
|
|
114
118
|
}, (0, _callRenderProp.callRenderProp)(label));
|
|
115
119
|
}));
|
package/lib/Calendar/theme.js
CHANGED
|
@@ -45,13 +45,13 @@ const generateComponentTheme = theme => {
|
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
const componentVariables = {
|
|
48
|
-
fontSize: typography
|
|
49
|
-
fontFamily: typography
|
|
50
|
-
fontWeight: typography
|
|
51
|
-
color: colors
|
|
52
|
-
background: colors
|
|
53
|
-
navMargin: spacing
|
|
54
|
-
maxHeaderWidth: spacing
|
|
48
|
+
fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
49
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
50
|
+
fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
|
|
51
|
+
color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
|
|
52
|
+
background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
53
|
+
navMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
54
|
+
maxHeaderWidth: spacing === null || spacing === void 0 ? void 0 : spacing.medium
|
|
55
55
|
};
|
|
56
56
|
return { ...componentVariables,
|
|
57
57
|
...themeSpecificStyle[themeName]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-calendar",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.18.1-snapshot.0+435c9ae79",
|
|
4
4
|
"description": "A calendar component.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,25 +24,25 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@instructure/ui-babel-preset": "8.
|
|
28
|
-
"@instructure/ui-color-utils": "8.
|
|
29
|
-
"@instructure/ui-test-locator": "8.
|
|
30
|
-
"@instructure/ui-test-utils": "8.
|
|
31
|
-
"@instructure/ui-themes": "8.
|
|
27
|
+
"@instructure/ui-babel-preset": "8.18.1-snapshot.0+435c9ae79",
|
|
28
|
+
"@instructure/ui-color-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
29
|
+
"@instructure/ui-test-locator": "8.18.1-snapshot.0+435c9ae79",
|
|
30
|
+
"@instructure/ui-test-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
31
|
+
"@instructure/ui-themes": "8.18.1-snapshot.0+435c9ae79"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.13.10",
|
|
35
|
-
"@instructure/console": "8.
|
|
36
|
-
"@instructure/emotion": "8.
|
|
37
|
-
"@instructure/shared-types": "8.
|
|
38
|
-
"@instructure/ui-a11y-content": "8.
|
|
39
|
-
"@instructure/ui-i18n": "8.
|
|
40
|
-
"@instructure/ui-prop-types": "8.
|
|
41
|
-
"@instructure/ui-react-utils": "8.
|
|
42
|
-
"@instructure/ui-testable": "8.
|
|
43
|
-
"@instructure/ui-utils": "8.
|
|
44
|
-
"@instructure/ui-view": "8.
|
|
45
|
-
"@instructure/uid": "8.
|
|
35
|
+
"@instructure/console": "8.18.1-snapshot.0+435c9ae79",
|
|
36
|
+
"@instructure/emotion": "8.18.1-snapshot.0+435c9ae79",
|
|
37
|
+
"@instructure/shared-types": "8.18.1-snapshot.0+435c9ae79",
|
|
38
|
+
"@instructure/ui-a11y-content": "8.18.1-snapshot.0+435c9ae79",
|
|
39
|
+
"@instructure/ui-i18n": "8.18.1-snapshot.0+435c9ae79",
|
|
40
|
+
"@instructure/ui-prop-types": "8.18.1-snapshot.0+435c9ae79",
|
|
41
|
+
"@instructure/ui-react-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
42
|
+
"@instructure/ui-testable": "8.18.1-snapshot.0+435c9ae79",
|
|
43
|
+
"@instructure/ui-utils": "8.18.1-snapshot.0+435c9ae79",
|
|
44
|
+
"@instructure/ui-view": "8.18.1-snapshot.0+435c9ae79",
|
|
45
|
+
"@instructure/uid": "8.18.1-snapshot.0+435c9ae79",
|
|
46
46
|
"prop-types": "^15"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "435c9ae794c15e2bd103f700f8c4e946d91c1b59"
|
|
56
56
|
}
|