@zendeskgarden/react-grid 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/StyledCol.js +1 -1
- package/dist/esm/styled/StyledGrid.js +1 -1
- package/dist/esm/styled/StyledRow.js +1 -1
- package/dist/esm/styled/pane/StyledPane.js +2 -5
- package/dist/esm/styled/pane/StyledPaneContent.js +2 -5
- package/dist/esm/styled/pane/StyledPaneSplitter.js +2 -5
- package/dist/esm/styled/pane/StyledPaneSplitterButton.js +1 -5
- package/dist/esm/styled/pane/StyledPaneSplitterButtonContainer.js +1 -4
- package/dist/index.cjs.js +7 -22
- 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.25'
|
|
80
80
|
}).withConfig({
|
|
81
81
|
displayName: "StyledCol",
|
|
82
82
|
componentId: "sc-inuw62-0"
|
|
@@ -36,7 +36,7 @@ const sizeStyles = _ref2 => {
|
|
|
36
36
|
};
|
|
37
37
|
const StyledGrid = styled.div.attrs({
|
|
38
38
|
'data-garden-id': COMPONENT_ID,
|
|
39
|
-
'data-garden-version': '9.0.0-next.
|
|
39
|
+
'data-garden-version': '9.0.0-next.25'
|
|
40
40
|
}).withConfig({
|
|
41
41
|
displayName: "StyledGrid",
|
|
42
42
|
componentId: "sc-oxgg5i-0"
|
|
@@ -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.25'
|
|
56
56
|
}).withConfig({
|
|
57
57
|
displayName: "StyledRow",
|
|
58
58
|
componentId: "sc-xjsdg1-0"
|
|
@@ -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 = '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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledPane",
|
|
16
16
|
componentId: "sc-1ltjst7-0"
|
|
17
17
|
})(["position:relative;min-width:0;min-height:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledPane.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledPane };
|
|
@@ -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 = '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.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledPaneContent",
|
|
16
16
|
componentId: "sc-1b38mbh-0"
|
|
17
17
|
})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledPaneContent.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledPaneContent };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles,
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'pane.splitter';
|
|
12
12
|
const colorStyles = _ref => {
|
|
@@ -107,13 +107,10 @@ 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.25'
|
|
111
111
|
}).withConfig({
|
|
112
112
|
displayName: "StyledPaneSplitter",
|
|
113
113
|
componentId: "sc-jylemn-0"
|
|
114
114
|
})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles, SELECTOR_FOCUS_VISIBLE, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
115
|
-
StyledPaneSplitter.defaultProps = {
|
|
116
|
-
theme: DEFAULT_THEME
|
|
117
|
-
};
|
|
118
115
|
|
|
119
116
|
export { StyledPaneSplitter };
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
8
|
import { ChevronButton } from '@zendeskgarden/react-buttons';
|
|
10
9
|
|
|
11
10
|
const getSize = theme => theme.space.base * 6;
|
|
@@ -31,7 +30,7 @@ const transformStyles = props => {
|
|
|
31
30
|
return css(["& > svg{transform:rotate(", "deg);}"], degrees);
|
|
32
31
|
};
|
|
33
32
|
const StyledPaneSplitterButton = styled(ChevronButton).attrs({
|
|
34
|
-
'data-garden-version': '9.0.0-next.
|
|
33
|
+
'data-garden-version': '9.0.0-next.25',
|
|
35
34
|
isBasic: true,
|
|
36
35
|
isPill: true,
|
|
37
36
|
size: 'small'
|
|
@@ -39,8 +38,5 @@ const StyledPaneSplitterButton = styled(ChevronButton).attrs({
|
|
|
39
38
|
displayName: "StyledPaneSplitterButton",
|
|
40
39
|
componentId: "sc-zh032e-0"
|
|
41
40
|
})(["", ";", ";"], sizeStyles, transformStyles);
|
|
42
|
-
StyledPaneSplitterButton.defaultProps = {
|
|
43
|
-
theme: DEFAULT_THEME
|
|
44
|
-
};
|
|
45
41
|
|
|
46
42
|
export { StyledPaneSplitterButton, getSize };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { stripUnit, math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledPaneSplitter } from './StyledPaneSplitter.js';
|
|
11
11
|
import { getSize } from './StyledPaneSplitterButton.js';
|
|
12
12
|
|
|
@@ -121,8 +121,5 @@ const StyledPaneSplitterButtonContainer = styled.div.withConfig({
|
|
|
121
121
|
displayName: "StyledPaneSplitterButtonContainer",
|
|
122
122
|
componentId: "sc-1w84y62-0"
|
|
123
123
|
})(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
124
|
-
StyledPaneSplitterButtonContainer.defaultProps = {
|
|
125
|
-
theme: DEFAULT_THEME
|
|
126
|
-
};
|
|
127
124
|
|
|
128
125
|
export { StyledPaneSplitterButtonContainer };
|
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.25'
|
|
106
106
|
}).withConfig({
|
|
107
107
|
displayName: "StyledCol",
|
|
108
108
|
componentId: "sc-inuw62-0"
|
|
@@ -140,7 +140,7 @@ const sizeStyles$4 = _ref2 => {
|
|
|
140
140
|
};
|
|
141
141
|
const StyledGrid = styled__default.default.div.attrs({
|
|
142
142
|
'data-garden-id': COMPONENT_ID$5,
|
|
143
|
-
'data-garden-version': '9.0.0-next.
|
|
143
|
+
'data-garden-version': '9.0.0-next.25'
|
|
144
144
|
}).withConfig({
|
|
145
145
|
displayName: "StyledGrid",
|
|
146
146
|
componentId: "sc-oxgg5i-0"
|
|
@@ -194,7 +194,7 @@ const sizeStyles$3 = _ref2 => {
|
|
|
194
194
|
};
|
|
195
195
|
const StyledRow = styled__default.default.div.attrs({
|
|
196
196
|
'data-garden-id': COMPONENT_ID$4,
|
|
197
|
-
'data-garden-version': '9.0.0-next.
|
|
197
|
+
'data-garden-version': '9.0.0-next.25'
|
|
198
198
|
}).withConfig({
|
|
199
199
|
displayName: "StyledRow",
|
|
200
200
|
componentId: "sc-xjsdg1-0"
|
|
@@ -207,26 +207,20 @@ StyledRow.defaultProps = {
|
|
|
207
207
|
const COMPONENT_ID$3 = 'pane';
|
|
208
208
|
const StyledPane = styled__default.default.div.attrs({
|
|
209
209
|
'data-garden-id': COMPONENT_ID$3,
|
|
210
|
-
'data-garden-version': '9.0.0-next.
|
|
210
|
+
'data-garden-version': '9.0.0-next.25'
|
|
211
211
|
}).withConfig({
|
|
212
212
|
displayName: "StyledPane",
|
|
213
213
|
componentId: "sc-1ltjst7-0"
|
|
214
214
|
})(["position:relative;min-width:0;min-height:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
215
|
-
StyledPane.defaultProps = {
|
|
216
|
-
theme: reactTheming.DEFAULT_THEME
|
|
217
|
-
};
|
|
218
215
|
|
|
219
216
|
const COMPONENT_ID$2 = 'pane.content';
|
|
220
217
|
const StyledPaneContent = styled__default.default.div.attrs({
|
|
221
218
|
'data-garden-id': COMPONENT_ID$2,
|
|
222
|
-
'data-garden-version': '9.0.0-next.
|
|
219
|
+
'data-garden-version': '9.0.0-next.25'
|
|
223
220
|
}).withConfig({
|
|
224
221
|
displayName: "StyledPaneContent",
|
|
225
222
|
componentId: "sc-1b38mbh-0"
|
|
226
223
|
})(["height:100%;overflow:auto;color-scheme:only ", ";&[hidden]{display:none;}", ";"], p => p.theme.colors.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
227
|
-
StyledPaneContent.defaultProps = {
|
|
228
|
-
theme: reactTheming.DEFAULT_THEME
|
|
229
|
-
};
|
|
230
224
|
|
|
231
225
|
const COMPONENT_ID$1 = 'pane.splitter';
|
|
232
226
|
const colorStyles$1 = _ref => {
|
|
@@ -327,14 +321,11 @@ const sizeStyles$2 = _ref2 => {
|
|
|
327
321
|
};
|
|
328
322
|
const StyledPaneSplitter = styled__default.default.div.attrs({
|
|
329
323
|
'data-garden-id': COMPONENT_ID$1,
|
|
330
|
-
'data-garden-version': '9.0.0-next.
|
|
324
|
+
'data-garden-version': '9.0.0-next.25'
|
|
331
325
|
}).withConfig({
|
|
332
326
|
displayName: "StyledPaneSplitter",
|
|
333
327
|
componentId: "sc-jylemn-0"
|
|
334
328
|
})(["display:flex;position:absolute;align-items:center;justify-content:center;z-index:1;user-select:none;", ";", "{z-index:2;}&::before{position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out;z-index:-1;content:'';}", ";", ";"], sizeStyles$2, reactTheming.SELECTOR_FOCUS_VISIBLE, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
335
|
-
StyledPaneSplitter.defaultProps = {
|
|
336
|
-
theme: reactTheming.DEFAULT_THEME
|
|
337
|
-
};
|
|
338
329
|
|
|
339
330
|
const getSize = theme => theme.space.base * 6;
|
|
340
331
|
const sizeStyles$1 = _ref => {
|
|
@@ -359,7 +350,7 @@ const transformStyles = props => {
|
|
|
359
350
|
return styled.css(["& > svg{transform:rotate(", "deg);}"], degrees);
|
|
360
351
|
};
|
|
361
352
|
const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
|
|
362
|
-
'data-garden-version': '9.0.0-next.
|
|
353
|
+
'data-garden-version': '9.0.0-next.25',
|
|
363
354
|
isBasic: true,
|
|
364
355
|
isPill: true,
|
|
365
356
|
size: 'small'
|
|
@@ -367,9 +358,6 @@ const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronBut
|
|
|
367
358
|
displayName: "StyledPaneSplitterButton",
|
|
368
359
|
componentId: "sc-zh032e-0"
|
|
369
360
|
})(["", ";", ";"], sizeStyles$1, transformStyles);
|
|
370
|
-
StyledPaneSplitterButton.defaultProps = {
|
|
371
|
-
theme: reactTheming.DEFAULT_THEME
|
|
372
|
-
};
|
|
373
361
|
|
|
374
362
|
const COMPONENT_ID = 'pane.splitter_button_container';
|
|
375
363
|
const colorStyles = _ref => {
|
|
@@ -482,9 +470,6 @@ const StyledPaneSplitterButtonContainer = styled__default.default.div.withConfig
|
|
|
482
470
|
displayName: "StyledPaneSplitterButtonContainer",
|
|
483
471
|
componentId: "sc-1w84y62-0"
|
|
484
472
|
})(["display:", ";position:absolute;transition:box-shadow 0.1s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;z-index:2;", ";", ";", ";&:hover,&:focus-within,", ":hover ~ &,", ":focus-visible ~ &{opacity:1;}", ";"], props => props.splitterSize <= minimumSplitterSize(props.theme) ? 'none' : undefined, positionStyles, sizeStyles, colorStyles, StyledPaneSplitter, StyledPaneSplitter, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
485
|
-
StyledPaneSplitterButtonContainer.defaultProps = {
|
|
486
|
-
theme: reactTheming.DEFAULT_THEME
|
|
487
|
-
};
|
|
488
473
|
|
|
489
474
|
const GridContext = React.createContext({
|
|
490
475
|
gutters: 'md'
|
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.25",
|
|
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.25",
|
|
27
|
+
"@zendeskgarden/react-tooltips": "^9.0.0-next.25",
|
|
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.25"
|
|
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": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
53
53
|
}
|