@atlaskit/dynamic-table - npm Package Compare versions

Comparing version 14.11.10 to 14.11.11

CHANGELOG.md

 # @atlaskit/dynamic-table
 
+## 14.11.11
+
+### Patch Changes
+
+- [#58292](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58292) [`0dc821f0ecba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0dc821f0ecba) - [ux] Use `td` over `th` when a table head cell has no content.
+
 ## 14.11.10
@@ -4,0 +10,0 @@

dist/cjs/components/stateless.js

@@ -32,3 +32,3 @@ "use strict";
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.11.10";
+var packageVersion = "14.11.11";
 function toggleSortOrder(currentSortOrder) {
@@ -35,0 +35,0 @@ switch (currentSortOrder) {

dist/cjs/styled/table-head.js

@@ -28,3 +28,3 @@ "use strict";
 var headStyles = (0, _react2.css)({
-  borderBottom: "none"
+  borderBlockEnd: "none"
 });
@@ -77,16 +77,13 @@ var Head = exports.Head = function Head(_ref) {
       position: 'absolute',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      right: "var(--ds-space-negative-100, -8px)",
       border: '3px solid transparent',
-      content: '""'
+      content: '""',
+      insetInlineEnd: "var(--ds-space-negative-100, -8px)"
     },
     '&::before': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      bottom: "var(--ds-space-100, 8px)",
-      borderBottom: "3px solid ".concat(_theme.arrow.defaultColor)
+      borderBlockEnd: "3px solid ".concat(_theme.arrow.defaultColor),
+      insetBlockEnd: "var(--ds-space-100, 8px)"
     },
     '&::after': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      bottom: 0,
-      borderTop: "3px solid ".concat(_theme.arrow.defaultColor)
+      borderBlockStart: "3px solid ".concat(_theme.arrow.defaultColor),
+      insetBlockEnd: 0
     }
@@ -100,6 +97,6 @@ },
       '&::before': {
-        borderBottom: "3px solid ".concat(_theme.MSThemeColors.Text)
+        borderBlockEnd: "3px solid ".concat(_theme.MSThemeColors.Text)
       },
       '&::after': {
-        borderTop: "3px solid ".concat(_theme.MSThemeColors.Text)
+        borderBlockStart: "3px solid ".concat(_theme.MSThemeColors.Text)
       }
@@ -112,3 +109,3 @@ }
     '&::before': {
-      borderBottom: "3px solid ".concat(_theme.arrow.selectedColor)
+      borderBlockEnd: "3px solid ".concat(_theme.arrow.selectedColor)
     }
@@ -119,3 +116,3 @@ },
       '&::before': {
-        borderBottom: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
+        borderBlockEnd: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
       }
@@ -128,3 +125,3 @@ }
     '&::after': {
-      borderTop: "3px solid ".concat(_theme.arrow.selectedColor)
+      borderBlockStart: "3px solid ".concat(_theme.arrow.selectedColor)
     }
@@ -135,3 +132,3 @@ },
       '&::after': {
-        borderTop: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
+        borderBlockStart: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
       }
@@ -164,3 +161,7 @@ }
   };
-  return (0, _react2.jsx)("th", (0, _extends2.default)({
+
+  // If there is no content in the cell, it should be rendered as an empty `td`, not a `th`.
+  // https://dequeuniversity.com/rules/axe/4.7/empty-table-header
+  var Component = children ? 'th' : 'td';
+  return (0, _react2.jsx)(Component, (0, _extends2.default)({
     "aria-sort": getFormattedSortOrder(),
@@ -167,0 +168,0 @@ style: mergedStyles,

dist/es2019/components/stateless.js

@@ -17,3 +17,3 @@ import _extends from "@babel/runtime/helpers/extends";
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.11.10";
+const packageVersion = "14.11.11";
 function toggleSortOrder(currentSortOrder) {
@@ -20,0 +20,0 @@ switch (currentSortOrder) {

dist/es2019/styled/table-head.js

@@ -15,3 +15,3 @@ import _extends from "@babel/runtime/helpers/extends";
 const headStyles = css({
-  borderBottom: `none`
+  borderBlockEnd: `none`
 });
@@ -65,16 +65,13 @@ export const Head = ({
       position: 'absolute',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      right: "var(--ds-space-negative-100, -8px)",
       border: '3px solid transparent',
-      content: '""'
+      content: '""',
+      insetInlineEnd: "var(--ds-space-negative-100, -8px)"
     },
     '&::before': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      bottom: "var(--ds-space-100, 8px)",
-      borderBottom: `3px solid ${arrow.defaultColor}`
+      borderBlockEnd: `3px solid ${arrow.defaultColor}`,
+      insetBlockEnd: "var(--ds-space-100, 8px)"
     },
     '&::after': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      bottom: 0,
-      borderTop: `3px solid ${arrow.defaultColor}`
+      borderBlockStart: `3px solid ${arrow.defaultColor}`,
+      insetBlockEnd: 0
     }
@@ -88,6 +85,6 @@ },
       '&::before': {
-        borderBottom: `3px solid ${MSThemeColors.Text}`
+        borderBlockEnd: `3px solid ${MSThemeColors.Text}`
       },
       '&::after': {
-        borderTop: `3px solid ${MSThemeColors.Text}`
+        borderBlockStart: `3px solid ${MSThemeColors.Text}`
       }
@@ -100,3 +97,3 @@ }
     '&::before': {
-      borderBottom: `3px solid ${arrow.selectedColor}`
+      borderBlockEnd: `3px solid ${arrow.selectedColor}`
     }
@@ -107,3 +104,3 @@ },
       '&::before': {
-        borderBottom: `3px solid ${MSThemeColors.SelectedBackground}`
+        borderBlockEnd: `3px solid ${MSThemeColors.SelectedBackground}`
       }
@@ -116,3 +113,3 @@ }
     '&::after': {
-      borderTop: `3px solid ${arrow.selectedColor}`
+      borderBlockStart: `3px solid ${arrow.selectedColor}`
     }
@@ -123,3 +120,3 @@ },
       '&::after': {
-        borderTop: `3px solid ${MSThemeColors.SelectedBackground}`
+        borderBlockStart: `3px solid ${MSThemeColors.SelectedBackground}`
       }
@@ -157,3 +154,7 @@ }
   };
-  return jsx("th", _extends({
+
+  // If there is no content in the cell, it should be rendered as an empty `td`, not a `th`.
+  // https://dequeuniversity.com/rules/axe/4.7/empty-table-header
+  const Component = children ? 'th' : 'td';
+  return jsx(Component, _extends({
     "aria-sort": getFormattedSortOrder(),
@@ -160,0 +161,0 @@ style: mergedStyles,

dist/esm/components/stateless.js

@@ -25,3 +25,3 @@ import _extends from "@babel/runtime/helpers/extends";
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.11.10";
+var packageVersion = "14.11.11";
 function toggleSortOrder(currentSortOrder) {
@@ -28,0 +28,0 @@ switch (currentSortOrder) {

dist/esm/styled/table-head.js

@@ -21,3 +21,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var headStyles = css({
-  borderBottom: "none"
+  borderBlockEnd: "none"
 });
@@ -70,16 +70,13 @@ export var Head = function Head(_ref) {
       position: 'absolute',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      right: "var(--ds-space-negative-100, -8px)",
       border: '3px solid transparent',
-      content: '""'
+      content: '""',
+      insetInlineEnd: "var(--ds-space-negative-100, -8px)"
     },
     '&::before': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      bottom: "var(--ds-space-100, 8px)",
-      borderBottom: "3px solid ".concat(arrow.defaultColor)
+      borderBlockEnd: "3px solid ".concat(arrow.defaultColor),
+      insetBlockEnd: "var(--ds-space-100, 8px)"
     },
     '&::after': {
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      bottom: 0,
-      borderTop: "3px solid ".concat(arrow.defaultColor)
+      borderBlockStart: "3px solid ".concat(arrow.defaultColor),
+      insetBlockEnd: 0
     }
@@ -93,6 +90,6 @@ },
       '&::before': {
-        borderBottom: "3px solid ".concat(MSThemeColors.Text)
+        borderBlockEnd: "3px solid ".concat(MSThemeColors.Text)
       },
       '&::after': {
-        borderTop: "3px solid ".concat(MSThemeColors.Text)
+        borderBlockStart: "3px solid ".concat(MSThemeColors.Text)
       }
@@ -105,3 +102,3 @@ }
     '&::before': {
-      borderBottom: "3px solid ".concat(arrow.selectedColor)
+      borderBlockEnd: "3px solid ".concat(arrow.selectedColor)
     }
@@ -112,3 +109,3 @@ },
       '&::before': {
-        borderBottom: "3px solid ".concat(MSThemeColors.SelectedBackground)
+        borderBlockEnd: "3px solid ".concat(MSThemeColors.SelectedBackground)
       }
@@ -121,3 +118,3 @@ }
     '&::after': {
-      borderTop: "3px solid ".concat(arrow.selectedColor)
+      borderBlockStart: "3px solid ".concat(arrow.selectedColor)
     }
@@ -128,3 +125,3 @@ },
       '&::after': {
-        borderTop: "3px solid ".concat(MSThemeColors.SelectedBackground)
+        borderBlockStart: "3px solid ".concat(MSThemeColors.SelectedBackground)
       }
@@ -157,3 +154,7 @@ }
   };
-  return jsx("th", _extends({
+
+  // If there is no content in the cell, it should be rendered as an empty `td`, not a `th`.
+  // https://dequeuniversity.com/rules/axe/4.7/empty-table-header
+  var Component = children ? 'th' : 'td';
+  return jsx(Component, _extends({
     "aria-sort": getFormattedSortOrder(),
@@ -160,0 +161,0 @@ style: mergedStyles,

package.json

 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.11.10",
+  "version": "14.11.11",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
@@ -44,3 +44,3 @@ "publishConfig": {
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
@@ -85,2 +85,2 @@ "@emotion/react": "^11.7.1",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

No alert changes

Worsened metrics

Total package byte prevSize

453270

decreased by-1.44%

Number of package files

157

decreased by-0.63%

Lines of code

8290

decreased by-2.32%

Dependency changes

• Updated@atlaskit/tokens@^1.29.0