@atlaskit/table 0.1.4 → 0.2.1

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 CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/table
2
2
 
3
+ ## 0.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
8
+ - Updated dependencies
9
+
10
+ ## 0.2.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`0fc5e276eb4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fc5e276eb4) - [ux] Fix borders not showing in Safari. Table is shifted down slightly as a result.
15
+
3
16
  ## 0.1.4
4
17
 
5
18
  ### Patch Changes
@@ -34,7 +34,7 @@ var Column = function Column(_ref) {
34
34
  backgroundColor: backgroundColor
35
35
  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
36
36
  color: "color.text",
37
- fontWeight: "500"
37
+ fontWeight: "medium"
38
38
  }, children));
39
39
  };
40
40
 
package/dist/cjs/thead.js CHANGED
@@ -64,9 +64,9 @@ var THead = function THead(_ref) {
64
64
  id: "select-all"
65
65
  }, "Select all rows")), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
66
66
  color: "color.text",
67
- fontWeight: "500"
67
+ fontWeight: "medium"
68
68
  }, state.checked.length, " selected"), actions && (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
69
- gap: "scale.100"
69
+ gap: "space.100"
70
70
  }, actions(state.checked)))));
71
71
  };
72
72
 
@@ -48,9 +48,9 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
48
48
  _ref$align = _ref.align,
49
49
  align = _ref$align === void 0 ? 'text' : _ref$align,
50
50
  _ref$paddingBlock = _ref.paddingBlock,
51
- paddingBlock = _ref$paddingBlock === void 0 ? 'scale.100' : _ref$paddingBlock,
51
+ paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
52
52
  _ref$paddingInline = _ref.paddingInline,
53
- paddingInline = _ref$paddingInline === void 0 ? 'scale.200' : _ref$paddingInline,
53
+ paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
54
54
  backgroundColor = _ref.backgroundColor,
55
55
  scope = _ref.scope,
56
56
  width = _ref.width,
@@ -70,7 +70,7 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
70
70
  } : undefined
71
71
  }, (0, _react2.jsx)(_inline.default, {
72
72
  justifyContent: alignMap[align],
73
- gap: "scale.0"
73
+ gap: "space.0"
74
74
  }, children));
75
75
  });
76
76
  exports.BaseCell = BaseCell;
@@ -27,11 +27,11 @@ var BulkActionOverlay = function BulkActionOverlay(_ref) {
27
27
  return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, {
28
28
  as: "th",
29
29
  position: "absolute",
30
- paddingInline: "scale.100",
30
+ paddingInline: "space.100",
31
31
  backgroundColor: "elevation.surface",
32
32
  css: overlayStyles
33
33
  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
34
- gap: "scale.300",
34
+ gap: "space.300",
35
35
  alignItems: "center"
36
36
  }, children));
37
37
  };
@@ -13,14 +13,9 @@ var baseStyles = (0, _react.css)({
13
13
  zIndex: 1,
14
14
  backgroundColor: "var(--ds-surface, white)",
15
15
  border: 'none',
16
- inset: 0,
17
- '&:after': {
18
- position: 'absolute',
19
- boxShadow: "inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"),
20
- content: "''",
21
- inset: 0,
22
- pointerEvents: 'none'
23
- }
16
+ borderBottom: "2px solid ".concat("var(--ds-border, #eee)"),
17
+ borderTop: '2px solid transparent',
18
+ inset: 0
24
19
  });
25
20
  /**
26
21
  * __THead__
package/dist/cjs/ui/tr.js CHANGED
@@ -27,18 +27,12 @@ var selectedStyles = (0, _react.css)({
27
27
  }
28
28
  });
29
29
  var bodyRowStyles = (0, _react.css)({
30
+ borderBottom: "1px solid ".concat("var(--ds-border, #eee)"),
30
31
  '&:hover': {
31
32
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
32
33
  },
33
34
  '&:focus-visible::after': {
34
35
  boxShadow: 'none'
35
- },
36
- '&:after': {
37
- position: 'absolute',
38
- boxShadow: "inset 0 -1px 0 0 ".concat("var(--ds-border, #eee)"),
39
- content: "''",
40
- inset: 0,
41
- pointerEvents: 'none'
42
36
  }
43
37
  });
44
38
 
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/table",
3
- "version": "0.1.4",
3
+ "version": "0.2.1",
4
4
  "sideEffects": false
5
5
  }
@@ -24,7 +24,7 @@ const Column = ({
24
24
  backgroundColor: backgroundColor
25
25
  }, jsx(Text, {
26
26
  color: "color.text",
27
- fontWeight: "500"
27
+ fontWeight: "medium"
28
28
  }, children));
29
29
  };
30
30
 
@@ -39,9 +39,9 @@ const THead = ({
39
39
  id: "select-all"
40
40
  }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
41
41
  color: "color.text",
42
- fontWeight: "500"
42
+ fontWeight: "medium"
43
43
  }, state.checked.length, " selected"), actions && jsx(Inline, {
44
- gap: "scale.100"
44
+ gap: "space.100"
45
45
  }, actions(state.checked)))));
46
46
  };
47
47
 
@@ -33,8 +33,8 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
33
33
  as,
34
34
  children,
35
35
  align = 'text',
36
- paddingBlock = 'scale.100',
37
- paddingInline = 'scale.200',
36
+ paddingBlock = 'space.100',
37
+ paddingInline = 'space.200',
38
38
  backgroundColor,
39
39
  scope,
40
40
  width,
@@ -54,5 +54,5 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
54
54
  } : undefined
55
55
  }, jsx(Inline, {
56
56
  justifyContent: alignMap[align],
57
- gap: "scale.0"
57
+ gap: "space.0"
58
58
  }, children)));
@@ -18,10 +18,10 @@ export const BulkActionOverlay = ({
18
18
  }) => jsx(Box, {
19
19
  as: "th",
20
20
  position: "absolute",
21
- paddingInline: "scale.100",
21
+ paddingInline: "space.100",
22
22
  backgroundColor: "elevation.surface",
23
23
  css: overlayStyles
24
24
  }, jsx(Inline, {
25
- gap: "scale.300",
25
+ gap: "space.300",
26
26
  alignItems: "center"
27
27
  }, children));
@@ -5,14 +5,9 @@ const baseStyles = css({
5
5
  zIndex: 1,
6
6
  backgroundColor: "var(--ds-surface, white)",
7
7
  border: 'none',
8
- inset: 0,
9
- '&:after': {
10
- position: 'absolute',
11
- boxShadow: `inset 0 -2px 0 0 ${"var(--ds-border, #eee)"}`,
12
- content: "''",
13
- inset: 0,
14
- pointerEvents: 'none'
15
- }
8
+ borderBottom: `2px solid ${"var(--ds-border, #eee)"}`,
9
+ borderTop: '2px solid transparent',
10
+ inset: 0
16
11
  });
17
12
  /**
18
13
  * __THead__
@@ -16,18 +16,12 @@ const selectedStyles = css({
16
16
  }
17
17
  });
18
18
  const bodyRowStyles = css({
19
+ borderBottom: `1px solid ${"var(--ds-border, #eee)"}`,
19
20
  '&:hover': {
20
21
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
21
22
  },
22
23
  '&:focus-visible::after': {
23
24
  boxShadow: 'none'
24
- },
25
- '&:after': {
26
- position: 'absolute',
27
- boxShadow: `inset 0 -1px 0 0 ${"var(--ds-border, #eee)"}`,
28
- content: "''",
29
- inset: 0,
30
- pointerEvents: 'none'
31
25
  }
32
26
  });
33
27
 
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/table",
3
- "version": "0.1.4",
3
+ "version": "0.2.1",
4
4
  "sideEffects": false
5
5
  }
@@ -24,7 +24,7 @@ var Column = function Column(_ref) {
24
24
  backgroundColor: backgroundColor
25
25
  }, jsx(Text, {
26
26
  color: "color.text",
27
- fontWeight: "500"
27
+ fontWeight: "medium"
28
28
  }, children));
29
29
  };
30
30
 
package/dist/esm/thead.js CHANGED
@@ -43,9 +43,9 @@ var THead = function THead(_ref) {
43
43
  id: "select-all"
44
44
  }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
45
45
  color: "color.text",
46
- fontWeight: "500"
46
+ fontWeight: "medium"
47
47
  }, state.checked.length, " selected"), actions && jsx(Inline, {
48
- gap: "scale.100"
48
+ gap: "space.100"
49
49
  }, actions(state.checked)))));
50
50
  };
51
51
 
@@ -35,9 +35,9 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
35
35
  _ref$align = _ref.align,
36
36
  align = _ref$align === void 0 ? 'text' : _ref$align,
37
37
  _ref$paddingBlock = _ref.paddingBlock,
38
- paddingBlock = _ref$paddingBlock === void 0 ? 'scale.100' : _ref$paddingBlock,
38
+ paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
39
39
  _ref$paddingInline = _ref.paddingInline,
40
- paddingInline = _ref$paddingInline === void 0 ? 'scale.200' : _ref$paddingInline,
40
+ paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
41
41
  backgroundColor = _ref.backgroundColor,
42
42
  scope = _ref.scope,
43
43
  width = _ref.width,
@@ -57,6 +57,6 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
57
57
  } : undefined
58
58
  }, jsx(Inline, {
59
59
  justifyContent: alignMap[align],
60
- gap: "scale.0"
60
+ gap: "space.0"
61
61
  }, children));
62
62
  });
@@ -18,11 +18,11 @@ export var BulkActionOverlay = function BulkActionOverlay(_ref) {
18
18
  return jsx(Box, {
19
19
  as: "th",
20
20
  position: "absolute",
21
- paddingInline: "scale.100",
21
+ paddingInline: "space.100",
22
22
  backgroundColor: "elevation.surface",
23
23
  css: overlayStyles
24
24
  }, jsx(Inline, {
25
- gap: "scale.300",
25
+ gap: "space.300",
26
26
  alignItems: "center"
27
27
  }, children));
28
28
  };
@@ -5,14 +5,9 @@ var baseStyles = css({
5
5
  zIndex: 1,
6
6
  backgroundColor: "var(--ds-surface, white)",
7
7
  border: 'none',
8
- inset: 0,
9
- '&:after': {
10
- position: 'absolute',
11
- boxShadow: "inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"),
12
- content: "''",
13
- inset: 0,
14
- pointerEvents: 'none'
15
- }
8
+ borderBottom: "2px solid ".concat("var(--ds-border, #eee)"),
9
+ borderTop: '2px solid transparent',
10
+ inset: 0
16
11
  });
17
12
  /**
18
13
  * __THead__
package/dist/esm/ui/tr.js CHANGED
@@ -16,18 +16,12 @@ var selectedStyles = css({
16
16
  }
17
17
  });
18
18
  var bodyRowStyles = css({
19
+ borderBottom: "1px solid ".concat("var(--ds-border, #eee)"),
19
20
  '&:hover': {
20
21
  backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
21
22
  },
22
23
  '&:focus-visible::after': {
23
24
  boxShadow: 'none'
24
- },
25
- '&:after': {
26
- position: 'absolute',
27
- boxShadow: "inset 0 -1px 0 0 ".concat("var(--ds-border, #eee)"),
28
- content: "''",
29
- inset: 0,
30
- pointerEvents: 'none'
31
25
  }
32
26
  });
33
27
 
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/table",
3
- "version": "0.1.4",
3
+ "version": "0.2.1",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/table",
3
- "version": "0.1.4",
3
+ "version": "0.2.1",
4
4
  "description": "A table is used to display data.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  "dependencies": {
35
35
  "@atlaskit/button": "^16.5.0",
36
36
  "@atlaskit/checkbox": "^12.4.1",
37
- "@atlaskit/ds-explorations": "^1.6.0",
37
+ "@atlaskit/ds-explorations": "^2.0.0",
38
38
  "@atlaskit/ds-lib": "^2.1.2",
39
39
  "@atlaskit/focus-ring": "^1.2.1",
40
40
  "@atlaskit/icon": "^21.11.2",