@atlaskit/tabs 14.1.0 → 15.0.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/tabs
 
+## 15.0.0
+
+### Major Changes
+
+- [#91586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91586) [`e229d87eecd0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e229d87eecd0) - - [ux] Removed horizontal padding from Tab container to ensure Tab labels and panel content align with other elements on the page. Tab label hit-boxes remain the same.
+  - Adjusted line height and overall Tab label height to be consistent with the Atlassian Design System.
+
 ## 14.1.0
 
 ### Minor Changes

package/dist/cjs/components/tab.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Tab;
 var _react = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _primitives = require("@atlaskit/primitives");
 var _hooks = require("../hooks");
 /** @jsx jsx */
 
@@ -48,10 +48,9 @@ function Tab(_ref) {
     onKeyDown: onKeyDown,
     role: role,
     tabIndex: tabIndex
-  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
-    shouldTruncate: true,
-    UNSAFE_style: {
-      color: 'inherit'
-    }
+  }, (0, _react.jsx)(_primitives.Text, {
+    weight: "medium",
+    color: "inherit",
+    maxLines: 1
   }, children)));
 }

package/dist/cjs/components/tabs.js

@@ -30,7 +30,7 @@ var tabsStyles = (0, _styles.getTabsStyles)();
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "14.1.0"
+  packageVersion: "15.0.0"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,

package/dist/cjs/internal/styles.js

@@ -10,8 +10,9 @@ var _react = require("@emotion/react");
 var _colors = require("./colors");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var tabLeftRightPadding = "var(--ds-space-100, 8px)";
-var tabTopBottomPadding = "var(--ds-space-050, 4px)";
+var tabInlinePadding = "var(--ds-space-100, 8px)";
+var tabBlockPadding = "var(--ds-space-075, 6px)";
+var tabInlineMargin = "var(--ds-space-negative-100, -8px)";
 // TODO this should probably be `border.width.indicator`
 var underlineHeight = "var(--ds-border-width-outline, 2px)";
 var getTabPanelStyles = function getTabPanelStyles() {
@@ -22,8 +23,7 @@ var getTabPanelStyles = function getTabPanelStyles() {
       FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
     */
     minHeight: '0%',
-    display: 'flex',
-    padding: "0 ".concat(tabLeftRightPadding)
+    display: 'flex'
   };
 };
 var getTabsStyles = exports.getTabsStyles = function getTabsStyles() {
@@ -47,8 +47,8 @@ var tabLineStyles = {
   margin: 0,
   position: 'absolute',
   width: 'inherit',
-  left: tabLeftRightPadding,
-  right: tabLeftRightPadding
+  insetInlineStart: tabInlinePadding,
+  insetInlineEnd: 0
 };
 var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
   return (
@@ -56,6 +56,7 @@ var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
     (0, _react.css)({
       '& [role="tab"]': getTabStyles(),
       fontWeight: "var(--ds-font-weight-medium, 500)",
+      marginInlineStart: tabInlineMargin,
       '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
         height: underlineHeight,
         // This line is not a border so the selected line is visible in high contrast mode
@@ -69,9 +70,8 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
   return {
     color: colors.labelColor,
     cursor: 'pointer',
-    lineHeight: 1.8,
     margin: 0,
-    padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
+    padding: "".concat(tabBlockPadding, " ").concat(tabInlinePadding),
     position: 'relative',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -80,6 +80,7 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        insetInlineEnd: tabInlinePadding,
         borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.hoveredColor),
         height: 0
       })
@@ -88,6 +89,7 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.activeLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        insetInlineEnd: tabInlinePadding,
         borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.activeColor),
         height: 0
       })
@@ -95,6 +97,7 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        insetInlineEnd: tabInlinePadding,
         // This line is a border so it is visible in high contrast mode
         borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.selectedColor),
         height: 0

package/dist/es2019/components/tab.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import FocusRing from '@atlaskit/focus-ring';
+import { Text } from '@atlaskit/primitives';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -43,9 +43,8 @@ export default function Tab({
     role: role,
     tabIndex: tabIndex
   }, jsx(Text, {
-    shouldTruncate: true,
-    UNSAFE_style: {
-      color: 'inherit'
-    }
+    weight: "medium",
+    color: "inherit",
+    maxLines: 1
   }, children)));
 }

package/dist/es2019/components/tabs.js

@@ -19,7 +19,7 @@ const tabsStyles = getTabsStyles();
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "14.1.0"
+  packageVersion: "15.0.0"
 };
 const getTabPanelWithContext = ({
   tabPanel,

package/dist/es2019/internal/styles.js

@@ -1,7 +1,8 @@
 import { css } from '@emotion/react';
 import { tabColors, tabLineColors } from './colors';
-const tabLeftRightPadding = "var(--ds-space-100, 8px)";
-const tabTopBottomPadding = "var(--ds-space-050, 4px)";
+const tabInlinePadding = "var(--ds-space-100, 8px)";
+const tabBlockPadding = "var(--ds-space-075, 6px)";
+const tabInlineMargin = "var(--ds-space-negative-100, -8px)";
 // TODO this should probably be `border.width.indicator`
 const underlineHeight = "var(--ds-border-width-outline, 2px)";
 const getTabPanelStyles = () => ({
@@ -11,8 +12,7 @@ const getTabPanelStyles = () => ({
     FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
   */
   minHeight: '0%',
-  display: 'flex',
-  padding: `0 ${tabLeftRightPadding}`
+  display: 'flex'
 });
 export const getTabsStyles = () =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
@@ -32,14 +32,15 @@ const tabLineStyles = {
   margin: 0,
   position: 'absolute',
   width: 'inherit',
-  left: tabLeftRightPadding,
-  right: tabLeftRightPadding
+  insetInlineStart: tabInlinePadding,
+  insetInlineEnd: 0
 };
 export const getTabListStyles = () =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
 css({
   '& [role="tab"]': getTabStyles(),
   fontWeight: "var(--ds-font-weight-medium, 500)",
+  marginInlineStart: tabInlineMargin,
   '&::before': {
     ...tabLineStyles,
     height: underlineHeight,
@@ -52,9 +53,8 @@ export const getTabStyles = () => {
   return {
     color: colors.labelColor,
     cursor: 'pointer',
-    lineHeight: 1.8,
     margin: 0,
-    padding: `${tabTopBottomPadding} ${tabLeftRightPadding}`,
+    padding: `${tabBlockPadding} ${tabInlinePadding}`,
     position: 'relative',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -64,6 +64,7 @@ export const getTabStyles = () => {
       color: colors.hoverLabelColor,
       '&::after': {
         ...tabLineStyles,
+        insetInlineEnd: tabInlinePadding,
         borderBottom: `${underlineHeight} solid ${tabLineColors.hoveredColor}`,
         height: 0
       }
@@ -73,6 +74,7 @@ export const getTabStyles = () => {
       color: colors.activeLabelColor,
       '&::after': {
         ...tabLineStyles,
+        insetInlineEnd: tabInlinePadding,
         borderBottom: `${underlineHeight} solid ${tabLineColors.activeColor}`,
         height: 0
       }
@@ -81,6 +83,7 @@ export const getTabStyles = () => {
       color: colors.selectedColor,
       '&::after': {
         ...tabLineStyles,
+        insetInlineEnd: tabInlinePadding,
         // This line is a border so it is visible in high contrast mode
         borderBottom: `${underlineHeight} solid ${tabLineColors.selectedColor}`,
         height: 0

package/dist/esm/components/tab.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import FocusRing from '@atlaskit/focus-ring';
+import { Text } from '@atlaskit/primitives';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -41,9 +41,8 @@ export default function Tab(_ref) {
     role: role,
     tabIndex: tabIndex
   }, jsx(Text, {
-    shouldTruncate: true,
-    UNSAFE_style: {
-      color: 'inherit'
-    }
+    weight: "medium",
+    color: "inherit",
+    maxLines: 1
   }, children)));
 }

package/dist/esm/components/tabs.js

@@ -24,7 +24,7 @@ var tabsStyles = getTabsStyles();
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "14.1.0"
+  packageVersion: "15.0.0"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,

package/dist/esm/internal/styles.js

@@ -3,8 +3,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { css } from '@emotion/react';
 import { tabColors, tabLineColors } from './colors';
-var tabLeftRightPadding = "var(--ds-space-100, 8px)";
-var tabTopBottomPadding = "var(--ds-space-050, 4px)";
+var tabInlinePadding = "var(--ds-space-100, 8px)";
+var tabBlockPadding = "var(--ds-space-075, 6px)";
+var tabInlineMargin = "var(--ds-space-negative-100, -8px)";
 // TODO this should probably be `border.width.indicator`
 var underlineHeight = "var(--ds-border-width-outline, 2px)";
 var getTabPanelStyles = function getTabPanelStyles() {
@@ -15,8 +16,7 @@ var getTabPanelStyles = function getTabPanelStyles() {
       FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
     */
     minHeight: '0%',
-    display: 'flex',
-    padding: "0 ".concat(tabLeftRightPadding)
+    display: 'flex'
   };
 };
 export var getTabsStyles = function getTabsStyles() {
@@ -40,8 +40,8 @@ var tabLineStyles = {
   margin: 0,
   position: 'absolute',
   width: 'inherit',
-  left: tabLeftRightPadding,
-  right: tabLeftRightPadding
+  insetInlineStart: tabInlinePadding,
+  insetInlineEnd: 0
 };
 export var getTabListStyles = function getTabListStyles() {
   return (
@@ -49,6 +49,7 @@ export var getTabListStyles = function getTabListStyles() {
     css({
       '& [role="tab"]': getTabStyles(),
       fontWeight: "var(--ds-font-weight-medium, 500)",
+      marginInlineStart: tabInlineMargin,
       '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
         height: underlineHeight,
         // This line is not a border so the selected line is visible in high contrast mode
@@ -62,9 +63,8 @@ export var getTabStyles = function getTabStyles() {
   return {
     color: colors.labelColor,
     cursor: 'pointer',
-    lineHeight: 1.8,
     margin: 0,
-    padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
+    padding: "".concat(tabBlockPadding, " ").concat(tabInlinePadding),
     position: 'relative',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -73,6 +73,7 @@ export var getTabStyles = function getTabStyles() {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        insetInlineEnd: tabInlinePadding,
         borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.hoveredColor),
         height: 0
       })
@@ -81,6 +82,7 @@ export var getTabStyles = function getTabStyles() {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.activeLabelColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        insetInlineEnd: tabInlinePadding,
         borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.activeColor),
         height: 0
       })
@@ -88,6 +90,7 @@ export var getTabStyles = function getTabStyles() {
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        insetInlineEnd: tabInlinePadding,
         // This line is a border so it is visible in high contrast mode
         borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.selectedColor),
         height: 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "14.1.0",
+  "version": "15.0.0",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,8 +36,8 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-explorations": "^3.4.0",
     "@atlaskit/focus-ring": "^1.3.9",
+    "@atlaskit/primitives": "^5.5.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
@@ -49,10 +49,9 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/primitives": "*",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "*",
+    "@atlaskit/tooltip": "^18.2.1",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",