@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-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,
@@ -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.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.23'
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.23'
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.23'
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-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,
@@ -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.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.23'
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.23'
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.23'
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.23",
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.23"
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": "5e7d2ed69a1615e09406a3f9285359346bb90cc7"
49
+ "gitHead": "36ac3913276188edf8d187a9861be7ba765e487a"
50
50
  }