@mackin.com/styleguide 7.0.3 → 7.0.4
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/index.js +6 -6
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1612,7 +1612,7 @@ const ErrorModal = (props) => {
|
|
|
1612
1612
|
const Form = React__namespace.forwardRef((props, ref) => {
|
|
1613
1613
|
const { inline, children, onSubmit } = props, rest = __rest(props, ["inline", "children", "onSubmit"]);
|
|
1614
1614
|
const theme = useThemeSafely();
|
|
1615
|
-
return (react.jsx("form", Object.assign({ ref: ref, className: "form"
|
|
1615
|
+
return (react.jsx("form", Object.assign({}, rest, { ref: ref, className: "form", css: {
|
|
1616
1616
|
display: 'flex',
|
|
1617
1617
|
flexDirection: props.inline ? 'row' : 'column',
|
|
1618
1618
|
alignItems: props.inline ? 'flex-end' : 'normal',
|
|
@@ -2049,23 +2049,23 @@ const Input = React__namespace.forwardRef((props, ref) => {
|
|
|
2049
2049
|
if (props.type === 'number') {
|
|
2050
2050
|
inputElement = react.jsx("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly,
|
|
2051
2051
|
// set fixed default to defeat pasting stupid numbers
|
|
2052
|
-
maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id,
|
|
2052
|
+
maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: props.inputClassName, placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, css: inputStyles });
|
|
2053
2053
|
}
|
|
2054
2054
|
else if (props.type === 'date') {
|
|
2055
|
-
inputElement = react.jsx("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id,
|
|
2055
|
+
inputElement = react.jsx("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: props.inputClassName, placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, css: inputStyles });
|
|
2056
2056
|
}
|
|
2057
2057
|
else if (props.type === 'textarea') {
|
|
2058
|
-
inputElement = react.jsx("textarea", { ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, css: react.css `
|
|
2058
|
+
inputElement = react.jsx("textarea", { ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: props.inputClassName, placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, css: react.css `
|
|
2059
2059
|
${inputStyles}
|
|
2060
2060
|
max-width: 100%;
|
|
2061
2061
|
min-height: ${theme.controls.height};
|
|
2062
2062
|
padding-top: 0.75rem;
|
|
2063
2063
|
height:auto;
|
|
2064
|
-
|
|
2064
|
+
` });
|
|
2065
2065
|
}
|
|
2066
2066
|
else {
|
|
2067
2067
|
// text, password, email, and url
|
|
2068
|
-
inputElement = react.jsx("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id,
|
|
2068
|
+
inputElement = react.jsx("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: props.inputClassName, placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, css: inputStyles });
|
|
2069
2069
|
}
|
|
2070
2070
|
const inputWrapperStyles = react.css `
|
|
2071
2071
|
width:100%;
|