@atlaskit/dynamic-table 15.0.1 → 15.1.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 (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/stateless.js +2 -2
  3. package/dist/cjs/styled/table-head.js +17 -1
  4. package/dist/es2019/components/stateless.js +2 -2
  5. package/dist/es2019/styled/table-head.js +17 -1
  6. package/dist/esm/components/stateless.js +2 -2
  7. package/dist/esm/styled/table-head.js +17 -1
  8. package/package.json +8 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/dynamic-table
2
2
 
3
+ ## 15.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`6467f4a7a7a99`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6467f4a7a7a99) -
8
+ Updated header styles to align to new modernised typography styles. Header styles are now slightly
9
+ darker. This change is behind a feature flag.
10
+
3
11
  ## 15.0.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/stateless.js CHANGED
@@ -86,14 +86,14 @@ var DynamicTable = function DynamicTable(_ref) {
86
86
  action: 'sorted',
87
87
  componentName: 'dynamicTable',
88
88
  packageName: "@atlaskit/dynamic-table",
89
- packageVersion: "15.0.1"
89
+ packageVersion: "15.1.0"
90
90
  });
91
91
  var onRankEnd = (0, _analyticsNext.usePlatformLeafEventHandler)({
92
92
  fn: providedOnRankEnd,
93
93
  action: 'ranked',
94
94
  componentName: 'dynamicTable',
95
95
  packageName: "@atlaskit/dynamic-table",
96
- packageVersion: "15.0.1"
96
+ packageVersion: "15.1.0"
97
97
  });
98
98
  (0, _react.useEffect)(function () {
99
99
  (0, _helpers.validateSortKey)(sortKey, head);
package/dist/cjs/styled/table-head.js CHANGED
@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _react = require("react");
12
12
  var _react2 = require("@emotion/react");
13
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
14
  var _colors = require("@atlaskit/theme/colors");
14
15
  var _constants = require("../internal/constants");
15
16
  var _theme = require("../theme");
@@ -55,6 +56,21 @@ var headCellBaseStyles = (0, _react2.css)({
55
56
  outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
56
57
  }
57
58
  });
59
+ var headCellBaseStylesModernized = (0, _react2.css)({
60
+ boxSizing: 'border-box',
61
+ position: 'relative',
62
+ border: 'none',
63
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
64
+ borderBlockEnd: "2px solid ".concat(_theme.tableBorder.borderColor),
65
+ color: "var(--ds-text-subtle, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
66
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
67
+ fontWeight: "var(--ds-font-weight-bold, 700)",
68
+ textAlign: 'left',
69
+ verticalAlign: 'top',
70
+ '&:focus-visible': {
71
+ outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
72
+ }
73
+ });
58
74
  var onClickStyles = (0, _react2.css)({
59
75
  '&:hover': {
60
76
  backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
@@ -181,7 +197,7 @@ var HeadCell = exports.HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (
181
197
  style: mergedStyles,
182
198
  css: [
183
199
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
184
- _constants2.cellStyles, headCellBaseStyles, onClick && onClickStyles,
200
+ _constants2.cellStyles, (0, _platformFeatureFlags.fg)('design_system_team_dynamic_table_typography') ? headCellBaseStylesModernized : headCellBaseStyles, onClick && onClickStyles,
185
201
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
186
202
  _constants2.truncationWidthStyles,
187
203
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/es2019/components/stateless.js CHANGED
@@ -60,14 +60,14 @@ const DynamicTable = ({
60
60
  action: 'sorted',
61
61
  componentName: 'dynamicTable',
62
62
  packageName: "@atlaskit/dynamic-table",
63
- packageVersion: "15.0.1"
63
+ packageVersion: "15.1.0"
64
64
  });
65
65
  const onRankEnd = usePlatformLeafEventHandler({
66
66
  fn: providedOnRankEnd,
67
67
  action: 'ranked',
68
68
  componentName: 'dynamicTable',
69
69
  packageName: "@atlaskit/dynamic-table",
70
- packageVersion: "15.0.1"
70
+ packageVersion: "15.1.0"
71
71
  });
72
72
  useEffect(() => {
73
73
  validateSortKey(sortKey, head);
package/dist/es2019/styled/table-head.js CHANGED
@@ -8,6 +8,7 @@ import { forwardRef } from 'react';
8
8
 
9
9
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
10
  import { css, jsx } from '@emotion/react';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { B100, N30A } from '@atlaskit/theme/colors';
12
13
  import { ASC, DESC } from '../internal/constants';
13
14
  import { arrow, head, MSThemeColors, tableBorder } from '../theme';
@@ -44,6 +45,21 @@ const headCellBaseStyles = css({
44
45
  outline: `solid 2px ${`var(--ds-border-focused, ${B100})`}`
45
46
  }
46
47
  });
48
+ const headCellBaseStylesModernized = css({
49
+ boxSizing: 'border-box',
50
+ position: 'relative',
51
+ border: 'none',
52
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
53
+ borderBlockEnd: `2px solid ${tableBorder.borderColor}`,
54
+ color: `var(--ds-text-subtle, ${`var(${CSS_VAR_TEXT_COLOR})`})`,
55
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
56
+ fontWeight: "var(--ds-font-weight-bold, 700)",
57
+ textAlign: 'left',
58
+ verticalAlign: 'top',
59
+ '&:focus-visible': {
60
+ outline: `solid 2px ${`var(--ds-border-focused, ${B100})`}`
61
+ }
62
+ });
47
63
  const onClickStyles = css({
48
64
  '&:hover': {
49
65
  backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`,
@@ -175,7 +191,7 @@ export const HeadCell = /*#__PURE__*/forwardRef(({
175
191
  style: mergedStyles,
176
192
  css: [
177
193
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
178
- cellStyles, headCellBaseStyles, onClick && onClickStyles,
194
+ cellStyles, fg('design_system_team_dynamic_table_typography') ? headCellBaseStylesModernized : headCellBaseStyles, onClick && onClickStyles,
179
195
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
180
196
  truncationWidthStyles,
181
197
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/esm/components/stateless.js CHANGED
@@ -76,14 +76,14 @@ var DynamicTable = function DynamicTable(_ref) {
76
76
  action: 'sorted',
77
77
  componentName: 'dynamicTable',
78
78
  packageName: "@atlaskit/dynamic-table",
79
- packageVersion: "15.0.1"
79
+ packageVersion: "15.1.0"
80
80
  });
81
81
  var onRankEnd = usePlatformLeafEventHandler({
82
82
  fn: providedOnRankEnd,
83
83
  action: 'ranked',
84
84
  componentName: 'dynamicTable',
85
85
  packageName: "@atlaskit/dynamic-table",
86
- packageVersion: "15.0.1"
86
+ packageVersion: "15.1.0"
87
87
  });
88
88
  useEffect(function () {
89
89
  validateSortKey(sortKey, head);
package/dist/esm/styled/table-head.js CHANGED
@@ -14,6 +14,7 @@ import { forwardRef } from 'react';
14
14
 
15
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
16
  import { css, jsx } from '@emotion/react';
17
+ import { fg } from '@atlaskit/platform-feature-flags';
17
18
  import { B100, N30A } from '@atlaskit/theme/colors';
18
19
  import { ASC, DESC } from '../internal/constants';
19
20
  import { arrow, head, MSThemeColors, tableBorder } from '../theme';
@@ -49,6 +50,21 @@ var headCellBaseStyles = css({
49
50
  outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
50
51
  }
51
52
  });
53
+ var headCellBaseStylesModernized = css({
54
+ boxSizing: 'border-box',
55
+ position: 'relative',
56
+ border: 'none',
57
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
58
+ borderBlockEnd: "2px solid ".concat(tableBorder.borderColor),
59
+ color: "var(--ds-text-subtle, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
60
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
61
+ fontWeight: "var(--ds-font-weight-bold, 700)",
62
+ textAlign: 'left',
63
+ verticalAlign: 'top',
64
+ '&:focus-visible': {
65
+ outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
66
+ }
67
+ });
52
68
  var onClickStyles = css({
53
69
  '&:hover': {
54
70
  backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
@@ -175,7 +191,7 @@ export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
175
191
  style: mergedStyles,
176
192
  css: [
177
193
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
178
- cellStyles, headCellBaseStyles, onClick && onClickStyles,
194
+ cellStyles, fg('design_system_team_dynamic_table_typography') ? headCellBaseStylesModernized : headCellBaseStyles, onClick && onClickStyles,
179
195
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
180
196
  truncationWidthStyles,
181
197
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/dynamic-table",
3
- "version": "15.0.1",
3
+ "version": "15.1.0",
4
4
  "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -40,9 +40,10 @@
40
40
  "@atlaskit/analytics-next": "^10.1.0",
41
41
  "@atlaskit/ds-lib": "^2.5.0",
42
42
  "@atlaskit/pagination": "^14.8.0",
43
+ "@atlaskit/platform-feature-flags": "^0.3.0",
43
44
  "@atlaskit/spinner": "^16.3.0",
44
45
  "@atlaskit/theme": "^13.0.0",
45
- "@atlaskit/tokens": "^1.59.0",
46
+ "@atlaskit/tokens": "^1.60.0",
46
47
  "@babel/runtime": "^7.0.0",
47
48
  "@emotion/react": "^11.7.1",
48
49
  "react-beautiful-dnd": "^12.2.0"
@@ -81,5 +82,10 @@
81
82
  "emotion"
82
83
  ]
83
84
  }
85
+ },
86
+ "platform-feature-flags": {
87
+ "design_system_team_dynamic_table_typography": {
88
+ "type": "boolean"
89
+ }
84
90
  }
85
91
  }