@zendeskgarden/react-tabs 9.0.0-next.24 → 9.0.0-next.26
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.
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { stripUnit } from 'polished';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'tabs.tab';
|
|
@@ -44,7 +44,7 @@ const sizeStyles = _ref2 => {
|
|
|
44
44
|
$isVertical
|
|
45
45
|
} = _ref2;
|
|
46
46
|
const borderWidth = theme.borderWidths.md;
|
|
47
|
-
const focusHeight =
|
|
47
|
+
const focusHeight = `calc(100% - ${theme.space.base * ($isVertical ? 2 : 4)}px);`;
|
|
48
48
|
let marginBottom;
|
|
49
49
|
let padding;
|
|
50
50
|
if ($isVertical) {
|
|
@@ -60,7 +60,7 @@ const sizeStyles = _ref2 => {
|
|
|
60
60
|
};
|
|
61
61
|
const StyledTab = styled.div.attrs({
|
|
62
62
|
'data-garden-id': COMPONENT_ID,
|
|
63
|
-
'data-garden-version': '9.0.0-next.
|
|
63
|
+
'data-garden-version': '9.0.0-next.26'
|
|
64
64
|
}).withConfig({
|
|
65
65
|
displayName: "StyledTab",
|
|
66
66
|
componentId: "sc-x2pbow-0"
|
|
@@ -70,8 +70,5 @@ const StyledTab = styled.div.attrs({
|
|
|
70
70
|
}
|
|
71
71
|
return 'center';
|
|
72
72
|
}, sizeStyles, colorStyles, props => props.theme.space.base * (props.$isVertical ? 1 : 2.5), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.borderRadii.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
73
|
-
StyledTab.defaultProps = {
|
|
74
|
-
theme: DEFAULT_THEME
|
|
75
|
-
};
|
|
76
73
|
|
|
77
74
|
export { StyledTab };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tabs.tablist';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -35,13 +35,10 @@ 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.26'
|
|
39
39
|
}).withConfig({
|
|
40
40
|
displayName: "StyledTabList",
|
|
41
41
|
componentId: "sc-wa5aaj-0"
|
|
42
42
|
})(["display:", ";border-bottom:", ";vertical-align:", ";white-space:nowrap;", ";", ";", ";"], props => props.$isVertical ? 'table-cell' : 'block', props => props.$isVertical ? 'none' : props.theme.borderStyles.solid, props => props.$isVertical ? 'top' : undefined, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
43
|
-
StyledTabList.defaultProps = {
|
|
44
|
-
theme: DEFAULT_THEME
|
|
45
|
-
};
|
|
46
43
|
|
|
47
44
|
export { StyledTabList };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tabs.tabpanel';
|
|
11
11
|
const sizeStyles = _ref => {
|
|
@@ -18,13 +18,10 @@ 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.26'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledTabPanel",
|
|
24
24
|
componentId: "sc-7lhrmp-0"
|
|
25
25
|
})(["display:block;vertical-align:", ";color-scheme:only ", ";", ";&[aria-hidden='true']{display:none;}", ";"], props => props.$isVertical && 'top', p => p.theme.colors.base, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledTabPanel.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledTabPanel };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTabs",
|
|
16
16
|
componentId: "sc-1qaor65-0"
|
|
17
17
|
})(["display:", ";overflow:hidden;direction:", ";", ";"], props => props.$isVertical ? 'table' : 'block', props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledTabs.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledTabs };
|
package/dist/index.cjs.js
CHANGED
|
@@ -57,7 +57,7 @@ const sizeStyles$2 = _ref2 => {
|
|
|
57
57
|
$isVertical
|
|
58
58
|
} = _ref2;
|
|
59
59
|
const borderWidth = theme.borderWidths.md;
|
|
60
|
-
const focusHeight =
|
|
60
|
+
const focusHeight = `calc(100% - ${theme.space.base * ($isVertical ? 2 : 4)}px);`;
|
|
61
61
|
let marginBottom;
|
|
62
62
|
let padding;
|
|
63
63
|
if ($isVertical) {
|
|
@@ -73,7 +73,7 @@ const sizeStyles$2 = _ref2 => {
|
|
|
73
73
|
};
|
|
74
74
|
const StyledTab = styled__default.default.div.attrs({
|
|
75
75
|
'data-garden-id': COMPONENT_ID$3,
|
|
76
|
-
'data-garden-version': '9.0.0-next.
|
|
76
|
+
'data-garden-version': '9.0.0-next.26'
|
|
77
77
|
}).withConfig({
|
|
78
78
|
displayName: "StyledTab",
|
|
79
79
|
componentId: "sc-x2pbow-0"
|
|
@@ -83,9 +83,6 @@ const StyledTab = styled__default.default.div.attrs({
|
|
|
83
83
|
}
|
|
84
84
|
return 'center';
|
|
85
85
|
}, sizeStyles$2, colorStyles$1, props => props.theme.space.base * (props.$isVertical ? 1 : 2.5), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.space.base * (props.$isVertical ? 1 : 6), props => props.theme.borderRadii.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
86
|
-
StyledTab.defaultProps = {
|
|
87
|
-
theme: reactTheming.DEFAULT_THEME
|
|
88
|
-
};
|
|
89
86
|
|
|
90
87
|
const COMPONENT_ID$2 = 'tabs.tablist';
|
|
91
88
|
const colorStyles = _ref => {
|
|
@@ -115,14 +112,11 @@ const sizeStyles$1 = _ref2 => {
|
|
|
115
112
|
};
|
|
116
113
|
const StyledTabList = styled__default.default.div.attrs({
|
|
117
114
|
'data-garden-id': COMPONENT_ID$2,
|
|
118
|
-
'data-garden-version': '9.0.0-next.
|
|
115
|
+
'data-garden-version': '9.0.0-next.26'
|
|
119
116
|
}).withConfig({
|
|
120
117
|
displayName: "StyledTabList",
|
|
121
118
|
componentId: "sc-wa5aaj-0"
|
|
122
119
|
})(["display:", ";border-bottom:", ";vertical-align:", ";white-space:nowrap;", ";", ";", ";"], props => props.$isVertical ? 'table-cell' : 'block', props => props.$isVertical ? 'none' : props.theme.borderStyles.solid, props => props.$isVertical ? 'top' : undefined, sizeStyles$1, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
123
|
-
StyledTabList.defaultProps = {
|
|
124
|
-
theme: reactTheming.DEFAULT_THEME
|
|
125
|
-
};
|
|
126
120
|
|
|
127
121
|
const COMPONENT_ID$1 = 'tabs.tabpanel';
|
|
128
122
|
const sizeStyles = _ref => {
|
|
@@ -135,26 +129,20 @@ const sizeStyles = _ref => {
|
|
|
135
129
|
};
|
|
136
130
|
const StyledTabPanel = styled__default.default.div.attrs({
|
|
137
131
|
'data-garden-id': COMPONENT_ID$1,
|
|
138
|
-
'data-garden-version': '9.0.0-next.
|
|
132
|
+
'data-garden-version': '9.0.0-next.26'
|
|
139
133
|
}).withConfig({
|
|
140
134
|
displayName: "StyledTabPanel",
|
|
141
135
|
componentId: "sc-7lhrmp-0"
|
|
142
136
|
})(["display:block;vertical-align:", ";color-scheme:only ", ";", ";&[aria-hidden='true']{display:none;}", ";"], props => props.$isVertical && 'top', p => p.theme.colors.base, sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
143
|
-
StyledTabPanel.defaultProps = {
|
|
144
|
-
theme: reactTheming.DEFAULT_THEME
|
|
145
|
-
};
|
|
146
137
|
|
|
147
138
|
const COMPONENT_ID = 'tabs.tabs';
|
|
148
139
|
const StyledTabs = styled__default.default.div.attrs({
|
|
149
140
|
'data-garden-id': COMPONENT_ID,
|
|
150
|
-
'data-garden-version': '9.0.0-next.
|
|
141
|
+
'data-garden-version': '9.0.0-next.26'
|
|
151
142
|
}).withConfig({
|
|
152
143
|
displayName: "StyledTabs",
|
|
153
144
|
componentId: "sc-1qaor65-0"
|
|
154
145
|
})(["display:", ";overflow:hidden;direction:", ";", ";"], props => props.$isVertical ? 'table' : 'block', props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
155
|
-
StyledTabs.defaultProps = {
|
|
156
|
-
theme: reactTheming.DEFAULT_THEME
|
|
157
|
-
};
|
|
158
146
|
|
|
159
147
|
const TabsContext = React.createContext(undefined);
|
|
160
148
|
const useTabsContext = () => {
|
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.26",
|
|
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.26"
|
|
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": "049dd7bd143029147de333f78bd879dc7d7251f2"
|
|
50
50
|
}
|