@zendeskgarden/react-tabs 9.0.0-next.23 → 9.0.0-next.25

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 (6) hide show
  1. package/dist/esm/styled/StyledTab.js +5 -11
  2. package/dist/esm/styled/StyledTabList.js +3 -6
  3. package/dist/esm/styled/StyledTabPanel.js +2 -5
  4. package/dist/esm/styled/StyledTabs.js +2 -5
  5. package/dist/index.cjs.js +8 -23
  6. package/package.json +3 -3
package/dist/esm/styled/StyledTab.js CHANGED
@@ -5,22 +5,19 @@
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, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
9
9
  import { stripUnit } from 'polished';
10
10
 
11
11
  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-bottom-color:", ";border-", "-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], borderBlockEndColor, theme.rtl ? 'right' : 'left', borderInlineColor, foregroundColor, selectedColor, focusStyles({
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,
@@ -47,7 +44,7 @@ const sizeStyles = _ref2 => {
47
44
  $isVertical
48
45
  } = _ref2;
49
46
  const borderWidth = theme.borderWidths.md;
50
- const focusHeight = `${theme.space.base * 5}px`;
47
+ const focusHeight = `calc(100% - ${theme.space.base * ($isVertical ? 2 : 4)}px);`;
51
48
  let marginBottom;
52
49
  let padding;
53
50
  if ($isVertical) {
@@ -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.23'
63
+ 'data-garden-version': '9.0.0-next.25'
67
64
  }).withConfig({
68
65
  displayName: "StyledTab",
69
66
  componentId: "sc-x2pbow-0"
@@ -73,8 +70,5 @@ const StyledTab = styled.div.attrs({
73
70
  }
74
71
  return 'center';
75
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));
76
- StyledTab.defaultProps = {
77
- theme: DEFAULT_THEME
78
- };
79
73
 
80
74
  export { StyledTab };
package/dist/esm/styled/StyledTabList.js CHANGED
@@ -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, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
8
+ import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
9
9
 
10
10
  const COMPONENT_ID = 'tabs.tablist';
11
11
  const colorStyles = _ref => {
@@ -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,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.23'
38
+ 'data-garden-version': '9.0.0-next.25'
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 };
package/dist/esm/styled/StyledTabPanel.js CHANGED
@@ -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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
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.23'
21
+ 'data-garden-version': '9.0.0-next.25'
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 };
package/dist/esm/styled/StyledTabs.js CHANGED
@@ -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, DEFAULT_THEME } from '@zendeskgarden/react-theming';
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.23'
13
+ 'data-garden-version': '9.0.0-next.25'
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
@@ -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-bottom-color:", ";border-", "-color:", ";color:", ";&:hover{color:", ";}", " &:active{border-color:currentcolor;color:", ";}&[aria-disabled='true']{border-color:transparent;color:", ";}"], borderBlockEndColor, theme.rtl ? 'right' : 'left', borderInlineColor, foregroundColor, selectedColor, reactTheming.focusStyles({
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,
@@ -60,7 +57,7 @@ const sizeStyles$2 = _ref2 => {
60
57
  $isVertical
61
58
  } = _ref2;
62
59
  const borderWidth = theme.borderWidths.md;
63
- const focusHeight = `${theme.space.base * 5}px`;
60
+ const focusHeight = `calc(100% - ${theme.space.base * ($isVertical ? 2 : 4)}px);`;
64
61
  let marginBottom;
65
62
  let padding;
66
63
  if ($isVertical) {
@@ -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.23'
76
+ 'data-garden-version': '9.0.0-next.25'
80
77
  }).withConfig({
81
78
  displayName: "StyledTab",
82
79
  componentId: "sc-x2pbow-0"
@@ -86,9 +83,6 @@ const StyledTab = styled__default.default.div.attrs({
86
83
  }
87
84
  return 'center';
88
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));
89
- StyledTab.defaultProps = {
90
- theme: reactTheming.DEFAULT_THEME
91
- };
92
86
 
93
87
  const COMPONENT_ID$2 = 'tabs.tablist';
94
88
  const colorStyles = _ref => {
@@ -103,7 +97,7 @@ const colorStyles = _ref => {
103
97
  theme,
104
98
  variable: 'foreground.default'
105
99
  });
106
- return styled.css(["color-scheme:only ", ";border-bottom-color:", ";color:", ";"], p => p.theme.colors.base, borderColor, foregroundColor);
100
+ 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
101
  };
108
102
  const sizeStyles$1 = _ref2 => {
109
103
  let {
@@ -118,14 +112,11 @@ const sizeStyles$1 = _ref2 => {
118
112
  };
119
113
  const StyledTabList = styled__default.default.div.attrs({
120
114
  'data-garden-id': COMPONENT_ID$2,
121
- 'data-garden-version': '9.0.0-next.23'
115
+ 'data-garden-version': '9.0.0-next.25'
122
116
  }).withConfig({
123
117
  displayName: "StyledTabList",
124
118
  componentId: "sc-wa5aaj-0"
125
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));
126
- StyledTabList.defaultProps = {
127
- theme: reactTheming.DEFAULT_THEME
128
- };
129
120
 
130
121
  const COMPONENT_ID$1 = 'tabs.tabpanel';
131
122
  const sizeStyles = _ref => {
@@ -138,26 +129,20 @@ const sizeStyles = _ref => {
138
129
  };
139
130
  const StyledTabPanel = styled__default.default.div.attrs({
140
131
  'data-garden-id': COMPONENT_ID$1,
141
- 'data-garden-version': '9.0.0-next.23'
132
+ 'data-garden-version': '9.0.0-next.25'
142
133
  }).withConfig({
143
134
  displayName: "StyledTabPanel",
144
135
  componentId: "sc-7lhrmp-0"
145
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));
146
- StyledTabPanel.defaultProps = {
147
- theme: reactTheming.DEFAULT_THEME
148
- };
149
137
 
150
138
  const COMPONENT_ID = 'tabs.tabs';
151
139
  const StyledTabs = styled__default.default.div.attrs({
152
140
  'data-garden-id': COMPONENT_ID,
153
- 'data-garden-version': '9.0.0-next.23'
141
+ 'data-garden-version': '9.0.0-next.25'
154
142
  }).withConfig({
155
143
  displayName: "StyledTabs",
156
144
  componentId: "sc-1qaor65-0"
157
145
  })(["display:", ";overflow:hidden;direction:", ";", ";"], props => props.$isVertical ? 'table' : 'block', props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
158
- StyledTabs.defaultProps = {
159
- theme: reactTheming.DEFAULT_THEME
160
- };
161
146
 
162
147
  const TabsContext = React.createContext(undefined);
163
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.23",
3
+ "version": "9.0.0-next.25",
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.23"
37
+ "@zendeskgarden/react-theming": "^9.0.0-next.25"
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": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
49
+ "gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
50
50
  }