@atlaskit/tabs 16.2.4 → 16.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/tab-list.js +4 -1
  3. package/dist/cjs/components/tabs.js +1 -1
  4. package/dist/cjs/internal/styles.js +71 -5
  5. package/dist/es2019/components/tab-list.js +5 -2
  6. package/dist/es2019/components/tabs.js +1 -1
  7. package/dist/es2019/internal/styles.js +72 -4
  8. package/dist/esm/components/tab-list.js +5 -2
  9. package/dist/esm/components/tabs.js +1 -1
  10. package/dist/esm/internal/styles.js +70 -4
  11. package/dist/types/internal/styles.d.ts +2 -0
  12. package/dist/types-ts4.5/internal/styles.d.ts +2 -0
  13. package/package.json +9 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/tabs
2
2
 
3
+ ## 16.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#119832](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119832)
8
+ [`0ed60e0ebfbeb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ed60e0ebfbeb) -
9
+ apply styling to tabs behind a ff
10
+
3
11
  ## 16.2.4
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/tab-list.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _react2 = require("@emotion/react");
9
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
10
  var _hooks = require("../hooks");
10
11
  var _context = require("../internal/context");
11
12
  var _styles = require("../internal/styles");
@@ -24,6 +25,8 @@ var baseStyles = (0, _react2.css)({
24
25
 
25
26
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
26
27
  var tabListStyles = (0, _styles.getTabListStyles)();
28
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
29
+ var tabListStylesOld = (0, _styles.getTabListStylesOld)();
27
30
 
28
31
  /**
29
32
  * __TabList__
@@ -112,7 +115,7 @@ var TabList = function TabList(_ref) {
112
115
  ref: ref
113
116
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
114
117
  ,
115
- css: [baseStyles, tabListStyles]
118
+ css: [baseStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? tabListStyles : tabListStylesOld]
116
119
  }, childrenArray.map(function (child, index) {
117
120
  return getTabWithContext({
118
121
  tab: child,
package/dist/cjs/components/tabs.js CHANGED
@@ -31,7 +31,7 @@ var tabsStyles = (0, _styles.getTabsStyles)();
31
31
  var analyticsAttributes = {
32
32
  componentName: 'tabs',
33
33
  packageName: "@atlaskit/tabs",
34
- packageVersion: "16.2.4"
34
+ packageVersion: "16.3.0"
35
35
  };
36
36
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
37
37
  var tabPanel = _ref.tabPanel,
package/dist/cjs/internal/styles.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.getTabsStyles = exports.getTabStyles = exports.getTabListStyles = void 0;
7
+ exports.getTabsStyles = exports.getTabStylesOld = exports.getTabStyles = exports.getTabListStylesOld = exports.getTabListStyles = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _colors = require("./colors");
@@ -43,7 +43,6 @@ var getTabsStyles = exports.getTabsStyles = function getTabsStyles() {
43
43
  };
44
44
  var tabLineStyles = {
45
45
  content: '""',
46
- borderRadius: "var(--ds-border-radius-050, 2px)",
47
46
  bottom: 0,
48
47
  margin: 0,
49
48
  position: 'absolute',
@@ -60,7 +59,7 @@ var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
60
59
  fontWeight: "var(--ds-font-weight-medium, 500)",
61
60
  marginInlineStart: tabInlineMargin,
62
61
  '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
63
- height: underlineHeight,
62
+ height: "var(--ds-border-width, 1px)",
64
63
  // This line is not a border so the selected line is visible in high contrast mode
65
64
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
66
65
  backgroundColor: _colors.tabLineColors.lineColor
@@ -84,7 +83,7 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
84
83
  color: colors.hoverLabelColor,
85
84
  '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
86
85
  insetInlineEnd: tabInlinePadding,
87
- borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.hoveredColor),
86
+ borderBottom: "var(--ds-border-width-indicator, 3px)".concat(" solid ", _colors.tabLineColors.hoveredColor),
88
87
  height: 0
89
88
  })
90
89
  },
@@ -93,13 +92,80 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
93
92
  color: colors.activeLabelColor,
94
93
  '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
95
94
  insetInlineEnd: tabInlinePadding,
96
- borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.activeColor),
95
+ borderBottom: "var(--ds-border-width-indicator, 3px)".concat(" solid ", _colors.tabLineColors.activeColor),
97
96
  height: 0
98
97
  })
99
98
  },
100
99
  '&[aria-selected="true"]': {
101
100
  color: colors.selectedColor,
102
101
  '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
102
+ insetInlineEnd: tabInlinePadding,
103
+ // This line is a border so it is visible in high contrast mode
104
+ borderBottom: "var(--ds-border-width-indicator, 3px)".concat(" solid ", _colors.tabLineColors.selectedColor),
105
+ height: 0
106
+ })
107
+ }
108
+ };
109
+ };
110
+ var tabLineStylesOld = {
111
+ content: '""',
112
+ borderRadius: "var(--ds-border-radius-050, 2px)",
113
+ bottom: 0,
114
+ margin: 0,
115
+ position: 'absolute',
116
+ width: 'inherit',
117
+ insetInlineStart: tabInlinePadding,
118
+ insetInlineEnd: 0
119
+ };
120
+ var getTabListStylesOld = exports.getTabListStylesOld = function getTabListStylesOld() {
121
+ return (
122
+ // eslint-disable-next-line @repo/internal/styles/no-exported-styles
123
+ (0, _react.css)({
124
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
125
+ '& [role="tab"]': getTabStylesOld(),
126
+ fontWeight: "var(--ds-font-weight-medium, 500)",
127
+ marginInlineStart: tabInlineMargin,
128
+ '&::before': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
129
+ height: underlineHeight,
130
+ // This line is not a border so the selected line is visible in high contrast mode
131
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
132
+ backgroundColor: _colors.tabLineColors.lineColor
133
+ })
134
+ })
135
+ );
136
+ };
137
+ var getTabStylesOld = exports.getTabStylesOld = function getTabStylesOld() {
138
+ var colors = _colors.tabColors;
139
+ return {
140
+ color: colors.labelColor,
141
+ cursor: 'pointer',
142
+ margin: 0,
143
+ padding: "".concat(tabBlockPadding, " ").concat(tabInlinePadding),
144
+ position: 'relative',
145
+ whiteSpace: 'nowrap',
146
+ overflow: 'hidden',
147
+ textOverflow: 'ellipsis',
148
+ '&:hover': {
149
+ // TODO: interaction states will be reviewed in DSP-1438
150
+ color: colors.hoverLabelColor,
151
+ '&::after': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
152
+ insetInlineEnd: tabInlinePadding,
153
+ borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.hoveredColor),
154
+ height: 0
155
+ })
156
+ },
157
+ '&:active': {
158
+ // TODO: interaction states will be reviewed in DSP-1438
159
+ color: colors.activeLabelColor,
160
+ '&::after': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
161
+ insetInlineEnd: tabInlinePadding,
162
+ borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.activeColor),
163
+ height: 0
164
+ })
165
+ },
166
+ '&[aria-selected="true"]': {
167
+ color: colors.selectedColor,
168
+ '&::after': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
103
169
  insetInlineEnd: tabInlinePadding,
104
170
  // This line is a border so it is visible in high contrast mode
105
171
  borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.selectedColor),
package/dist/es2019/components/tab-list.js CHANGED
@@ -6,9 +6,10 @@ import { Children, createRef, useCallback } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { useTabList } from '../hooks';
10
11
  import { TabContext } from '../internal/context';
11
- import { getTabListStyles } from '../internal/styles';
12
+ import { getTabListStyles, getTabListStylesOld } from '../internal/styles';
12
13
  const baseStyles = css({
13
14
  display: 'flex',
14
15
  padding: "var(--ds-space-0, 0px)",
@@ -17,6 +18,8 @@ const baseStyles = css({
17
18
 
18
19
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
19
20
  const tabListStyles = getTabListStyles();
21
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
22
+ const tabListStylesOld = getTabListStylesOld();
20
23
 
21
24
  /**
22
25
  * __TabList__
@@ -104,7 +107,7 @@ const TabList = ({
104
107
  ref: ref
105
108
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
106
109
  ,
107
- css: [baseStyles, tabListStyles]
110
+ css: [baseStyles, fg('platform-component-visual-refresh') ? tabListStyles : tabListStylesOld]
108
111
  }, childrenArray.map((child, index) => getTabWithContext({
109
112
  tab: child,
110
113
  index,
package/dist/es2019/components/tabs.js CHANGED
@@ -23,7 +23,7 @@ const tabsStyles = getTabsStyles();
23
23
  const analyticsAttributes = {
24
24
  componentName: 'tabs',
25
25
  packageName: "@atlaskit/tabs",
26
- packageVersion: "16.2.4"
26
+ packageVersion: "16.3.0"
27
27
  };
28
28
  const getTabPanelWithContext = ({
29
29
  tabPanel,
package/dist/es2019/internal/styles.js CHANGED
@@ -29,7 +29,6 @@ css({
29
29
  });
30
30
  const tabLineStyles = {
31
31
  content: '""',
32
- borderRadius: "var(--ds-border-radius-050, 2px)",
33
32
  bottom: 0,
34
33
  margin: 0,
35
34
  position: 'absolute',
@@ -47,7 +46,7 @@ css({
47
46
  '&::before': {
48
47
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
49
48
  ...tabLineStyles,
50
- height: underlineHeight,
49
+ height: "var(--ds-border-width, 1px)",
51
50
  // This line is not a border so the selected line is visible in high contrast mode
52
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
53
52
  backgroundColor: tabLineColors.lineColor
@@ -70,7 +69,7 @@ export const getTabStyles = () => {
70
69
  '&::after': {
71
70
  ...tabLineStyles,
72
71
  insetInlineEnd: tabInlinePadding,
73
- borderBottom: `${underlineHeight} solid ${tabLineColors.hoveredColor}`,
72
+ borderBottom: `${"var(--ds-border-width-indicator, 3px)"} solid ${tabLineColors.hoveredColor}`,
74
73
  height: 0
75
74
  }
76
75
  },
@@ -80,7 +79,7 @@ export const getTabStyles = () => {
80
79
  '&::after': {
81
80
  ...tabLineStyles,
82
81
  insetInlineEnd: tabInlinePadding,
83
- borderBottom: `${underlineHeight} solid ${tabLineColors.activeColor}`,
82
+ borderBottom: `${"var(--ds-border-width-indicator, 3px)"} solid ${tabLineColors.activeColor}`,
84
83
  height: 0
85
84
  }
86
85
  },
@@ -90,6 +89,75 @@ export const getTabStyles = () => {
90
89
  ...tabLineStyles,
91
90
  insetInlineEnd: tabInlinePadding,
92
91
  // This line is a border so it is visible in high contrast mode
92
+ borderBottom: `${"var(--ds-border-width-indicator, 3px)"} solid ${tabLineColors.selectedColor}`,
93
+ height: 0
94
+ }
95
+ }
96
+ };
97
+ };
98
+ const tabLineStylesOld = {
99
+ content: '""',
100
+ borderRadius: "var(--ds-border-radius-050, 2px)",
101
+ bottom: 0,
102
+ margin: 0,
103
+ position: 'absolute',
104
+ width: 'inherit',
105
+ insetInlineStart: tabInlinePadding,
106
+ insetInlineEnd: 0
107
+ };
108
+ export const getTabListStylesOld = () =>
109
+ // eslint-disable-next-line @repo/internal/styles/no-exported-styles
110
+ css({
111
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
112
+ '& [role="tab"]': getTabStylesOld(),
113
+ fontWeight: "var(--ds-font-weight-medium, 500)",
114
+ marginInlineStart: tabInlineMargin,
115
+ '&::before': {
116
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
117
+ ...tabLineStylesOld,
118
+ height: underlineHeight,
119
+ // This line is not a border so the selected line is visible in high contrast mode
120
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
121
+ backgroundColor: tabLineColors.lineColor
122
+ }
123
+ });
124
+ export const getTabStylesOld = () => {
125
+ const colors = tabColors;
126
+ return {
127
+ color: colors.labelColor,
128
+ cursor: 'pointer',
129
+ margin: 0,
130
+ padding: `${tabBlockPadding} ${tabInlinePadding}`,
131
+ position: 'relative',
132
+ whiteSpace: 'nowrap',
133
+ overflow: 'hidden',
134
+ textOverflow: 'ellipsis',
135
+ '&:hover': {
136
+ // TODO: interaction states will be reviewed in DSP-1438
137
+ color: colors.hoverLabelColor,
138
+ '&::after': {
139
+ ...tabLineStylesOld,
140
+ insetInlineEnd: tabInlinePadding,
141
+ borderBottom: `${underlineHeight} solid ${tabLineColors.hoveredColor}`,
142
+ height: 0
143
+ }
144
+ },
145
+ '&:active': {
146
+ // TODO: interaction states will be reviewed in DSP-1438
147
+ color: colors.activeLabelColor,
148
+ '&::after': {
149
+ ...tabLineStylesOld,
150
+ insetInlineEnd: tabInlinePadding,
151
+ borderBottom: `${underlineHeight} solid ${tabLineColors.activeColor}`,
152
+ height: 0
153
+ }
154
+ },
155
+ '&[aria-selected="true"]': {
156
+ color: colors.selectedColor,
157
+ '&::after': {
158
+ ...tabLineStylesOld,
159
+ insetInlineEnd: tabInlinePadding,
160
+ // This line is a border so it is visible in high contrast mode
93
161
  borderBottom: `${underlineHeight} solid ${tabLineColors.selectedColor}`,
94
162
  height: 0
95
163
  }
package/dist/esm/components/tab-list.js CHANGED
@@ -6,9 +6,10 @@ import { Children, createRef, useCallback } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { useTabList } from '../hooks';
10
11
  import { TabContext } from '../internal/context';
11
- import { getTabListStyles } from '../internal/styles';
12
+ import { getTabListStyles, getTabListStylesOld } from '../internal/styles';
12
13
  var baseStyles = css({
13
14
  display: 'flex',
14
15
  padding: "var(--ds-space-0, 0px)",
@@ -17,6 +18,8 @@ var baseStyles = css({
17
18
 
18
19
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
19
20
  var tabListStyles = getTabListStyles();
21
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
22
+ var tabListStylesOld = getTabListStylesOld();
20
23
 
21
24
  /**
22
25
  * __TabList__
@@ -105,7 +108,7 @@ var TabList = function TabList(_ref) {
105
108
  ref: ref
106
109
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
107
110
  ,
108
- css: [baseStyles, tabListStyles]
111
+ css: [baseStyles, fg('platform-component-visual-refresh') ? tabListStyles : tabListStylesOld]
109
112
  }, childrenArray.map(function (child, index) {
110
113
  return getTabWithContext({
111
114
  tab: child,
package/dist/esm/components/tabs.js CHANGED
@@ -28,7 +28,7 @@ var tabsStyles = getTabsStyles();
28
28
  var analyticsAttributes = {
29
29
  componentName: 'tabs',
30
30
  packageName: "@atlaskit/tabs",
31
- packageVersion: "16.2.4"
31
+ packageVersion: "16.3.0"
32
32
  };
33
33
  var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
34
34
  var tabPanel = _ref.tabPanel,
package/dist/esm/internal/styles.js CHANGED
@@ -37,7 +37,6 @@ export var getTabsStyles = function getTabsStyles() {
37
37
  };
38
38
  var tabLineStyles = {
39
39
  content: '""',
40
- borderRadius: "var(--ds-border-radius-050, 2px)",
41
40
  bottom: 0,
42
41
  margin: 0,
43
42
  position: 'absolute',
@@ -54,7 +53,7 @@ export var getTabListStyles = function getTabListStyles() {
54
53
  fontWeight: "var(--ds-font-weight-medium, 500)",
55
54
  marginInlineStart: tabInlineMargin,
56
55
  '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
57
- height: underlineHeight,
56
+ height: "var(--ds-border-width, 1px)",
58
57
  // This line is not a border so the selected line is visible in high contrast mode
59
58
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
60
59
  backgroundColor: tabLineColors.lineColor
@@ -78,7 +77,7 @@ export var getTabStyles = function getTabStyles() {
78
77
  color: colors.hoverLabelColor,
79
78
  '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
80
79
  insetInlineEnd: tabInlinePadding,
81
- borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.hoveredColor),
80
+ borderBottom: "var(--ds-border-width-indicator, 3px)".concat(" solid ", tabLineColors.hoveredColor),
82
81
  height: 0
83
82
  })
84
83
  },
@@ -87,13 +86,80 @@ export var getTabStyles = function getTabStyles() {
87
86
  color: colors.activeLabelColor,
88
87
  '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
89
88
  insetInlineEnd: tabInlinePadding,
90
- borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.activeColor),
89
+ borderBottom: "var(--ds-border-width-indicator, 3px)".concat(" solid ", tabLineColors.activeColor),
91
90
  height: 0
92
91
  })
93
92
  },
94
93
  '&[aria-selected="true"]': {
95
94
  color: colors.selectedColor,
96
95
  '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
96
+ insetInlineEnd: tabInlinePadding,
97
+ // This line is a border so it is visible in high contrast mode
98
+ borderBottom: "var(--ds-border-width-indicator, 3px)".concat(" solid ", tabLineColors.selectedColor),
99
+ height: 0
100
+ })
101
+ }
102
+ };
103
+ };
104
+ var tabLineStylesOld = {
105
+ content: '""',
106
+ borderRadius: "var(--ds-border-radius-050, 2px)",
107
+ bottom: 0,
108
+ margin: 0,
109
+ position: 'absolute',
110
+ width: 'inherit',
111
+ insetInlineStart: tabInlinePadding,
112
+ insetInlineEnd: 0
113
+ };
114
+ export var getTabListStylesOld = function getTabListStylesOld() {
115
+ return (
116
+ // eslint-disable-next-line @repo/internal/styles/no-exported-styles
117
+ css({
118
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
119
+ '& [role="tab"]': getTabStylesOld(),
120
+ fontWeight: "var(--ds-font-weight-medium, 500)",
121
+ marginInlineStart: tabInlineMargin,
122
+ '&::before': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
123
+ height: underlineHeight,
124
+ // This line is not a border so the selected line is visible in high contrast mode
125
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
126
+ backgroundColor: tabLineColors.lineColor
127
+ })
128
+ })
129
+ );
130
+ };
131
+ export var getTabStylesOld = function getTabStylesOld() {
132
+ var colors = tabColors;
133
+ return {
134
+ color: colors.labelColor,
135
+ cursor: 'pointer',
136
+ margin: 0,
137
+ padding: "".concat(tabBlockPadding, " ").concat(tabInlinePadding),
138
+ position: 'relative',
139
+ whiteSpace: 'nowrap',
140
+ overflow: 'hidden',
141
+ textOverflow: 'ellipsis',
142
+ '&:hover': {
143
+ // TODO: interaction states will be reviewed in DSP-1438
144
+ color: colors.hoverLabelColor,
145
+ '&::after': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
146
+ insetInlineEnd: tabInlinePadding,
147
+ borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.hoveredColor),
148
+ height: 0
149
+ })
150
+ },
151
+ '&:active': {
152
+ // TODO: interaction states will be reviewed in DSP-1438
153
+ color: colors.activeLabelColor,
154
+ '&::after': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
155
+ insetInlineEnd: tabInlinePadding,
156
+ borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.activeColor),
157
+ height: 0
158
+ })
159
+ },
160
+ '&[aria-selected="true"]': {
161
+ color: colors.selectedColor,
162
+ '&::after': _objectSpread(_objectSpread({}, tabLineStylesOld), {}, {
97
163
  insetInlineEnd: tabInlinePadding,
98
164
  // This line is a border so it is visible in high contrast mode
99
165
  borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.selectedColor),
package/dist/types/internal/styles.d.ts CHANGED
@@ -2,3 +2,5 @@ import { type CSSObject, type SerializedStyles } from '@emotion/react';
2
2
  export declare const getTabsStyles: () => SerializedStyles;
3
3
  export declare const getTabListStyles: () => SerializedStyles;
4
4
  export declare const getTabStyles: () => CSSObject;
5
+ export declare const getTabListStylesOld: () => SerializedStyles;
6
+ export declare const getTabStylesOld: () => CSSObject;
package/dist/types-ts4.5/internal/styles.d.ts CHANGED
@@ -2,3 +2,5 @@ import { type CSSObject, type SerializedStyles } from '@emotion/react';
2
2
  export declare const getTabsStyles: () => SerializedStyles;
3
3
  export declare const getTabListStyles: () => SerializedStyles;
4
4
  export declare const getTabStyles: () => CSSObject;
5
+ export declare const getTabListStylesOld: () => SerializedStyles;
6
+ export declare const getTabStylesOld: () => CSSObject;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tabs",
3
- "version": "16.2.4",
3
+ "version": "16.3.0",
4
4
  "description": "Tabs are used to organize content by grouping similar information on the same page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -38,9 +38,10 @@
38
38
  "@atlaskit/analytics-next": "^9.3.0",
39
39
  "@atlaskit/codemod-utils": "^4.2.0",
40
40
  "@atlaskit/focus-ring": "^1.5.0",
41
+ "@atlaskit/platform-feature-flags": "^0.3.0",
41
42
  "@atlaskit/primitives": "^11.0.0",
42
43
  "@atlaskit/theme": "^12.11.0",
43
- "@atlaskit/tokens": "^1.53.0",
44
+ "@atlaskit/tokens": "^1.54.0",
44
45
  "@babel/runtime": "^7.0.0",
45
46
  "@emotion/react": "^11.7.1"
46
47
  },
@@ -50,6 +51,7 @@
50
51
  "devDependencies": {
51
52
  "@af/accessibility-testing": "*",
52
53
  "@af/integration-testing": "*",
54
+ "@af/visual-regression": "*",
53
55
  "@atlaskit/ds-lib": "^2.3.0",
54
56
  "@atlaskit/ssr": "*",
55
57
  "@atlaskit/tooltip": "^18.5.0",
@@ -90,5 +92,10 @@
90
92
  "./types": "./src/types.tsx",
91
93
  "./hooks": "./src/hooks.tsx"
92
94
  },
95
+ "platform-feature-flags": {
96
+ "platform-component-visual-refresh": {
97
+ "type": "boolean"
98
+ }
99
+ },
93
100
  "homepage": "https://atlassian.design/components/tabs/"
94
101
  }