@zendeskgarden/react-modals 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.
- package/dist/esm/styled/StyledBackdrop.js +2 -5
- package/dist/esm/styled/StyledBody.js +2 -5
- package/dist/esm/styled/StyledClose.js +2 -5
- package/dist/esm/styled/StyledDangerIcon.js +0 -4
- package/dist/esm/styled/StyledDrawer.js +2 -5
- package/dist/esm/styled/StyledDrawerBody.js +2 -5
- package/dist/esm/styled/StyledDrawerClose.js +2 -5
- package/dist/esm/styled/StyledDrawerFooter.js +2 -5
- package/dist/esm/styled/StyledDrawerFooterItem.js +2 -5
- package/dist/esm/styled/StyledDrawerHeader.js +2 -5
- package/dist/esm/styled/StyledFooter.js +2 -5
- package/dist/esm/styled/StyledFooterItem.js +2 -5
- package/dist/esm/styled/StyledHeader.js +2 -5
- package/dist/esm/styled/StyledModal.js +2 -5
- package/dist/esm/styled/StyledTooltipDialog.js +2 -5
- package/dist/esm/styled/StyledTooltipDialogBackdrop.js +2 -5
- package/dist/esm/styled/StyledTooltipDialogBody.js +2 -5
- package/dist/esm/styled/StyledTooltipDialogClose.js +2 -5
- package/dist/esm/styled/StyledTooltipDialogFooter.js +2 -5
- package/dist/esm/styled/StyledTooltipDialogFooterItem.js +2 -5
- package/dist/esm/styled/StyledTooltipDialogTitle.js +2 -5
- package/dist/esm/styled/StyledTooltipWrapper.js +1 -4
- package/dist/index.cjs.js +20 -86
- package/package.json +4 -4
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import styled, { keyframes, css } from 'styled-components';
|
|
9
|
-
import { getColor, retrieveComponentStyles
|
|
9
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'modals.backdrop';
|
|
12
12
|
const animationName = keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
|
|
@@ -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.25'
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledBackdrop",
|
|
24
24
|
componentId: "sc-mzdjpo-0"
|
|
@@ -38,9 +38,6 @@ const StyledBackdrop = styled.div.attrs({
|
|
|
38
38
|
}
|
|
39
39
|
});
|
|
40
40
|
}, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
41
|
-
StyledBackdrop.defaultProps = {
|
|
42
|
-
theme: DEFAULT_THEME
|
|
43
|
-
};
|
|
44
41
|
StyledBackdrop.propTypes = {
|
|
45
42
|
isCentered: PropTypes.bool,
|
|
46
43
|
isAnimated: PropTypes.bool
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getLineHeight, getColor, retrieveComponentStyles
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledBody",
|
|
16
16
|
componentId: "sc-14rzecg-0"
|
|
@@ -23,8 +23,5 @@ const StyledBody = styled.div.attrs({
|
|
|
23
23
|
variable: 'foreground.default'
|
|
24
24
|
});
|
|
25
25
|
}, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledBody.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledBody };
|
|
@@ -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 { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { IconButton } from '@zendeskgarden/react-buttons';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'modals.close';
|
|
@@ -16,13 +16,10 @@ 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.25'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledClose",
|
|
22
22
|
componentId: "sc-iseudj-0"
|
|
23
23
|
})(["position:absolute;top:", "px;", ":", ";", ";"], props => props.theme.space.base * BASE_MULTIPLIERS.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
24
|
-
StyledClose.defaultProps = {
|
|
25
|
-
theme: DEFAULT_THEME
|
|
26
|
-
};
|
|
27
24
|
|
|
28
25
|
export { BASE_MULTIPLIERS, StyledClose };
|
|
@@ -5,15 +5,11 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
8
|
import SvgAlertErrorStroke from '../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
|
|
10
9
|
|
|
11
10
|
const StyledDangerIcon = styled(SvgAlertErrorStroke).withConfig({
|
|
12
11
|
displayName: "StyledDangerIcon",
|
|
13
12
|
componentId: "sc-1kwbb39-0"
|
|
14
13
|
})(["position:absolute;top:", "px;", ":", ";"], props => props.theme.space.base * 5.5, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 4}px`);
|
|
15
|
-
StyledDangerIcon.defaultProps = {
|
|
16
|
-
theme: DEFAULT_THEME
|
|
17
|
-
};
|
|
18
14
|
|
|
19
15
|
export { StyledDangerIcon };
|
|
@@ -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 } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.drawer_modal';
|
|
11
11
|
const DRAWER_WIDTH = 380;
|
|
@@ -32,13 +32,10 @@ const colorStyles = _ref => {
|
|
|
32
32
|
};
|
|
33
33
|
const StyledDrawer = styled.div.attrs({
|
|
34
34
|
'data-garden-id': COMPONENT_ID,
|
|
35
|
-
'data-garden-version': '9.0.0-next.
|
|
35
|
+
'data-garden-version': '9.0.0-next.25'
|
|
36
36
|
}).withConfig({
|
|
37
37
|
displayName: "StyledDrawer",
|
|
38
38
|
componentId: "sc-zp66t3-0"
|
|
39
39
|
})(["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));
|
|
40
|
-
StyledDrawer.defaultProps = {
|
|
41
|
-
theme: DEFAULT_THEME
|
|
42
|
-
};
|
|
43
40
|
|
|
44
41
|
export { StyledDrawer };
|
|
@@ -5,19 +5,16 @@
|
|
|
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
|
import { StyledBody } from './StyledBody.js';
|
|
10
10
|
|
|
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.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledDrawerBody",
|
|
17
17
|
componentId: "sc-13qufyn-0"
|
|
18
18
|
})(["padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledDrawerBody.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledDrawerBody };
|
|
@@ -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 { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledClose, BASE_MULTIPLIERS as BASE_MULTIPLIERS$1 } from './StyledClose.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'modals.drawer_modal.close';
|
|
@@ -16,13 +16,10 @@ 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.25'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledDrawerClose",
|
|
22
22
|
componentId: "sc-1a0xt3x-0"
|
|
23
23
|
})(["", ":", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
24
|
-
StyledDrawerClose.defaultProps = {
|
|
25
|
-
theme: DEFAULT_THEME
|
|
26
|
-
};
|
|
27
24
|
|
|
28
25
|
export { BASE_MULTIPLIERS, StyledDrawerClose };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } 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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledDrawerFooter",
|
|
16
16
|
componentId: "sc-kc7e6p-0"
|
|
@@ -23,8 +23,5 @@ const StyledDrawerFooter = styled.div.attrs({
|
|
|
23
23
|
variable: 'border.subtle'
|
|
24
24
|
})}`;
|
|
25
25
|
}, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledDrawerFooter.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledDrawerFooter };
|
|
@@ -5,19 +5,16 @@
|
|
|
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
|
import { StyledFooterItem } from './StyledFooterItem.js';
|
|
10
10
|
|
|
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.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledDrawerFooterItem",
|
|
17
17
|
componentId: "sc-m2yul4-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledDrawerFooterItem.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledDrawerFooterItem };
|
|
@@ -5,20 +5,17 @@
|
|
|
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
|
import { StyledHeader } from './StyledHeader.js';
|
|
10
10
|
import { BASE_MULTIPLIERS } from './StyledDrawerClose.js';
|
|
11
11
|
|
|
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.25'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledDrawerHeader",
|
|
18
18
|
componentId: "sc-y4mgkj-0"
|
|
19
19
|
})(["padding:", "px;", " ", ";"], props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledDrawerHeader.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledDrawerHeader };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getColor, retrieveComponentStyles
|
|
8
|
+
import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooter",
|
|
16
16
|
componentId: "sc-d8pfdu-0"
|
|
@@ -18,8 +18,5 @@ const StyledFooter = styled.div.attrs({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'border.default'
|
|
20
20
|
})}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledFooter.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledFooter };
|
|
@@ -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 = '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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledFooterItem",
|
|
16
16
|
componentId: "sc-1mb76hl-0"
|
|
17
17
|
})(["display:flex;margin-", ":", "px;min-width:0;&:first-child{margin-", ":0;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 5, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledFooterItem.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledFooterItem };
|
|
@@ -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 { getLineHeight, retrieveComponentStyles,
|
|
8
|
+
import { getLineHeight, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { BASE_MULTIPLIERS } from './StyledClose.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'modals.header';
|
|
@@ -26,13 +26,10 @@ 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.25'
|
|
30
30
|
}).withConfig({
|
|
31
31
|
displayName: "StyledHeader",
|
|
32
32
|
componentId: "sc-1787r9v-0"
|
|
33
33
|
})(["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.size + BASE_MULTIPLIERS.side + 2)}px;`, props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
34
|
-
StyledHeader.defaultProps = {
|
|
35
|
-
theme: DEFAULT_THEME
|
|
36
|
-
};
|
|
37
34
|
|
|
38
35
|
export { StyledHeader };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import styled, { keyframes, css } from 'styled-components';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor, mediaQuery } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'modals.modal';
|
|
12
12
|
const animationName = keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
|
|
@@ -42,7 +42,7 @@ const sizeStyles = props => {
|
|
|
42
42
|
};
|
|
43
43
|
const StyledModal = styled.div.attrs({
|
|
44
44
|
'data-garden-id': COMPONENT_ID,
|
|
45
|
-
'data-garden-version': '9.0.0-next.
|
|
45
|
+
'data-garden-version': '9.0.0-next.25'
|
|
46
46
|
}).withConfig({
|
|
47
47
|
displayName: "StyledModal",
|
|
48
48
|
componentId: "sc-1pe1axu-0"
|
|
@@ -51,8 +51,5 @@ StyledModal.propTypes = {
|
|
|
51
51
|
isLarge: PropTypes.bool,
|
|
52
52
|
isAnimated: PropTypes.bool
|
|
53
53
|
};
|
|
54
|
-
StyledModal.defaultProps = {
|
|
55
|
-
theme: DEFAULT_THEME
|
|
56
|
-
};
|
|
57
54
|
|
|
58
55
|
export { StyledModal };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { arrowStyles, getArrowPosition, retrieveComponentStyles
|
|
8
|
+
import { arrowStyles, getArrowPosition, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_dialog';
|
|
11
11
|
const StyledTooltipDialog = 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.25',
|
|
14
14
|
className: props.isAnimated && 'is-animated'
|
|
15
15
|
})).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialog",
|
|
@@ -26,8 +26,5 @@ const StyledTooltipDialog = styled.div.attrs(props => ({
|
|
|
26
26
|
}
|
|
27
27
|
return props.hasArrow && computedArrowStyles;
|
|
28
28
|
}, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
29
|
-
StyledTooltipDialog.defaultProps = {
|
|
30
|
-
theme: DEFAULT_THEME
|
|
31
|
-
};
|
|
32
29
|
|
|
33
30
|
export { StyledTooltipDialog };
|
|
@@ -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 = 'modals.tooltip_dialog.backdrop';
|
|
11
11
|
const StyledTooltipDialogBackdrop = 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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipDialogBackdrop",
|
|
16
16
|
componentId: "sc-zrk625-0"
|
|
17
17
|
})(["position:fixed;inset:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledTooltipDialogBackdrop.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledTooltipDialogBackdrop };
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { getLineHeight, getColor, retrieveComponentStyles
|
|
8
|
+
import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_dialog.body';
|
|
11
11
|
const StyledTooltipDialogBody = 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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipDialogBody",
|
|
16
16
|
componentId: "sc-132lcoq-0"
|
|
@@ -23,8 +23,5 @@ const StyledTooltipDialogBody = styled.div.attrs({
|
|
|
23
23
|
theme
|
|
24
24
|
});
|
|
25
25
|
}, props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledTooltipDialogBody.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledTooltipDialogBody };
|
|
@@ -5,19 +5,16 @@
|
|
|
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
|
import { StyledClose } from './StyledClose.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'modals.tooltip_dialog.close';
|
|
12
12
|
const StyledTooltipDialogClose = 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.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialogClose",
|
|
17
17
|
componentId: "sc-18xlgfi-0"
|
|
18
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
|
-
StyledTooltipDialogClose.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledTooltipDialogClose };
|
|
@@ -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 = 'modals.tooltip_dialog.footer';
|
|
11
11
|
const StyledTooltipDialogFooter = 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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledTooltipDialogFooter",
|
|
16
16
|
componentId: "sc-kjomsm-0"
|
|
17
17
|
})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledTooltipDialogFooter.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledTooltipDialogFooter };
|
|
@@ -5,19 +5,16 @@
|
|
|
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
|
import { StyledFooterItem } from './StyledFooterItem.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'modals.tooltip_dialog.footer_item';
|
|
12
12
|
const StyledTooltipDialogFooterItem = 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.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialogFooterItem",
|
|
17
17
|
componentId: "sc-u2rmo8-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledTooltipDialogFooterItem.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledTooltipDialogFooterItem };
|
|
@@ -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 { getColor, retrieveComponentStyles,
|
|
8
|
+
import { getColor, retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'modals.tooltip_dialog.title';
|
|
11
11
|
const sizeStyles = props => `
|
|
@@ -16,7 +16,7 @@ const sizeStyles = props => `
|
|
|
16
16
|
`;
|
|
17
17
|
const StyledTooltipDialogTitle = 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.25'
|
|
20
20
|
}).withConfig({
|
|
21
21
|
displayName: "StyledTooltipDialogTitle",
|
|
22
22
|
componentId: "sc-1rceixg-0"
|
|
@@ -29,8 +29,5 @@ const StyledTooltipDialogTitle = styled.div.attrs({
|
|
|
29
29
|
theme
|
|
30
30
|
});
|
|
31
31
|
}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
32
|
-
StyledTooltipDialogTitle.defaultProps = {
|
|
33
|
-
theme: DEFAULT_THEME
|
|
34
|
-
};
|
|
35
32
|
|
|
36
33
|
export { StyledTooltipDialogTitle };
|
|
@@ -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 { menuStyles, getMenuPosition
|
|
8
|
+
import { menuStyles, getMenuPosition } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const StyledTooltipWrapper = styled.div.attrs(props => ({
|
|
11
11
|
className: props.isAnimated && 'is-animated'
|
|
@@ -18,8 +18,5 @@ const StyledTooltipWrapper = styled.div.attrs(props => ({
|
|
|
18
18
|
zIndex: props.zIndex,
|
|
19
19
|
animationModifier: '.is-animated'
|
|
20
20
|
}));
|
|
21
|
-
StyledTooltipWrapper.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledTooltipWrapper };
|
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.25'
|
|
68
68
|
}).withConfig({
|
|
69
69
|
displayName: "StyledBackdrop",
|
|
70
70
|
componentId: "sc-mzdjpo-0"
|
|
@@ -84,9 +84,6 @@ const StyledBackdrop = styled__default.default.div.attrs({
|
|
|
84
84
|
}
|
|
85
85
|
});
|
|
86
86
|
}, props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', animationStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$j, props));
|
|
87
|
-
StyledBackdrop.defaultProps = {
|
|
88
|
-
theme: reactTheming.DEFAULT_THEME
|
|
89
|
-
};
|
|
90
87
|
StyledBackdrop.propTypes = {
|
|
91
88
|
isCentered: PropTypes__default.default.bool,
|
|
92
89
|
isAnimated: PropTypes__default.default.bool
|
|
@@ -95,7 +92,7 @@ StyledBackdrop.propTypes = {
|
|
|
95
92
|
const COMPONENT_ID$i = 'modals.body';
|
|
96
93
|
const StyledBody = styled__default.default.div.attrs({
|
|
97
94
|
'data-garden-id': COMPONENT_ID$i,
|
|
98
|
-
'data-garden-version': '9.0.0-next.
|
|
95
|
+
'data-garden-version': '9.0.0-next.25'
|
|
99
96
|
}).withConfig({
|
|
100
97
|
displayName: "StyledBody",
|
|
101
98
|
componentId: "sc-14rzecg-0"
|
|
@@ -108,9 +105,6 @@ const StyledBody = styled__default.default.div.attrs({
|
|
|
108
105
|
variable: 'foreground.default'
|
|
109
106
|
});
|
|
110
107
|
}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$i, props));
|
|
111
|
-
StyledBody.defaultProps = {
|
|
112
|
-
theme: reactTheming.DEFAULT_THEME
|
|
113
|
-
};
|
|
114
108
|
|
|
115
109
|
const COMPONENT_ID$h = 'modals.close';
|
|
116
110
|
const BASE_MULTIPLIERS$1 = {
|
|
@@ -120,19 +114,16 @@ const BASE_MULTIPLIERS$1 = {
|
|
|
120
114
|
};
|
|
121
115
|
const StyledClose = styled__default.default(reactButtons.IconButton).attrs({
|
|
122
116
|
'data-garden-id': COMPONENT_ID$h,
|
|
123
|
-
'data-garden-version': '9.0.0-next.
|
|
117
|
+
'data-garden-version': '9.0.0-next.25'
|
|
124
118
|
}).withConfig({
|
|
125
119
|
displayName: "StyledClose",
|
|
126
120
|
componentId: "sc-iseudj-0"
|
|
127
121
|
})(["position:absolute;top:", "px;", ":", ";", ";"], props => props.theme.space.base * BASE_MULTIPLIERS$1.top, props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS$1.side}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
|
|
128
|
-
StyledClose.defaultProps = {
|
|
129
|
-
theme: reactTheming.DEFAULT_THEME
|
|
130
|
-
};
|
|
131
122
|
|
|
132
123
|
const COMPONENT_ID$g = 'modals.footer';
|
|
133
124
|
const StyledFooter = styled__default.default.div.attrs({
|
|
134
125
|
'data-garden-id': COMPONENT_ID$g,
|
|
135
|
-
'data-garden-version': '9.0.0-next.
|
|
126
|
+
'data-garden-version': '9.0.0-next.25'
|
|
136
127
|
}).withConfig({
|
|
137
128
|
displayName: "StyledFooter",
|
|
138
129
|
componentId: "sc-d8pfdu-0"
|
|
@@ -140,21 +131,15 @@ const StyledFooter = styled__default.default.div.attrs({
|
|
|
140
131
|
theme: props.theme,
|
|
141
132
|
variable: 'border.default'
|
|
142
133
|
})}`, props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` : `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px ${props.theme.space.base * 8}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
|
|
143
|
-
StyledFooter.defaultProps = {
|
|
144
|
-
theme: reactTheming.DEFAULT_THEME
|
|
145
|
-
};
|
|
146
134
|
|
|
147
135
|
const COMPONENT_ID$f = 'modals.footer_item';
|
|
148
136
|
const StyledFooterItem = styled__default.default.span.attrs({
|
|
149
137
|
'data-garden-id': COMPONENT_ID$f,
|
|
150
|
-
'data-garden-version': '9.0.0-next.
|
|
138
|
+
'data-garden-version': '9.0.0-next.25'
|
|
151
139
|
}).withConfig({
|
|
152
140
|
displayName: "StyledFooterItem",
|
|
153
141
|
componentId: "sc-1mb76hl-0"
|
|
154
142
|
})(["display:flex;margin-", ":", "px;min-width:0;&:first-child{margin-", ":0;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 5, props => props.theme.rtl ? 'right' : 'left', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
|
|
155
|
-
StyledFooterItem.defaultProps = {
|
|
156
|
-
theme: reactTheming.DEFAULT_THEME
|
|
157
|
-
};
|
|
158
143
|
|
|
159
144
|
const COMPONENT_ID$e = 'modals.header';
|
|
160
145
|
const colorStyles$2 = _ref => {
|
|
@@ -174,14 +159,11 @@ const colorStyles$2 = _ref => {
|
|
|
174
159
|
};
|
|
175
160
|
const StyledHeader = styled__default.default.div.attrs({
|
|
176
161
|
'data-garden-id': COMPONENT_ID$e,
|
|
177
|
-
'data-garden-version': '9.0.0-next.
|
|
162
|
+
'data-garden-version': '9.0.0-next.25'
|
|
178
163
|
}).withConfig({
|
|
179
164
|
displayName: "StyledHeader",
|
|
180
165
|
componentId: "sc-1787r9v-0"
|
|
181
166
|
})(["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));
|
|
182
|
-
StyledHeader.defaultProps = {
|
|
183
|
-
theme: reactTheming.DEFAULT_THEME
|
|
184
|
-
};
|
|
185
167
|
|
|
186
168
|
var _g, _circle;
|
|
187
169
|
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
@@ -215,9 +197,6 @@ const StyledDangerIcon = styled__default.default(SvgAlertErrorStroke).withConfig
|
|
|
215
197
|
displayName: "StyledDangerIcon",
|
|
216
198
|
componentId: "sc-1kwbb39-0"
|
|
217
199
|
})(["position:absolute;top:", "px;", ":", ";"], props => props.theme.space.base * 5.5, props => props.theme.rtl ? 'right' : 'left', props => `${props.theme.space.base * 4}px`);
|
|
218
|
-
StyledDangerIcon.defaultProps = {
|
|
219
|
-
theme: reactTheming.DEFAULT_THEME
|
|
220
|
-
};
|
|
221
200
|
|
|
222
201
|
const COMPONENT_ID$d = 'modals.modal';
|
|
223
202
|
const animationName = styled.keyframes(["0%{transform:scale(0);opacity:0;}50%{transform:scale(1.05);}100%{opacity:1;}"]);
|
|
@@ -253,7 +232,7 @@ const sizeStyles$1 = props => {
|
|
|
253
232
|
};
|
|
254
233
|
const StyledModal = styled__default.default.div.attrs({
|
|
255
234
|
'data-garden-id': COMPONENT_ID$d,
|
|
256
|
-
'data-garden-version': '9.0.0-next.
|
|
235
|
+
'data-garden-version': '9.0.0-next.25'
|
|
257
236
|
}).withConfig({
|
|
258
237
|
displayName: "StyledModal",
|
|
259
238
|
componentId: "sc-1pe1axu-0"
|
|
@@ -262,21 +241,15 @@ StyledModal.propTypes = {
|
|
|
262
241
|
isLarge: PropTypes__default.default.bool,
|
|
263
242
|
isAnimated: PropTypes__default.default.bool
|
|
264
243
|
};
|
|
265
|
-
StyledModal.defaultProps = {
|
|
266
|
-
theme: reactTheming.DEFAULT_THEME
|
|
267
|
-
};
|
|
268
244
|
|
|
269
245
|
const COMPONENT_ID$c = 'modals.tooltip_dialog.backdrop';
|
|
270
246
|
const StyledTooltipDialogBackdrop = styled__default.default.div.attrs({
|
|
271
247
|
'data-garden-id': COMPONENT_ID$c,
|
|
272
|
-
'data-garden-version': '9.0.0-next.
|
|
248
|
+
'data-garden-version': '9.0.0-next.25'
|
|
273
249
|
}).withConfig({
|
|
274
250
|
displayName: "StyledTooltipDialogBackdrop",
|
|
275
251
|
componentId: "sc-zrk625-0"
|
|
276
252
|
})(["position:fixed;inset:0;z-index:400;overflow:hidden;-webkit-overflow-scrolling:touch;font-family:", ";direction:", ";&.garden-tooltip-modal-transition-exit-active{pointer-events:none;}&.garden-tooltip-modal-transition-exit-active div{transition:opacity 200ms;opacity:0;}", ";"], props => props.theme.fonts.system, props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
277
|
-
StyledTooltipDialogBackdrop.defaultProps = {
|
|
278
|
-
theme: reactTheming.DEFAULT_THEME
|
|
279
|
-
};
|
|
280
253
|
|
|
281
254
|
const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
|
|
282
255
|
className: props.isAnimated && 'is-animated'
|
|
@@ -289,14 +262,11 @@ const StyledTooltipWrapper = styled__default.default.div.attrs(props => ({
|
|
|
289
262
|
zIndex: props.zIndex,
|
|
290
263
|
animationModifier: '.is-animated'
|
|
291
264
|
}));
|
|
292
|
-
StyledTooltipWrapper.defaultProps = {
|
|
293
|
-
theme: reactTheming.DEFAULT_THEME
|
|
294
|
-
};
|
|
295
265
|
|
|
296
266
|
const COMPONENT_ID$b = 'modals.tooltip_dialog';
|
|
297
267
|
const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
|
|
298
268
|
'data-garden-id': COMPONENT_ID$b,
|
|
299
|
-
'data-garden-version': '9.0.0-next.
|
|
269
|
+
'data-garden-version': '9.0.0-next.25',
|
|
300
270
|
className: props.isAnimated && 'is-animated'
|
|
301
271
|
})).withConfig({
|
|
302
272
|
displayName: "StyledTooltipDialog",
|
|
@@ -312,9 +282,6 @@ const StyledTooltipDialog = styled__default.default.div.attrs(props => ({
|
|
|
312
282
|
}
|
|
313
283
|
return props.hasArrow && computedArrowStyles;
|
|
314
284
|
}, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
315
|
-
StyledTooltipDialog.defaultProps = {
|
|
316
|
-
theme: reactTheming.DEFAULT_THEME
|
|
317
|
-
};
|
|
318
285
|
|
|
319
286
|
const COMPONENT_ID$a = 'modals.tooltip_dialog.title';
|
|
320
287
|
const sizeStyles = props => `
|
|
@@ -325,7 +292,7 @@ const sizeStyles = props => `
|
|
|
325
292
|
`;
|
|
326
293
|
const StyledTooltipDialogTitle = styled__default.default.div.attrs({
|
|
327
294
|
'data-garden-id': COMPONENT_ID$a,
|
|
328
|
-
'data-garden-version': '9.0.0-next.
|
|
295
|
+
'data-garden-version': '9.0.0-next.25'
|
|
329
296
|
}).withConfig({
|
|
330
297
|
displayName: "StyledTooltipDialogTitle",
|
|
331
298
|
componentId: "sc-1rceixg-0"
|
|
@@ -338,14 +305,11 @@ const StyledTooltipDialogTitle = styled__default.default.div.attrs({
|
|
|
338
305
|
theme
|
|
339
306
|
});
|
|
340
307
|
}, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
341
|
-
StyledTooltipDialogTitle.defaultProps = {
|
|
342
|
-
theme: reactTheming.DEFAULT_THEME
|
|
343
|
-
};
|
|
344
308
|
|
|
345
309
|
const COMPONENT_ID$9 = 'modals.tooltip_dialog.body';
|
|
346
310
|
const StyledTooltipDialogBody = styled__default.default.div.attrs({
|
|
347
311
|
'data-garden-id': COMPONENT_ID$9,
|
|
348
|
-
'data-garden-version': '9.0.0-next.
|
|
312
|
+
'data-garden-version': '9.0.0-next.25'
|
|
349
313
|
}).withConfig({
|
|
350
314
|
displayName: "StyledTooltipDialogBody",
|
|
351
315
|
componentId: "sc-132lcoq-0"
|
|
@@ -358,45 +322,33 @@ const StyledTooltipDialogBody = styled__default.default.div.attrs({
|
|
|
358
322
|
theme
|
|
359
323
|
});
|
|
360
324
|
}, props => props.theme.fontSizes.md, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
361
|
-
StyledTooltipDialogBody.defaultProps = {
|
|
362
|
-
theme: reactTheming.DEFAULT_THEME
|
|
363
|
-
};
|
|
364
325
|
|
|
365
326
|
const COMPONENT_ID$8 = 'modals.tooltip_dialog.footer';
|
|
366
327
|
const StyledTooltipDialogFooter = styled__default.default.div.attrs({
|
|
367
328
|
'data-garden-id': COMPONENT_ID$8,
|
|
368
|
-
'data-garden-version': '9.0.0-next.
|
|
329
|
+
'data-garden-version': '9.0.0-next.25'
|
|
369
330
|
}).withConfig({
|
|
370
331
|
displayName: "StyledTooltipDialogFooter",
|
|
371
332
|
componentId: "sc-kjomsm-0"
|
|
372
333
|
})(["display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:", "px;", ";"], p => p.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
373
|
-
StyledTooltipDialogFooter.defaultProps = {
|
|
374
|
-
theme: reactTheming.DEFAULT_THEME
|
|
375
|
-
};
|
|
376
334
|
|
|
377
335
|
const COMPONENT_ID$7 = 'modals.tooltip_dialog.footer_item';
|
|
378
336
|
const StyledTooltipDialogFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
379
337
|
'data-garden-id': COMPONENT_ID$7,
|
|
380
|
-
'data-garden-version': '9.0.0-next.
|
|
338
|
+
'data-garden-version': '9.0.0-next.25'
|
|
381
339
|
}).withConfig({
|
|
382
340
|
displayName: "StyledTooltipDialogFooterItem",
|
|
383
341
|
componentId: "sc-u2rmo8-0"
|
|
384
342
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
385
|
-
StyledTooltipDialogFooterItem.defaultProps = {
|
|
386
|
-
theme: reactTheming.DEFAULT_THEME
|
|
387
|
-
};
|
|
388
343
|
|
|
389
344
|
const COMPONENT_ID$6 = 'modals.tooltip_dialog.close';
|
|
390
345
|
const StyledTooltipDialogClose = styled__default.default(StyledClose).attrs({
|
|
391
346
|
'data-garden-id': COMPONENT_ID$6,
|
|
392
|
-
'data-garden-version': '9.0.0-next.
|
|
347
|
+
'data-garden-version': '9.0.0-next.25'
|
|
393
348
|
}).withConfig({
|
|
394
349
|
displayName: "StyledTooltipDialogClose",
|
|
395
350
|
componentId: "sc-18xlgfi-0"
|
|
396
351
|
})(["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));
|
|
397
|
-
StyledTooltipDialogClose.defaultProps = {
|
|
398
|
-
theme: reactTheming.DEFAULT_THEME
|
|
399
|
-
};
|
|
400
352
|
|
|
401
353
|
const COMPONENT_ID$5 = 'modals.drawer_modal';
|
|
402
354
|
const DRAWER_WIDTH = 380;
|
|
@@ -423,14 +375,11 @@ const colorStyles = _ref => {
|
|
|
423
375
|
};
|
|
424
376
|
const StyledDrawer = styled__default.default.div.attrs({
|
|
425
377
|
'data-garden-id': COMPONENT_ID$5,
|
|
426
|
-
'data-garden-version': '9.0.0-next.
|
|
378
|
+
'data-garden-version': '9.0.0-next.25'
|
|
427
379
|
}).withConfig({
|
|
428
380
|
displayName: "StyledDrawer",
|
|
429
381
|
componentId: "sc-zp66t3-0"
|
|
430
382
|
})(["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));
|
|
431
|
-
StyledDrawer.defaultProps = {
|
|
432
|
-
theme: reactTheming.DEFAULT_THEME
|
|
433
|
-
};
|
|
434
383
|
|
|
435
384
|
const COMPONENT_ID$4 = 'modals.drawer_modal.close';
|
|
436
385
|
const BASE_MULTIPLIERS = {
|
|
@@ -440,43 +389,34 @@ const BASE_MULTIPLIERS = {
|
|
|
440
389
|
};
|
|
441
390
|
const StyledDrawerClose = styled__default.default(StyledClose).attrs({
|
|
442
391
|
'data-garden-id': COMPONENT_ID$4,
|
|
443
|
-
'data-garden-version': '9.0.0-next.
|
|
392
|
+
'data-garden-version': '9.0.0-next.25'
|
|
444
393
|
}).withConfig({
|
|
445
394
|
displayName: "StyledDrawerClose",
|
|
446
395
|
componentId: "sc-1a0xt3x-0"
|
|
447
396
|
})(["", ":", ";", ";"], props => props.theme.rtl ? 'left' : 'right', props => `${props.theme.space.base * BASE_MULTIPLIERS.side}px`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
448
|
-
StyledDrawerClose.defaultProps = {
|
|
449
|
-
theme: reactTheming.DEFAULT_THEME
|
|
450
|
-
};
|
|
451
397
|
|
|
452
398
|
const COMPONENT_ID$3 = 'modals.drawer_modal.header';
|
|
453
399
|
const StyledDrawerHeader = styled__default.default(StyledHeader).attrs({
|
|
454
400
|
'data-garden-id': COMPONENT_ID$3,
|
|
455
|
-
'data-garden-version': '9.0.0-next.
|
|
401
|
+
'data-garden-version': '9.0.0-next.25'
|
|
456
402
|
}).withConfig({
|
|
457
403
|
displayName: "StyledDrawerHeader",
|
|
458
404
|
componentId: "sc-y4mgkj-0"
|
|
459
405
|
})(["padding:", "px;", " ", ";"], props => props.theme.space.base * 5, props => props.isCloseButtonPresent && `padding-${props.theme.rtl ? 'left' : 'right'}: ${props.theme.space.base * (BASE_MULTIPLIERS.size + BASE_MULTIPLIERS.side + 2)}px;`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
460
|
-
StyledDrawerHeader.defaultProps = {
|
|
461
|
-
theme: reactTheming.DEFAULT_THEME
|
|
462
|
-
};
|
|
463
406
|
|
|
464
407
|
const COMPONENT_ID$2 = 'modals.drawer_modal.body';
|
|
465
408
|
const StyledDrawerBody = styled__default.default(StyledBody).attrs({
|
|
466
409
|
'data-garden-id': COMPONENT_ID$2,
|
|
467
|
-
'data-garden-version': '9.0.0-next.
|
|
410
|
+
'data-garden-version': '9.0.0-next.25'
|
|
468
411
|
}).withConfig({
|
|
469
412
|
displayName: "StyledDrawerBody",
|
|
470
413
|
componentId: "sc-13qufyn-0"
|
|
471
414
|
})(["padding:", "px;color-scheme:only ", ";", ";"], props => props.theme.space.base * 5, p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
472
|
-
StyledDrawerBody.defaultProps = {
|
|
473
|
-
theme: reactTheming.DEFAULT_THEME
|
|
474
|
-
};
|
|
475
415
|
|
|
476
416
|
const COMPONENT_ID$1 = 'modals.drawer_modal.footer';
|
|
477
417
|
const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
478
418
|
'data-garden-id': COMPONENT_ID$1,
|
|
479
|
-
'data-garden-version': '9.0.0-next.
|
|
419
|
+
'data-garden-version': '9.0.0-next.25'
|
|
480
420
|
}).withConfig({
|
|
481
421
|
displayName: "StyledDrawerFooter",
|
|
482
422
|
componentId: "sc-kc7e6p-0"
|
|
@@ -489,21 +429,15 @@ const StyledDrawerFooter = styled__default.default.div.attrs({
|
|
|
489
429
|
variable: 'border.subtle'
|
|
490
430
|
})}`;
|
|
491
431
|
}, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
492
|
-
StyledDrawerFooter.defaultProps = {
|
|
493
|
-
theme: reactTheming.DEFAULT_THEME
|
|
494
|
-
};
|
|
495
432
|
|
|
496
433
|
const COMPONENT_ID = 'modals.drawer_modal.footer_item';
|
|
497
434
|
const StyledDrawerFooterItem = styled__default.default(StyledFooterItem).attrs({
|
|
498
435
|
'data-garden-id': COMPONENT_ID,
|
|
499
|
-
'data-garden-version': '9.0.0-next.
|
|
436
|
+
'data-garden-version': '9.0.0-next.25'
|
|
500
437
|
}).withConfig({
|
|
501
438
|
displayName: "StyledDrawerFooterItem",
|
|
502
439
|
componentId: "sc-m2yul4-0"
|
|
503
440
|
})(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
504
|
-
StyledDrawerFooterItem.defaultProps = {
|
|
505
|
-
theme: reactTheming.DEFAULT_THEME
|
|
506
|
-
};
|
|
507
441
|
|
|
508
442
|
const ModalsContext = React.createContext(undefined);
|
|
509
443
|
const useModalContext = () => {
|
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.25",
|
|
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.25",
|
|
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.11",
|
|
41
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
41
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.25",
|
|
42
42
|
"@zendeskgarden/svg-icons": "7.2.0"
|
|
43
43
|
},
|
|
44
44
|
"keywords": [
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
53
|
"zendeskgarden:src": "src/index.ts",
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
55
55
|
}
|