@atlaskit/table-tree 9.6.11 → 9.6.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/table-tree
 
+## 9.6.12
+
+### Patch Changes
+
+- [#65882](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65882) [`9629b57b6108`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9629b57b6108) - [ux] Updated buttons in table-tree to consume new icon buttons.
+
 ## 9.6.11
 
 ### Patch Changes

package/dist/cjs/components/internal/chevron.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,7 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _new = require("@atlaskit/button/new");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 var _styled = require("./styled");
@@ -50,23 +49,17 @@ var Chevron = exports.default = /*#__PURE__*/function (_Component) {
         expandLabel = _this$props.expandLabel,
         rowId = _this$props.rowId,
         extendedLabel = _this$props.extendedLabel;
-      var iconProps = {
-        size: 'medium',
-        primaryColor: _styled.iconColor
-      };
       var getLabel = function getLabel(defaultLabel) {
         return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
       };
-      return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
-        spacing: "none",
+      return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
         appearance: "subtle",
+        onClick: this.handleClick,
+        spacing: "none",
+        icon: isExpanded ? _chevronDown.default : _chevronRight.default,
         "aria-controls": ariaControls,
-        onClick: this.handleClick
-      }, /*#__PURE__*/_react.default.createElement(_styled.ChevronIconContainer, null, isExpanded ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, (0, _extends2.default)({
-        label: getLabel(collapseLabel)
-      }, iconProps)) : /*#__PURE__*/_react.default.createElement(_chevronRight.default, (0, _extends2.default)({
-        label: getLabel(expandLabel)
-      }, iconProps)))));
+        label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+      }));
     }
   }]);
   return Chevron;

package/dist/cjs/components/internal/styled.js

@@ -4,14 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.indentBase = exports.iconColor = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronIconContainer = exports.ChevronContainer = void 0;
+exports.indentBase = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronContainer = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["isRoot"];
 /** @jsx jsx */
-var iconColor = exports.iconColor = "var(--ds-text, ".concat(_colors.N800, ")");
 var indentBase = exports.indentBase = "var(--ds-space-300, 25px)";
 var treeRowContainerStyles = (0, _react.css)({
   display: 'flex',
@@ -49,24 +48,6 @@ var ChevronContainer = exports.ChevronContainer = function ChevronContainer(prop
     css: commonChevronContainerStyles
   }));
 };
-var chevronIconContainerStyles = (0, _react.css)({
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  insetBlockStart: 1
-});
-
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-var ChevronIconContainer = exports.ChevronIconContainer = function ChevronIconContainer(props
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) {
-  return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
-    css: chevronIconContainerStyles
-  }));
-};
 var loadingItemContainerStyles = (0, _react.css)({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/cjs/components/row.js

@@ -28,7 +28,7 @@ var treeRowClickableStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.6.11";
+var packageVersion = "9.6.12";
 var Row = exports.RowWithoutAnalytics = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
   var _super = _createSuper(Row);

package/dist/es2019/components/internal/chevron.js

@@ -1,12 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
-import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
-import { ChevronContainer, ChevronIconContainer, iconColor } from './styled';
+import { ChevronContainer } from './styled';
 export default class Chevron extends Component {
   constructor(...args) {
     super(...args);
@@ -25,21 +24,15 @@ export default class Chevron extends Component {
       rowId,
       extendedLabel
     } = this.props;
-    const iconProps = {
-      size: 'medium',
-      primaryColor: iconColor
-    };
     const getLabel = defaultLabel => extendedLabel ? `${defaultLabel} ${extendedLabel} row` : `${defaultLabel} row ${rowId}`;
-    return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
-      spacing: "none",
+    return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(IconButton, {
       appearance: "subtle",
+      onClick: this.handleClick,
+      spacing: "none",
+      icon: isExpanded ? ChevronDownIcon : ChevronRightIcon,
       "aria-controls": ariaControls,
-      onClick: this.handleClick
-    }, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
-      label: getLabel(collapseLabel)
-    }, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
-      label: getLabel(expandLabel)
-    }, iconProps)))));
+      label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+    }));
   }
 }
 _defineProperty(Chevron, "defaultProps", {

package/dist/es2019/components/internal/styled.js

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { N30, N800 } from '@atlaskit/theme/colors';
-export const iconColor = `var(--ds-text, ${N800})`;
+import { N30 } from '@atlaskit/theme/colors';
 export const indentBase = "var(--ds-space-300, 25px)";
 const treeRowContainerStyles = css({
   display: 'flex',
@@ -36,22 +35,6 @@ export const ChevronContainer = (props
 ) => jsx("span", _extends({}, props, {
   css: commonChevronContainerStyles
 }));
-const chevronIconContainerStyles = css({
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  insetBlockStart: 1
-});
-
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export const ChevronIconContainer = (props
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) => jsx("span", _extends({}, props, {
-  css: chevronIconContainerStyles
-}));
 const loadingItemContainerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/es2019/components/row.js

@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.6.11";
+const packageVersion = "9.6.12";
 class Row extends Component {
   constructor(...args) {
     super(...args);

package/dist/esm/components/internal/chevron.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -11,10 +10,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /* eslint-disable @repo/internal/react/consistent-props-definitions */
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
-import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
-import { ChevronContainer, ChevronIconContainer, iconColor } from './styled';
+import { ChevronContainer } from './styled';
 var Chevron = /*#__PURE__*/function (_Component) {
   _inherits(Chevron, _Component);
   var _super = _createSuper(Chevron);
@@ -42,23 +41,17 @@ var Chevron = /*#__PURE__*/function (_Component) {
         expandLabel = _this$props.expandLabel,
         rowId = _this$props.rowId,
         extendedLabel = _this$props.extendedLabel;
-      var iconProps = {
-        size: 'medium',
-        primaryColor: iconColor
-      };
       var getLabel = function getLabel(defaultLabel) {
         return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
       };
-      return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
+      return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(IconButton, {
         appearance: "subtle",
+        onClick: this.handleClick,
+        spacing: "none",
+        icon: isExpanded ? ChevronDownIcon : ChevronRightIcon,
         "aria-controls": ariaControls,
-        onClick: this.handleClick
-      }, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
-        label: getLabel(collapseLabel)
-      }, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
-        label: getLabel(expandLabel)
-      }, iconProps)))));
+        label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+      }));
     }
   }]);
   return Chevron;

package/dist/esm/components/internal/styled.js

@@ -4,8 +4,7 @@ var _excluded = ["isRoot"];
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { N30, N800 } from '@atlaskit/theme/colors';
-export var iconColor = "var(--ds-text, ".concat(N800, ")");
+import { N30 } from '@atlaskit/theme/colors';
 export var indentBase = "var(--ds-space-300, 25px)";
 var treeRowContainerStyles = css({
   display: 'flex',
@@ -43,24 +42,6 @@ export var ChevronContainer = function ChevronContainer(props
     css: commonChevronContainerStyles
   }));
 };
-var chevronIconContainerStyles = css({
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  insetBlockStart: 1
-});
-
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export var ChevronIconContainer = function ChevronIconContainer(props
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-) {
-  return jsx("span", _extends({}, props, {
-    css: chevronIconContainerStyles
-  }));
-};
 var loadingItemContainerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage

package/dist/esm/components/row.js

@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.6.11";
+var packageVersion = "9.6.12";
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);
   var _super = _createSuper(Row);

package/dist/types/components/internal/styled.d.ts

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import type { FC, HTMLAttributes, ReactNode } from 'react';
-export declare const iconColor: "var(--ds-text)";
 export declare const indentBase: "var(--ds-space-300)";
 /**
  * __Tree row container__
@@ -17,12 +16,6 @@ type ChevronContainerProps = HTMLAttributes<HTMLSpanElement> & {
  * A wrapper container around the expand table tree button.
  */
 export declare const ChevronContainer: FC<ChevronContainerProps>;
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export declare const ChevronIconContainer: FC<ChevronContainerProps>;
 type LoaderItemContainerProps = {
     isRoot?: boolean;
     children: ReactNode;

package/dist/types-ts4.5/components/internal/styled.d.ts

@@ -1,6 +1,5 @@
 /** @jsx jsx */
 import type { FC, HTMLAttributes, ReactNode } from 'react';
-export declare const iconColor: "var(--ds-text)";
 export declare const indentBase: "var(--ds-space-300)";
 /**
  * __Tree row container__
@@ -17,12 +16,6 @@ type ChevronContainerProps = HTMLAttributes<HTMLSpanElement> & {
  * A wrapper container around the expand table tree button.
  */
 export declare const ChevronContainer: FC<ChevronContainerProps>;
-/**
- * __Chevron icon container__
- *
- * A chevron icon container.
- */
-export declare const ChevronIconContainer: FC<ChevronContainerProps>;
 type LoaderItemContainerProps = {
     isRoot?: boolean;
     children: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.6.11",
+  "version": "9.6.12",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.34.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21"