@zendeskgarden/react-tabs 9.0.0-next.23 → 9.0.0-next.24
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.
|
@@ -12,15 +12,12 @@ const COMPONENT_ID = 'tabs.tab';
|
|
|
12
12
|
const colorStyles = _ref => {
|
|
13
13
|
let {
|
|
14
14
|
theme,
|
|
15
|
-
$isSelected
|
|
16
|
-
$isVertical
|
|
15
|
+
$isSelected
|
|
17
16
|
} = _ref;
|
|
18
17
|
const borderColor = $isSelected ? getColor({
|
|
19
18
|
theme,
|
|
20
19
|
variable: 'border.primaryEmphasis'
|
|
21
20
|
}) : 'transparent';
|
|
22
|
-
const borderBlockEndColor = $isVertical ? undefined : borderColor;
|
|
23
|
-
const borderInlineColor = $isVertical ? borderColor : undefined;
|
|
24
21
|
const selectedColor = getColor({
|
|
25
22
|
theme,
|
|
26
23
|
variable: 'foreground.primary'
|
|
@@ -30,7 +27,7 @@ const colorStyles = _ref => {
|
|
|
30
27
|
theme,
|
|
31
28
|
variable: 'foreground.disabled'
|
|
32
29
|
});
|
|
33
|
-
return css(["border-
|
|
30
|
+
return css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], borderColor, foregroundColor, selectedColor, focusStyles({
|
|
34
31
|
theme,
|
|
35
32
|
inset: true,
|
|
36
33
|
spacerWidth: null,
|
|
@@ -63,7 +60,7 @@ const sizeStyles = _ref2 => {
|
|
|
63
60
|
};
|
|
64
61
|
const StyledTab = styled.div.attrs({
|
|
65
62
|
'data-garden-id': COMPONENT_ID,
|
|
66
|
-
'data-garden-version': '9.0.0-next.
|
|
63
|
+
'data-garden-version': '9.0.0-next.24'
|
|
67
64
|
}).withConfig({
|
|
68
65
|
displayName: "StyledTab",
|
|
69
66
|
componentId: "sc-x2pbow-0"
|
|
@@ -20,7 +20,7 @@ const colorStyles = _ref => {
|
|
|
20
20
|
theme,
|
|
21
21
|
variable: 'foreground.default'
|
|
22
22
|
});
|
|
23
|
-
return css(["color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
|
|
23
|
+
return css(["transition:border-color 0.25s ease-in-out;color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
|
|
24
24
|
};
|
|
25
25
|
const sizeStyles = _ref2 => {
|
|
26
26
|
let {
|
|
@@ -35,7 +35,7 @@ const sizeStyles = _ref2 => {
|
|
|
35
35
|
};
|
|
36
36
|
const StyledTabList = styled.div.attrs({
|
|
37
37
|
'data-garden-id': COMPONENT_ID,
|
|
38
|
-
'data-garden-version': '9.0.0-next.
|
|
38
|
+
'data-garden-version': '9.0.0-next.24'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledTabList",
|
|
41
41
|
componentId: "sc-wa5aaj-0"
|
|
@@ -18,7 +18,7 @@ const sizeStyles = _ref => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledTabPanel = styled.div.attrs({
|
|
20
20
|
'data-garden-id': COMPONENT_ID,
|
|
21
|
-
'data-garden-version': '9.0.0-next.
|
|
21
|
+
'data-garden-version': '9.0.0-next.24'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledTabPanel",
|
|
24
24
|
componentId: "sc-7lhrmp-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'tabs.tabs';
|
|
11
11
|
const StyledTabs = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.24'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTabs",
|
|
16
16
|
componentId: "sc-1qaor65-0"
|
package/dist/index.cjs.js
CHANGED
|
@@ -25,15 +25,12 @@ const COMPONENT_ID$3 = 'tabs.tab';
|
|
|
25
25
|
const colorStyles$1 = _ref => {
|
|
26
26
|
let {
|
|
27
27
|
theme,
|
|
28
|
-
$isSelected
|
|
29
|
-
$isVertical
|
|
28
|
+
$isSelected
|
|
30
29
|
} = _ref;
|
|
31
30
|
const borderColor = $isSelected ? reactTheming.getColor({
|
|
32
31
|
theme,
|
|
33
32
|
variable: 'border.primaryEmphasis'
|
|
34
33
|
}) : 'transparent';
|
|
35
|
-
const borderBlockEndColor = $isVertical ? undefined : borderColor;
|
|
36
|
-
const borderInlineColor = $isVertical ? borderColor : undefined;
|
|
37
34
|
const selectedColor = reactTheming.getColor({
|
|
38
35
|
theme,
|
|
39
36
|
variable: 'foreground.primary'
|
|
@@ -43,7 +40,7 @@ const colorStyles$1 = _ref => {
|
|
|
43
40
|
theme,
|
|
44
41
|
variable: 'foreground.disabled'
|
|
45
42
|
});
|
|
46
|
-
return styled.css(["border-
|
|
43
|
+
return styled.css(["border-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], borderColor, foregroundColor, selectedColor, reactTheming.focusStyles({
|
|
47
44
|
theme,
|
|
48
45
|
inset: true,
|
|
49
46
|
spacerWidth: null,
|
|
@@ -76,7 +73,7 @@ const sizeStyles$2 = _ref2 => {
|
|
|
76
73
|
};
|
|
77
74
|
const StyledTab = styled__default.default.div.attrs({
|
|
78
75
|
'data-garden-id': COMPONENT_ID$3,
|
|
79
|
-
'data-garden-version': '9.0.0-next.
|
|
76
|
+
'data-garden-version': '9.0.0-next.24'
|
|
80
77
|
}).withConfig({
|
|
81
78
|
displayName: "StyledTab",
|
|
82
79
|
componentId: "sc-x2pbow-0"
|
|
@@ -103,7 +100,7 @@ const colorStyles = _ref => {
|
|
|
103
100
|
theme,
|
|
104
101
|
variable: 'foreground.default'
|
|
105
102
|
});
|
|
106
|
-
return styled.css(["color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
|
|
103
|
+
return styled.css(["transition:border-color 0.25s ease-in-out;color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
|
|
107
104
|
};
|
|
108
105
|
const sizeStyles$1 = _ref2 => {
|
|
109
106
|
let {
|
|
@@ -118,7 +115,7 @@ const sizeStyles$1 = _ref2 => {
|
|
|
118
115
|
};
|
|
119
116
|
const StyledTabList = styled__default.default.div.attrs({
|
|
120
117
|
'data-garden-id': COMPONENT_ID$2,
|
|
121
|
-
'data-garden-version': '9.0.0-next.
|
|
118
|
+
'data-garden-version': '9.0.0-next.24'
|
|
122
119
|
}).withConfig({
|
|
123
120
|
displayName: "StyledTabList",
|
|
124
121
|
componentId: "sc-wa5aaj-0"
|
|
@@ -138,7 +135,7 @@ const sizeStyles = _ref => {
|
|
|
138
135
|
};
|
|
139
136
|
const StyledTabPanel = styled__default.default.div.attrs({
|
|
140
137
|
'data-garden-id': COMPONENT_ID$1,
|
|
141
|
-
'data-garden-version': '9.0.0-next.
|
|
138
|
+
'data-garden-version': '9.0.0-next.24'
|
|
142
139
|
}).withConfig({
|
|
143
140
|
displayName: "StyledTabPanel",
|
|
144
141
|
componentId: "sc-7lhrmp-0"
|
|
@@ -150,7 +147,7 @@ StyledTabPanel.defaultProps = {
|
|
|
150
147
|
const COMPONENT_ID = 'tabs.tabs';
|
|
151
148
|
const StyledTabs = styled__default.default.div.attrs({
|
|
152
149
|
'data-garden-id': COMPONENT_ID,
|
|
153
|
-
'data-garden-version': '9.0.0-next.
|
|
150
|
+
'data-garden-version': '9.0.0-next.24'
|
|
154
151
|
}).withConfig({
|
|
155
152
|
displayName: "StyledTabs",
|
|
156
153
|
componentId: "sc-1qaor65-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tabs",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.24",
|
|
4
4
|
"description": "Components and render prop containers relating to the Garden Design System.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"styled-components": "^5.3.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
37
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.24"
|
|
38
38
|
},
|
|
39
39
|
"keywords": [
|
|
40
40
|
"components",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"zendeskgarden:src": "src/index.ts",
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "36ac3913276188edf8d187a9861be7ba765e487a"
|
|
50
50
|
}
|