@atlaskit/tabs 14.0.5 → 15.0.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.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/components/tab-panel.js +7 -4
- package/dist/cjs/components/tab.js +11 -9
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/internal/colors.js +2 -3
- package/dist/cjs/internal/styles.js +15 -53
- package/dist/es2019/components/tab-panel.js +6 -4
- package/dist/es2019/components/tab.js +10 -9
- package/dist/es2019/components/tabs.js +1 -1
- package/dist/es2019/internal/colors.js +1 -2
- package/dist/es2019/internal/styles.js +12 -49
- package/dist/esm/components/tab-panel.js +6 -4
- package/dist/esm/components/tab.js +10 -9
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/internal/colors.js +1 -2
- package/dist/esm/internal/styles.js +16 -54
- package/dist/types/internal/colors.d.ts +0 -1
- package/dist/types-ts4.5/internal/colors.d.ts +0 -1
- package/package.json +7 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/tabs
|
|
2
2
|
|
|
3
|
+
## 15.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [#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.
|
|
8
|
+
- Adjusted line height and overall Tab label height to be consistent with the Atlassian Design System.
|
|
9
|
+
|
|
10
|
+
## 14.1.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- [#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
|
|
15
|
+
|
|
3
16
|
## 14.0.5
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.default = void 0;
|
|
7
8
|
var _react = require("react");
|
|
8
9
|
var _react2 = require("@emotion/react");
|
|
9
|
-
var
|
|
10
|
+
var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
|
|
10
11
|
var _hooks = require("../hooks");
|
|
11
12
|
/** @jsx jsx */
|
|
12
13
|
|
|
@@ -30,14 +31,16 @@ var TabPanel = function TabPanel(_ref) {
|
|
|
30
31
|
ariaLabelledBy = _useTabPanel['aria-labelledby'],
|
|
31
32
|
onMouseDown = _useTabPanel.onMouseDown,
|
|
32
33
|
tabIndex = _useTabPanel.tabIndex;
|
|
33
|
-
return (0, _react2.jsx)(
|
|
34
|
-
|
|
34
|
+
return (0, _react2.jsx)(_focusRing.default, {
|
|
35
|
+
isInset: true
|
|
36
|
+
}, (0, _react2.jsx)("div", {
|
|
37
|
+
"data-testid": testId,
|
|
35
38
|
role: role,
|
|
36
39
|
id: id,
|
|
37
40
|
hidden: hidden,
|
|
38
41
|
"aria-labelledby": ariaLabelledBy,
|
|
39
42
|
onMouseDown: onMouseDown,
|
|
40
43
|
tabIndex: tabIndex
|
|
41
|
-
}, (0, _react2.jsx)(_react.Fragment, null, children));
|
|
44
|
+
}, (0, _react2.jsx)(_react.Fragment, null, children)));
|
|
42
45
|
};
|
|
43
46
|
var _default = exports.default = TabPanel;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.default = Tab;
|
|
7
8
|
var _react = require("@emotion/react");
|
|
8
|
-
var
|
|
9
|
+
var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
|
|
9
10
|
var _primitives = require("@atlaskit/primitives");
|
|
10
11
|
var _hooks = require("../hooks");
|
|
11
12
|
/** @jsx jsx */
|
|
@@ -33,8 +34,10 @@ function Tab(_ref) {
|
|
|
33
34
|
onKeyDown = _useTab.onKeyDown,
|
|
34
35
|
role = _useTab.role,
|
|
35
36
|
tabIndex = _useTab.tabIndex;
|
|
36
|
-
return (0, _react.jsx)(
|
|
37
|
-
|
|
37
|
+
return (0, _react.jsx)(_focusRing.default, {
|
|
38
|
+
isInset: true
|
|
39
|
+
}, (0, _react.jsx)("div", {
|
|
40
|
+
"data-testid": testId,
|
|
38
41
|
onClick: onClick,
|
|
39
42
|
id: id,
|
|
40
43
|
"aria-controls": ariaControls,
|
|
@@ -45,10 +48,9 @@ function Tab(_ref) {
|
|
|
45
48
|
onKeyDown: onKeyDown,
|
|
46
49
|
role: role,
|
|
47
50
|
tabIndex: tabIndex
|
|
48
|
-
}, (0, _react.jsx)(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}, children));
|
|
51
|
+
}, (0, _react.jsx)(_primitives.Text, {
|
|
52
|
+
weight: "medium",
|
|
53
|
+
color: "inherit",
|
|
54
|
+
maxLines: 1
|
|
55
|
+
}, children)));
|
|
54
56
|
}
|
|
@@ -30,7 +30,7 @@ var tabsStyles = (0, _styles.getTabsStyles)();
|
|
|
30
30
|
var analyticsAttributes = {
|
|
31
31
|
componentName: 'tabs',
|
|
32
32
|
packageName: "@atlaskit/tabs",
|
|
33
|
-
packageVersion: "
|
|
33
|
+
packageVersion: "15.0.0"
|
|
34
34
|
};
|
|
35
35
|
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
|
|
36
36
|
var tabPanel = _ref.tabPanel,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.tabLineColors = exports.tabColors = void 0;
|
|
7
7
|
var _colors = require("@atlaskit/theme/colors");
|
|
8
8
|
var tabColors = exports.tabColors = {
|
|
9
9
|
labelColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
|
|
@@ -17,5 +17,4 @@ var tabLineColors = exports.tabLineColors = {
|
|
|
17
17
|
hoveredColor: "var(--ds-border, transparent)",
|
|
18
18
|
activeColor: "var(--ds-border, transparent)",
|
|
19
19
|
selectedColor: "var(--ds-border-selected, ".concat(_colors.B400, ")")
|
|
20
|
-
};
|
|
21
|
-
var tabPanelFocusColor = exports.tabPanelFocusColor = "var(--ds-border-focused, ".concat(_colors.B100, ")");
|
|
20
|
+
};
|
|
@@ -10,45 +10,21 @@ var _react = require("@emotion/react");
|
|
|
10
10
|
var _colors = require("./colors");
|
|
11
11
|
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; }
|
|
12
12
|
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; }
|
|
13
|
-
var
|
|
14
|
-
var
|
|
13
|
+
var tabInlinePadding = "var(--ds-space-100, 8px)";
|
|
14
|
+
var tabBlockPadding = "var(--ds-space-075, 6px)";
|
|
15
|
+
var tabInlineMargin = "var(--ds-space-negative-100, -8px)";
|
|
15
16
|
// TODO this should probably be `border.width.indicator`
|
|
16
17
|
var underlineHeight = "var(--ds-border-width-outline, 2px)";
|
|
17
|
-
var highContrastFocusStyles = {
|
|
18
|
-
outline: "var(--ds-border-width, 1px)".concat(" solid")
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
// Required so the focus ring is visible in high contrast mode
|
|
22
|
-
var highContrastFocusRing = {
|
|
23
|
-
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
24
|
-
'&:focus-visible': highContrastFocusStyles,
|
|
25
|
-
'@supports not selector(*:focus-visible)': {
|
|
26
|
-
'&:focus': highContrastFocusStyles
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
var tabFocusStyles = function tabFocusStyles() {
|
|
31
|
-
return {
|
|
32
|
-
boxShadow: "0 0 0 2px ".concat(_colors.tabPanelFocusColor, " inset"),
|
|
33
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
34
|
-
outline: 'none'
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
18
|
var getTabPanelStyles = function getTabPanelStyles() {
|
|
38
|
-
return
|
|
19
|
+
return {
|
|
39
20
|
flexGrow: 1,
|
|
40
21
|
/*
|
|
41
22
|
NOTE min-height set to 0% because of Firefox bug
|
|
42
23
|
FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
|
|
43
24
|
*/
|
|
44
25
|
minHeight: '0%',
|
|
45
|
-
display: 'flex'
|
|
46
|
-
|
|
47
|
-
'&:focus-visible': tabFocusStyles(),
|
|
48
|
-
'@supports not selector(*:focus-visible)': {
|
|
49
|
-
'&:focus': tabFocusStyles()
|
|
50
|
-
}
|
|
51
|
-
}, highContrastFocusRing);
|
|
26
|
+
display: 'flex'
|
|
27
|
+
};
|
|
52
28
|
};
|
|
53
29
|
var getTabsStyles = exports.getTabsStyles = function getTabsStyles() {
|
|
54
30
|
return (
|
|
@@ -71,8 +47,8 @@ var tabLineStyles = {
|
|
|
71
47
|
margin: 0,
|
|
72
48
|
position: 'absolute',
|
|
73
49
|
width: 'inherit',
|
|
74
|
-
|
|
75
|
-
|
|
50
|
+
insetInlineStart: tabInlinePadding,
|
|
51
|
+
insetInlineEnd: 0
|
|
76
52
|
};
|
|
77
53
|
var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
|
|
78
54
|
return (
|
|
@@ -80,6 +56,7 @@ var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
|
|
|
80
56
|
(0, _react.css)({
|
|
81
57
|
'& [role="tab"]': getTabStyles(),
|
|
82
58
|
fontWeight: "var(--ds-font-weight-medium, 500)",
|
|
59
|
+
marginInlineStart: tabInlineMargin,
|
|
83
60
|
'&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
84
61
|
height: underlineHeight,
|
|
85
62
|
// This line is not a border so the selected line is visible in high contrast mode
|
|
@@ -88,26 +65,13 @@ var getTabListStyles = exports.getTabListStyles = function getTabListStyles() {
|
|
|
88
65
|
})
|
|
89
66
|
);
|
|
90
67
|
};
|
|
91
|
-
var tabPanelFocusStyles = function tabPanelFocusStyles() {
|
|
92
|
-
var colors = _colors.tabColors;
|
|
93
|
-
return {
|
|
94
|
-
boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
|
|
95
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
96
|
-
outline: 'none',
|
|
97
|
-
// Hide TabLine on focus
|
|
98
|
-
'&::after': {
|
|
99
|
-
opacity: 0
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
};
|
|
103
68
|
var getTabStyles = exports.getTabStyles = function getTabStyles() {
|
|
104
69
|
var colors = _colors.tabColors;
|
|
105
|
-
return
|
|
70
|
+
return {
|
|
106
71
|
color: colors.labelColor,
|
|
107
72
|
cursor: 'pointer',
|
|
108
|
-
lineHeight: 1.8,
|
|
109
73
|
margin: 0,
|
|
110
|
-
padding: "".concat(
|
|
74
|
+
padding: "".concat(tabBlockPadding, " ").concat(tabInlinePadding),
|
|
111
75
|
position: 'relative',
|
|
112
76
|
whiteSpace: 'nowrap',
|
|
113
77
|
overflow: 'hidden',
|
|
@@ -116,6 +80,7 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
|
|
|
116
80
|
// TODO: interaction states will be reviewed in DSP-1438
|
|
117
81
|
color: colors.hoverLabelColor,
|
|
118
82
|
'&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
83
|
+
insetInlineEnd: tabInlinePadding,
|
|
119
84
|
borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.hoveredColor),
|
|
120
85
|
height: 0
|
|
121
86
|
})
|
|
@@ -124,22 +89,19 @@ var getTabStyles = exports.getTabStyles = function getTabStyles() {
|
|
|
124
89
|
// TODO: interaction states will be reviewed in DSP-1438
|
|
125
90
|
color: colors.activeLabelColor,
|
|
126
91
|
'&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
92
|
+
insetInlineEnd: tabInlinePadding,
|
|
127
93
|
borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.activeColor),
|
|
128
94
|
height: 0
|
|
129
95
|
})
|
|
130
96
|
},
|
|
131
|
-
'&:focus-visible': tabPanelFocusStyles(),
|
|
132
|
-
'@supports not selector(*:focus-visible)': {
|
|
133
|
-
'&:focus': tabPanelFocusStyles()
|
|
134
|
-
}
|
|
135
|
-
}, highContrastFocusRing), {}, {
|
|
136
97
|
'&[aria-selected="true"]': {
|
|
137
98
|
color: colors.selectedColor,
|
|
138
99
|
'&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
100
|
+
insetInlineEnd: tabInlinePadding,
|
|
139
101
|
// This line is a border so it is visible in high contrast mode
|
|
140
102
|
borderBottom: "".concat(underlineHeight, " solid ").concat(_colors.tabLineColors.selectedColor),
|
|
141
103
|
height: 0
|
|
142
104
|
})
|
|
143
105
|
}
|
|
144
|
-
}
|
|
106
|
+
};
|
|
145
107
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
|
-
import
|
|
4
|
+
import FocusRing from '@atlaskit/focus-ring';
|
|
5
5
|
import { useTabPanel } from '../hooks';
|
|
6
6
|
// Note this is not being memoized as children is an unstable reference
|
|
7
7
|
/**
|
|
@@ -25,14 +25,16 @@ const TabPanel = ({
|
|
|
25
25
|
onMouseDown,
|
|
26
26
|
tabIndex
|
|
27
27
|
} = useTabPanel();
|
|
28
|
-
return jsx(
|
|
29
|
-
|
|
28
|
+
return jsx(FocusRing, {
|
|
29
|
+
isInset: true
|
|
30
|
+
}, jsx("div", {
|
|
31
|
+
"data-testid": testId,
|
|
30
32
|
role: role,
|
|
31
33
|
id: id,
|
|
32
34
|
hidden: hidden,
|
|
33
35
|
"aria-labelledby": ariaLabelledBy,
|
|
34
36
|
onMouseDown: onMouseDown,
|
|
35
37
|
tabIndex: tabIndex
|
|
36
|
-
}, jsx(Fragment, null, children));
|
|
38
|
+
}, jsx(Fragment, null, children)));
|
|
37
39
|
};
|
|
38
40
|
export default TabPanel;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
3
|
+
import FocusRing from '@atlaskit/focus-ring';
|
|
4
|
+
import { Text } from '@atlaskit/primitives';
|
|
5
5
|
import { useTab } from '../hooks';
|
|
6
6
|
/**
|
|
7
7
|
* __Tab__
|
|
@@ -28,8 +28,10 @@ export default function Tab({
|
|
|
28
28
|
role,
|
|
29
29
|
tabIndex
|
|
30
30
|
} = useTab();
|
|
31
|
-
return jsx(
|
|
32
|
-
|
|
31
|
+
return jsx(FocusRing, {
|
|
32
|
+
isInset: true
|
|
33
|
+
}, jsx("div", {
|
|
34
|
+
"data-testid": testId,
|
|
33
35
|
onClick: onClick,
|
|
34
36
|
id: id,
|
|
35
37
|
"aria-controls": ariaControls,
|
|
@@ -41,9 +43,8 @@ export default function Tab({
|
|
|
41
43
|
role: role,
|
|
42
44
|
tabIndex: tabIndex
|
|
43
45
|
}, jsx(Text, {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}, children));
|
|
46
|
+
weight: "medium",
|
|
47
|
+
color: "inherit",
|
|
48
|
+
maxLines: 1
|
|
49
|
+
}, children)));
|
|
49
50
|
}
|
|
@@ -11,5 +11,4 @@ export const tabLineColors = {
|
|
|
11
11
|
hoveredColor: "var(--ds-border, transparent)",
|
|
12
12
|
activeColor: "var(--ds-border, transparent)",
|
|
13
13
|
selectedColor: `var(--ds-border-selected, ${B400})`
|
|
14
|
-
};
|
|
15
|
-
export const tabPanelFocusColor = `var(--ds-border-focused, ${B100})`;
|
|
14
|
+
};
|
|
@@ -1,27 +1,10 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
|
-
import { tabColors, tabLineColors
|
|
3
|
-
const
|
|
4
|
-
const
|
|
2
|
+
import { tabColors, tabLineColors } from './colors';
|
|
3
|
+
const tabInlinePadding = "var(--ds-space-100, 8px)";
|
|
4
|
+
const tabBlockPadding = "var(--ds-space-075, 6px)";
|
|
5
|
+
const tabInlineMargin = "var(--ds-space-negative-100, -8px)";
|
|
5
6
|
// TODO this should probably be `border.width.indicator`
|
|
6
7
|
const underlineHeight = "var(--ds-border-width-outline, 2px)";
|
|
7
|
-
const highContrastFocusStyles = {
|
|
8
|
-
outline: `${"var(--ds-border-width, 1px)"} solid`
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
// Required so the focus ring is visible in high contrast mode
|
|
12
|
-
const highContrastFocusRing = {
|
|
13
|
-
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
14
|
-
'&:focus-visible': highContrastFocusStyles,
|
|
15
|
-
'@supports not selector(*:focus-visible)': {
|
|
16
|
-
'&:focus': highContrastFocusStyles
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
const tabFocusStyles = () => ({
|
|
21
|
-
boxShadow: `0 0 0 2px ${tabPanelFocusColor} inset`,
|
|
22
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
23
|
-
outline: 'none'
|
|
24
|
-
});
|
|
25
8
|
const getTabPanelStyles = () => ({
|
|
26
9
|
flexGrow: 1,
|
|
27
10
|
/*
|
|
@@ -29,13 +12,7 @@ const getTabPanelStyles = () => ({
|
|
|
29
12
|
FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
|
|
30
13
|
*/
|
|
31
14
|
minHeight: '0%',
|
|
32
|
-
display: 'flex'
|
|
33
|
-
padding: `0 ${tabLeftRightPadding}`,
|
|
34
|
-
'&:focus-visible': tabFocusStyles(),
|
|
35
|
-
'@supports not selector(*:focus-visible)': {
|
|
36
|
-
'&:focus': tabFocusStyles()
|
|
37
|
-
},
|
|
38
|
-
...highContrastFocusRing
|
|
15
|
+
display: 'flex'
|
|
39
16
|
});
|
|
40
17
|
export const getTabsStyles = () =>
|
|
41
18
|
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
|
|
@@ -55,14 +32,15 @@ const tabLineStyles = {
|
|
|
55
32
|
margin: 0,
|
|
56
33
|
position: 'absolute',
|
|
57
34
|
width: 'inherit',
|
|
58
|
-
|
|
59
|
-
|
|
35
|
+
insetInlineStart: tabInlinePadding,
|
|
36
|
+
insetInlineEnd: 0
|
|
60
37
|
};
|
|
61
38
|
export const getTabListStyles = () =>
|
|
62
39
|
// eslint-disable-next-line @repo/internal/styles/no-exported-styles
|
|
63
40
|
css({
|
|
64
41
|
'& [role="tab"]': getTabStyles(),
|
|
65
42
|
fontWeight: "var(--ds-font-weight-medium, 500)",
|
|
43
|
+
marginInlineStart: tabInlineMargin,
|
|
66
44
|
'&::before': {
|
|
67
45
|
...tabLineStyles,
|
|
68
46
|
height: underlineHeight,
|
|
@@ -70,26 +48,13 @@ css({
|
|
|
70
48
|
backgroundColor: tabLineColors.lineColor
|
|
71
49
|
}
|
|
72
50
|
});
|
|
73
|
-
const tabPanelFocusStyles = () => {
|
|
74
|
-
const colors = tabColors;
|
|
75
|
-
return {
|
|
76
|
-
boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
|
|
77
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
78
|
-
outline: 'none',
|
|
79
|
-
// Hide TabLine on focus
|
|
80
|
-
'&::after': {
|
|
81
|
-
opacity: 0
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
51
|
export const getTabStyles = () => {
|
|
86
52
|
const colors = tabColors;
|
|
87
53
|
return {
|
|
88
54
|
color: colors.labelColor,
|
|
89
55
|
cursor: 'pointer',
|
|
90
|
-
lineHeight: 1.8,
|
|
91
56
|
margin: 0,
|
|
92
|
-
padding: `${
|
|
57
|
+
padding: `${tabBlockPadding} ${tabInlinePadding}`,
|
|
93
58
|
position: 'relative',
|
|
94
59
|
whiteSpace: 'nowrap',
|
|
95
60
|
overflow: 'hidden',
|
|
@@ -99,6 +64,7 @@ export const getTabStyles = () => {
|
|
|
99
64
|
color: colors.hoverLabelColor,
|
|
100
65
|
'&::after': {
|
|
101
66
|
...tabLineStyles,
|
|
67
|
+
insetInlineEnd: tabInlinePadding,
|
|
102
68
|
borderBottom: `${underlineHeight} solid ${tabLineColors.hoveredColor}`,
|
|
103
69
|
height: 0
|
|
104
70
|
}
|
|
@@ -108,19 +74,16 @@ export const getTabStyles = () => {
|
|
|
108
74
|
color: colors.activeLabelColor,
|
|
109
75
|
'&::after': {
|
|
110
76
|
...tabLineStyles,
|
|
77
|
+
insetInlineEnd: tabInlinePadding,
|
|
111
78
|
borderBottom: `${underlineHeight} solid ${tabLineColors.activeColor}`,
|
|
112
79
|
height: 0
|
|
113
80
|
}
|
|
114
81
|
},
|
|
115
|
-
'&:focus-visible': tabPanelFocusStyles(),
|
|
116
|
-
'@supports not selector(*:focus-visible)': {
|
|
117
|
-
'&:focus': tabPanelFocusStyles()
|
|
118
|
-
},
|
|
119
|
-
...highContrastFocusRing,
|
|
120
82
|
'&[aria-selected="true"]': {
|
|
121
83
|
color: colors.selectedColor,
|
|
122
84
|
'&::after': {
|
|
123
85
|
...tabLineStyles,
|
|
86
|
+
insetInlineEnd: tabInlinePadding,
|
|
124
87
|
// This line is a border so it is visible in high contrast mode
|
|
125
88
|
borderBottom: `${underlineHeight} solid ${tabLineColors.selectedColor}`,
|
|
126
89
|
height: 0
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
|
-
import
|
|
4
|
+
import FocusRing from '@atlaskit/focus-ring';
|
|
5
5
|
import { useTabPanel } from '../hooks';
|
|
6
6
|
// Note this is not being memoized as children is an unstable reference
|
|
7
7
|
/**
|
|
@@ -23,14 +23,16 @@ var TabPanel = function TabPanel(_ref) {
|
|
|
23
23
|
ariaLabelledBy = _useTabPanel['aria-labelledby'],
|
|
24
24
|
onMouseDown = _useTabPanel.onMouseDown,
|
|
25
25
|
tabIndex = _useTabPanel.tabIndex;
|
|
26
|
-
return jsx(
|
|
27
|
-
|
|
26
|
+
return jsx(FocusRing, {
|
|
27
|
+
isInset: true
|
|
28
|
+
}, jsx("div", {
|
|
29
|
+
"data-testid": testId,
|
|
28
30
|
role: role,
|
|
29
31
|
id: id,
|
|
30
32
|
hidden: hidden,
|
|
31
33
|
"aria-labelledby": ariaLabelledBy,
|
|
32
34
|
onMouseDown: onMouseDown,
|
|
33
35
|
tabIndex: tabIndex
|
|
34
|
-
}, jsx(Fragment, null, children));
|
|
36
|
+
}, jsx(Fragment, null, children)));
|
|
35
37
|
};
|
|
36
38
|
export default TabPanel;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import { jsx } from '@emotion/react';
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
3
|
+
import FocusRing from '@atlaskit/focus-ring';
|
|
4
|
+
import { Text } from '@atlaskit/primitives';
|
|
5
5
|
import { useTab } from '../hooks';
|
|
6
6
|
/**
|
|
7
7
|
* __Tab__
|
|
@@ -26,8 +26,10 @@ export default function Tab(_ref) {
|
|
|
26
26
|
onKeyDown = _useTab.onKeyDown,
|
|
27
27
|
role = _useTab.role,
|
|
28
28
|
tabIndex = _useTab.tabIndex;
|
|
29
|
-
return jsx(
|
|
30
|
-
|
|
29
|
+
return jsx(FocusRing, {
|
|
30
|
+
isInset: true
|
|
31
|
+
}, jsx("div", {
|
|
32
|
+
"data-testid": testId,
|
|
31
33
|
onClick: onClick,
|
|
32
34
|
id: id,
|
|
33
35
|
"aria-controls": ariaControls,
|
|
@@ -39,9 +41,8 @@ export default function Tab(_ref) {
|
|
|
39
41
|
role: role,
|
|
40
42
|
tabIndex: tabIndex
|
|
41
43
|
}, jsx(Text, {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}, children));
|
|
44
|
+
weight: "medium",
|
|
45
|
+
color: "inherit",
|
|
46
|
+
maxLines: 1
|
|
47
|
+
}, children)));
|
|
47
48
|
}
|
|
@@ -24,7 +24,7 @@ var tabsStyles = getTabsStyles();
|
|
|
24
24
|
var analyticsAttributes = {
|
|
25
25
|
componentName: 'tabs',
|
|
26
26
|
packageName: "@atlaskit/tabs",
|
|
27
|
-
packageVersion: "
|
|
27
|
+
packageVersion: "15.0.0"
|
|
28
28
|
};
|
|
29
29
|
var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
|
|
30
30
|
var tabPanel = _ref.tabPanel,
|
|
@@ -11,5 +11,4 @@ export var tabLineColors = {
|
|
|
11
11
|
hoveredColor: "var(--ds-border, transparent)",
|
|
12
12
|
activeColor: "var(--ds-border, transparent)",
|
|
13
13
|
selectedColor: "var(--ds-border-selected, ".concat(B400, ")")
|
|
14
|
-
};
|
|
15
|
-
export var tabPanelFocusColor = "var(--ds-border-focused, ".concat(B100, ")");
|
|
14
|
+
};
|
|
@@ -2,46 +2,22 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
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; }
|
|
3
3
|
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; }
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
|
-
import { tabColors, tabLineColors
|
|
6
|
-
var
|
|
7
|
-
var
|
|
5
|
+
import { tabColors, tabLineColors } from './colors';
|
|
6
|
+
var tabInlinePadding = "var(--ds-space-100, 8px)";
|
|
7
|
+
var tabBlockPadding = "var(--ds-space-075, 6px)";
|
|
8
|
+
var tabInlineMargin = "var(--ds-space-negative-100, -8px)";
|
|
8
9
|
// TODO this should probably be `border.width.indicator`
|
|
9
10
|
var underlineHeight = "var(--ds-border-width-outline, 2px)";
|
|
10
|
-
var highContrastFocusStyles = {
|
|
11
|
-
outline: "var(--ds-border-width, 1px)".concat(" solid")
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
// Required so the focus ring is visible in high contrast mode
|
|
15
|
-
var highContrastFocusRing = {
|
|
16
|
-
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
17
|
-
'&:focus-visible': highContrastFocusStyles,
|
|
18
|
-
'@supports not selector(*:focus-visible)': {
|
|
19
|
-
'&:focus': highContrastFocusStyles
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
var tabFocusStyles = function tabFocusStyles() {
|
|
24
|
-
return {
|
|
25
|
-
boxShadow: "0 0 0 2px ".concat(tabPanelFocusColor, " inset"),
|
|
26
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
27
|
-
outline: 'none'
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
11
|
var getTabPanelStyles = function getTabPanelStyles() {
|
|
31
|
-
return
|
|
12
|
+
return {
|
|
32
13
|
flexGrow: 1,
|
|
33
14
|
/*
|
|
34
15
|
NOTE min-height set to 0% because of Firefox bug
|
|
35
16
|
FF http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
|
|
36
17
|
*/
|
|
37
18
|
minHeight: '0%',
|
|
38
|
-
display: 'flex'
|
|
39
|
-
|
|
40
|
-
'&:focus-visible': tabFocusStyles(),
|
|
41
|
-
'@supports not selector(*:focus-visible)': {
|
|
42
|
-
'&:focus': tabFocusStyles()
|
|
43
|
-
}
|
|
44
|
-
}, highContrastFocusRing);
|
|
19
|
+
display: 'flex'
|
|
20
|
+
};
|
|
45
21
|
};
|
|
46
22
|
export var getTabsStyles = function getTabsStyles() {
|
|
47
23
|
return (
|
|
@@ -64,8 +40,8 @@ var tabLineStyles = {
|
|
|
64
40
|
margin: 0,
|
|
65
41
|
position: 'absolute',
|
|
66
42
|
width: 'inherit',
|
|
67
|
-
|
|
68
|
-
|
|
43
|
+
insetInlineStart: tabInlinePadding,
|
|
44
|
+
insetInlineEnd: 0
|
|
69
45
|
};
|
|
70
46
|
export var getTabListStyles = function getTabListStyles() {
|
|
71
47
|
return (
|
|
@@ -73,6 +49,7 @@ export var getTabListStyles = function getTabListStyles() {
|
|
|
73
49
|
css({
|
|
74
50
|
'& [role="tab"]': getTabStyles(),
|
|
75
51
|
fontWeight: "var(--ds-font-weight-medium, 500)",
|
|
52
|
+
marginInlineStart: tabInlineMargin,
|
|
76
53
|
'&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
77
54
|
height: underlineHeight,
|
|
78
55
|
// This line is not a border so the selected line is visible in high contrast mode
|
|
@@ -81,26 +58,13 @@ export var getTabListStyles = function getTabListStyles() {
|
|
|
81
58
|
})
|
|
82
59
|
);
|
|
83
60
|
};
|
|
84
|
-
var tabPanelFocusStyles = function tabPanelFocusStyles() {
|
|
85
|
-
var colors = tabColors;
|
|
86
|
-
return {
|
|
87
|
-
boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
|
|
88
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
89
|
-
outline: 'none',
|
|
90
|
-
// Hide TabLine on focus
|
|
91
|
-
'&::after': {
|
|
92
|
-
opacity: 0
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
61
|
export var getTabStyles = function getTabStyles() {
|
|
97
62
|
var colors = tabColors;
|
|
98
|
-
return
|
|
63
|
+
return {
|
|
99
64
|
color: colors.labelColor,
|
|
100
65
|
cursor: 'pointer',
|
|
101
|
-
lineHeight: 1.8,
|
|
102
66
|
margin: 0,
|
|
103
|
-
padding: "".concat(
|
|
67
|
+
padding: "".concat(tabBlockPadding, " ").concat(tabInlinePadding),
|
|
104
68
|
position: 'relative',
|
|
105
69
|
whiteSpace: 'nowrap',
|
|
106
70
|
overflow: 'hidden',
|
|
@@ -109,6 +73,7 @@ export var getTabStyles = function getTabStyles() {
|
|
|
109
73
|
// TODO: interaction states will be reviewed in DSP-1438
|
|
110
74
|
color: colors.hoverLabelColor,
|
|
111
75
|
'&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
76
|
+
insetInlineEnd: tabInlinePadding,
|
|
112
77
|
borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.hoveredColor),
|
|
113
78
|
height: 0
|
|
114
79
|
})
|
|
@@ -117,22 +82,19 @@ export var getTabStyles = function getTabStyles() {
|
|
|
117
82
|
// TODO: interaction states will be reviewed in DSP-1438
|
|
118
83
|
color: colors.activeLabelColor,
|
|
119
84
|
'&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
85
|
+
insetInlineEnd: tabInlinePadding,
|
|
120
86
|
borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.activeColor),
|
|
121
87
|
height: 0
|
|
122
88
|
})
|
|
123
89
|
},
|
|
124
|
-
'&:focus-visible': tabPanelFocusStyles(),
|
|
125
|
-
'@supports not selector(*:focus-visible)': {
|
|
126
|
-
'&:focus': tabPanelFocusStyles()
|
|
127
|
-
}
|
|
128
|
-
}, highContrastFocusRing), {}, {
|
|
129
90
|
'&[aria-selected="true"]': {
|
|
130
91
|
color: colors.selectedColor,
|
|
131
92
|
'&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
|
|
93
|
+
insetInlineEnd: tabInlinePadding,
|
|
132
94
|
// This line is a border so it is visible in high contrast mode
|
|
133
95
|
borderBottom: "".concat(underlineHeight, " solid ").concat(tabLineColors.selectedColor),
|
|
134
96
|
height: 0
|
|
135
97
|
})
|
|
136
98
|
}
|
|
137
|
-
}
|
|
99
|
+
};
|
|
138
100
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tabs",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.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/"
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
38
38
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
39
|
-
"@atlaskit/
|
|
40
|
-
"@atlaskit/primitives": "^5.
|
|
41
|
-
"@atlaskit/theme": "^12.
|
|
42
|
-
"@atlaskit/tokens": "^1.
|
|
39
|
+
"@atlaskit/focus-ring": "^1.3.9",
|
|
40
|
+
"@atlaskit/primitives": "^5.5.0",
|
|
41
|
+
"@atlaskit/theme": "^12.7.0",
|
|
42
|
+
"@atlaskit/tokens": "^1.43.0",
|
|
43
43
|
"@babel/runtime": "^7.0.0",
|
|
44
44
|
"@emotion/react": "^11.7.1"
|
|
45
45
|
},
|
|
@@ -49,8 +49,9 @@
|
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@af/accessibility-testing": "*",
|
|
51
51
|
"@af/integration-testing": "*",
|
|
52
|
-
"@atlaskit/ds-lib": "^2.
|
|
52
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
53
53
|
"@atlaskit/ssr": "*",
|
|
54
|
+
"@atlaskit/tooltip": "^18.2.1",
|
|
54
55
|
"@atlaskit/visual-regression": "*",
|
|
55
56
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
56
57
|
"@testing-library/react": "^12.1.5",
|