@zendeskgarden/react-tooltips 9.0.0-next.20 → 9.0.0-next.22

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 (7) hide show
  1. package/dist/esm/elements/Paragraph.js +1 -1
  2. package/dist/esm/elements/Title.js +1 -1
  3. package/dist/esm/styled/StyledParagraph.js +1 -1
  4. package/dist/esm/styled/StyledTitle.js +1 -1
  5. package/dist/esm/styled/StyledTooltip.js +18 -25
  6. package/dist/index.cjs.js +22 -29
  7. package/package.json +3 -3
package/dist/esm/elements/Paragraph.js CHANGED
@@ -13,6 +13,6 @@ import '../styled/StyledTooltipWrapper.js';
13
13
  const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, Object.assign({
14
14
  ref: ref
15
15
  }, props)));
16
- Paragraph.displayName = 'Paragraph';
16
+ Paragraph.displayName = 'Tooltip.Paragraph';
17
17
 
18
18
  export { Paragraph };
package/dist/esm/elements/Title.js CHANGED
@@ -13,6 +13,6 @@ import '../styled/StyledTooltipWrapper.js';
13
13
  const Title = forwardRef((props, ref) => React.createElement(StyledTitle, Object.assign({
14
14
  ref: ref
15
15
  }, props)));
16
- Title.displayName = 'Title';
16
+ Title.displayName = 'Tooltip.Title';
17
17
 
18
18
  export { Title };
package/dist/esm/styled/StyledParagraph.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'tooltip.paragraph';
11
11
  const StyledParagraph = styled.p.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.20'
13
+ 'data-garden-version': '9.0.0-next.22'
14
14
  }).withConfig({
15
15
  displayName: "StyledParagraph",
16
16
  componentId: "sc-wuqkfc-0"
package/dist/esm/styled/StyledTitle.js CHANGED
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
10
10
  const COMPONENT_ID = 'tooltip.title';
11
11
  const StyledTitle = styled.strong.attrs({
12
12
  'data-garden-id': COMPONENT_ID,
13
- 'data-garden-version': '9.0.0-next.20'
13
+ 'data-garden-version': '9.0.0-next.22'
14
14
  }).withConfig({
15
15
  displayName: "StyledTitle",
16
16
  componentId: "sc-vnjcvz-0"
package/dist/esm/styled/StyledTooltip.js CHANGED
@@ -14,7 +14,6 @@ const sizeStyles = _ref => {
14
14
  let {
15
15
  theme,
16
16
  size,
17
- type,
18
17
  placement,
19
18
  hasArrow
20
19
  } = _ref;
@@ -55,25 +54,19 @@ const sizeStyles = _ref => {
55
54
  titleDisplay = 'block';
56
55
  }
57
56
  let arrowSize;
58
- let arrowInset;
59
57
  if (hasArrow) {
60
58
  if (size === 'small' || size === 'medium') {
61
59
  arrowSize = margin;
62
- arrowInset = type === 'dark' ? '0px' : '1px';
63
- } else {
64
- arrowInset = type === 'dark' ? '0px' : '1px';
65
- if (size === 'large') {
66
- margin = `${theme.space.base * 2}px`;
67
- arrowSize = margin;
68
- } else if (size === 'extra-large') {
69
- margin = `${theme.space.base * 3}px`;
70
- arrowSize = `${theme.space.base * 2.5}px`;
71
- }
60
+ } else if (size === 'large') {
61
+ margin = `${theme.space.base * 2}px`;
62
+ arrowSize = margin;
63
+ } else if (size === 'extra-large') {
64
+ margin = `${theme.space.base * 3}px`;
65
+ arrowSize = `${theme.space.base * 2.5}px`;
72
66
  }
73
67
  }
74
68
  return css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && arrowStyles(getArrowPosition(theme, placement), {
75
- size: arrowSize,
76
- inset: arrowInset
69
+ size: arrowSize
77
70
  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
78
71
  };
79
72
  const colorStyles = _ref2 => {
@@ -87,6 +80,10 @@ const colorStyles = _ref2 => {
87
80
  let color;
88
81
  let titleColor;
89
82
  if (type === 'light') {
83
+ backgroundColor = getColor({
84
+ theme,
85
+ variable: 'background.raised'
86
+ });
90
87
  borderColor = getColor({
91
88
  theme,
92
89
  variable: 'border.default'
@@ -95,10 +92,6 @@ const colorStyles = _ref2 => {
95
92
  variable: 'shadow.medium',
96
93
  theme
97
94
  }));
98
- backgroundColor = getColor({
99
- theme,
100
- variable: 'background.raised'
101
- });
102
95
  color = getColor({
103
96
  theme,
104
97
  variable: 'foreground.subtle'
@@ -108,11 +101,6 @@ const colorStyles = _ref2 => {
108
101
  variable: 'foreground.default'
109
102
  });
110
103
  } else {
111
- borderColor = 'transparent';
112
- boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
113
- variable: 'shadow.small',
114
- theme
115
- }));
116
104
  backgroundColor = getColor({
117
105
  theme,
118
106
  hue: 'neutralHue',
@@ -123,6 +111,11 @@ const colorStyles = _ref2 => {
123
111
  shade: 700
124
112
  }
125
113
  });
114
+ borderColor = backgroundColor;
115
+ boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor({
116
+ variable: 'shadow.small',
117
+ theme
118
+ }));
126
119
  color = getColor({
127
120
  theme,
128
121
  hue: 'white'
@@ -132,11 +125,11 @@ const colorStyles = _ref2 => {
132
125
  };
133
126
  const StyledTooltip = styled.div.attrs({
134
127
  'data-garden-id': COMPONENT_ID,
135
- 'data-garden-version': '9.0.0-next.20'
128
+ 'data-garden-version': '9.0.0-next.22'
136
129
  }).withConfig({
137
130
  displayName: "StyledTooltip",
138
131
  componentId: "sc-gzzjq4-0"
139
- })(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
132
+ })(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
140
133
  StyledTooltip.defaultProps = {
141
134
  theme: DEFAULT_THEME
142
135
  };
package/dist/index.cjs.js CHANGED
@@ -25,7 +25,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
25
25
  const COMPONENT_ID$2 = 'tooltip.paragraph';
26
26
  const StyledParagraph = styled__default.default.p.attrs({
27
27
  'data-garden-id': COMPONENT_ID$2,
28
- 'data-garden-version': '9.0.0-next.20'
28
+ 'data-garden-version': '9.0.0-next.22'
29
29
  }).withConfig({
30
30
  displayName: "StyledParagraph",
31
31
  componentId: "sc-wuqkfc-0"
@@ -37,7 +37,7 @@ StyledParagraph.defaultProps = {
37
37
  const COMPONENT_ID$1 = 'tooltip.title';
38
38
  const StyledTitle = styled__default.default.strong.attrs({
39
39
  'data-garden-id': COMPONENT_ID$1,
40
- 'data-garden-version': '9.0.0-next.20'
40
+ 'data-garden-version': '9.0.0-next.22'
41
41
  }).withConfig({
42
42
  displayName: "StyledTitle",
43
43
  componentId: "sc-vnjcvz-0"
@@ -51,7 +51,6 @@ const sizeStyles = _ref => {
51
51
  let {
52
52
  theme,
53
53
  size,
54
- type,
55
54
  placement,
56
55
  hasArrow
57
56
  } = _ref;
@@ -92,25 +91,19 @@ const sizeStyles = _ref => {
92
91
  titleDisplay = 'block';
93
92
  }
94
93
  let arrowSize;
95
- let arrowInset;
96
94
  if (hasArrow) {
97
95
  if (size === 'small' || size === 'medium') {
98
96
  arrowSize = margin;
99
- arrowInset = type === 'dark' ? '0px' : '1px';
100
- } else {
101
- arrowInset = type === 'dark' ? '0px' : '1px';
102
- if (size === 'large') {
103
- margin = `${theme.space.base * 2}px`;
104
- arrowSize = margin;
105
- } else if (size === 'extra-large') {
106
- margin = `${theme.space.base * 3}px`;
107
- arrowSize = `${theme.space.base * 2.5}px`;
108
- }
97
+ } else if (size === 'large') {
98
+ margin = `${theme.space.base * 2}px`;
99
+ arrowSize = margin;
100
+ } else if (size === 'extra-large') {
101
+ margin = `${theme.space.base * 3}px`;
102
+ arrowSize = `${theme.space.base * 2.5}px`;
109
103
  }
110
104
  }
111
105
  return styled.css(["margin:", ";border-radius:", ";padding:", ";max-width:", ";line-height:", ";word-wrap:", ";white-space:", ";font-size:", ";overflow-wrap:", ";", ";", "{margin-top:", ";}", "{display:", ";}"], margin, borderRadius, padding, maxWidth, lineHeight, wordWrap, whiteSpace, fontSize, overflowWrap, hasArrow && reactTheming.arrowStyles(reactTheming.getArrowPosition(theme, placement), {
112
- size: arrowSize,
113
- inset: arrowInset
106
+ size: arrowSize
114
107
  }), StyledParagraph, paragraphMarginTop, StyledTitle, titleDisplay);
115
108
  };
116
109
  const colorStyles = _ref2 => {
@@ -124,6 +117,10 @@ const colorStyles = _ref2 => {
124
117
  let color;
125
118
  let titleColor;
126
119
  if (type === 'light') {
120
+ backgroundColor = reactTheming.getColor({
121
+ theme,
122
+ variable: 'background.raised'
123
+ });
127
124
  borderColor = reactTheming.getColor({
128
125
  theme,
129
126
  variable: 'border.default'
@@ -132,10 +129,6 @@ const colorStyles = _ref2 => {
132
129
  variable: 'shadow.medium',
133
130
  theme
134
131
  }));
135
- backgroundColor = reactTheming.getColor({
136
- theme,
137
- variable: 'background.raised'
138
- });
139
132
  color = reactTheming.getColor({
140
133
  theme,
141
134
  variable: 'foreground.subtle'
@@ -145,11 +138,6 @@ const colorStyles = _ref2 => {
145
138
  variable: 'foreground.default'
146
139
  });
147
140
  } else {
148
- borderColor = 'transparent';
149
- boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
150
- variable: 'shadow.small',
151
- theme
152
- }));
153
141
  backgroundColor = reactTheming.getColor({
154
142
  theme,
155
143
  hue: 'neutralHue',
@@ -160,6 +148,11 @@ const colorStyles = _ref2 => {
160
148
  shade: 700
161
149
  }
162
150
  });
151
+ borderColor = backgroundColor;
152
+ boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor({
153
+ variable: 'shadow.small',
154
+ theme
155
+ }));
163
156
  color = reactTheming.getColor({
164
157
  theme,
165
158
  hue: 'white'
@@ -169,11 +162,11 @@ const colorStyles = _ref2 => {
169
162
  };
170
163
  const StyledTooltip = styled__default.default.div.attrs({
171
164
  'data-garden-id': COMPONENT_ID,
172
- 'data-garden-version': '9.0.0-next.20'
165
+ 'data-garden-version': '9.0.0-next.22'
173
166
  }).withConfig({
174
167
  displayName: "StyledTooltip",
175
168
  componentId: "sc-gzzjq4-0"
176
- })(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, props => sizeStyles(props), colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
169
+ })(["display:inline-block;border:", ";box-sizing:border-box;direction:", ";text-align:", ";font-weight:", ";", ";&[aria-hidden='true']{display:none;}", ";", ";"], props => props.theme.borders.sm, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? 'right' : 'left', props => props.theme.fontWeights.regular, sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
177
170
  StyledTooltip.defaultProps = {
178
171
  theme: reactTheming.DEFAULT_THEME
179
172
  };
@@ -189,12 +182,12 @@ StyledTooltipWrapper.defaultProps = {
189
182
  const Paragraph = React.forwardRef((props, ref) => React__default.default.createElement(StyledParagraph, Object.assign({
190
183
  ref: ref
191
184
  }, props)));
192
- Paragraph.displayName = 'Paragraph';
185
+ Paragraph.displayName = 'Tooltip.Paragraph';
193
186
 
194
187
  const Title = React.forwardRef((props, ref) => React__default.default.createElement(StyledTitle, Object.assign({
195
188
  ref: ref
196
189
  }, props)));
197
- Title.displayName = 'Title';
190
+ Title.displayName = 'Tooltip.Title';
198
191
 
199
192
  const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
200
193
  const SIZE = ['small', 'medium', 'large', 'extra-large'];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-tooltips",
3
- "version": "9.0.0-next.20",
3
+ "version": "9.0.0-next.22",
4
4
  "description": "Collection of components and render prop containers relating to Tooltips in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -35,7 +35,7 @@
35
35
  "styled-components": "^5.3.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@zendeskgarden/react-theming": "^9.0.0-next.20"
38
+ "@zendeskgarden/react-theming": "^9.0.0-next.22"
39
39
  },
40
40
  "keywords": [
41
41
  "components",
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "zendeskgarden:src": "src/index.ts",
50
- "gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
50
+ "gitHead": "46309385a1495c2297da23409f4196f662fe418b"
51
51
  }