@zendeskgarden/react-modals 9.0.0-next.13 → 9.0.0-next.15
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.
- package/LICENSE.md +176 -0
- package/dist/esm/elements/TooltipModal/Close.js +2 -1
- package/dist/esm/styled/StyledBackdrop.js +1 -1
- package/dist/esm/styled/StyledBody.js +1 -1
- package/dist/esm/styled/StyledClose.js +1 -1
- package/dist/esm/styled/StyledDrawer.js +30 -15
- package/dist/esm/styled/StyledDrawerBody.js +1 -1
- package/dist/esm/styled/StyledDrawerClose.js +1 -1
- package/dist/esm/styled/StyledDrawerFooter.js +11 -3
- package/dist/esm/styled/StyledDrawerFooterItem.js +1 -1
- package/dist/esm/styled/StyledDrawerHeader.js +1 -1
- package/dist/esm/styled/StyledFooter.js +1 -1
- package/dist/esm/styled/StyledFooterItem.js +1 -1
- package/dist/esm/styled/StyledHeader.js +1 -1
- package/dist/esm/styled/StyledModal.js +3 -3
- package/dist/esm/styled/StyledTooltipModal.js +1 -1
- package/dist/esm/styled/StyledTooltipModalBackdrop.js +1 -1
- package/dist/esm/styled/StyledTooltipModalBody.js +11 -3
- package/dist/esm/styled/StyledTooltipModalClose.js +2 -2
- package/dist/esm/styled/StyledTooltipModalFooter.js +1 -1
- package/dist/esm/styled/StyledTooltipModalFooterItem.js +1 -1
- package/dist/esm/styled/StyledTooltipModalTitle.js +11 -3
- package/dist/index.cjs.js +83 -43
- package/package.json +5 -4
package/LICENSE.md
ADDED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
6
|
+
|
|
7
|
+
1. Definitions.
|
|
8
|
+
|
|
9
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
|
10
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
|
11
|
+
|
|
12
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
|
13
|
+
the copyright owner that is granting the License.
|
|
14
|
+
|
|
15
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
|
16
|
+
other entities that control, are controlled by, or are under common
|
|
17
|
+
control with that entity. For the purposes of this definition,
|
|
18
|
+
"control" means (i) the power, direct or indirect, to cause the
|
|
19
|
+
direction or management of such entity, whether by contract or
|
|
20
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
21
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
22
|
+
|
|
23
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
|
24
|
+
exercising permissions granted by this License.
|
|
25
|
+
|
|
26
|
+
"Source" form shall mean the preferred form for making modifications,
|
|
27
|
+
including but not limited to software source code, documentation
|
|
28
|
+
source, and configuration files.
|
|
29
|
+
|
|
30
|
+
"Object" form shall mean any form resulting from mechanical
|
|
31
|
+
transformation or translation of a Source form, including but
|
|
32
|
+
not limited to compiled object code, generated documentation,
|
|
33
|
+
and conversions to other media types.
|
|
34
|
+
|
|
35
|
+
"Work" shall mean the work of authorship, whether in Source or
|
|
36
|
+
Object form, made available under the License, as indicated by a
|
|
37
|
+
copyright notice that is included in or attached to the work
|
|
38
|
+
(an example is provided in the Appendix below).
|
|
39
|
+
|
|
40
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
|
41
|
+
form, that is based on (or derived from) the Work and for which the
|
|
42
|
+
editorial revisions, annotations, elaborations, or other modifications
|
|
43
|
+
represent, as a whole, an original work of authorship. For the purposes
|
|
44
|
+
of this License, Derivative Works shall not include works that remain
|
|
45
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
|
46
|
+
the Work and Derivative Works thereof.
|
|
47
|
+
|
|
48
|
+
"Contribution" shall mean any work of authorship, including
|
|
49
|
+
the original version of the Work and any modifications or additions
|
|
50
|
+
to that Work or Derivative Works thereof, that is intentionally
|
|
51
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
52
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
|
53
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
|
54
|
+
means any form of electronic, verbal, or written communication sent
|
|
55
|
+
to the Licensor or its representatives, including but not limited to
|
|
56
|
+
communication on electronic mailing lists, source code control systems,
|
|
57
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
|
58
|
+
Licensor for the purpose of discussing and improving the Work, but
|
|
59
|
+
excluding communication that is conspicuously marked or otherwise
|
|
60
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
|
61
|
+
|
|
62
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
63
|
+
on behalf of whom a Contribution has been received by Licensor and
|
|
64
|
+
subsequently incorporated within the Work.
|
|
65
|
+
|
|
66
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
67
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
68
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
69
|
+
copyright license to reproduce, prepare Derivative Works of,
|
|
70
|
+
publicly display, publicly perform, sublicense, and distribute the
|
|
71
|
+
Work and such Derivative Works in Source or Object form.
|
|
72
|
+
|
|
73
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
|
74
|
+
this License, each Contributor hereby grants to You a perpetual,
|
|
75
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
76
|
+
(except as stated in this section) patent license to make, have made,
|
|
77
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
78
|
+
where such license applies only to those patent claims licensable
|
|
79
|
+
by such Contributor that are necessarily infringed by their
|
|
80
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
|
81
|
+
with the Work to which such Contribution(s) was submitted. If You
|
|
82
|
+
institute patent litigation against any entity (including a
|
|
83
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
84
|
+
or a Contribution incorporated within the Work constitutes direct
|
|
85
|
+
or contributory patent infringement, then any patent licenses
|
|
86
|
+
granted to You under this License for that Work shall terminate
|
|
87
|
+
as of the date such litigation is filed.
|
|
88
|
+
|
|
89
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
|
90
|
+
Work or Derivative Works thereof in any medium, with or without
|
|
91
|
+
modifications, and in Source or Object form, provided that You
|
|
92
|
+
meet the following conditions:
|
|
93
|
+
|
|
94
|
+
(a) You must give any other recipients of the Work or
|
|
95
|
+
Derivative Works a copy of this License; and
|
|
96
|
+
|
|
97
|
+
(b) You must cause any modified files to carry prominent notices
|
|
98
|
+
stating that You changed the files; and
|
|
99
|
+
|
|
100
|
+
(c) You must retain, in the Source form of any Derivative Works
|
|
101
|
+
that You distribute, all copyright, patent, trademark, and
|
|
102
|
+
attribution notices from the Source form of the Work,
|
|
103
|
+
excluding those notices that do not pertain to any part of
|
|
104
|
+
the Derivative Works; and
|
|
105
|
+
|
|
106
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
|
107
|
+
distribution, then any Derivative Works that You distribute must
|
|
108
|
+
include a readable copy of the attribution notices contained
|
|
109
|
+
within such NOTICE file, excluding those notices that do not
|
|
110
|
+
pertain to any part of the Derivative Works, in at least one
|
|
111
|
+
of the following places: within a NOTICE text file distributed
|
|
112
|
+
as part of the Derivative Works; within the Source form or
|
|
113
|
+
documentation, if provided along with the Derivative Works; or,
|
|
114
|
+
within a display generated by the Derivative Works, if and
|
|
115
|
+
wherever such third-party notices normally appear. The contents
|
|
116
|
+
of the NOTICE file are for informational purposes only and
|
|
117
|
+
do not modify the License. You may add Your own attribution
|
|
118
|
+
notices within Derivative Works that You distribute, alongside
|
|
119
|
+
or as an addendum to the NOTICE text from the Work, provided
|
|
120
|
+
that such additional attribution notices cannot be construed
|
|
121
|
+
as modifying the License.
|
|
122
|
+
|
|
123
|
+
You may add Your own copyright statement to Your modifications and
|
|
124
|
+
may provide additional or different license terms and conditions
|
|
125
|
+
for use, reproduction, or distribution of Your modifications, or
|
|
126
|
+
for any such Derivative Works as a whole, provided Your use,
|
|
127
|
+
reproduction, and distribution of the Work otherwise complies with
|
|
128
|
+
the conditions stated in this License.
|
|
129
|
+
|
|
130
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
131
|
+
any Contribution intentionally submitted for inclusion in the Work
|
|
132
|
+
by You to the Licensor shall be under the terms and conditions of
|
|
133
|
+
this License, without any additional terms or conditions.
|
|
134
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
|
135
|
+
the terms of any separate license agreement you may have executed
|
|
136
|
+
with Licensor regarding such Contributions.
|
|
137
|
+
|
|
138
|
+
6. Trademarks. This License does not grant permission to use the trade
|
|
139
|
+
names, trademarks, service marks, or product names of the Licensor,
|
|
140
|
+
except as required for reasonable and customary use in describing the
|
|
141
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
|
142
|
+
|
|
143
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
144
|
+
agreed to in writing, Licensor provides the Work (and each
|
|
145
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
146
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
147
|
+
implied, including, without limitation, any warranties or conditions
|
|
148
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
149
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
150
|
+
appropriateness of using or redistributing the Work and assume any
|
|
151
|
+
risks associated with Your exercise of permissions under this License.
|
|
152
|
+
|
|
153
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
|
154
|
+
whether in tort (including negligence), contract, or otherwise,
|
|
155
|
+
unless required by applicable law (such as deliberate and grossly
|
|
156
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
|
157
|
+
liable to You for damages, including any direct, indirect, special,
|
|
158
|
+
incidental, or consequential damages of any character arising as a
|
|
159
|
+
result of this License or out of the use or inability to use the
|
|
160
|
+
Work (including but not limited to damages for loss of goodwill,
|
|
161
|
+
work stoppage, computer failure or malfunction, or any and all
|
|
162
|
+
other commercial damages or losses), even if such Contributor
|
|
163
|
+
has been advised of the possibility of such damages.
|
|
164
|
+
|
|
165
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
|
166
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
|
167
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
168
|
+
or other liability obligations and/or rights consistent with this
|
|
169
|
+
License. However, in accepting such obligations, You may act only
|
|
170
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
|
171
|
+
of any other Contributor, and only if You agree to indemnify,
|
|
172
|
+
defend, and hold each Contributor harmless for any liability
|
|
173
|
+
incurred by, or claims asserted against, such Contributor by reason
|
|
174
|
+
of your accepting any such warranty or additional liability.
|
|
175
|
+
|
|
176
|
+
END OF TERMS AND CONDITIONS
|
|
@@ -40,7 +40,8 @@ const CloseComponent = forwardRef((props, ref) => {
|
|
|
40
40
|
...props,
|
|
41
41
|
'aria-label': ariaLabel
|
|
42
42
|
}), {
|
|
43
|
-
ref: ref
|
|
43
|
+
ref: ref,
|
|
44
|
+
size: "small"
|
|
44
45
|
}), React__default.createElement(SvgXStroke, null));
|
|
45
46
|
});
|
|
46
47
|
CloseComponent.displayName = 'TooltipModal.Close';
|
|
@@ -18,7 +18,7 @@ const animationStyles = props => {
|
|
|
18
18
|
};
|
|
19
19
|
const StyledBackdrop = 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.15'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledBackdrop",
|
|
24
24
|
componentId: "sc-mzdjpo-0"
|
|
@@ -10,7 +10,7 @@ import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from
|
|
|
10
10
|
const COMPONENT_ID = 'modals.body';
|
|
11
11
|
const StyledBody = 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.15'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-14rzecg-0"
|
|
@@ -16,7 +16,7 @@ const BASE_MULTIPLIERS = {
|
|
|
16
16
|
};
|
|
17
17
|
const StyledClose = styled(IconButton).attrs({
|
|
18
18
|
'data-garden-id': COMPONENT_ID,
|
|
19
|
-
'data-garden-version': '9.0.0-next.
|
|
19
|
+
'data-garden-version': '9.0.0-next.15'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledClose",
|
|
22
22
|
componentId: "sc-iseudj-0"
|
|
@@ -4,31 +4,46 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
7
|
+
import styled, { css } from 'styled-components';
|
|
8
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.drawer_modal';
|
|
11
11
|
const DRAWER_WIDTH = 380;
|
|
12
|
-
const
|
|
13
|
-
|
|
12
|
+
const colorStyles = _ref => {
|
|
13
|
+
let {
|
|
14
14
|
theme
|
|
15
|
-
} =
|
|
16
|
-
const {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
} = _ref;
|
|
16
|
+
const offsetY = `${theme.space.base * 5}px`;
|
|
17
|
+
const blurRadius = `${theme.space.base * 7}px`;
|
|
18
|
+
const shadowColor = getColor({
|
|
19
|
+
theme,
|
|
20
|
+
hue: 'neutralHue',
|
|
21
|
+
shade: 1200,
|
|
22
|
+
light: {
|
|
23
|
+
transparency: theme.opacity[200]
|
|
24
|
+
},
|
|
25
|
+
dark: {
|
|
26
|
+
transparency: theme.opacity[1000]
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
|
|
30
|
+
const borderColor = getColor({
|
|
31
|
+
theme,
|
|
32
|
+
variable: 'border.default'
|
|
33
|
+
});
|
|
34
|
+
const backgroundColor = getColor({
|
|
35
|
+
theme,
|
|
36
|
+
variable: 'background.raised'
|
|
37
|
+
});
|
|
38
|
+
return css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
|
|
24
39
|
};
|
|
25
40
|
const StyledDrawer = styled.div.attrs({
|
|
26
41
|
'data-garden-id': COMPONENT_ID,
|
|
27
|
-
'data-garden-version': '9.0.0-next.
|
|
42
|
+
'data-garden-version': '9.0.0-next.15'
|
|
28
43
|
}).withConfig({
|
|
29
44
|
displayName: "StyledDrawer",
|
|
30
45
|
componentId: "sc-zp66t3-0"
|
|
31
|
-
})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;
|
|
46
|
+
})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;", ":", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", " ", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.rtl ? 'border-right' : 'border-left', props => props.theme.borders.sm, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
32
47
|
StyledDrawer.defaultProps = {
|
|
33
48
|
theme: DEFAULT_THEME
|
|
34
49
|
};
|
|
@@ -11,7 +11,7 @@ import { StyledBody } from './StyledBody.js';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.drawer_modal.body';
|
|
12
12
|
const StyledDrawerBody = styled(StyledBody).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.15'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledDrawerBody",
|
|
17
17
|
componentId: "sc-13qufyn-0"
|
|
@@ -16,7 +16,7 @@ const BASE_MULTIPLIERS = {
|
|
|
16
16
|
};
|
|
17
17
|
const StyledDrawerClose = styled(StyledClose).attrs({
|
|
18
18
|
'data-garden-id': COMPONENT_ID,
|
|
19
|
-
'data-garden-version': '9.0.0-next.
|
|
19
|
+
'data-garden-version': '9.0.0-next.15'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledDrawerClose",
|
|
22
22
|
componentId: "sc-1a0xt3x-0"
|
|
@@ -5,16 +5,24 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.drawer_modal.footer';
|
|
11
11
|
const StyledDrawerFooter = 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.15'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledDrawerFooter",
|
|
16
16
|
componentId: "sc-kc7e6p-0"
|
|
17
|
-
})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"],
|
|
17
|
+
})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], _ref => {
|
|
18
|
+
let {
|
|
19
|
+
theme
|
|
20
|
+
} = _ref;
|
|
21
|
+
return `${theme.borders.sm} ${getColor({
|
|
22
|
+
theme,
|
|
23
|
+
variable: 'border.subtle'
|
|
24
|
+
})}`;
|
|
25
|
+
}, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
26
|
StyledDrawerFooter.defaultProps = {
|
|
19
27
|
theme: DEFAULT_THEME
|
|
20
28
|
};
|
|
@@ -11,7 +11,7 @@ import { StyledFooterItem } from './StyledFooterItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
12
12
|
const StyledDrawerFooterItem = styled(StyledFooterItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.15'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledDrawerFooterItem",
|
|
17
17
|
componentId: "sc-m2yul4-0"
|
|
@@ -12,7 +12,7 @@ import { BASE_MULTIPLIERS } from './StyledDrawerClose.js';
|
|
|
12
12
|
const COMPONENT_ID = 'modals.drawer_modal.header';
|
|
13
13
|
const StyledDrawerHeader = styled(StyledHeader).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.0.0-next.
|
|
15
|
+
'data-garden-version': '9.0.0-next.15'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledDrawerHeader",
|
|
18
18
|
componentId: "sc-y4mgkj-0"
|
|
@@ -10,7 +10,7 @@ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgard
|
|
|
10
10
|
const COMPONENT_ID = 'modals.footer';
|
|
11
11
|
const StyledFooter = 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.15'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooter",
|
|
16
16
|
componentId: "sc-d8pfdu-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'modals.footer_item';
|
|
11
11
|
const StyledFooterItem = styled.span.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.15'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooterItem",
|
|
16
16
|
componentId: "sc-1mb76hl-0"
|
|
@@ -26,7 +26,7 @@ const colorStyles = _ref => {
|
|
|
26
26
|
};
|
|
27
27
|
const StyledHeader = styled.div.attrs({
|
|
28
28
|
'data-garden-id': COMPONENT_ID,
|
|
29
|
-
'data-garden-version': '9.0.0-next.
|
|
29
|
+
'data-garden-version': '9.0.0-next.15'
|
|
30
30
|
}).withConfig({
|
|
31
31
|
displayName: "StyledHeader",
|
|
32
32
|
componentId: "sc-1787r9v-0"
|
|
@@ -20,8 +20,8 @@ const colorStyles = _ref => {
|
|
|
20
20
|
let {
|
|
21
21
|
theme
|
|
22
22
|
} = _ref;
|
|
23
|
-
const offsetY = `${theme.space.base *
|
|
24
|
-
const blurRadius = `${theme.space.base *
|
|
23
|
+
const offsetY = `${theme.space.base * 5}px`;
|
|
24
|
+
const blurRadius = `${theme.space.base * 7}px`;
|
|
25
25
|
const shadowColor = getColor({
|
|
26
26
|
theme,
|
|
27
27
|
hue: 'neutralHue',
|
|
@@ -49,7 +49,7 @@ const sizeStyles = props => {
|
|
|
49
49
|
};
|
|
50
50
|
const StyledModal = styled.div.attrs({
|
|
51
51
|
'data-garden-id': COMPONENT_ID,
|
|
52
|
-
'data-garden-version': '9.0.0-next.
|
|
52
|
+
'data-garden-version': '9.0.0-next.15'
|
|
53
53
|
}).withConfig({
|
|
54
54
|
displayName: "StyledModal",
|
|
55
55
|
componentId: "sc-1pe1axu-0"
|
|
@@ -10,7 +10,7 @@ import { arrowStyles, getArrowPosition, retrieveComponentStyles, DEFAULT_THEME }
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_modal';
|
|
11
11
|
const StyledTooltipModal = styled.div.attrs(props => ({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.15',
|
|
14
14
|
className: props.isAnimated && 'is-animated'
|
|
15
15
|
})).withConfig({
|
|
16
16
|
displayName: "StyledTooltipModal",
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_modal.backdrop';
|
|
11
11
|
const StyledTooltipModalBackdrop = 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.15'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipModalBackdrop",
|
|
16
16
|
componentId: "sc-1yaomgq-0"
|
|
@@ -5,16 +5,24 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getLineHeight,
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_modal.body';
|
|
11
11
|
const StyledTooltipModalBody = 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.15'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipModalBody",
|
|
16
16
|
componentId: "sc-195dkzj-0"
|
|
17
|
-
})(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md),
|
|
17
|
+
})(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), _ref => {
|
|
18
|
+
let {
|
|
19
|
+
theme
|
|
20
|
+
} = _ref;
|
|
21
|
+
return getColor({
|
|
22
|
+
variable: 'foreground.default',
|
|
23
|
+
theme
|
|
24
|
+
});
|
|
25
|
+
}, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
26
|
StyledTooltipModalBody.defaultProps = {
|
|
19
27
|
theme: DEFAULT_THEME
|
|
20
28
|
};
|
|
@@ -11,11 +11,11 @@ import { StyledClose } from './StyledClose.js';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.tooltip_modal.close';
|
|
12
12
|
const StyledTooltipModalClose = styled(StyledClose).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.15'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipModalClose",
|
|
17
17
|
componentId: "sc-1h2ke3q-0"
|
|
18
|
-
})(["top:", "px;", ":", ";
|
|
18
|
+
})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
19
|
StyledTooltipModalClose.defaultProps = {
|
|
20
20
|
theme: DEFAULT_THEME
|
|
21
21
|
};
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_modal.footer';
|
|
11
11
|
const StyledTooltipModalFooter = 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.15'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipModalFooter",
|
|
16
16
|
componentId: "sc-fm36a9-0"
|
|
@@ -11,7 +11,7 @@ import { StyledFooterItem } from './StyledFooterItem.js';
|
|
|
11
11
|
const COMPONENT_ID = 'modals.tooltip_modal.footer_item';
|
|
12
12
|
const StyledTooltipModalFooterItem = styled(StyledFooterItem).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.15'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipModalFooterItem",
|
|
17
17
|
componentId: "sc-1nahj6p-0"
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_modal.title';
|
|
11
11
|
const sizeStyles = props => `
|
|
@@ -16,11 +16,19 @@ const sizeStyles = props => `
|
|
|
16
16
|
`;
|
|
17
17
|
const StyledTooltipModalTitle = styled.div.attrs({
|
|
18
18
|
'data-garden-id': COMPONENT_ID,
|
|
19
|
-
'data-garden-version': '9.0.0-next.
|
|
19
|
+
'data-garden-version': '9.0.0-next.15'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledTooltipModalTitle",
|
|
22
22
|
componentId: "sc-11xjgjs-0"
|
|
23
|
-
})(["margin:0;color:", ";font-weight:", ";", ";", ";"],
|
|
23
|
+
})(["margin:0;color:", ";font-weight:", ";", ";", ";"], _ref => {
|
|
24
|
+
let {
|
|
25
|
+
theme
|
|
26
|
+
} = _ref;
|
|
27
|
+
return getColor({
|
|
28
|
+
variable: 'foreground.default',
|
|
29
|
+
theme
|
|
30
|
+
});
|
|
31
|
+
}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
24
32
|
StyledTooltipModalTitle.defaultProps = {
|
|
25
33
|
theme: DEFAULT_THEME
|
|
26
34
|
};
|
package/dist/index.cjs.js
CHANGED
|
@@ -64,7 +64,7 @@ const animationStyles$1 = props => {
|
|
|
64
64
|
};
|
|
65
65
|
const StyledBackdrop = styled__default.default.div.attrs({
|
|
66
66
|
'data-garden-id': COMPONENT_ID$j,
|
|
67
|
-
'data-garden-version': '9.0.0-next.
|
|
67
|
+
'data-garden-version': '9.0.0-next.15'
|
|
68
68
|
}).withConfig({
|
|
69
69
|
displayName: "StyledBackdrop",
|
|
70
70
|
componentId: "sc-mzdjpo-0"
|
|
@@ -95,7 +95,7 @@ StyledBackdrop.propTypes = {
|
|
|
95
95
|
const COMPONENT_ID$i = 'modals.body';
|
|
96
96
|
const StyledBody = styled__default.default.div.attrs({
|
|
97
97
|
'data-garden-id': COMPONENT_ID$i,
|
|
98
|
-
'data-garden-version': '9.0.0-next.
|
|
98
|
+
'data-garden-version': '9.0.0-next.15'
|
|
99
99
|
}).withConfig({
|
|
100
100
|
displayName: "StyledBody",
|
|
101
101
|
componentId: "sc-14rzecg-0"
|
|
@@ -120,7 +120,7 @@ const BASE_MULTIPLIERS$1 = {
|
|
|
120
120
|
};
|
|
121
121
|
const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
122
122
|
'data-garden-id': COMPONENT_ID$h,
|
|
123
|
-
'data-garden-version': '9.0.0-next.
|
|
123
|
+
'data-garden-version': '9.0.0-next.15'
|
|
124
124
|
}).withConfig({
|
|
125
125
|
displayName: "StyledClose",
|
|
126
126
|
componentId: "sc-iseudj-0"
|
|
@@ -132,7 +132,7 @@ StyledClose.defaultProps = {
|
|
|
132
132
|
const COMPONENT_ID$g = 'modals.footer';
|
|
133
133
|
const StyledFooter = styled__default.default.div.attrs({
|
|
134
134
|
'data-garden-id': COMPONENT_ID$g,
|
|
135
|
-
'data-garden-version': '9.0.0-next.
|
|
135
|
+
'data-garden-version': '9.0.0-next.15'
|
|
136
136
|
}).withConfig({
|
|
137
137
|
displayName: "StyledFooter",
|
|
138
138
|
componentId: "sc-d8pfdu-0"
|
|
@@ -144,7 +144,7 @@ StyledFooter.defaultProps = {
|
|
|
144
144
|
const COMPONENT_ID$f = 'modals.footer_item';
|
|
145
145
|
const StyledFooterItem = styled__default.default.span.attrs({
|
|
146
146
|
'data-garden-id': COMPONENT_ID$f,
|
|
147
|
-
'data-garden-version': '9.0.0-next.
|
|
147
|
+
'data-garden-version': '9.0.0-next.15'
|
|
148
148
|
}).withConfig({
|
|
149
149
|
displayName: "StyledFooterItem",
|
|
150
150
|
componentId: "sc-1mb76hl-0"
|
|
@@ -154,7 +154,7 @@ StyledFooterItem.defaultProps = {
|
|
|
154
154
|
};
|
|
155
155
|
|
|
156
156
|
const COMPONENT_ID$e = 'modals.header';
|
|
157
|
-
const colorStyles$
|
|
157
|
+
const colorStyles$2 = _ref => {
|
|
158
158
|
let {
|
|
159
159
|
isDanger,
|
|
160
160
|
theme
|
|
@@ -171,11 +171,11 @@ const colorStyles$1 = _ref => {
|
|
|
171
171
|
};
|
|
172
172
|
const StyledHeader = styled__default.default.div.attrs({
|
|
173
173
|
'data-garden-id': COMPONENT_ID$e,
|
|
174
|
-
'data-garden-version': '9.0.0-next.
|
|
174
|
+
'data-garden-version': '9.0.0-next.15'
|
|
175
175
|
}).withConfig({
|
|
176
176
|
displayName: "StyledHeader",
|
|
177
177
|
componentId: "sc-1787r9v-0"
|
|
178
|
-
})(["display:block;position:", ";margin:0;border-bottom:", ";padding:", ";", " line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$
|
|
178
|
+
})(["display:block;position:", ";margin:0;border-bottom:", ";padding:", ";", " line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isDanger && 'relative', props => props.theme.borders.sm, props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS$1.size + BASE_MULTIPLIERS$1.side + 2)}px;`, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
|
|
179
179
|
StyledHeader.defaultProps = {
|
|
180
180
|
theme: reactTheming.DEFAULT_THEME
|
|
181
181
|
};
|
|
@@ -224,12 +224,12 @@ const animationStyles = props => {
|
|
|
224
224
|
}
|
|
225
225
|
return '';
|
|
226
226
|
};
|
|
227
|
-
const colorStyles = _ref => {
|
|
227
|
+
const colorStyles$1 = _ref => {
|
|
228
228
|
let {
|
|
229
229
|
theme
|
|
230
230
|
} = _ref;
|
|
231
|
-
const offsetY = `${theme.space.base *
|
|
232
|
-
const blurRadius = `${theme.space.base *
|
|
231
|
+
const offsetY = `${theme.space.base * 5}px`;
|
|
232
|
+
const blurRadius = `${theme.space.base * 7}px`;
|
|
233
233
|
const shadowColor = reactTheming.getColor({
|
|
234
234
|
theme,
|
|
235
235
|
hue: 'neutralHue',
|
|
@@ -257,11 +257,11 @@ const sizeStyles$1 = props => {
|
|
|
257
257
|
};
|
|
258
258
|
const StyledModal = styled__default.default.div.attrs({
|
|
259
259
|
'data-garden-id': COMPONENT_ID$d,
|
|
260
|
-
'data-garden-version': '9.0.0-next.
|
|
260
|
+
'data-garden-version': '9.0.0-next.15'
|
|
261
261
|
}).withConfig({
|
|
262
262
|
displayName: "StyledModal",
|
|
263
263
|
componentId: "sc-1pe1axu-0"
|
|
264
|
-
})(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border:", ";border-radius:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, colorStyles, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
264
|
+
})(["display:flex;position:fixed;flex-direction:column;animation-delay:0.01s;margin:", ";border:", ";border-radius:", ";min-height:60px;max-height:calc(100vh - ", "px);overflow:auto;direction:", ";", ";", ";", ";&:focus{outline:none;}@media (max-height:399px){top:", "px;bottom:auto;margin-bottom:", "px;max-height:none;}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){right:", ";bottom:", ";transform:", ";}", ";"], props => props.isCentered ? '0' : `${props.theme.space.base * 12}px`, props => props.theme.borders.sm, props => props.theme.borderRadii.md, props => props.theme.space.base * 24, props => props.theme.rtl && 'rtl', animationStyles, sizeStyles$1, colorStyles$1, props => props.theme.space.base * 6, props => props.theme.space.base * 6, props => props.isCentered && '50%', props => props.isCentered && '50%', props => props.isCentered && 'translate(50%, 50%)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
265
265
|
StyledModal.propTypes = {
|
|
266
266
|
isLarge: PropTypes__default.default.bool,
|
|
267
267
|
isAnimated: PropTypes__default.default.bool
|
|
@@ -273,7 +273,7 @@ StyledModal.defaultProps = {
|
|
|
273
273
|
const COMPONENT_ID$c = 'modals.tooltip_modal.backdrop';
|
|
274
274
|
const StyledTooltipModalBackdrop = styled__default.default.div.attrs({
|
|
275
275
|
'data-garden-id': COMPONENT_ID$c,
|
|
276
|
-
'data-garden-version': '9.0.0-next.
|
|
276
|
+
'data-garden-version': '9.0.0-next.15'
|
|
277
277
|
}).withConfig({
|
|
278
278
|
displayName: "StyledTooltipModalBackdrop",
|
|
279
279
|
componentId: "sc-1yaomgq-0"
|
|
@@ -300,7 +300,7 @@ StyledTooltipWrapper.defaultProps = {
|
|
|
300
300
|
const COMPONENT_ID$b = 'modals.tooltip_modal';
|
|
301
301
|
const StyledTooltipModal = styled__default.default.div.attrs(props => ({
|
|
302
302
|
'data-garden-id': COMPONENT_ID$b,
|
|
303
|
-
'data-garden-version': '9.0.0-next.
|
|
303
|
+
'data-garden-version': '9.0.0-next.15',
|
|
304
304
|
className: props.isAnimated && 'is-animated'
|
|
305
305
|
})).withConfig({
|
|
306
306
|
displayName: "StyledTooltipModal",
|
|
@@ -329,11 +329,19 @@ const sizeStyles = props => `
|
|
|
329
329
|
`;
|
|
330
330
|
const StyledTooltipModalTitle = styled__default.default.div.attrs({
|
|
331
331
|
'data-garden-id': COMPONENT_ID$a,
|
|
332
|
-
'data-garden-version': '9.0.0-next.
|
|
332
|
+
'data-garden-version': '9.0.0-next.15'
|
|
333
333
|
}).withConfig({
|
|
334
334
|
displayName: "StyledTooltipModalTitle",
|
|
335
335
|
componentId: "sc-11xjgjs-0"
|
|
336
|
-
})(["margin:0;color:", ";font-weight:", ";", ";", ";"],
|
|
336
|
+
})(["margin:0;color:", ";font-weight:", ";", ";", ";"], _ref => {
|
|
337
|
+
let {
|
|
338
|
+
theme
|
|
339
|
+
} = _ref;
|
|
340
|
+
return reactTheming.getColor({
|
|
341
|
+
variable: 'foreground.default',
|
|
342
|
+
theme
|
|
343
|
+
});
|
|
344
|
+
}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
337
345
|
StyledTooltipModalTitle.defaultProps = {
|
|
338
346
|
theme: reactTheming.DEFAULT_THEME
|
|
339
347
|
};
|
|
@@ -341,11 +349,19 @@ StyledTooltipModalTitle.defaultProps = {
|
|
|
341
349
|
const COMPONENT_ID$9 = 'modals.tooltip_modal.body';
|
|
342
350
|
const StyledTooltipModalBody = styled__default.default.div.attrs({
|
|
343
351
|
'data-garden-id': COMPONENT_ID$9,
|
|
344
|
-
'data-garden-version': '9.0.0-next.
|
|
352
|
+
'data-garden-version': '9.0.0-next.15'
|
|
345
353
|
}).withConfig({
|
|
346
354
|
displayName: "StyledTooltipModalBody",
|
|
347
355
|
componentId: "sc-195dkzj-0"
|
|
348
|
-
})(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md),
|
|
356
|
+
})(["display:block;margin:0;padding-top:", "px;line-height:", ";color:", ";font-size:", ";", ";"], props => props.theme.space.base * 1.5, props => reactTheming.getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), _ref => {
|
|
357
|
+
let {
|
|
358
|
+
theme
|
|
359
|
+
} = _ref;
|
|
360
|
+
return reactTheming.getColor({
|
|
361
|
+
variable: 'foreground.default',
|
|
362
|
+
theme
|
|
363
|
+
});
|
|
364
|
+
}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
349
365
|
StyledTooltipModalBody.defaultProps = {
|
|
350
366
|
theme: reactTheming.DEFAULT_THEME
|
|
351
367
|
};
|
|
@@ -353,7 +369,7 @@ StyledTooltipModalBody.defaultProps = {
|
|
|
353
369
|
const COMPONENT_ID$8 = 'modals.tooltip_modal.footer';
|
|
354
370
|
const StyledTooltipModalFooter = styled__default.default.div.attrs({
|
|
355
371
|
'data-garden-id': COMPONENT_ID$8,
|
|
356
|
-
'data-garden-version': '9.0.0-next.
|
|
372
|
+
'data-garden-version': '9.0.0-next.15'
|
|
357
373
|
}).withConfig({
|
|
358
374
|
displayName: "StyledTooltipModalFooter",
|
|
359
375
|
componentId: "sc-fm36a9-0"
|
|
@@ -365,7 +381,7 @@ StyledTooltipModalFooter.defaultProps = {
|
|
|
365
381
|
const COMPONENT_ID$7 = 'modals.tooltip_modal.footer_item';
|
|
366
382
|
const StyledTooltipModalFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
367
383
|
'data-garden-id': COMPONENT_ID$7,
|
|
368
|
-
'data-garden-version': '9.0.0-next.
|
|
384
|
+
'data-garden-version': '9.0.0-next.15'
|
|
369
385
|
}).withConfig({
|
|
370
386
|
displayName: "StyledTooltipModalFooterItem",
|
|
371
387
|
componentId: "sc-1nahj6p-0"
|
|
@@ -377,37 +393,52 @@ StyledTooltipModalFooterItem.defaultProps = {
|
|
|
377
393
|
const COMPONENT_ID$6 = 'modals.tooltip_modal.close';
|
|
378
394
|
const StyledTooltipModalClose = styled__default.default(StyledClose).attrs({
|
|
379
395
|
'data-garden-id': COMPONENT_ID$6,
|
|
380
|
-
'data-garden-version': '9.0.0-next.
|
|
396
|
+
'data-garden-version': '9.0.0-next.15'
|
|
381
397
|
}).withConfig({
|
|
382
398
|
displayName: "StyledTooltipModalClose",
|
|
383
399
|
componentId: "sc-1h2ke3q-0"
|
|
384
|
-
})(["top:", "px;", ":", ";
|
|
400
|
+
})(["top:", "px;", ":", ";", ";"], props => props.theme.space.base * 3.5, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * 3}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
385
401
|
StyledTooltipModalClose.defaultProps = {
|
|
386
402
|
theme: reactTheming.DEFAULT_THEME
|
|
387
403
|
};
|
|
388
404
|
|
|
389
405
|
const COMPONENT_ID$5 = 'modals.drawer_modal';
|
|
390
406
|
const DRAWER_WIDTH = 380;
|
|
391
|
-
const
|
|
392
|
-
|
|
407
|
+
const colorStyles = _ref => {
|
|
408
|
+
let {
|
|
393
409
|
theme
|
|
394
|
-
} =
|
|
395
|
-
const {
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
410
|
+
} = _ref;
|
|
411
|
+
const offsetY = `${theme.space.base * 5}px`;
|
|
412
|
+
const blurRadius = `${theme.space.base * 7}px`;
|
|
413
|
+
const shadowColor = reactTheming.getColor({
|
|
414
|
+
theme,
|
|
415
|
+
hue: 'neutralHue',
|
|
416
|
+
shade: 1200,
|
|
417
|
+
light: {
|
|
418
|
+
transparency: theme.opacity[200]
|
|
419
|
+
},
|
|
420
|
+
dark: {
|
|
421
|
+
transparency: theme.opacity[1000]
|
|
422
|
+
}
|
|
423
|
+
});
|
|
424
|
+
const shadow = theme.shadows.lg(offsetY, blurRadius, shadowColor);
|
|
425
|
+
const borderColor = reactTheming.getColor({
|
|
426
|
+
theme,
|
|
427
|
+
variable: 'border.default'
|
|
428
|
+
});
|
|
429
|
+
const backgroundColor = reactTheming.getColor({
|
|
430
|
+
theme,
|
|
431
|
+
variable: 'background.raised'
|
|
432
|
+
});
|
|
433
|
+
return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";"], borderColor, shadow, backgroundColor);
|
|
403
434
|
};
|
|
404
435
|
const StyledDrawer = styled__default.default.div.attrs({
|
|
405
436
|
'data-garden-id': COMPONENT_ID$5,
|
|
406
|
-
'data-garden-version': '9.0.0-next.
|
|
437
|
+
'data-garden-version': '9.0.0-next.15'
|
|
407
438
|
}).withConfig({
|
|
408
439
|
displayName: "StyledDrawer",
|
|
409
440
|
componentId: "sc-zp66t3-0"
|
|
410
|
-
})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;
|
|
441
|
+
})(["display:flex;position:fixed;top:0;", ":0;flex-direction:column;z-index:500;", ":", ";width:", "px;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-drawer-transition-enter{transform:translateX(", "px);}&.garden-drawer-transition-enter-active{transform:translateX(0);transition:transform 0.25s ease-in-out;}&.garden-drawer-transition-exit-active{transform:translateX(", "px);transition:transform 0.25s ease-in-out;}&:focus{outline:none;}", " ", ";"], props => props.theme.rtl ? 'left' : 'right', props => props.theme.rtl ? 'border-right' : 'border-left', props => props.theme.borders.sm, DRAWER_WIDTH, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, props => props.theme.rtl ? -DRAWER_WIDTH : DRAWER_WIDTH, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
411
442
|
StyledDrawer.defaultProps = {
|
|
412
443
|
theme: reactTheming.DEFAULT_THEME
|
|
413
444
|
};
|
|
@@ -420,7 +451,7 @@ const BASE_MULTIPLIERS = {
|
|
|
420
451
|
};
|
|
421
452
|
const StyledDrawerClose = styled__default.default(StyledClose).attrs({
|
|
422
453
|
'data-garden-id': COMPONENT_ID$4,
|
|
423
|
-
'data-garden-version': '9.0.0-next.
|
|
454
|
+
'data-garden-version': '9.0.0-next.15'
|
|
424
455
|
}).withConfig({
|
|
425
456
|
displayName: "StyledDrawerClose",
|
|
426
457
|
componentId: "sc-1a0xt3x-0"
|
|
@@ -432,7 +463,7 @@ StyledDrawerClose.defaultProps = {
|
|
|
432
463
|
const COMPONENT_ID$3 = 'modals.drawer_modal.header';
|
|
433
464
|
const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
|
|
434
465
|
'data-garden-id': COMPONENT_ID$3,
|
|
435
|
-
'data-garden-version': '9.0.0-next.
|
|
466
|
+
'data-garden-version': '9.0.0-next.15'
|
|
436
467
|
}).withConfig({
|
|
437
468
|
displayName: "StyledDrawerHeader",
|
|
438
469
|
componentId: "sc-y4mgkj-0"
|
|
@@ -444,7 +475,7 @@ StyledDrawerHeader.defaultProps = {
|
|
|
444
475
|
const COMPONENT_ID$2 = 'modals.drawer_modal.body';
|
|
445
476
|
const StyledDrawerBody = styled__default.default(StyledBody).attrs({
|
|
446
477
|
'data-garden-id': COMPONENT_ID$2,
|
|
447
|
-
'data-garden-version': '9.0.0-next.
|
|
478
|
+
'data-garden-version': '9.0.0-next.15'
|
|
448
479
|
}).withConfig({
|
|
449
480
|
displayName: "StyledDrawerBody",
|
|
450
481
|
componentId: "sc-13qufyn-0"
|
|
@@ -456,11 +487,19 @@ StyledDrawerBody.defaultProps = {
|
|
|
456
487
|
const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
|
|
457
488
|
const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
458
489
|
'data-garden-id': COMPONENT_ID$1,
|
|
459
|
-
'data-garden-version': '9.0.0-next.
|
|
490
|
+
'data-garden-version': '9.0.0-next.15'
|
|
460
491
|
}).withConfig({
|
|
461
492
|
displayName: "StyledDrawerFooter",
|
|
462
493
|
componentId: "sc-kc7e6p-0"
|
|
463
|
-
})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"],
|
|
494
|
+
})(["display:flex;flex-shrink:0;justify-content:flex-end;border-top:", ";padding:", "px;", ";"], _ref => {
|
|
495
|
+
let {
|
|
496
|
+
theme
|
|
497
|
+
} = _ref;
|
|
498
|
+
return `${theme.borders.sm} ${reactTheming.getColor({
|
|
499
|
+
theme,
|
|
500
|
+
variable: 'border.subtle'
|
|
501
|
+
})}`;
|
|
502
|
+
}, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
464
503
|
StyledDrawerFooter.defaultProps = {
|
|
465
504
|
theme: reactTheming.DEFAULT_THEME
|
|
466
505
|
};
|
|
@@ -468,7 +507,7 @@ StyledDrawerFooter.defaultProps = {
|
|
|
468
507
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
469
508
|
const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
470
509
|
'data-garden-id': COMPONENT_ID,
|
|
471
|
-
'data-garden-version': '9.0.0-next.
|
|
510
|
+
'data-garden-version': '9.0.0-next.15'
|
|
472
511
|
}).withConfig({
|
|
473
512
|
displayName: "StyledDrawerFooterItem",
|
|
474
513
|
componentId: "sc-m2yul4-0"
|
|
@@ -792,7 +831,8 @@ const CloseComponent$1 = React.forwardRef((props, ref) => {
|
|
|
792
831
|
...props,
|
|
793
832
|
'aria-label': ariaLabel
|
|
794
833
|
}), {
|
|
795
|
-
ref: ref
|
|
834
|
+
ref: ref,
|
|
835
|
+
size: "small"
|
|
796
836
|
}), React__namespace.default.createElement(SvgXStroke, null));
|
|
797
837
|
});
|
|
798
838
|
CloseComponent$1.displayName = 'TooltipModal.Close';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-modals",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.15",
|
|
4
4
|
"description": "Components relating to modals in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"@floating-ui/react-dom": "^2.0.0",
|
|
25
25
|
"@zendeskgarden/container-modal": "^1.0.15",
|
|
26
26
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
27
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
27
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.15",
|
|
28
28
|
"dom-helpers": "^5.1.0",
|
|
29
29
|
"prop-types": "^15.5.7",
|
|
30
30
|
"react-merge-refs": "^2.0.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react-transition-group": "4.4.10",
|
|
41
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
41
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.15",
|
|
42
42
|
"@zendeskgarden/svg-icons": "7.1.1"
|
|
43
43
|
},
|
|
44
44
|
"keywords": [
|
|
@@ -50,5 +50,6 @@
|
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
|
-
"zendeskgarden:src": "src/index.ts"
|
|
53
|
+
"zendeskgarden:src": "src/index.ts",
|
|
54
|
+
"gitHead": "f165ebfd3f53d4cbc2ac788bb3c1cd07348a16de"
|
|
54
55
|
}
|