@atlaskit/tabs 14.0.5 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/tabs
 
+## 14.1.0
+
+### Minor Changes
+
+- [#90584](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90584) [`fccb64237f6c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fccb64237f6c) - [ux] Internal changes to focus styles
+
 ## 14.0.5
 
 ### Patch Changes

package/dist/cjs/components/tab-panel.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _primitives = require("@atlaskit/primitives");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _hooks = require("../hooks");
 /** @jsx jsx */
 
@@ -30,14 +31,16 @@ var TabPanel = function TabPanel(_ref) {
     ariaLabelledBy = _useTabPanel['aria-labelledby'],
     onMouseDown = _useTabPanel.onMouseDown,
     tabIndex = _useTabPanel.tabIndex;
-  return (0, _react2.jsx)(_primitives.Box, {
-    testId: testId,
+  return (0, _react2.jsx)(_focusRing.default, {
+    isInset: true
+  }, (0, _react2.jsx)("div", {
+    "data-testid": testId,
     role: role,
     id: id,
     hidden: hidden,
     "aria-labelledby": ariaLabelledBy,
     onMouseDown: onMouseDown,
     tabIndex: tabIndex
-  }, (0, _react2.jsx)(_react.Fragment, null, children));
+  }, (0, _react2.jsx)(_react.Fragment, null, children)));
 };
 var _default = exports.default = TabPanel;

package/dist/cjs/components/tab.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Tab;
 var _react = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
-var _primitives = require("@atlaskit/primitives");
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _hooks = require("../hooks");
 /** @jsx jsx */
 
@@ -33,8 +34,10 @@ function Tab(_ref) {
     onKeyDown = _useTab.onKeyDown,
     role = _useTab.role,
     tabIndex = _useTab.tabIndex;
-  return (0, _react.jsx)(_primitives.Box, {
-    testId: testId,
+  return (0, _react.jsx)(_focusRing.default, {
+    isInset: true
+  }, (0, _react.jsx)("div", {
+    "data-testid": testId,
     onClick: onClick,
     id: id,
     "aria-controls": ariaControls,
@@ -50,5 +53,5 @@ function Tab(_ref) {
     UNSAFE_style: {
       color: 'inherit'
     }
-  }, children));
+  }, 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.0.5"
+  packageVersion: "14.1.0"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,

package/dist/cjs/internal/colors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabPanelFocusColor = exports.tabLineColors = exports.tabColors = void 0;
+exports.tabLineColors = exports.tabColors = void 0;
 var _colors = require("@atlaskit/theme/colors");
 var tabColors = exports.tabColors = {
   labelColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
@@ -17,5 +17,4 @@ var tabLineColors = exports.tabLineColors = {
   hoveredColor: "var(--ds-border, transparent)",
   activeColor: "var(--ds-border, transparent)",
   selectedColor: "var(--ds-border-selected, ".concat(_colors.B400, ")")
-};
-var tabPanelFocusColor = exports.tabPanelFocusColor = "var(--ds-border-focused, ".concat(_colors.B100, ")");
+};

package/dist/cjs/internal/styles.js

@@ -14,28 +14,8 @@ var tabLeftRightPadding = "var(--ds-space-100, 8px)";
 var tabTopBottomPadding = "var(--ds-space-050, 4px)";
 // TODO this should probably be `border.width.indicator`
 var underlineHeight = "var(--ds-border-width-outline, 2px)";
-var highContrastFocusStyles = {
-  outline: "var(--ds-border-width, 1px)".concat(" solid")
-};
-
-// Required so the focus ring is visible in high contrast mode
-var highContrastFocusRing = {
-  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    '&:focus-visible': highContrastFocusStyles,
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': highContrastFocusStyles
-    }
-  }
-};
-var tabFocusStyles = function tabFocusStyles() {
-  return {
-    boxShadow: "0 0 0 2px ".concat(_colors.tabPanelFocusColor, " inset"),
-    borderRadius: "var(--ds-border-radius, 3px)",
-    outline: 'none'
-  };
-};
 var getTabPanelStyles = function getTabPanelStyles() {
-  return _objectSpread({
+  return {
     flexGrow: 1,
     /*
       NOTE min-height set to 0% because of Firefox bug
@@ -43,12 +23,8 @@ var getTabPanelStyles = function getTabPanelStyles() {
     */
     minHeight: '0%',
     display: 'flex',
-    padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus-visible': tabFocusStyles(),
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': tabFocusStyles()
-    }
-  }, highContrastFocusRing);
+    padding: "0 ".concat(tabLeftRightPadding)
+  };
 };
 var getTabsStyles = exports.getTabsStyles = function getTabsStyles() {
   return (
@@ -88,21 +64,9 @@ var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
     })
   );
 };
-var tabPanelFocusStyles = function tabPanelFocusStyles() {
-  var colors = _colors.tabColors;
-  return {
-    boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-    borderRadius: "var(--ds-border-radius, 3px)",
-    outline: 'none',
-    // Hide TabLine on focus
-    '&::after': {
-      opacity: 0
-    }
-  };
-};
 var getTabStyles = exports.getTabStyles = function getTabStyles() {
   var colors = _colors.tabColors;
-  return _objectSpread(_objectSpread({
+  return {
     color: colors.labelColor,
     cursor: 'pointer',
     lineHeight: 1.8,
@@ -128,11 +92,6 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
         height: 0
       })
     },
-    '&:focus-visible': tabPanelFocusStyles(),
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': tabPanelFocusStyles()
-    }
-  }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
@@ -141,5 +100,5 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
         height: 0
       })
     }
-  });
+  };
 };

package/dist/es2019/components/tab-panel.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import { Box } from '@atlaskit/primitives';
+import FocusRing from '@atlaskit/focus-ring';
 import { useTabPanel } from '../hooks';
 // Note this is not being memoized as children is an unstable reference
 /**
@@ -25,14 +25,16 @@ const TabPanel = ({
     onMouseDown,
     tabIndex
   } = useTabPanel();
-  return jsx(Box, {
-    testId: testId,
+  return jsx(FocusRing, {
+    isInset: true
+  }, jsx("div", {
+    "data-testid": testId,
     role: role,
     id: id,
     hidden: hidden,
     "aria-labelledby": ariaLabelledBy,
     onMouseDown: onMouseDown,
     tabIndex: tabIndex
-  }, jsx(Fragment, null, children));
+  }, jsx(Fragment, null, children)));
 };
 export default TabPanel;

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 { Box } from '@atlaskit/primitives';
+import FocusRing from '@atlaskit/focus-ring';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -28,8 +28,10 @@ export default function Tab({
     role,
     tabIndex
   } = useTab();
-  return jsx(Box, {
-    testId: testId,
+  return jsx(FocusRing, {
+    isInset: true
+  }, jsx("div", {
+    "data-testid": testId,
     onClick: onClick,
     id: id,
     "aria-controls": ariaControls,
@@ -45,5 +47,5 @@ export default function Tab({
     UNSAFE_style: {
       color: 'inherit'
     }
-  }, children));
+  }, children)));
 }

package/dist/es2019/components/tabs.js

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

package/dist/es2019/internal/colors.js

@@ -11,5 +11,4 @@ export const tabLineColors = {
   hoveredColor: "var(--ds-border, transparent)",
   activeColor: "var(--ds-border, transparent)",
   selectedColor: `var(--ds-border-selected, ${B400})`
-};
-export const tabPanelFocusColor = `var(--ds-border-focused, ${B100})`;
+};

package/dist/es2019/internal/styles.js

@@ -1,27 +1,9 @@
 import { css } from '@emotion/react';
-import { tabColors, tabLineColors, tabPanelFocusColor } from './colors';
+import { tabColors, tabLineColors } from './colors';
 const tabLeftRightPadding = "var(--ds-space-100, 8px)";
 const tabTopBottomPadding = "var(--ds-space-050, 4px)";
 // TODO this should probably be `border.width.indicator`
 const underlineHeight = "var(--ds-border-width-outline, 2px)";
-const highContrastFocusStyles = {
-  outline: `${"var(--ds-border-width, 1px)"} solid`
-};
-
-// Required so the focus ring is visible in high contrast mode
-const highContrastFocusRing = {
-  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    '&:focus-visible': highContrastFocusStyles,
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': highContrastFocusStyles
-    }
-  }
-};
-const tabFocusStyles = () => ({
-  boxShadow: `0 0 0 2px ${tabPanelFocusColor} inset`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  outline: 'none'
-});
 const getTabPanelStyles = () => ({
   flexGrow: 1,
   /*
@@ -30,12 +12,7 @@ const getTabPanelStyles = () => ({
   */
   minHeight: '0%',
   display: 'flex',
-  padding: `0 ${tabLeftRightPadding}`,
-  '&:focus-visible': tabFocusStyles(),
-  '@supports not selector(*:focus-visible)': {
-    '&:focus': tabFocusStyles()
-  },
-  ...highContrastFocusRing
+  padding: `0 ${tabLeftRightPadding}`
 });
 export const getTabsStyles = () =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
@@ -70,18 +47,6 @@ css({
     backgroundColor: tabLineColors.lineColor
   }
 });
-const tabPanelFocusStyles = () => {
-  const colors = tabColors;
-  return {
-    boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
-    borderRadius: "var(--ds-border-radius, 3px)",
-    outline: 'none',
-    // Hide TabLine on focus
-    '&::after': {
-      opacity: 0
-    }
-  };
-};
 export const getTabStyles = () => {
   const colors = tabColors;
   return {
@@ -112,11 +77,6 @@ export const getTabStyles = () => {
         height: 0
       }
     },
-    '&:focus-visible': tabPanelFocusStyles(),
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': tabPanelFocusStyles()
-    },
-    ...highContrastFocusRing,
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
       '&::after': {

package/dist/esm/components/tab-panel.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import { Box } from '@atlaskit/primitives';
+import FocusRing from '@atlaskit/focus-ring';
 import { useTabPanel } from '../hooks';
 // Note this is not being memoized as children is an unstable reference
 /**
@@ -23,14 +23,16 @@ var TabPanel = function TabPanel(_ref) {
     ariaLabelledBy = _useTabPanel['aria-labelledby'],
     onMouseDown = _useTabPanel.onMouseDown,
     tabIndex = _useTabPanel.tabIndex;
-  return jsx(Box, {
-    testId: testId,
+  return jsx(FocusRing, {
+    isInset: true
+  }, jsx("div", {
+    "data-testid": testId,
     role: role,
     id: id,
     hidden: hidden,
     "aria-labelledby": ariaLabelledBy,
     onMouseDown: onMouseDown,
     tabIndex: tabIndex
-  }, jsx(Fragment, null, children));
+  }, jsx(Fragment, null, children)));
 };
 export default TabPanel;

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 { Box } from '@atlaskit/primitives';
+import FocusRing from '@atlaskit/focus-ring';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -26,8 +26,10 @@ export default function Tab(_ref) {
     onKeyDown = _useTab.onKeyDown,
     role = _useTab.role,
     tabIndex = _useTab.tabIndex;
-  return jsx(Box, {
-    testId: testId,
+  return jsx(FocusRing, {
+    isInset: true
+  }, jsx("div", {
+    "data-testid": testId,
     onClick: onClick,
     id: id,
     "aria-controls": ariaControls,
@@ -43,5 +45,5 @@ export default function Tab(_ref) {
     UNSAFE_style: {
       color: 'inherit'
     }
-  }, children));
+  }, children)));
 }

package/dist/esm/components/tabs.js

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

package/dist/esm/internal/colors.js

@@ -11,5 +11,4 @@ export var tabLineColors = {
   hoveredColor: "var(--ds-border, transparent)",
   activeColor: "var(--ds-border, transparent)",
   selectedColor: "var(--ds-border-selected, ".concat(B400, ")")
-};
-export var tabPanelFocusColor = "var(--ds-border-focused, ".concat(B100, ")");
+};

package/dist/esm/internal/styles.js

@@ -2,33 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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, tabPanelFocusColor } from './colors';
+import { tabColors, tabLineColors } from './colors';
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";
 var tabTopBottomPadding = "var(--ds-space-050, 4px)";
 // TODO this should probably be `border.width.indicator`
 var underlineHeight = "var(--ds-border-width-outline, 2px)";
-var highContrastFocusStyles = {
-  outline: "var(--ds-border-width, 1px)".concat(" solid")
-};
-
-// Required so the focus ring is visible in high contrast mode
-var highContrastFocusRing = {
-  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    '&:focus-visible': highContrastFocusStyles,
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': highContrastFocusStyles
-    }
-  }
-};
-var tabFocusStyles = function tabFocusStyles() {
-  return {
-    boxShadow: "0 0 0 2px ".concat(tabPanelFocusColor, " inset"),
-    borderRadius: "var(--ds-border-radius, 3px)",
-    outline: 'none'
-  };
-};
 var getTabPanelStyles = function getTabPanelStyles() {
-  return _objectSpread({
+  return {
     flexGrow: 1,
     /*
       NOTE min-height set to 0% because of Firefox bug
@@ -36,12 +16,8 @@ var getTabPanelStyles = function getTabPanelStyles() {
     */
     minHeight: '0%',
     display: 'flex',
-    padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus-visible': tabFocusStyles(),
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': tabFocusStyles()
-    }
-  }, highContrastFocusRing);
+    padding: "0 ".concat(tabLeftRightPadding)
+  };
 };
 export var getTabsStyles = function getTabsStyles() {
   return (
@@ -81,21 +57,9 @@ export var getTabListStyles = function getTabListStyles() {
     })
   );
 };
-var tabPanelFocusStyles = function tabPanelFocusStyles() {
-  var colors = tabColors;
-  return {
-    boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-    borderRadius: "var(--ds-border-radius, 3px)",
-    outline: 'none',
-    // Hide TabLine on focus
-    '&::after': {
-      opacity: 0
-    }
-  };
-};
 export var getTabStyles = function getTabStyles() {
   var colors = tabColors;
-  return _objectSpread(_objectSpread({
+  return {
     color: colors.labelColor,
     cursor: 'pointer',
     lineHeight: 1.8,
@@ -121,11 +85,6 @@ export var getTabStyles = function getTabStyles() {
         height: 0
       })
     },
-    '&:focus-visible': tabPanelFocusStyles(),
-    '@supports not selector(*:focus-visible)': {
-      '&:focus': tabPanelFocusStyles()
-    }
-  }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {
       color: colors.selectedColor,
       '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
@@ -134,5 +93,5 @@ export var getTabStyles = function getTabStyles() {
         height: 0
       })
     }
-  });
+  };
 };

package/dist/types/internal/colors.d.ts

@@ -11,4 +11,3 @@ export declare const tabLineColors: {
     activeColor: "var(--ds-border)";
     selectedColor: "var(--ds-border-selected)";
 };
-export declare const tabPanelFocusColor: "var(--ds-border-focused)";

package/dist/types-ts4.5/internal/colors.d.ts

@@ -11,4 +11,3 @@ export declare const tabLineColors: {
     activeColor: "var(--ds-border)";
     selectedColor: "var(--ds-border-selected)";
 };
-export declare const tabPanelFocusColor: "var(--ds-border-focused)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "14.0.5",
+  "version": "14.1.0",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,10 +36,10 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-explorations": "^3.3.0",
-    "@atlaskit/primitives": "^5.1.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/ds-explorations": "^3.4.0",
+    "@atlaskit/focus-ring": "^1.3.9",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -50,7 +50,9 @@
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/primitives": "*",
     "@atlaskit/ssr": "*",
+    "@atlaskit/tooltip": "*",
     "@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",