@zendeskgarden/react-grid 9.0.0-next.19 → 9.0.0-next.20
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/StyledCol.js +1 -1
- package/dist/esm/styled/StyledGrid.js +10 -6
- package/dist/esm/styled/StyledRow.js +1 -1
- package/dist/esm/styled/pane/StyledPane.js +1 -1
- package/dist/esm/styled/pane/StyledPaneContent.js +2 -2
- package/dist/esm/styled/pane/StyledPaneSplitter.js +1 -1
- package/dist/esm/styled/pane/StyledPaneSplitterButton.js +1 -1
- package/dist/index.cjs.js +17 -13
- package/package.json +5 -5
|
@@ -76,7 +76,7 @@ const sizeStyles = _ref2 => {
|
|
|
76
76
|
};
|
|
77
77
|
const StyledCol = styled.div.attrs({
|
|
78
78
|
'data-garden-id': COMPONENT_ID,
|
|
79
|
-
'data-garden-version': '9.0.0-next.
|
|
79
|
+
'data-garden-version': '9.0.0-next.20'
|
|
80
80
|
}).withConfig({
|
|
81
81
|
displayName: "StyledCol",
|
|
82
82
|
componentId: "sc-inuw62-0"
|
|
@@ -11,16 +11,20 @@ import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden
|
|
|
11
11
|
const COMPONENT_ID = 'grid.grid';
|
|
12
12
|
const colorStyles = _ref => {
|
|
13
13
|
let {
|
|
14
|
-
theme
|
|
14
|
+
theme,
|
|
15
|
+
debug
|
|
15
16
|
} = _ref;
|
|
16
|
-
const borderColor = getColor({
|
|
17
|
+
const borderColor = debug && getColor({
|
|
17
18
|
theme,
|
|
18
19
|
hue: 'crimson',
|
|
19
20
|
shade: 700,
|
|
20
21
|
transparency: theme.opacity[600]
|
|
21
22
|
});
|
|
22
|
-
const borderWidth = math(`${theme.borderWidths.sm} * 2`);
|
|
23
|
-
return css(["
|
|
23
|
+
const borderWidth = debug && math(`${theme.borderWidths.sm} * 2`);
|
|
24
|
+
return css(["color-scheme:only ", ";box-shadow:", ";"], theme.colors.base, debug && `
|
|
25
|
+
-${borderWidth} 0 0 0 ${borderColor},
|
|
26
|
+
${borderWidth} 0 0 0 ${borderColor}
|
|
27
|
+
`);
|
|
24
28
|
};
|
|
25
29
|
const sizeStyles = _ref2 => {
|
|
26
30
|
let {
|
|
@@ -32,11 +36,11 @@ const sizeStyles = _ref2 => {
|
|
|
32
36
|
};
|
|
33
37
|
const StyledGrid = styled.div.attrs({
|
|
34
38
|
'data-garden-id': COMPONENT_ID,
|
|
35
|
-
'data-garden-version': '9.0.0-next.
|
|
39
|
+
'data-garden-version': '9.0.0-next.20'
|
|
36
40
|
}).withConfig({
|
|
37
41
|
displayName: "StyledGrid",
|
|
38
42
|
componentId: "sc-oxgg5i-0"
|
|
39
|
-
})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles,
|
|
43
|
+
})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
40
44
|
StyledGrid.defaultProps = {
|
|
41
45
|
gutters: 'md',
|
|
42
46
|
theme: DEFAULT_THEME
|
|
@@ -52,7 +52,7 @@ const sizeStyles = _ref2 => {
|
|
|
52
52
|
};
|
|
53
53
|
const StyledRow = styled.div.attrs({
|
|
54
54
|
'data-garden-id': COMPONENT_ID,
|
|
55
|
-
'data-garden-version': '9.0.0-next.
|
|
55
|
+
'data-garden-version': '9.0.0-next.20'
|
|
56
56
|
}).withConfig({
|
|
57
57
|
displayName: "StyledRow",
|
|
58
58
|
componentId: "sc-xjsdg1-0"
|
|
@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'pane';
|
|
11
11
|
const StyledPane = 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.20'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledPane",
|
|
16
16
|
componentId: "sc-1ltjst7-0"
|
|
@@ -10,11 +10,11 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
|
|
|
10
10
|
const COMPONENT_ID = 'pane.content';
|
|
11
11
|
const StyledPaneContent = 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.20'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledPaneContent",
|
|
16
16
|
componentId: "sc-1b38mbh-0"
|
|
17
|
-
})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
17
|
+
})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
18
|
StyledPaneContent.defaultProps = {
|
|
19
19
|
theme: DEFAULT_THEME
|
|
20
20
|
};
|
|
@@ -107,7 +107,7 @@ const sizeStyles = _ref2 => {
|
|
|
107
107
|
};
|
|
108
108
|
const StyledPaneSplitter = styled.div.attrs({
|
|
109
109
|
'data-garden-id': COMPONENT_ID,
|
|
110
|
-
'data-garden-version': '9.0.0-next.
|
|
110
|
+
'data-garden-version': '9.0.0-next.20'
|
|
111
111
|
}).withConfig({
|
|
112
112
|
displayName: "StyledPaneSplitter",
|
|
113
113
|
componentId: "sc-jylemn-0"
|
|
@@ -31,7 +31,7 @@ const transformStyles = props => {
|
|
|
31
31
|
return css(["& > svg{transform:rotate(", "deg);}"], degrees);
|
|
32
32
|
};
|
|
33
33
|
const StyledPaneSplitterButton = styled(ChevronButton).attrs({
|
|
34
|
-
'data-garden-version': '9.0.0-next.
|
|
34
|
+
'data-garden-version': '9.0.0-next.20',
|
|
35
35
|
isBasic: true,
|
|
36
36
|
isPill: true,
|
|
37
37
|
size: 'small'
|
package/dist/index.cjs.js
CHANGED
|
@@ -102,7 +102,7 @@ const sizeStyles$5 = _ref2 => {
|
|
|
102
102
|
};
|
|
103
103
|
const StyledCol = styled__default.default.div.attrs({
|
|
104
104
|
'data-garden-id': COMPONENT_ID$6,
|
|
105
|
-
'data-garden-version': '9.0.0-next.
|
|
105
|
+
'data-garden-version': '9.0.0-next.20'
|
|
106
106
|
}).withConfig({
|
|
107
107
|
displayName: "StyledCol",
|
|
108
108
|
componentId: "sc-inuw62-0"
|
|
@@ -115,16 +115,20 @@ StyledCol.defaultProps = {
|
|
|
115
115
|
const COMPONENT_ID$5 = 'grid.grid';
|
|
116
116
|
const colorStyles$3 = _ref => {
|
|
117
117
|
let {
|
|
118
|
-
theme
|
|
118
|
+
theme,
|
|
119
|
+
debug
|
|
119
120
|
} = _ref;
|
|
120
|
-
const borderColor = reactTheming.getColor({
|
|
121
|
+
const borderColor = debug && reactTheming.getColor({
|
|
121
122
|
theme,
|
|
122
123
|
hue: 'crimson',
|
|
123
124
|
shade: 700,
|
|
124
125
|
transparency: theme.opacity[600]
|
|
125
126
|
});
|
|
126
|
-
const borderWidth = polished.math(`${theme.borderWidths.sm} * 2`);
|
|
127
|
-
return styled.css(["
|
|
127
|
+
const borderWidth = debug && polished.math(`${theme.borderWidths.sm} * 2`);
|
|
128
|
+
return styled.css(["color-scheme:only ", ";box-shadow:", ";"], theme.colors.base, debug && `
|
|
129
|
+
-${borderWidth} 0 0 0 ${borderColor},
|
|
130
|
+
${borderWidth} 0 0 0 ${borderColor}
|
|
131
|
+
`);
|
|
128
132
|
};
|
|
129
133
|
const sizeStyles$4 = _ref2 => {
|
|
130
134
|
let {
|
|
@@ -136,11 +140,11 @@ const sizeStyles$4 = _ref2 => {
|
|
|
136
140
|
};
|
|
137
141
|
const StyledGrid = styled__default.default.div.attrs({
|
|
138
142
|
'data-garden-id': COMPONENT_ID$5,
|
|
139
|
-
'data-garden-version': '9.0.0-next.
|
|
143
|
+
'data-garden-version': '9.0.0-next.20'
|
|
140
144
|
}).withConfig({
|
|
141
145
|
displayName: "StyledGrid",
|
|
142
146
|
componentId: "sc-oxgg5i-0"
|
|
143
|
-
})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles$4,
|
|
147
|
+
})(["direction:", ";margin-right:auto;margin-left:auto;width:100%;box-sizing:border-box;", ";", ";", ";"], props => props.theme.rtl && 'rtl', sizeStyles$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
144
148
|
StyledGrid.defaultProps = {
|
|
145
149
|
gutters: 'md',
|
|
146
150
|
theme: reactTheming.DEFAULT_THEME
|
|
@@ -190,7 +194,7 @@ const sizeStyles$3 = _ref2 => {
|
|
|
190
194
|
};
|
|
191
195
|
const StyledRow = styled__default.default.div.attrs({
|
|
192
196
|
'data-garden-id': COMPONENT_ID$4,
|
|
193
|
-
'data-garden-version': '9.0.0-next.
|
|
197
|
+
'data-garden-version': '9.0.0-next.20'
|
|
194
198
|
}).withConfig({
|
|
195
199
|
displayName: "StyledRow",
|
|
196
200
|
componentId: "sc-xjsdg1-0"
|
|
@@ -203,7 +207,7 @@ StyledRow.defaultProps = {
|
|
|
203
207
|
const COMPONENT_ID$3 = 'pane';
|
|
204
208
|
const StyledPane = styled__default.default.div.attrs({
|
|
205
209
|
'data-garden-id': COMPONENT_ID$3,
|
|
206
|
-
'data-garden-version': '9.0.0-next.
|
|
210
|
+
'data-garden-version': '9.0.0-next.20'
|
|
207
211
|
}).withConfig({
|
|
208
212
|
displayName: "StyledPane",
|
|
209
213
|
componentId: "sc-1ltjst7-0"
|
|
@@ -215,11 +219,11 @@ StyledPane.defaultProps = {
|
|
|
215
219
|
const COMPONENT_ID$2 = 'pane.content';
|
|
216
220
|
const StyledPaneContent = styled__default.default.div.attrs({
|
|
217
221
|
'data-garden-id': COMPONENT_ID$2,
|
|
218
|
-
'data-garden-version': '9.0.0-next.
|
|
222
|
+
'data-garden-version': '9.0.0-next.20'
|
|
219
223
|
}).withConfig({
|
|
220
224
|
displayName: "StyledPaneContent",
|
|
221
225
|
componentId: "sc-1b38mbh-0"
|
|
222
|
-
})(["height:100%;overflow:auto;&[hidden]{display:none;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
226
|
+
})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
223
227
|
StyledPaneContent.defaultProps = {
|
|
224
228
|
theme: reactTheming.DEFAULT_THEME
|
|
225
229
|
};
|
|
@@ -323,7 +327,7 @@ const sizeStyles$2 = _ref2 => {
|
|
|
323
327
|
};
|
|
324
328
|
const StyledPaneSplitter = styled__default.default.div.attrs({
|
|
325
329
|
'data-garden-id': COMPONENT_ID$1,
|
|
326
|
-
'data-garden-version': '9.0.0-next.
|
|
330
|
+
'data-garden-version': '9.0.0-next.20'
|
|
327
331
|
}).withConfig({
|
|
328
332
|
displayName: "StyledPaneSplitter",
|
|
329
333
|
componentId: "sc-jylemn-0"
|
|
@@ -355,7 +359,7 @@ const transformStyles = props => {
|
|
|
355
359
|
return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
|
|
356
360
|
};
|
|
357
361
|
const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
|
|
358
|
-
'data-garden-version': '9.0.0-next.
|
|
362
|
+
'data-garden-version': '9.0.0-next.20',
|
|
359
363
|
isBasic: true,
|
|
360
364
|
isPill: true,
|
|
361
365
|
size: 'small'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-grid",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.20",
|
|
4
4
|
"description": "Components relating to layout grids in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-splitter": "^2.0.17",
|
|
25
25
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
26
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
27
|
-
"@zendeskgarden/react-tooltips": "^9.0.0-next.
|
|
26
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.20",
|
|
27
|
+
"@zendeskgarden/react-tooltips": "^9.0.0-next.20",
|
|
28
28
|
"polished": "^4.3.1",
|
|
29
29
|
"prop-types": "^15.5.7",
|
|
30
30
|
"react-merge-refs": "^2.0.0",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"styled-components": "^5.3.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
40
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.20"
|
|
41
41
|
},
|
|
42
42
|
"keywords": [
|
|
43
43
|
"components",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
51
|
"zendeskgarden:src": "src/index.ts",
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "eab087ac0d6e74b3a4489d37d067baf7a225e7a8"
|
|
53
53
|
}
|