@instructure/ui-table 10.2.3-snapshot-15 → 10.3.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 (18) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Table/ColHeader/index.js +10 -7
  3. package/es/Table/ColHeader/styles.js +8 -0
  4. package/es/Table/ColHeader/theme.js +4 -2
  5. package/lib/Table/ColHeader/index.js +11 -8
  6. package/lib/Table/ColHeader/styles.js +8 -0
  7. package/lib/Table/ColHeader/theme.js +4 -2
  8. package/package.json +17 -17
  9. package/src/Table/ColHeader/index.tsx +4 -4
  10. package/src/Table/ColHeader/props.ts +5 -1
  11. package/src/Table/ColHeader/styles.ts +8 -0
  12. package/src/Table/ColHeader/theme.ts +4 -1
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/Table/ColHeader/index.d.ts.map +1 -1
  15. package/types/Table/ColHeader/props.d.ts +1 -1
  16. package/types/Table/ColHeader/props.d.ts.map +1 -1
  17. package/types/Table/ColHeader/styles.d.ts.map +1 -1
  18. package/types/Table/ColHeader/theme.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.2.3-snapshot-15](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-15) (2024-10-03)
6
+ # [10.3.0](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.3.0) (2024-10-03)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-table
8
+
9
+ ### Bug Fixes
10
+
11
+ * **shared-types,ui-table:** fix color contrast for table sorting icons ([b5a60bf](https://github.com/instructure/instructure-ui/commit/b5a60bf4b682e100912d686524a7c4c04f828ea9))
9
12
 
10
13
 
11
14
 
package/es/Table/ColHeader/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _ColHeader, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
1
+ var _dec, _class, _ColHeader;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -61,18 +61,21 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
61
61
  renderSortArrow() {
62
62
  const _this$props4 = this.props,
63
63
  sortDirection = _this$props4.sortDirection,
64
- onRequestSort = _this$props4.onRequestSort;
64
+ onRequestSort = _this$props4.onRequestSort,
65
+ styles = _this$props4.styles;
65
66
  if (sortDirection === 'ascending') {
66
- return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = jsx(IconMiniArrowUpLine, null));
67
+ return jsx(IconMiniArrowUpLine, {
68
+ css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
69
+ });
67
70
  }
68
71
  if (sortDirection === 'descending') {
69
- return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = jsx(IconMiniArrowDownLine, null));
72
+ return jsx(IconMiniArrowDownLine, {
73
+ css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
74
+ });
70
75
  }
71
76
  if (onRequestSort) {
72
77
  return jsx(IconMiniArrowDoubleLine, {
73
- css: {
74
- opacity: '30%'
75
- }
78
+ css: styles === null || styles === void 0 ? void 0 : styles.unSortedIconColor
76
79
  });
77
80
  }
78
81
  return void 0;
package/es/Table/ColHeader/styles.js CHANGED
@@ -86,6 +86,14 @@ const generateStyle = (componentTheme, props) => {
86
86
  label: 'colHeader__buttonContent',
87
87
  display: 'flex',
88
88
  alignItems: 'center'
89
+ },
90
+ unSortedIconColor: {
91
+ label: 'colHeader__unSortedIconColor',
92
+ color: componentTheme.unSortedIconColor
93
+ },
94
+ sortedIconColor: {
95
+ label: 'colHeader__sortedIconColor',
96
+ color: componentTheme.sortedIconColor
89
97
  }
90
98
  };
91
99
  };
package/es/Table/ColHeader/theme.js CHANGED
@@ -28,7 +28,7 @@
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;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
32
32
  const typography = theme.typography,
33
33
  colors = theme.colors,
34
34
  borders = theme.borders,
@@ -43,7 +43,9 @@ const generateComponentTheme = theme => {
43
43
  padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
44
44
  focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
45
45
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
46
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
46
+ focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
47
+ unSortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey4570,
48
+ sortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570
47
49
  };
48
50
  return {
49
51
  ...componentVariables
package/lib/Table/ColHeader/index.js CHANGED
@@ -9,14 +9,14 @@ exports.default = exports.ColHeader = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
11
11
  var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
12
- var _IconMiniArrowUpLine2 = require("@instructure/ui-icons/lib/IconMiniArrowUpLine.js");
12
+ var _IconMiniArrowUpLine = require("@instructure/ui-icons/lib/IconMiniArrowUpLine.js");
13
13
  var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/IconMiniArrowDownLine.js");
14
14
  var _IconMiniArrowDoubleLine = require("@instructure/ui-icons/lib/IconMiniArrowDoubleLine.js");
15
15
  var _emotion = require("@instructure/emotion");
16
16
  var _styles = _interopRequireDefault(require("./styles"));
17
17
  var _theme = _interopRequireDefault(require("./theme"));
18
18
  var _props = require("./props");
19
- var _dec, _class, _ColHeader, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
19
+ var _dec, _class, _ColHeader;
20
20
  /*
21
21
  * The MIT License (MIT)
22
22
  *
@@ -70,18 +70,21 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
70
70
  renderSortArrow() {
71
71
  const _this$props4 = this.props,
72
72
  sortDirection = _this$props4.sortDirection,
73
- onRequestSort = _this$props4.onRequestSort;
73
+ onRequestSort = _this$props4.onRequestSort,
74
+ styles = _this$props4.styles;
74
75
  if (sortDirection === 'ascending') {
75
- return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = (0, _emotion.jsx)(_IconMiniArrowUpLine2.IconMiniArrowUpLine, null));
76
+ return (0, _emotion.jsx)(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
77
+ css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
78
+ });
76
79
  }
77
80
  if (sortDirection === 'descending') {
78
- return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, null));
81
+ return (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, {
82
+ css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
83
+ });
79
84
  }
80
85
  if (onRequestSort) {
81
86
  return (0, _emotion.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
82
- css: {
83
- opacity: '30%'
84
- }
87
+ css: styles === null || styles === void 0 ? void 0 : styles.unSortedIconColor
85
88
  });
86
89
  }
87
90
  return void 0;
package/lib/Table/ColHeader/styles.js CHANGED
@@ -92,6 +92,14 @@ const generateStyle = (componentTheme, props) => {
92
92
  label: 'colHeader__buttonContent',
93
93
  display: 'flex',
94
94
  alignItems: 'center'
95
+ },
96
+ unSortedIconColor: {
97
+ label: 'colHeader__unSortedIconColor',
98
+ color: componentTheme.unSortedIconColor
99
+ },
100
+ sortedIconColor: {
101
+ label: 'colHeader__sortedIconColor',
102
+ color: componentTheme.sortedIconColor
95
103
  }
96
104
  };
97
105
  };
package/lib/Table/ColHeader/theme.js CHANGED
@@ -34,7 +34,7 @@ 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;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
38
38
  const typography = theme.typography,
39
39
  colors = theme.colors,
40
40
  borders = theme.borders,
@@ -49,7 +49,9 @@ const generateComponentTheme = theme => {
49
49
  padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
50
50
  focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
51
51
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
52
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
52
+ focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
53
+ unSortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey4570,
54
+ sortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570
53
55
  };
54
56
  return {
55
57
  ...componentVariables
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-table",
3
- "version": "10.2.3-snapshot-15",
3
+ "version": "10.3.0",
4
4
  "description": "A styled HTML table component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,11 +23,11 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.2.3-snapshot-15",
27
- "@instructure/ui-babel-preset": "10.2.3-snapshot-15",
28
- "@instructure/ui-color-utils": "10.2.3-snapshot-15",
29
- "@instructure/ui-test-utils": "10.2.3-snapshot-15",
30
- "@instructure/ui-themes": "10.2.3-snapshot-15",
26
+ "@instructure/ui-axe-check": "10.3.0",
27
+ "@instructure/ui-babel-preset": "10.3.0",
28
+ "@instructure/ui-color-utils": "10.3.0",
29
+ "@instructure/ui-test-utils": "10.3.0",
30
+ "@instructure/ui-themes": "10.3.0",
31
31
  "@testing-library/jest-dom": "^6.4.6",
32
32
  "@testing-library/react": "^16.0.1",
33
33
  "@testing-library/user-event": "^14.5.2",
@@ -35,17 +35,17 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@babel/runtime": "^7.25.6",
38
- "@instructure/console": "10.2.3-snapshot-15",
39
- "@instructure/emotion": "10.2.3-snapshot-15",
40
- "@instructure/shared-types": "10.2.3-snapshot-15",
41
- "@instructure/ui-a11y-content": "10.2.3-snapshot-15",
42
- "@instructure/ui-icons": "10.2.3-snapshot-15",
43
- "@instructure/ui-prop-types": "10.2.3-snapshot-15",
44
- "@instructure/ui-react-utils": "10.2.3-snapshot-15",
45
- "@instructure/ui-simple-select": "10.2.3-snapshot-15",
46
- "@instructure/ui-testable": "10.2.3-snapshot-15",
47
- "@instructure/ui-utils": "10.2.3-snapshot-15",
48
- "@instructure/ui-view": "10.2.3-snapshot-15",
38
+ "@instructure/console": "10.3.0",
39
+ "@instructure/emotion": "10.3.0",
40
+ "@instructure/shared-types": "10.3.0",
41
+ "@instructure/ui-a11y-content": "10.3.0",
42
+ "@instructure/ui-icons": "10.3.0",
43
+ "@instructure/ui-prop-types": "10.3.0",
44
+ "@instructure/ui-react-utils": "10.3.0",
45
+ "@instructure/ui-simple-select": "10.3.0",
46
+ "@instructure/ui-testable": "10.3.0",
47
+ "@instructure/ui-utils": "10.3.0",
48
+ "@instructure/ui-view": "10.3.0",
49
49
  "prop-types": "^15.8.1"
50
50
  },
51
51
  "peerDependencies": {
package/src/Table/ColHeader/index.tsx CHANGED
@@ -74,16 +74,16 @@ class ColHeader extends Component<TableColHeaderProps> {
74
74
  }
75
75
 
76
76
  renderSortArrow() {
77
- const { sortDirection, onRequestSort } = this.props
77
+ const { sortDirection, onRequestSort, styles } = this.props
78
78
 
79
79
  if (sortDirection === 'ascending') {
80
- return <IconMiniArrowUpLine />
80
+ return <IconMiniArrowUpLine css={styles?.sortedIconColor} />
81
81
  }
82
82
  if (sortDirection === 'descending') {
83
- return <IconMiniArrowDownLine />
83
+ return <IconMiniArrowDownLine css={styles?.sortedIconColor} />
84
84
  }
85
85
  if (onRequestSort) {
86
- return <IconMiniArrowDoubleLine css={{ opacity: '30%' }} />
86
+ return <IconMiniArrowDoubleLine css={styles?.unSortedIconColor} />
87
87
  }
88
88
  return undefined
89
89
  }
package/src/Table/ColHeader/props.ts CHANGED
@@ -85,7 +85,11 @@ type TableColHeaderProps = TableColHeaderOwnProps &
85
85
  >
86
86
 
87
87
  type TableColHeaderStyle = ComponentStyle<
88
- 'colHeader' | 'button' | 'buttonContent'
88
+ | 'colHeader'
89
+ | 'button'
90
+ | 'buttonContent'
91
+ | 'unSortedIconColor'
92
+ | 'sortedIconColor'
89
93
  >
90
94
 
91
95
  const propTypes: PropValidators<PropKeys> = {
package/src/Table/ColHeader/styles.ts CHANGED
@@ -86,6 +86,14 @@ const generateStyle = (
86
86
  label: 'colHeader__buttonContent',
87
87
  display: 'flex',
88
88
  alignItems: 'center'
89
+ },
90
+ unSortedIconColor: {
91
+ label: 'colHeader__unSortedIconColor',
92
+ color: componentTheme.unSortedIconColor
93
+ },
94
+ sortedIconColor: {
95
+ label: 'colHeader__sortedIconColor',
96
+ color: componentTheme.sortedIconColor
89
97
  }
90
98
  }
91
99
  }
package/src/Table/ColHeader/theme.ts CHANGED
@@ -47,7 +47,10 @@ const generateComponentTheme = (theme: Theme): TableColHeaderTheme => {
47
47
 
48
48
  focusOutlineColor: colors?.contrasts?.blue4570,
49
49
  focusOutlineWidth: borders?.widthMedium,
50
- focusOutlineStyle: borders?.style
50
+ focusOutlineStyle: borders?.style,
51
+
52
+ unSortedIconColor: colors?.contrasts?.grey4570,
53
+ sortedIconColor: colors?.contrasts?.blue4570
51
54
  }
52
55
 
53
56
  return {