@instructure/ui-table 7.16.0 → 7.19.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 (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/es/Table/ColHeader/index.js +18 -16
  3. package/lib/Table/ColHeader/index.js +19 -15
  4. package/package.json +14 -14
  5. package/src/Table/ColHeader/index.js +5 -4
  6. package/src/Table/ColHeader/styles.css +5 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,20 @@
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
+ # [7.19.0](https://github.com/instructure/instructure-ui/compare/v7.18.0...v7.19.0) (2022-06-03)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-table
9
+
10
+ # [7.18.0](https://github.com/instructure/instructure-ui/compare/v7.17.0...v7.18.0) (2022-03-30)
11
+
12
+ **Note:** Version bump only for package @instructure/ui-table
13
+
14
+ # [7.17.0](https://github.com/instructure/instructure-ui/compare/v7.16.0...v7.17.0) (2022-03-22)
15
+
16
+ ### Features
17
+
18
+ - **ui-table:** add `mini-arrow-double` icon to sortable CholHeaders ([6a21094](https://github.com/instructure/instructure-ui/commit/6a21094))
19
+
6
20
  # [7.16.0](https://github.com/instructure/instructure-ui/compare/v7.15.0...v7.16.0) (2022-02-08)
7
21
 
8
22
  **Note:** Version bump only for package @instructure/ui-table
package/es/Table/ColHeader/index.js CHANGED
@@ -34,21 +34,22 @@ import PropTypes from 'prop-types';
34
34
  import classnames from 'classnames';
35
35
  import { themeable } from '@instructure/ui-themeable';
36
36
  import { omitProps, callRenderProp } from '@instructure/ui-react-utils';
37
- import { IconMiniArrowUpLine, IconMiniArrowDownLine } from '@instructure/ui-icons';
37
+ import { IconMiniArrowUpLine, IconMiniArrowDownLine, IconMiniArrowDoubleLine } from '@instructure/ui-icons';
38
38
  var styles = {
39
- componentId: 'fwfoD',
39
+ componentId: 'dEBmf',
40
40
  template: function template(theme) {
41
- return "\n\n.fwfoD_bGBk{background:".concat(theme.background || 'inherit', ";box-sizing:border-box;vertical-align:middle}\n\n.fwfoD_fsuY{color:").concat(theme.color || 'inherit', ";font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:700;line-height:").concat(theme.lineHeight || 'inherit', ";padding:").concat(theme.padding || 'inherit', "}\n\n.fwfoD_EMjX{text-align:start}\n\n[dir=ltr] .fwfoD_EMjX{text-align:left}\n\n[dir=rtl] .fwfoD_EMjX{text-align:right}\n\n.fwfoD_ImeN,[dir=ltr] .fwfoD_ImeN,[dir=rtl] .fwfoD_ImeN{text-align:center}\n\n.fwfoD_dBtH{text-align:end}\n\n[dir=ltr] .fwfoD_dBtH{text-align:right}\n\n[dir=rtl] .fwfoD_dBtH{text-align:left}\n\n.fwfoD_bRML{flex-direction:row}\n\n.fwfoD_fEuk{justify-content:center}\n\n.fwfoD_ftfl{flex-direction:row-reverse}\n\n.fwfoD_EwaR{align-items:center;background:transparent;border:none;box-sizing:border-box;cursor:pointer;display:flex;height:100%;outline:none;width:100%}\n\n.fwfoD_EwaR::-moz-focus-inner{border:0}\n\n.fwfoD_EwaR:focus{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}");
41
+ return "\n\n.dEBmf_bGBk{background:".concat(theme.background || 'inherit', ";box-sizing:border-box;vertical-align:middle}\n\n.dEBmf_fsuY{color:").concat(theme.color || 'inherit', ";font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:700;line-height:").concat(theme.lineHeight || 'inherit', ";padding:").concat(theme.padding || 'inherit', "}\n\n.dEBmf_EMjX{text-align:start}\n\n[dir=ltr] .dEBmf_EMjX{text-align:left}\n\n[dir=rtl] .dEBmf_EMjX{text-align:right}\n\n.dEBmf_ImeN,[dir=ltr] .dEBmf_ImeN,[dir=rtl] .dEBmf_ImeN{text-align:center}\n\n.dEBmf_dBtH{text-align:end}\n\n[dir=ltr] .dEBmf_dBtH{text-align:right}\n\n[dir=rtl] .dEBmf_dBtH{text-align:left}\n\n.dEBmf_bRML{flex-direction:row}\n\n.dEBmf_fEuk{justify-content:center}\n\n.dEBmf_ftfl{flex-direction:row-reverse}\n\n.dEBmf_EwaR{align-items:center;background:transparent;border:none;box-sizing:border-box;cursor:pointer;display:flex;height:100%;outline:none;width:100%}\n\n.dEBmf_EwaR::-moz-focus-inner{border:0}\n\n.dEBmf_EwaR:focus{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.dEBmf_cbTY{align-items:center;display:flex}");
42
42
  },
43
- 'root': 'fwfoD_bGBk',
44
- 'header': 'fwfoD_fsuY',
45
- 'textAlign--start': 'fwfoD_EMjX',
46
- 'textAlign--center': 'fwfoD_ImeN',
47
- 'textAlign--end': 'fwfoD_dBtH',
48
- 'flexDirection--start': 'fwfoD_bRML',
49
- 'flexDirection--center': 'fwfoD_fEuk',
50
- 'flexDirection--end': 'fwfoD_ftfl',
51
- 'button': 'fwfoD_EwaR'
43
+ 'root': 'dEBmf_bGBk',
44
+ 'header': 'dEBmf_fsuY',
45
+ 'textAlign--start': 'dEBmf_EMjX',
46
+ 'textAlign--center': 'dEBmf_ImeN',
47
+ 'textAlign--end': 'dEBmf_dBtH',
48
+ 'flexDirection--start': 'dEBmf_bRML',
49
+ 'flexDirection--center': 'dEBmf_fEuk',
50
+ 'flexDirection--end': 'dEBmf_ftfl',
51
+ 'button': 'dEBmf_EwaR',
52
+ 'buttonContainer': 'dEBmf_cbTY'
52
53
  };
53
54
  import theme from "./theme.js";
54
55
  /**
@@ -106,10 +107,9 @@ var ColHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2
106
107
  }
107
108
 
108
109
  if (onRequestSort) {
109
- // Reserve a space for arrow to keep column width consistent
110
- return /*#__PURE__*/React.createElement(IconMiniArrowUpLine, {
110
+ return /*#__PURE__*/React.createElement(IconMiniArrowDoubleLine, {
111
111
  style: {
112
- color: 'transparent'
112
+ opacity: '30%'
113
113
  }
114
114
  });
115
115
  }
@@ -138,7 +138,9 @@ var ColHeader = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2
138
138
  }), onRequestSort && /*#__PURE__*/React.createElement("button", {
139
139
  onClick: this.handleClick,
140
140
  className: classnames((_classnames2 = {}, _defineProperty(_classnames2, styles.header, true), _defineProperty(_classnames2, styles.button, true), _defineProperty(_classnames2, styles["flexDirection--".concat(textAlign)], true), _classnames2))
141
- }, /*#__PURE__*/React.createElement("div", null, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
141
+ }, /*#__PURE__*/React.createElement("div", {
142
+ className: styles.buttonContainer
143
+ }, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
142
144
  }
143
145
  }]);
144
146
 
package/lib/Table/ColHeader/index.js CHANGED
@@ -35,24 +35,27 @@ var _IconMiniArrowUpLine = require("@instructure/ui-icons/lib/IconMiniArrowUpLin
35
35
 
36
36
  var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/IconMiniArrowDownLine.js");
37
37
 
38
+ var _IconMiniArrowDoubleLine = require("@instructure/ui-icons/lib/IconMiniArrowDoubleLine.js");
39
+
38
40
  var _theme = _interopRequireDefault(require("./theme.js"));
39
41
 
40
42
  var _dec, _class, _class2, _temp;
41
43
 
42
44
  var styles = {
43
- componentId: 'fwfoD',
45
+ componentId: 'dEBmf',
44
46
  template: function template(theme) {
45
- return "\n\n.fwfoD_bGBk{background:".concat(theme.background || 'inherit', ";box-sizing:border-box;vertical-align:middle}\n\n.fwfoD_fsuY{color:").concat(theme.color || 'inherit', ";font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:700;line-height:").concat(theme.lineHeight || 'inherit', ";padding:").concat(theme.padding || 'inherit', "}\n\n.fwfoD_EMjX{text-align:start}\n\n[dir=ltr] .fwfoD_EMjX{text-align:left}\n\n[dir=rtl] .fwfoD_EMjX{text-align:right}\n\n.fwfoD_ImeN,[dir=ltr] .fwfoD_ImeN,[dir=rtl] .fwfoD_ImeN{text-align:center}\n\n.fwfoD_dBtH{text-align:end}\n\n[dir=ltr] .fwfoD_dBtH{text-align:right}\n\n[dir=rtl] .fwfoD_dBtH{text-align:left}\n\n.fwfoD_bRML{flex-direction:row}\n\n.fwfoD_fEuk{justify-content:center}\n\n.fwfoD_ftfl{flex-direction:row-reverse}\n\n.fwfoD_EwaR{align-items:center;background:transparent;border:none;box-sizing:border-box;cursor:pointer;display:flex;height:100%;outline:none;width:100%}\n\n.fwfoD_EwaR::-moz-focus-inner{border:0}\n\n.fwfoD_EwaR:focus{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}");
47
+ return "\n\n.dEBmf_bGBk{background:".concat(theme.background || 'inherit', ";box-sizing:border-box;vertical-align:middle}\n\n.dEBmf_fsuY{color:").concat(theme.color || 'inherit', ";font-family:").concat(theme.fontFamily || 'inherit', ";font-size:").concat(theme.fontSize || 'inherit', ";font-weight:700;line-height:").concat(theme.lineHeight || 'inherit', ";padding:").concat(theme.padding || 'inherit', "}\n\n.dEBmf_EMjX{text-align:start}\n\n[dir=ltr] .dEBmf_EMjX{text-align:left}\n\n[dir=rtl] .dEBmf_EMjX{text-align:right}\n\n.dEBmf_ImeN,[dir=ltr] .dEBmf_ImeN,[dir=rtl] .dEBmf_ImeN{text-align:center}\n\n.dEBmf_dBtH{text-align:end}\n\n[dir=ltr] .dEBmf_dBtH{text-align:right}\n\n[dir=rtl] .dEBmf_dBtH{text-align:left}\n\n.dEBmf_bRML{flex-direction:row}\n\n.dEBmf_fEuk{justify-content:center}\n\n.dEBmf_ftfl{flex-direction:row-reverse}\n\n.dEBmf_EwaR{align-items:center;background:transparent;border:none;box-sizing:border-box;cursor:pointer;display:flex;height:100%;outline:none;width:100%}\n\n.dEBmf_EwaR::-moz-focus-inner{border:0}\n\n.dEBmf_EwaR:focus{outline:").concat(theme.focusOutlineWidth || 'inherit', " ").concat(theme.focusOutlineStyle || 'inherit', " ").concat(theme.focusOutlineColor || 'inherit', "}\n\n.dEBmf_cbTY{align-items:center;display:flex}");
46
48
  },
47
- 'root': 'fwfoD_bGBk',
48
- 'header': 'fwfoD_fsuY',
49
- 'textAlign--start': 'fwfoD_EMjX',
50
- 'textAlign--center': 'fwfoD_ImeN',
51
- 'textAlign--end': 'fwfoD_dBtH',
52
- 'flexDirection--start': 'fwfoD_bRML',
53
- 'flexDirection--center': 'fwfoD_fEuk',
54
- 'flexDirection--end': 'fwfoD_ftfl',
55
- 'button': 'fwfoD_EwaR'
49
+ 'root': 'dEBmf_bGBk',
50
+ 'header': 'dEBmf_fsuY',
51
+ 'textAlign--start': 'dEBmf_EMjX',
52
+ 'textAlign--center': 'dEBmf_ImeN',
53
+ 'textAlign--end': 'dEBmf_dBtH',
54
+ 'flexDirection--start': 'dEBmf_bRML',
55
+ 'flexDirection--center': 'dEBmf_fEuk',
56
+ 'flexDirection--end': 'dEBmf_ftfl',
57
+ 'button': 'dEBmf_EwaR',
58
+ 'buttonContainer': 'dEBmf_cbTY'
56
59
  };
57
60
 
58
61
  var _ref = /*#__PURE__*/_react.default.createElement(_IconMiniArrowUpLine.IconMiniArrowUpLine, null);
@@ -109,10 +112,9 @@ var ColHeader = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(
109
112
  }
110
113
 
111
114
  if (onRequestSort) {
112
- // Reserve a space for arrow to keep column width consistent
113
- return /*#__PURE__*/_react.default.createElement(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
115
+ return /*#__PURE__*/_react.default.createElement(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
114
116
  style: {
115
- color: 'transparent'
117
+ opacity: '30%'
116
118
  }
117
119
  });
118
120
  }
@@ -141,7 +143,9 @@ var ColHeader = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(
141
143
  }), onRequestSort && /*#__PURE__*/_react.default.createElement("button", {
142
144
  onClick: this.handleClick,
143
145
  className: (0, _classnames3.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, styles.header, true), (0, _defineProperty2.default)(_classnames2, styles.button, true), (0, _defineProperty2.default)(_classnames2, styles["flexDirection--".concat(textAlign)], true), _classnames2))
144
- }, /*#__PURE__*/_react.default.createElement("div", null, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
146
+ }, /*#__PURE__*/_react.default.createElement("div", {
147
+ className: styles.buttonContainer
148
+ }, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
145
149
  }
146
150
  }]);
147
151
  ColHeader.displayName = "ColHeader";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-table",
3
- "version": "7.16.0",
3
+ "version": "7.19.0",
4
4
  "description": "A styled HTML table component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "type": "commonjs",
@@ -23,22 +23,22 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "^7.16.0",
27
- "@instructure/ui-color-utils": "^7.16.0",
28
- "@instructure/ui-test-utils": "^7.16.0"
26
+ "@instructure/ui-babel-preset": "^7.19.0",
27
+ "@instructure/ui-color-utils": "^7.19.0",
28
+ "@instructure/ui-test-utils": "^7.19.0"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.9.2",
32
- "@instructure/console": "^7.16.0",
33
- "@instructure/ui-a11y-content": "^7.16.0",
34
- "@instructure/ui-icons": "^7.16.0",
35
- "@instructure/ui-prop-types": "^7.16.0",
36
- "@instructure/ui-react-utils": "^7.16.0",
37
- "@instructure/ui-simple-select": "^7.16.0",
38
- "@instructure/ui-testable": "^7.16.0",
39
- "@instructure/ui-themeable": "^7.16.0",
40
- "@instructure/ui-utils": "^7.16.0",
41
- "@instructure/ui-view": "^7.16.0",
32
+ "@instructure/console": "^7.19.0",
33
+ "@instructure/ui-a11y-content": "^7.19.0",
34
+ "@instructure/ui-icons": "^7.19.0",
35
+ "@instructure/ui-prop-types": "^7.19.0",
36
+ "@instructure/ui-react-utils": "^7.19.0",
37
+ "@instructure/ui-simple-select": "^7.19.0",
38
+ "@instructure/ui-testable": "^7.19.0",
39
+ "@instructure/ui-themeable": "^7.19.0",
40
+ "@instructure/ui-utils": "^7.19.0",
41
+ "@instructure/ui-view": "^7.19.0",
42
42
  "classnames": "^2",
43
43
  "prop-types": "^15"
44
44
  },
package/src/Table/ColHeader/index.js CHANGED
@@ -30,7 +30,8 @@ import { themeable } from '@instructure/ui-themeable'
30
30
  import { omitProps, callRenderProp } from '@instructure/ui-react-utils'
31
31
  import {
32
32
  IconMiniArrowUpLine,
33
- IconMiniArrowDownLine
33
+ IconMiniArrowDownLine,
34
+ IconMiniArrowDoubleLine
34
35
  } from '@instructure/ui-icons'
35
36
 
36
37
  import styles from './styles.css'
@@ -96,12 +97,12 @@ class ColHeader extends Component {
96
97
  if (sortDirection === 'ascending') {
97
98
  return <IconMiniArrowUpLine />
98
99
  }
100
+
99
101
  if (sortDirection === 'descending') {
100
102
  return <IconMiniArrowDownLine />
101
103
  }
102
104
  if (onRequestSort) {
103
- // Reserve a space for arrow to keep column width consistent
104
- return <IconMiniArrowUpLine style={{ color: 'transparent' }} />
105
+ return <IconMiniArrowDoubleLine style={{ opacity: '30%' }} />
105
106
  }
106
107
  return null
107
108
  }
@@ -139,7 +140,7 @@ class ColHeader extends Component {
139
140
  [styles[`flexDirection--${textAlign}`]]: true
140
141
  })}
141
142
  >
142
- <div>
143
+ <div className={styles.buttonContainer}>
143
144
  {callRenderProp(children)}
144
145
  {this.renderSortArrow()}
145
146
  </div>
package/src/Table/ColHeader/styles.css CHANGED
@@ -80,3 +80,8 @@
80
80
  outline: var(--focusOutlineWidth) var(--focusOutlineStyle) var(--focusOutlineColor);
81
81
  }
82
82
  }
83
+
84
+ .buttonContainer {
85
+ display: flex;
86
+ align-items: center; /* align arrow in vertical center */
87
+ }