@zendeskgarden/react-forms 9.0.0-next.24 → 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/checkbox/StyledCheckHint.js +2 -5
- package/dist/esm/styled/checkbox/StyledCheckInput.js +2 -5
- package/dist/esm/styled/checkbox/StyledCheckLabel.js +2 -5
- package/dist/esm/styled/checkbox/StyledCheckMessage.js +2 -5
- package/dist/esm/styled/checkbox/StyledCheckSvg.js +2 -5
- package/dist/esm/styled/checkbox/StyledDashSvg.js +2 -5
- package/dist/esm/styled/common/StyledField.js +2 -5
- package/dist/esm/styled/common/StyledFieldset.js +2 -5
- package/dist/esm/styled/common/StyledHint.js +2 -5
- package/dist/esm/styled/common/StyledLabel.js +2 -5
- package/dist/esm/styled/common/StyledLegend.js +2 -5
- package/dist/esm/styled/common/StyledMessage.js +2 -5
- package/dist/esm/styled/common/StyledMessageIcon.js +2 -5
- package/dist/esm/styled/file-list/StyledFile.js +2 -5
- package/dist/esm/styled/file-list/StyledFileClose.js +2 -5
- package/dist/esm/styled/file-list/StyledFileDelete.js +2 -5
- package/dist/esm/styled/file-list/StyledFileIcon.js +2 -5
- package/dist/esm/styled/file-list/StyledFileList.js +2 -5
- package/dist/esm/styled/file-list/StyledFileListItem.js +2 -5
- package/dist/esm/styled/file-upload/StyledFileUpload.js +2 -5
- package/dist/esm/styled/input-group/StyledInputGroup.js +2 -5
- package/dist/esm/styled/radio/StyledRadioHint.js +2 -5
- package/dist/esm/styled/radio/StyledRadioInput.js +2 -5
- package/dist/esm/styled/radio/StyledRadioLabel.js +2 -5
- package/dist/esm/styled/radio/StyledRadioMessage.js +2 -5
- package/dist/esm/styled/radio/StyledRadioSvg.js +2 -5
- package/dist/esm/styled/range/StyledRangeInput.js +1 -1
- package/dist/esm/styled/select/StyledSelect.js +2 -5
- package/dist/esm/styled/select/StyledSelectWrapper.js +2 -5
- package/dist/esm/styled/text/StyledTextFauxInput.js +2 -5
- package/dist/esm/styled/text/StyledTextInput.js +2 -5
- package/dist/esm/styled/text/StyledTextMediaFigure.js +2 -5
- package/dist/esm/styled/text/StyledTextMediaInput.js +2 -5
- package/dist/esm/styled/text/StyledTextarea.js +2 -5
- package/dist/esm/styled/tiles/StyledTile.js +2 -5
- package/dist/esm/styled/tiles/StyledTileDescription.js +2 -5
- package/dist/esm/styled/tiles/StyledTileIcon.js +2 -5
- package/dist/esm/styled/tiles/StyledTileInput.js +0 -4
- package/dist/esm/styled/tiles/StyledTileLabel.js +2 -5
- package/dist/esm/styled/toggle/StyledToggleHint.js +2 -5
- package/dist/esm/styled/toggle/StyledToggleInput.js +2 -5
- package/dist/esm/styled/toggle/StyledToggleLabel.js +2 -5
- package/dist/esm/styled/toggle/StyledToggleMessage.js +2 -5
- package/dist/esm/styled/toggle/StyledToggleSvg.js +2 -5
- package/dist/index.cjs.js +43 -172
- package/package.json +3 -3
|
@@ -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 { StyledRadioHint } from '../radio/StyledRadioHint.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.checkbox_hint';
|
|
12
12
|
const StyledCheckHint = styled(StyledRadioHint).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: "StyledCheckHint",
|
|
17
17
|
componentId: "sc-1kl8e8c-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledCheckHint.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledCheckHint };
|
|
@@ -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
|
import { StyledRadioInput } from '../radio/StyledRadioInput.js';
|
|
10
10
|
import { StyledCheckLabel } from './StyledCheckLabel.js';
|
|
11
11
|
|
|
@@ -65,14 +65,11 @@ const colorStyles = _ref => {
|
|
|
65
65
|
};
|
|
66
66
|
const StyledCheckInput = styled(StyledRadioInput).attrs({
|
|
67
67
|
'data-garden-id': COMPONENT_ID,
|
|
68
|
-
'data-garden-version': '9.0.0-next.
|
|
68
|
+
'data-garden-version': '9.0.0-next.25',
|
|
69
69
|
type: 'checkbox'
|
|
70
70
|
}).withConfig({
|
|
71
71
|
displayName: "StyledCheckInput",
|
|
72
72
|
componentId: "sc-176jxxe-0"
|
|
73
73
|
})(["& ~ ", "::before{border-radius:", ";}", ";", ";"], StyledCheckLabel, props => props.theme.borderRadii.md, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
74
|
-
StyledCheckInput.defaultProps = {
|
|
75
|
-
theme: DEFAULT_THEME
|
|
76
|
-
};
|
|
77
74
|
|
|
78
75
|
export { StyledCheckInput };
|
|
@@ -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 { StyledRadioLabel } from '../radio/StyledRadioLabel.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.checkbox_label';
|
|
12
12
|
const StyledCheckLabel = styled(StyledRadioLabel).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: "StyledCheckLabel",
|
|
17
17
|
componentId: "sc-x7nr1-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledCheckLabel.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledCheckLabel };
|
|
@@ -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 { StyledRadioMessage } from '../radio/StyledRadioMessage.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.checkbox_message';
|
|
12
12
|
const StyledCheckMessage = styled(StyledRadioMessage).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: "StyledCheckMessage",
|
|
17
17
|
componentId: "sc-s4p6kd-0"
|
|
18
18
|
})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledCheckMessage.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledCheckMessage };
|
|
@@ -6,20 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import SvgCheckSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledCheckInput } from './StyledCheckInput.js';
|
|
11
11
|
import { StyledCheckLabel } from './StyledCheckLabel.js';
|
|
12
12
|
|
|
13
13
|
const COMPONENT_ID = 'forms.check_svg';
|
|
14
14
|
const StyledCheckSvg = styled(SvgCheckSmFill).attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.25'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledCheckSvg",
|
|
19
19
|
componentId: "sc-fvxetk-0"
|
|
20
20
|
})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":checked ~ ", " > &{opacity:1;}", ":indeterminate ~ ", " > &{opacity:0;}", ";"], StyledCheckInput, StyledCheckLabel, StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledCheckSvg.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledCheckSvg };
|
|
@@ -6,20 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import SvgDashFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/dash-fill.svg.js';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledCheckInput } from './StyledCheckInput.js';
|
|
11
11
|
import { StyledCheckLabel } from './StyledCheckLabel.js';
|
|
12
12
|
|
|
13
13
|
const COMPONENT_ID = 'forms.dash_svg';
|
|
14
14
|
const StyledDashSvg = styled(SvgDashFill).attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.25'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledDashSvg",
|
|
19
19
|
componentId: "sc-z3vq71-0"
|
|
20
20
|
})(["transition:opacity 0.25s ease-in-out;opacity:0;pointer-events:none;", ":indeterminate ~ ", " > &{opacity:1;}", ";"], StyledCheckInput, StyledCheckLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledDashSvg.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledDashSvg };
|
|
@@ -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 = 'forms.field';
|
|
11
11
|
const StyledField = 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: "StyledField",
|
|
16
16
|
componentId: "sc-12gzfsu-0"
|
|
17
17
|
})(["position:relative;direction:", ";margin:0;border:0;padding:0;font-size:0;", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledField.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledField };
|
|
@@ -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 { StyledField } from './StyledField.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.fieldset';
|
|
12
12
|
const StyledFieldset = styled(StyledField).attrs({
|
|
13
13
|
as: 'fieldset',
|
|
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: "StyledFieldset",
|
|
18
18
|
componentId: "sc-1vr4mxv-0"
|
|
19
19
|
})(["", "{margin-top:", "px;}", ";"], StyledField, props => props.theme.space.base * (props.isCompact ? 1 : 2), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledFieldset.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledFieldset };
|
|
@@ -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 = 'forms.input_hint';
|
|
11
11
|
const StyledHint = styled.div.attrs(props => ({
|
|
12
12
|
'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
|
|
13
|
-
'data-garden-version': props['data-garden-version'] || '9.0.0-next.
|
|
13
|
+
'data-garden-version': props['data-garden-version'] || '9.0.0-next.25'
|
|
14
14
|
})).withConfig({
|
|
15
15
|
displayName: "StyledHint",
|
|
16
16
|
componentId: "sc-17c2wu8-0"
|
|
@@ -18,8 +18,5 @@ const StyledHint = styled.div.attrs(props => ({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'foreground.subtle'
|
|
20
20
|
}), props => props.theme.fontSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledHint.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledHint };
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { hideVisually } from 'polished';
|
|
9
|
-
import { getLineHeight, getColor, retrieveComponentStyles
|
|
9
|
+
import { getLineHeight, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.input_label';
|
|
12
12
|
const StyledLabel = styled.label.attrs(props => ({
|
|
13
13
|
'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
|
|
14
|
-
'data-garden-version': props['data-garden-version'] || '9.0.0-next.
|
|
14
|
+
'data-garden-version': props['data-garden-version'] || '9.0.0-next.25'
|
|
15
15
|
})).withConfig({
|
|
16
16
|
displayName: "StyledLabel",
|
|
17
17
|
componentId: "sc-2utmsz-0"
|
|
@@ -19,8 +19,5 @@ const StyledLabel = styled.label.attrs(props => ({
|
|
|
19
19
|
theme: props.theme,
|
|
20
20
|
variable: 'foreground.default'
|
|
21
21
|
}), props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
22
|
-
StyledLabel.defaultProps = {
|
|
23
|
-
theme: DEFAULT_THEME
|
|
24
|
-
};
|
|
25
22
|
|
|
26
23
|
export { StyledLabel };
|
|
@@ -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 { StyledLabel } from './StyledLabel.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.fieldset_legend';
|
|
12
12
|
const StyledLegend = styled(StyledLabel).attrs({
|
|
13
13
|
as: 'legend',
|
|
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: "StyledLegend",
|
|
18
18
|
componentId: "sc-6s0zwq-0"
|
|
19
19
|
})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledLegend.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledLegend };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledMessageIcon } from './StyledMessageIcon.js';
|
|
11
11
|
import { StyledLabel } from './StyledLabel.js';
|
|
12
12
|
|
|
@@ -45,13 +45,10 @@ const sizeStyles = _ref2 => {
|
|
|
45
45
|
};
|
|
46
46
|
const StyledMessage = styled.div.attrs(props => ({
|
|
47
47
|
'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
|
|
48
|
-
'data-garden-version': props['data-garden-version'] || '9.0.0-next.
|
|
48
|
+
'data-garden-version': props['data-garden-version'] || '9.0.0-next.25'
|
|
49
49
|
})).withConfig({
|
|
50
50
|
displayName: "StyledMessage",
|
|
51
51
|
componentId: "sc-30hgg7-0"
|
|
52
52
|
})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;}", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
53
|
-
StyledMessage.defaultProps = {
|
|
54
|
-
theme: DEFAULT_THEME
|
|
55
|
-
};
|
|
56
53
|
|
|
57
54
|
export { StyledMessage };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import React__default, { Children } from 'react';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import SvgAlertErrorStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg.js';
|
|
11
11
|
import SvgAlertWarningStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/alert-warning-stroke.svg.js';
|
|
12
12
|
import SvgCheckCircleStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/check-circle-stroke.svg.js';
|
|
@@ -32,15 +32,12 @@ const MessageIcon = _ref => {
|
|
|
32
32
|
const COMPONENT_ID = 'forms.input_message_icon';
|
|
33
33
|
const StyledMessageIcon = styled(MessageIcon).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
|
'aria-hidden': null,
|
|
37
37
|
role: 'img'
|
|
38
38
|
}).withConfig({
|
|
39
39
|
displayName: "StyledMessageIcon",
|
|
40
40
|
componentId: "sc-1ph2gba-0"
|
|
41
41
|
})(["width:", ";height:", ";", ";"], props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
42
|
-
StyledMessageIcon.defaultProps = {
|
|
43
|
-
theme: DEFAULT_THEME
|
|
44
|
-
};
|
|
45
42
|
|
|
46
43
|
export { StyledMessageIcon };
|
|
@@ -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, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledFileClose } from './StyledFileClose.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.file';
|
|
@@ -85,13 +85,10 @@ const sizeStyles = _ref2 => {
|
|
|
85
85
|
};
|
|
86
86
|
const StyledFile = styled.div.attrs({
|
|
87
87
|
'data-garden-id': COMPONENT_ID,
|
|
88
|
-
'data-garden-version': '9.0.0-next.
|
|
88
|
+
'data-garden-version': '9.0.0-next.25'
|
|
89
89
|
}).withConfig({
|
|
90
90
|
displayName: "StyledFile",
|
|
91
91
|
componentId: "sc-195lzp1-0"
|
|
92
92
|
})(["display:flex;position:relative;flex-wrap:nowrap;align-items:center;transition:box-shadow 0.1s ease-in-out;", ";", ";& > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}& > [role='progressbar']{position:absolute;bottom:0;left:0;transition:opacity 0.2s ease-in-out;margin:0;border-top-left-radius:0;border-top-right-radius:0;width:100%;& > div{border-top-", "-radius:0;}}& > [role='progressbar'][aria-valuenow='0'],& > [role='progressbar'][aria-valuenow='100']{opacity:0;}", ";"], sizeStyles, colorStyles, props => props.theme.rtl ? 'right' : 'left', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
93
|
-
StyledFile.defaultProps = {
|
|
94
|
-
theme: DEFAULT_THEME
|
|
95
|
-
};
|
|
96
93
|
|
|
97
94
|
export { StyledFile };
|
|
@@ -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 = 'forms.file.close';
|
|
11
11
|
const StyledFileClose = styled.button.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: "StyledFileClose",
|
|
16
16
|
componentId: "sc-1m31jbf-0"
|
|
@@ -18,8 +18,5 @@ const StyledFileClose = styled.button.attrs({
|
|
|
18
18
|
theme: props.theme,
|
|
19
19
|
variable: 'foreground.subtle'
|
|
20
20
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledFileClose.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledFileClose };
|
|
@@ -5,13 +5,13 @@
|
|
|
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
|
import { StyledFileClose } from './StyledFileClose.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.file.delete';
|
|
12
12
|
const StyledFileDelete = styled(StyledFileClose).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: "StyledFileDelete",
|
|
17
17
|
componentId: "sc-a8nnhx-0"
|
|
@@ -19,8 +19,5 @@ const StyledFileDelete = styled(StyledFileClose).attrs({
|
|
|
19
19
|
theme: props.theme,
|
|
20
20
|
variable: 'foreground.danger'
|
|
21
21
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
22
|
-
StyledFileDelete.defaultProps = {
|
|
23
|
-
theme: DEFAULT_THEME
|
|
24
|
-
};
|
|
25
22
|
|
|
26
23
|
export { StyledFileDelete };
|
|
@@ -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 { StyledBaseIcon, retrieveComponentStyles,
|
|
8
|
+
import { StyledBaseIcon, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'forms.file.icon';
|
|
11
11
|
const colorStyles = _ref => {
|
|
@@ -30,13 +30,10 @@ const sizeStyles = _ref2 => {
|
|
|
30
30
|
};
|
|
31
31
|
const StyledFileIcon = styled(StyledBaseIcon).attrs({
|
|
32
32
|
'data-garden-id': COMPONENT_ID,
|
|
33
|
-
'data-garden-version': '9.0.0-next.
|
|
33
|
+
'data-garden-version': '9.0.0-next.25'
|
|
34
34
|
}).withConfig({
|
|
35
35
|
displayName: "StyledFileIcon",
|
|
36
36
|
componentId: "sc-7b3q0c-0"
|
|
37
37
|
})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
38
|
-
StyledFileIcon.defaultProps = {
|
|
39
|
-
theme: DEFAULT_THEME
|
|
40
|
-
};
|
|
41
38
|
|
|
42
39
|
export { StyledFileIcon };
|
|
@@ -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 = 'forms.file_list';
|
|
11
11
|
const StyledFileList = styled.ul.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: "StyledFileList",
|
|
16
16
|
componentId: "sc-gbahjg-0"
|
|
17
17
|
})(["margin:0;padding:0;list-style:none;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledFileList.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledFileList };
|
|
@@ -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 { StyledFileList } from './StyledFileList.js';
|
|
10
10
|
import { StyledFileUpload } from '../file-upload/StyledFileUpload.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'forms.file_list.item';
|
|
13
13
|
const StyledFileListItem = styled.li.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: "StyledFileListItem",
|
|
18
18
|
componentId: "sc-1ova3lo-0"
|
|
19
19
|
})(["&:not(:first-child),", " ~ ", " > &:first-child{margin-top:", "px;}", ";"], StyledFileUpload, StyledFileList, props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledFileListItem.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledFileListItem };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledLabel } from '../common/StyledLabel.js';
|
|
11
11
|
import { StyledHint } from '../common/StyledHint.js';
|
|
12
12
|
import { StyledMessage } from '../common/StyledMessage.js';
|
|
@@ -104,13 +104,10 @@ const sizeStyles = _ref2 => {
|
|
|
104
104
|
};
|
|
105
105
|
const StyledFileUpload = styled.div.attrs({
|
|
106
106
|
'data-garden-id': COMPONENT_ID,
|
|
107
|
-
'data-garden-version': '9.0.0-next.
|
|
107
|
+
'data-garden-version': '9.0.0-next.25'
|
|
108
108
|
}).withConfig({
|
|
109
109
|
displayName: "StyledFileUpload",
|
|
110
110
|
componentId: "sc-1rodjgn-0"
|
|
111
111
|
})(["display:flex;align-items:center;justify-content:center;box-sizing:border-box;direction:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;border:dashed ", ";border-radius:", ";cursor:pointer;text-align:center;user-select:none;", ";&[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.borderWidths.sm, props => props.theme.borderRadii.md, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
112
|
-
StyledFileUpload.defaultProps = {
|
|
113
|
-
theme: DEFAULT_THEME
|
|
114
|
-
};
|
|
115
112
|
|
|
116
113
|
export { StyledFileUpload };
|
|
@@ -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 } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledTextInput } from '../text/StyledTextInput.js';
|
|
10
10
|
import { StyledLabel } from '../common/StyledLabel.js';
|
|
11
11
|
import { StyledHint } from '../common/StyledHint.js';
|
|
@@ -23,13 +23,10 @@ const itemStyles = props => {
|
|
|
23
23
|
};
|
|
24
24
|
const StyledInputGroup = styled.div.attrs({
|
|
25
25
|
'data-garden-id': COMPONENT_ID,
|
|
26
|
-
'data-garden-version': '9.0.0-next.
|
|
26
|
+
'data-garden-version': '9.0.0-next.25'
|
|
27
27
|
}).withConfig({
|
|
28
28
|
displayName: "StyledInputGroup",
|
|
29
29
|
componentId: "sc-kjh1f0-0"
|
|
30
30
|
})(["display:inline-flex;position:relative;flex-wrap:nowrap;align-items:stretch;z-index:0;width:100%;", ";", ";", ";"], props => positionStyles(props), props => itemStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
31
|
-
StyledInputGroup.defaultProps = {
|
|
32
|
-
theme: DEFAULT_THEME
|
|
33
|
-
};
|
|
34
31
|
|
|
35
32
|
export { StyledInputGroup };
|
|
@@ -6,19 +6,16 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledHint } from '../common/StyledHint.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'forms.radio_hint';
|
|
13
13
|
const StyledRadioHint = styled(StyledHint).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: "StyledRadioHint",
|
|
18
18
|
componentId: "sc-eo8twg-0"
|
|
19
19
|
})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledRadioHint.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledRadioHint };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledRadioLabel } from './StyledRadioLabel.js';
|
|
11
11
|
import { StyledMessage } from '../common/StyledMessage.js';
|
|
12
12
|
|
|
@@ -109,14 +109,11 @@ const sizeStyles = _ref2 => {
|
|
|
109
109
|
};
|
|
110
110
|
const StyledRadioInput = styled.input.attrs({
|
|
111
111
|
'data-garden-id': COMPONENT_ID,
|
|
112
|
-
'data-garden-version': '9.0.0-next.
|
|
112
|
+
'data-garden-version': '9.0.0-next.25',
|
|
113
113
|
type: 'radio'
|
|
114
114
|
}).withConfig({
|
|
115
115
|
displayName: "StyledRadioInput",
|
|
116
116
|
componentId: "sc-qsavpv-0"
|
|
117
117
|
})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', StyledRadioLabel, sizeStyles, StyledRadioLabel, StyledRadioLabel, colorStyles, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
118
|
-
StyledRadioInput.defaultProps = {
|
|
119
|
-
theme: DEFAULT_THEME
|
|
120
|
-
};
|
|
121
118
|
|
|
122
119
|
export { StyledRadioInput };
|
|
@@ -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 } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledLabel } from '../common/StyledLabel.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'forms.radio_label';
|
|
@@ -17,14 +17,11 @@ const sizeStyles = props => {
|
|
|
17
17
|
};
|
|
18
18
|
const StyledRadioLabel = styled(StyledLabel).attrs({
|
|
19
19
|
'data-garden-id': COMPONENT_ID,
|
|
20
|
-
'data-garden-version': '9.0.0-next.
|
|
20
|
+
'data-garden-version': '9.0.0-next.25',
|
|
21
21
|
isRadio: true
|
|
22
22
|
}).withConfig({
|
|
23
23
|
displayName: "StyledRadioLabel",
|
|
24
24
|
componentId: "sc-1aq2e5t-0"
|
|
25
25
|
})(["display:inline-block;position:relative;cursor:pointer;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
26
|
-
StyledRadioLabel.defaultProps = {
|
|
27
|
-
theme: DEFAULT_THEME
|
|
28
|
-
};
|
|
29
26
|
|
|
30
27
|
export { StyledRadioLabel };
|
|
@@ -6,19 +6,16 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { math } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledMessage } from '../common/StyledMessage.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'forms.radio_message';
|
|
13
13
|
const StyledRadioMessage = styled(StyledMessage).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: "StyledRadioMessage",
|
|
18
18
|
componentId: "sc-1pmi0q8-0"
|
|
19
19
|
})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 6px`), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledRadioMessage.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledRadioMessage };
|
|
@@ -6,20 +6,17 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import SvgCircleSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/circle-sm-fill.svg.js';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledRadioInput } from './StyledRadioInput.js';
|
|
11
11
|
import { StyledRadioLabel } from './StyledRadioLabel.js';
|
|
12
12
|
|
|
13
13
|
const COMPONENT_ID = 'forms.radio_svg';
|
|
14
14
|
const StyledRadioSvg = styled(SvgCircleSmFill).attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.25'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledRadioSvg",
|
|
19
19
|
componentId: "sc-1r1qtr1-0"
|
|
20
20
|
})(["transition:opacity 0.25s ease-in-out;opacity:0;", ":checked ~ ", " > &{opacity:1;}", ";"], StyledRadioInput, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledRadioSvg.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledRadioSvg };
|
|
@@ -177,7 +177,7 @@ const sizeStyles = _ref2 => {
|
|
|
177
177
|
};
|
|
178
178
|
const StyledRangeInput = styled.input.attrs(props => ({
|
|
179
179
|
'data-garden-id': COMPONENT_ID,
|
|
180
|
-
'data-garden-version': '9.0.0-next.
|
|
180
|
+
'data-garden-version': '9.0.0-next.25',
|
|
181
181
|
type: 'range',
|
|
182
182
|
style: {
|
|
183
183
|
backgroundSize: props.hasLowerTrack && props.backgroundSize
|