@atlaskit/dynamic-table 14.5.5 → 14.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/dynamic-table
 
+## 14.6.0
+
+### Minor Changes
+
+- [`1cc3c9f1c8f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1cc3c9f1c8f) - Add test ID to table pagination so it can be queried in tests. It will be prefixed with the `testId` prop: `{testId}--pagination`.
+
+### Patch Changes
+
+- [`0b545855a57`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b545855a57) - [ux] Updated tokens in `@atlaskit/dynamic-table`
+
 ## 14.5.5
 
 ### Patch Changes

package/dist/cjs/components/Stateless.js

@@ -52,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.5.5";
+var packageVersion = "14.6.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -277,7 +277,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         value: page,
         onChange: this.onSetPage,
         total: totalPages,
-        i18n: paginationi18n
+        i18n: paginationi18n,
+        testId: testId
       })), !rowsExist && emptyBody && /*#__PURE__*/_react.default.createElement(_LoadingContainer.default, {
         isLoading: isLoading,
         spinnerSize: _constants.LARGE,

package/dist/cjs/components/managed-pagination.js

@@ -59,7 +59,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
           total = _this$props.total,
           _this$props$value = _this$props.value,
           value = _this$props$value === void 0 ? 1 : _this$props$value,
-          i18n = _this$props.i18n;
+          i18n = _this$props.i18n,
+          testId = _this$props.testId;
       var pages = (0, _toConsumableArray2.default)(Array(total)).map(function (_, index) {
         return index + 1;
       }); // Pagination accepts array now thus selectedIndex starts with 0
@@ -72,7 +73,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
         nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
         previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,
         onChange: this.onChange,
-        pages: pages
+        pages: pages,
+        testId: testId && "".concat(testId, "--pagination")
       });
     }
   }]);

package/dist/cjs/styled/TableHead.js

@@ -44,9 +44,9 @@ var rankingStyles = (0, _core.css)({
 
 var getHeadStyles = function getHeadStyles(theme) {
   return (0, _core.css)({
-    borderBottom: "2px solid ".concat("var(--ds-border, ".concat(_theme.head.borderColor({
+    borderBottom: "2px solid ".concat(_theme.head.borderColor({
       theme: theme
-    }), ")"))
+    }))
   });
 };
 

package/dist/cjs/theme.js

@@ -24,16 +24,16 @@ var MSThemeColors = {
 exports.MSThemeColors = MSThemeColors;
 var arrow = {
   defaultColor: (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(colors.N40, ")"),
-    dark: "var(--ds-background-neutral, ".concat(colors.DN40, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N40, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN40, ")")
   }),
   selectedColor: (0, _components.themed)({
-    light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
+    light: "var(--ds-icon-subtle, ".concat(colors.N300, ")"),
+    dark: "var(--ds-icon-subtle, ".concat(colors.DN300, ")")
   }),
   hoverColor: (0, _components.themed)({
-    light: "var(--ds-background-neutral-pressed, ".concat(colors.N60, ")"),
-    dark: "var(--ds-background-neutral-pressed, ".concat(colors.DN60, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N60, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN60, ")")
   })
 };
 exports.arrow = arrow;
@@ -47,8 +47,8 @@ var row = {
     dark: "var(--ds-background-selected, ".concat(colors.DN50, ")")
   }),
   hoverBackground: (0, _components.themed)({
-    light: "var(--ds-background-input, ".concat(colors.N10, ")"),
-    dark: "var(--ds-background-input, ".concat(colors.DN40, ")")
+    light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N10, ")"),
+    dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.DN40, ")")
   }),
   hoverHighlightedBackground: (0, _components.themed)({
     light: "var(--ds-background-selected-hovered, ".concat(colors.B75, ")"),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.5.5",
+	"version": "14.6.0",
 	"sideEffects": false
 }

package/dist/es2019/components/Stateless.js

@@ -13,7 +13,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.5.5";
+const packageVersion = "14.6.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -230,7 +230,8 @@ class DynamicTable extends React.Component {
       value: page,
       onChange: this.onSetPage,
       total: totalPages,
-      i18n: paginationi18n
+      i18n: paginationi18n,
+      testId: testId
     })), !rowsExist && emptyBody && /*#__PURE__*/React.createElement(LoadingContainer, {
       isLoading: isLoading,
       spinnerSize: LARGE,

package/dist/es2019/components/managed-pagination.js

@@ -14,7 +14,8 @@ export default class ManagedPagination extends React.Component {
     const {
       total,
       value = 1,
-      i18n
+      i18n,
+      testId
     } = this.props;
     const pages = [...Array(total)].map((_, index) => index + 1); // Pagination accepts array now thus selectedIndex starts with 0
     // So, we are substracting value by one thus not breaking dynamic table
@@ -26,7 +27,8 @@ export default class ManagedPagination extends React.Component {
       nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
       previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,
       onChange: this.onChange,
-      pages: pages
+      pages: pages,
+      testId: testId && `${testId}--pagination`
     });
   }
 

package/dist/es2019/styled/TableHead.js

@@ -16,9 +16,9 @@ const rankingStyles = css({
 });
 
 const getHeadStyles = theme => css({
-  borderBottom: `2px solid ${`var(--ds-border, ${head.borderColor({
+  borderBottom: `2px solid ${head.borderColor({
     theme
-  })})`}`
+  })}`
 });
 
 export const Head = ({

package/dist/es2019/theme.js

@@ -8,16 +8,16 @@ export const MSThemeColors = {
 };
 export const arrow = {
   defaultColor: themed({
-    light: `var(--ds-background-neutral, ${colors.N40})`,
-    dark: `var(--ds-background-neutral, ${colors.DN40})`
+    light: `var(--ds-icon-disabled, ${colors.N40})`,
+    dark: `var(--ds-icon-disabled, ${colors.DN40})`
   }),
   selectedColor: themed({
-    light: `var(--ds-text-subtlest, ${colors.N300})`,
-    dark: `var(--ds-text-subtlest, ${colors.DN300})`
+    light: `var(--ds-icon-subtle, ${colors.N300})`,
+    dark: `var(--ds-icon-subtle, ${colors.DN300})`
   }),
   hoverColor: themed({
-    light: `var(--ds-background-neutral-pressed, ${colors.N60})`,
-    dark: `var(--ds-background-neutral-pressed, ${colors.DN60})`
+    light: `var(--ds-icon-disabled, ${colors.N60})`,
+    dark: `var(--ds-icon-disabled, ${colors.DN60})`
   })
 };
 export const row = {
@@ -30,8 +30,8 @@ export const row = {
     dark: `var(--ds-background-selected, ${colors.DN50})`
   }),
   hoverBackground: themed({
-    light: `var(--ds-background-input, ${colors.N10})`,
-    dark: `var(--ds-background-input, ${colors.DN40})`
+    light: `var(--ds-background-neutral-subtle-hovered, ${colors.N10})`,
+    dark: `var(--ds-background-neutral-subtle-hovered, ${colors.DN40})`
   }),
   hoverHighlightedBackground: themed({
     light: `var(--ds-background-selected-hovered, ${colors.B75})`,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.5.5",
+	"version": "14.6.0",
 	"sideEffects": false
 }

package/dist/esm/components/Stateless.js

@@ -24,7 +24,7 @@ import ManagedPagination from './managed-pagination';
 import RankableTableBody from './rankable/Body';
 import TableHead from './TableHead';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.5.5";
+var packageVersion = "14.6.0";
 
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
@@ -257,7 +257,8 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
         value: page,
         onChange: this.onSetPage,
         total: totalPages,
-        i18n: paginationi18n
+        i18n: paginationi18n,
+        testId: testId
       })), !rowsExist && emptyBody && /*#__PURE__*/React.createElement(LoadingContainer, {
         isLoading: isLoading,
         spinnerSize: LARGE,

package/dist/esm/components/managed-pagination.js

@@ -44,7 +44,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
           total = _this$props.total,
           _this$props$value = _this$props.value,
           value = _this$props$value === void 0 ? 1 : _this$props$value,
-          i18n = _this$props.i18n;
+          i18n = _this$props.i18n,
+          testId = _this$props.testId;
 
       var pages = _toConsumableArray(Array(total)).map(function (_, index) {
         return index + 1;
@@ -59,7 +60,8 @@ var ManagedPagination = /*#__PURE__*/function (_React$Component) {
         nextLabel: i18n === null || i18n === void 0 ? void 0 : i18n.next,
         previousLabel: i18n === null || i18n === void 0 ? void 0 : i18n.prev,
         onChange: this.onChange,
-        pages: pages
+        pages: pages,
+        testId: testId && "".concat(testId, "--pagination")
       });
     }
   }]);

package/dist/esm/styled/TableHead.js

@@ -25,9 +25,9 @@ var rankingStyles = css({
 
 var getHeadStyles = function getHeadStyles(theme) {
   return css({
-    borderBottom: "2px solid ".concat("var(--ds-border, ".concat(head.borderColor({
+    borderBottom: "2px solid ".concat(head.borderColor({
       theme: theme
-    }), ")"))
+    }))
   });
 };
 

package/dist/esm/theme.js

@@ -8,16 +8,16 @@ export var MSThemeColors = {
 };
 export var arrow = {
   defaultColor: themed({
-    light: "var(--ds-background-neutral, ".concat(colors.N40, ")"),
-    dark: "var(--ds-background-neutral, ".concat(colors.DN40, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N40, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN40, ")")
   }),
   selectedColor: themed({
-    light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
-    dark: "var(--ds-text-subtlest, ".concat(colors.DN300, ")")
+    light: "var(--ds-icon-subtle, ".concat(colors.N300, ")"),
+    dark: "var(--ds-icon-subtle, ".concat(colors.DN300, ")")
   }),
   hoverColor: themed({
-    light: "var(--ds-background-neutral-pressed, ".concat(colors.N60, ")"),
-    dark: "var(--ds-background-neutral-pressed, ".concat(colors.DN60, ")")
+    light: "var(--ds-icon-disabled, ".concat(colors.N60, ")"),
+    dark: "var(--ds-icon-disabled, ".concat(colors.DN60, ")")
   })
 };
 export var row = {
@@ -30,8 +30,8 @@ export var row = {
     dark: "var(--ds-background-selected, ".concat(colors.DN50, ")")
   }),
   hoverBackground: themed({
-    light: "var(--ds-background-input, ".concat(colors.N10, ")"),
-    dark: "var(--ds-background-input, ".concat(colors.DN40, ")")
+    light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N10, ")"),
+    dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.DN40, ")")
   }),
   hoverHighlightedBackground: themed({
     light: "var(--ds-background-selected-hovered, ".concat(colors.B75, ")"),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dynamic-table",
-	"version": "14.5.5",
+	"version": "14.6.0",
 	"sideEffects": false
 }

package/dist/types/components/managed-pagination.d.ts

@@ -6,6 +6,7 @@ interface ManagedPaginationProps {
     onChange: (newValue: any, analyticsEvent?: UIAnalyticsEvent) => void;
     total: number;
     i18n?: I18nShape;
+    testId?: string;
 }
 export default class ManagedPagination extends React.Component<ManagedPaginationProps> {
     onChange: (_event: any, newValue: any, analyticsEvent?: UIAnalyticsEvent | undefined) => void;

package/dist/types/theme.d.ts

@@ -5,14 +5,14 @@ export declare const MSThemeColors: {
     SelectedText: string;
 };
 export declare const arrow: {
-    defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
-    selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
-    hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-pressed)">;
+    defaultColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-disabled)">;
+    selectedColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)">;
+    hoverColor: import("@atlaskit/theme").ThemedValue<"var(--ds-icon-disabled)">;
 };
 export declare const row: {
     focusOutline: import("@atlaskit/theme").ThemedValue<"var(--ds-border-focused)">;
     highlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected)">;
-    hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-input)">;
+    hoverBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral-subtle-hovered)">;
     hoverHighlightedBackground: import("@atlaskit/theme").ThemedValue<"var(--ds-background-selected-hovered)">;
 };
 export declare const head: {

package/dist/types/types.d.ts

@@ -134,13 +134,14 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
       `data-testid` in the rendered code, serving as a hook for automated tests.
   
       The value of `testId` is used to prefix `testId` props in given elements.
-      + `${testId}--table` - Table.
-      + `${testId}--head` - Table header.
-      + `${testId}--head--{content of the cell}` - Table header cell can be identified by their content.
-      + `${testId}--row--{index - content of the first cell}` - Table row.
-      + `${testId}--body` - Table body.
-      + `${testId}--body--{content of the cell}` - Table body cell can be identified by their content.
-      + `${testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--table` - Table.
+      - `{testId}--head` - Table header.
+      - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+      - `{testId}--row--{index - content of the first cell}` - Table row.
+      - `{testId}--body` - Table body.
+      - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+      - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--pagination` - The table pagination.
      */
     testId?: string;
     /**
@@ -265,13 +266,14 @@ export interface StatefulProps extends WithAnalyticsEventsProps {
       `data-testid` in the rendered code, serving as a hook for automated tests.
   
       The value of `testId` is used to prefix `testId` props in given elements.
-      + `${testId}--table` - Table.
-      + `${testId}--head` - Table header.
-      + `${testId}--head--{content of the cell}` - Table header cell can be identified by their content.
-      + `${testId}--row--{index - content of the first cell}` - Table row.
-      + `${testId}--body` - Table body.
-      + `${testId}--body--{content of the cell}` - Table body cell can be identified by their content.
-      + `${testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--table` - Table.
+      - `{testId}--head` - Table header.
+      - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
+      - `{testId}--row--{index - content of the first cell}` - Table row.
+      - `{testId}--body` - Table body.
+      - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
+      - `{testId}--loadingSpinner` - The spinner overlaid when loading.
+      - `{testId}--pagination` - The table pagination.
      */
     testId?: string;
     /**

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@atlaskit/dynamic-table",
-  "version": "14.5.5",
+  "version": "14.6.0",
   "description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "homepage": "https://atlassian.design/components/dynamic-table/",
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -38,10 +38,10 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/dropdown-menu": "^11.1.0",
+    "@atlaskit/dropdown-menu": "^11.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",