@atlaskit/tabs 13.4.2 → 13.4.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tabs
 
+## 13.4.4
+
+### Patch Changes
+
+- [`56b444b56a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56b444b56a8) - Fix a bug where text descenders were cut off at high zoom levels on Windows
+
+## 13.4.3
+
+### Patch Changes
+
+- [`599bfe90ee3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/599bfe90ee3) - Internal change to use shape tokens. There is no expected visual change.
+
 ## 13.4.2
 
 ### Patch Changes

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

@@ -109,7 +109,7 @@ var TabList = function TabList(props) {
       position: "relative",
       padding: "space.0",
       ref: ref
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: tabListStyles
     }, childrenArray.map(function (child, index) {

package/dist/cjs/components/tabs.js

@@ -21,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.2"
+  packageVersion: "13.4.4"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -130,7 +130,7 @@ var Tabs = function Tabs(props) {
         flexBasis: '100%',
         flexGrow: 1
       }
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: tabsStyles
     }, (0, _react2.jsx)(_context.TabListContext.Provider, {

package/dist/cjs/internal/styles.js

@@ -12,9 +12,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";
 var tabTopBottomPadding = "var(--ds-space-050, 4px)";
-var underlineHeight = "var(--ds-width-100, 2px)";
+// TODO this should probably be `border.width.indicator`
+var underlineHeight = "var(--ds-border-width-outline, 2px)";
 var highContrastFocusStyles = {
-  outline: '1px solid'
+  outline: "var(--ds-border-width, 1px)".concat(" solid")
 };
 
 // Required so the focus ring is visible in high contrast mode
@@ -29,7 +30,7 @@ var highContrastFocusRing = {
 var tabFocusStyles = function tabFocusStyles(mode) {
   return {
     boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
-    borderRadius: "var(--ds-radius-100, 3px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
     outline: 'none'
   };
 };
@@ -56,7 +57,7 @@ var getTabsStyles = function getTabsStyles(mode) {
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
       '& > [hidden]': {
         display: 'none'
       }
@@ -66,7 +67,7 @@ var getTabsStyles = function getTabsStyles(mode) {
 exports.getTabsStyles = getTabsStyles;
 var tabLineStyles = {
   content: '""',
-  borderRadius: underlineHeight,
+  borderRadius: "var(--ds-border-radius-050, 2px)",
   bottom: 0,
   margin: 0,
   position: 'absolute',
@@ -93,7 +94,7 @@ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
   var colors = (0, _colors.getTabColors)(mode);
   return {
     boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-    borderRadius: "var(--ds-radius-100, 3px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
     outline: 'none',
     // Hide TabLine on focus
     '&::after': {
@@ -111,8 +112,14 @@ var getTabStyles = function getTabStyles(mode) {
     padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
     position: 'relative',
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
     textOverflow: 'ellipsis',
+    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+    '@supports not (overflow-x: clip)': {
+      overflow: 'hidden'
+    },
+    '@supports (overflow-x: clip)': {
+      overflowX: 'clip'
+    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,

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

@@ -101,7 +101,7 @@ const TabList = props => {
       position: "relative",
       padding: "space.0",
       ref: ref
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: tabListStyles
     }, childrenArray.map((child, index) => getTabWithContext({

package/dist/es2019/components/tabs.js

@@ -10,7 +10,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.2"
+  packageVersion: "13.4.4"
 };
 const getTabPanelWithContext = ({
   tabPanel,
@@ -109,7 +109,7 @@ const Tabs = props => {
         flexBasis: '100%',
         flexGrow: 1
       }
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: tabsStyles
     }, jsx(TabListContext.Provider, {

package/dist/es2019/internal/styles.js

@@ -2,9 +2,10 @@ import { css } from '@emotion/react';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
 const tabLeftRightPadding = "var(--ds-space-100, 8px)";
 const tabTopBottomPadding = "var(--ds-space-050, 4px)";
-const underlineHeight = "var(--ds-width-100, 2px)";
+// TODO this should probably be `border.width.indicator`
+const underlineHeight = "var(--ds-border-width-outline, 2px)";
 const highContrastFocusStyles = {
-  outline: '1px solid'
+  outline: `${"var(--ds-border-width, 1px)"} solid`
 };
 
 // Required so the focus ring is visible in high contrast mode
@@ -18,7 +19,7 @@ const highContrastFocusRing = {
 };
 const tabFocusStyles = mode => ({
   boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
-  borderRadius: "var(--ds-radius-100, 3px)",
+  borderRadius: "var(--ds-border-radius, 3px)",
   outline: 'none'
 });
 const getTabPanelStyles = mode => ({
@@ -42,14 +43,14 @@ css({
   '& [role="tabpanel"]': getTabPanelStyles(mode),
   // The hidden attribute doesn't work on flex elements
   // Change display to be none
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > [hidden]': {
     display: 'none'
   }
 });
 const tabLineStyles = {
   content: '""',
-  borderRadius: underlineHeight,
+  borderRadius: "var(--ds-border-radius-050, 2px)",
   bottom: 0,
   margin: 0,
   position: 'absolute',
@@ -73,7 +74,7 @@ const tabPanelFocusStyles = mode => {
   const colors = getTabColors(mode);
   return {
     boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
-    borderRadius: "var(--ds-radius-100, 3px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
     outline: 'none',
     // Hide TabLine on focus
     '&::after': {
@@ -91,8 +92,14 @@ export const getTabStyles = mode => {
     padding: `${tabTopBottomPadding} ${tabLeftRightPadding}`,
     position: 'relative',
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
     textOverflow: 'ellipsis',
+    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+    '@supports not (overflow-x: clip)': {
+      overflow: 'hidden'
+    },
+    '@supports (overflow-x: clip)': {
+      overflowX: 'clip'
+    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,

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

@@ -102,7 +102,7 @@ var TabList = function TabList(props) {
       position: "relative",
       padding: "space.0",
       ref: ref
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: tabListStyles
     }, childrenArray.map(function (child, index) {

package/dist/esm/components/tabs.js

@@ -15,7 +15,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.2"
+  packageVersion: "13.4.4"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -124,7 +124,7 @@ var Tabs = function Tabs(props) {
         flexBasis: '100%',
         flexGrow: 1
       }
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: tabsStyles
     }, jsx(TabListContext.Provider, {

package/dist/esm/internal/styles.js

@@ -5,9 +5,10 @@ import { css } from '@emotion/react';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";
 var tabTopBottomPadding = "var(--ds-space-050, 4px)";
-var underlineHeight = "var(--ds-width-100, 2px)";
+// TODO this should probably be `border.width.indicator`
+var underlineHeight = "var(--ds-border-width-outline, 2px)";
 var highContrastFocusStyles = {
-  outline: '1px solid'
+  outline: "var(--ds-border-width, 1px)".concat(" solid")
 };
 
 // Required so the focus ring is visible in high contrast mode
@@ -22,7 +23,7 @@ var highContrastFocusRing = {
 var tabFocusStyles = function tabFocusStyles(mode) {
   return {
     boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
-    borderRadius: "var(--ds-radius-100, 3px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
     outline: 'none'
   };
 };
@@ -49,7 +50,7 @@ export var getTabsStyles = function getTabsStyles(mode) {
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
       '& > [hidden]': {
         display: 'none'
       }
@@ -58,7 +59,7 @@ export var getTabsStyles = function getTabsStyles(mode) {
 };
 var tabLineStyles = {
   content: '""',
-  borderRadius: underlineHeight,
+  borderRadius: "var(--ds-border-radius-050, 2px)",
   bottom: 0,
   margin: 0,
   position: 'absolute',
@@ -84,7 +85,7 @@ var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
   var colors = getTabColors(mode);
   return {
     boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-    borderRadius: "var(--ds-radius-100, 3px)",
+    borderRadius: "var(--ds-border-radius, 3px)",
     outline: 'none',
     // Hide TabLine on focus
     '&::after': {
@@ -102,8 +103,14 @@ export var getTabStyles = function getTabStyles(mode) {
     padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
     position: 'relative',
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
     textOverflow: 'ellipsis',
+    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+    '@supports not (overflow-x: clip)': {
+      overflow: 'hidden'
+    },
+    '@supports (overflow-x: clip)': {
+      overflowX: 'clip'
+    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.4.2",
+  "version": "13.4.4",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Tabs",
       "category": "Components"
@@ -33,9 +33,9 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-explorations": "^2.1.0",
+    "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -43,13 +43,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
-    "@atlaskit/docs": "*",
+    "@af/accessibility-testing": "*",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,109 @@
+## API Report File for "@atlaskit/tabs"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { jsx } from '@emotion/react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactNode } from 'react';
+import UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
+
+// @public (undocumented)
+type OnChangeCallback = (index: SelectedType, analyticsEvent: UIAnalyticsEvent) => void;
+
+// @public (undocumented)
+type SelectedType = number;
+
+// @public
+export function Tab({ children, testId }: TabProps): jsx.JSX.Element;
+
+// @public (undocumented)
+export type TabAttributesType = {
+    onClick: () => void;
+    id: string;
+    'aria-controls': string;
+    'aria-posinset': number;
+    'aria-selected': boolean;
+    'aria-setsize': number;
+    onMouseDown: (e: MouseEvent_2<HTMLElement>) => void;
+    onKeyDown: (e: KeyboardEvent_2<HTMLElement>) => void;
+    role: 'tab';
+    tabIndex: number;
+};
+
+// @public @deprecated (undocumented)
+export interface TabData {
+    [key: string]: any;
+    content?: ReactNode;
+    label?: string;
+    testId?: string;
+}
+
+// @public
+export const TabList: (props: TabListProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export type TabListAttributesType = {
+    selected: SelectedType;
+    tabsId: string;
+    onChange: (index: SelectedType) => void;
+};
+
+// @public (undocumented)
+export interface TabListProps {
+    children: ReactNode;
+}
+
+// @public
+export const TabPanel: ({ children, testId }: TabPanelProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export type TabPanelAttributesType = {
+    role: 'tabpanel';
+    id: string;
+    hidden?: boolean;
+    'aria-labelledby': string;
+    onMouseDown: (e: MouseEvent_2<HTMLElement>) => void;
+    tabIndex: number;
+};
+
+// @public (undocumented)
+export interface TabPanelProps {
+    children: ReactNode;
+    testId?: string;
+}
+
+// @public (undocumented)
+export interface TabProps {
+    children: ReactNode;
+    testId?: string;
+}
+
+// @public
+const Tabs: (props: TabsProps) => jsx.JSX.Element;
+export default Tabs;
+
+// @public (undocumented)
+export interface TabsProps extends WithAnalyticsEventsProps {
+    analyticsContext?: Record<string, any>;
+    children: ReactNode;
+    defaultSelected?: SelectedType;
+    id: string;
+    onChange?: OnChangeCallback;
+    selected?: SelectedType;
+    shouldUnmountTabPanelOnChange?: boolean;
+    testId?: string;
+}
+
+// @public (undocumented)
+export const useTab: () => TabAttributesType;
+
+// @public (undocumented)
+export const useTabPanel: () => TabPanelAttributesType;
+
+// (No @packageDocumentation comment for this package)
+
+```

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/tabs",
-	"version": "13.4.2",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/tabs",
-	"version": "13.4.2",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/tabs",
-	"version": "13.4.2",
-	"sideEffects": false
-}