@patternfly/react-core 4.199.4 → 4.200.1
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/CHANGELOG.md +30 -0
- package/dist/esm/components/Avatar/Avatar.d.ts +2 -0
- package/dist/esm/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/esm/components/Avatar/Avatar.js +2 -2
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/FormSelect/FormSelect.d.ts +2 -0
- package/dist/esm/components/FormSelect/FormSelect.d.ts.map +1 -1
- package/dist/esm/components/FormSelect/FormSelect.js +3 -2
- package/dist/esm/components/FormSelect/FormSelect.js.map +1 -1
- package/dist/esm/components/TextArea/TextArea.d.ts +2 -0
- package/dist/esm/components/TextArea/TextArea.d.ts.map +1 -1
- package/dist/esm/components/TextArea/TextArea.js +4 -3
- package/dist/esm/components/TextArea/TextArea.js.map +1 -1
- package/dist/esm/components/TextInput/TextInput.d.ts +2 -0
- package/dist/esm/components/TextInput/TextInput.d.ts.map +1 -1
- package/dist/esm/components/TextInput/TextInput.js +3 -2
- package/dist/esm/components/TextInput/TextInput.js.map +1 -1
- package/dist/js/components/Avatar/Avatar.d.ts +2 -0
- package/dist/js/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/js/components/Avatar/Avatar.js +2 -2
- package/dist/js/components/Avatar/Avatar.js.map +1 -1
- package/dist/js/components/FormSelect/FormSelect.d.ts +2 -0
- package/dist/js/components/FormSelect/FormSelect.d.ts.map +1 -1
- package/dist/js/components/FormSelect/FormSelect.js +3 -2
- package/dist/js/components/FormSelect/FormSelect.js.map +1 -1
- package/dist/js/components/TextArea/TextArea.d.ts +2 -0
- package/dist/js/components/TextArea/TextArea.d.ts.map +1 -1
- package/dist/js/components/TextArea/TextArea.js +4 -3
- package/dist/js/components/TextArea/TextArea.js.map +1 -1
- package/dist/js/components/TextInput/TextInput.d.ts +2 -0
- package/dist/js/components/TextInput/TextInput.d.ts.map +1 -1
- package/dist/js/components/TextInput/TextInput.js +3 -2
- package/dist/js/components/TextInput/TextInput.js.map +1 -1
- package/dist/umd/react-core.css +2 -2
- package/dist/umd/react-core.js +12 -9
- package/dist/umd/react-core.min.css +2 -2
- package/dist/umd/react-core.min.js +2 -2
- package/package.json +6 -6
- package/src/components/Avatar/Avatar.tsx +4 -0
- package/src/components/Avatar/examples/Avatar.md +33 -4
- package/src/components/FormSelect/FormSelect.tsx +16 -1
- package/src/components/FormSelect/examples/FormSelect.md +58 -0
- package/src/components/TextArea/TextArea.tsx +5 -0
- package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap +2 -0
- package/src/components/TextArea/examples/TextArea.md +43 -0
- package/src/components/TextInput/TextInput.tsx +5 -0
- package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +2 -0
- package/src/components/TextInput/examples/TextInput.md +104 -27
- package/src/components/Tooltip/examples/Tooltip.md +9 -1
- package/src/components/Tooltip/examples/TooltipExamples.css +4 -4
package/dist/umd/react-core.js
CHANGED
|
@@ -5581,8 +5581,8 @@
|
|
|
5581
5581
|
};
|
|
5582
5582
|
|
|
5583
5583
|
const Avatar = (_a) => {
|
|
5584
|
-
var { className = '', src = '', alt, border } = _a, props = __rest$1(_a, ["className", "src", "alt", "border"]);
|
|
5585
|
-
return (React__namespace.createElement("img", Object.assign({ src: src, alt: alt, className: css(_default$18.avatar, border === 'light' && _default$18.modifiers.light, border === 'dark' && _default$18.modifiers.dark, className) }, props)));
|
|
5584
|
+
var { className = '', src = '', alt, border, size } = _a, props = __rest$1(_a, ["className", "src", "alt", "border", "size"]);
|
|
5585
|
+
return (React__namespace.createElement("img", Object.assign({ src: src, alt: alt, className: css(_default$18.avatar, _default$18.modifiers[size], border === 'light' && _default$18.modifiers.light, border === 'dark' && _default$18.modifiers.dark, className) }, props)));
|
|
5586
5586
|
};
|
|
5587
5587
|
Avatar.displayName = 'Avatar';
|
|
5588
5588
|
|
|
@@ -5903,7 +5903,7 @@
|
|
|
5903
5903
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
5904
5904
|
onChange, onFocus, onBlur, isLeftTruncated,
|
|
5905
5905
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
5906
|
-
isReadOnly, isRequired, isDisabled, iconVariant, customIconUrl, customIconDimensions, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["innerRef", "className", "type", "value", "validated", "onChange", "onFocus", "onBlur", "isLeftTruncated", "isReadOnly", "isRequired", "isDisabled", "iconVariant", "customIconUrl", "customIconDimensions", "ouiaId", "ouiaSafe"]);
|
|
5906
|
+
isReadOnly, isRequired, isDisabled, isIconSprite, iconVariant, customIconUrl, customIconDimensions, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["innerRef", "className", "type", "value", "validated", "onChange", "onFocus", "onBlur", "isLeftTruncated", "isReadOnly", "isRequired", "isDisabled", "isIconSprite", "iconVariant", "customIconUrl", "customIconDimensions", "ouiaId", "ouiaSafe"]);
|
|
5907
5907
|
const customIconStyle = {};
|
|
5908
5908
|
if (customIconUrl) {
|
|
5909
5909
|
customIconStyle.backgroundImage = `url('${customIconUrl}')`;
|
|
@@ -5911,7 +5911,7 @@
|
|
|
5911
5911
|
if (customIconDimensions) {
|
|
5912
5912
|
customIconStyle.backgroundSize = customIconDimensions;
|
|
5913
5913
|
}
|
|
5914
|
-
return (React__namespace.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$1c.formControl, validated === exports.ValidatedOptions.success && _default$1c.modifiers.success, validated === exports.ValidatedOptions.warning && _default$1c.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$1c.modifiers.icon, iconVariant && _default$1c.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": props['aria-invalid'] ? props['aria-invalid'] : validated === exports.ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }), getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
|
|
5914
|
+
return (React__namespace.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$1c.formControl, isIconSprite && _default$1c.modifiers.iconSprite, validated === exports.ValidatedOptions.success && _default$1c.modifiers.success, validated === exports.ValidatedOptions.warning && _default$1c.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$1c.modifiers.icon, iconVariant && _default$1c.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": props['aria-invalid'] ? props['aria-invalid'] : validated === exports.ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }), getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
|
|
5915
5915
|
}
|
|
5916
5916
|
}
|
|
5917
5917
|
TextInputBase.displayName = 'TextInputBase';
|
|
@@ -5922,6 +5922,7 @@
|
|
|
5922
5922
|
validated: 'default',
|
|
5923
5923
|
isDisabled: false,
|
|
5924
5924
|
isReadOnly: false,
|
|
5925
|
+
isIconSprite: false,
|
|
5925
5926
|
type: exports.TextInputTypes.text,
|
|
5926
5927
|
isLeftTruncated: false,
|
|
5927
5928
|
onChange: () => undefined,
|
|
@@ -8750,11 +8751,11 @@
|
|
|
8750
8751
|
};
|
|
8751
8752
|
}
|
|
8752
8753
|
render() {
|
|
8753
|
-
const _a = this.props, { children, className, value, validated, isDisabled, isRequired, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "value", "validated", "isDisabled", "isRequired", "ouiaId", "ouiaSafe"]);
|
|
8754
|
+
const _a = this.props, { children, className, value, validated, isDisabled, isRequired, isIconSprite, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "value", "validated", "isDisabled", "isRequired", "isIconSprite", "ouiaId", "ouiaSafe"]);
|
|
8754
8755
|
/* find selected option and get placeholder flag */
|
|
8755
8756
|
const selectedOption = React__namespace.Children.toArray(children).find((option) => option.props.value === value);
|
|
8756
8757
|
const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
|
|
8757
|
-
return (React__namespace.createElement("select", Object.assign({}, props, { className: css(_default$1c.formControl, className, validated === exports.ValidatedOptions.success && _default$1c.modifiers.success, validated === exports.ValidatedOptions.warning && _default$1c.modifiers.warning, isSelectedPlaceholder && _default$1c.modifiers.placeholder), "aria-invalid": validated === exports.ValidatedOptions.error }, getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { onChange: this.handleChange, disabled: isDisabled, required: isRequired, value: value }), children));
|
|
8758
|
+
return (React__namespace.createElement("select", Object.assign({}, props, { className: css(_default$1c.formControl, isIconSprite && _default$1c.modifiers.iconSprite, className, validated === exports.ValidatedOptions.success && _default$1c.modifiers.success, validated === exports.ValidatedOptions.warning && _default$1c.modifiers.warning, isSelectedPlaceholder && _default$1c.modifiers.placeholder), "aria-invalid": validated === exports.ValidatedOptions.error }, getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { onChange: this.handleChange, disabled: isDisabled, required: isRequired, value: value }), children));
|
|
8758
8759
|
}
|
|
8759
8760
|
}
|
|
8760
8761
|
FormSelect.displayName = 'FormSelect';
|
|
@@ -8764,6 +8765,7 @@
|
|
|
8764
8765
|
validated: 'default',
|
|
8765
8766
|
isDisabled: false,
|
|
8766
8767
|
isRequired: false,
|
|
8768
|
+
isIconSprite: false,
|
|
8767
8769
|
onBlur: () => undefined,
|
|
8768
8770
|
onFocus: () => undefined,
|
|
8769
8771
|
onChange: () => undefined,
|
|
@@ -8824,13 +8826,13 @@
|
|
|
8824
8826
|
}
|
|
8825
8827
|
}
|
|
8826
8828
|
render() {
|
|
8827
|
-
const _a = this.props, { className, value, validated, isRequired, isDisabled, isReadOnly, resizeOrientation, innerRef, readOnly, disabled,
|
|
8829
|
+
const _a = this.props, { className, value, validated, isRequired, isDisabled, isIconSprite, isReadOnly, resizeOrientation, innerRef, readOnly, disabled,
|
|
8828
8830
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
8829
8831
|
autoResize, onChange } = _a,
|
|
8830
8832
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
8831
|
-
props = __rest$1(_a, ["className", "value", "validated", "isRequired", "isDisabled", "isReadOnly", "resizeOrientation", "innerRef", "readOnly", "disabled", "autoResize", "onChange"]);
|
|
8833
|
+
props = __rest$1(_a, ["className", "value", "validated", "isRequired", "isDisabled", "isIconSprite", "isReadOnly", "resizeOrientation", "innerRef", "readOnly", "disabled", "autoResize", "onChange"]);
|
|
8832
8834
|
const orientation = `resize${capitalize(resizeOrientation)}`;
|
|
8833
|
-
return (React__namespace.createElement("textarea", Object.assign({ className: css(_default$1c.formControl, className, resizeOrientation !== exports.TextAreResizeOrientation.both && _default$1c.modifiers[orientation], validated === exports.ValidatedOptions.success && _default$1c.modifiers.success, validated === exports.ValidatedOptions.warning && _default$1c.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === exports.ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
|
|
8835
|
+
return (React__namespace.createElement("textarea", Object.assign({ className: css(_default$1c.formControl, isIconSprite && _default$1c.modifiers.iconSprite, className, resizeOrientation !== exports.TextAreResizeOrientation.both && _default$1c.modifiers[orientation], validated === exports.ValidatedOptions.success && _default$1c.modifiers.success, validated === exports.ValidatedOptions.warning && _default$1c.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === exports.ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
|
|
8834
8836
|
}
|
|
8835
8837
|
}
|
|
8836
8838
|
TextAreaBase.displayName = 'TextArea';
|
|
@@ -8839,6 +8841,7 @@
|
|
|
8839
8841
|
className: '',
|
|
8840
8842
|
isRequired: false,
|
|
8841
8843
|
isDisabled: false,
|
|
8844
|
+
isIconSprite: false,
|
|
8842
8845
|
validated: 'default',
|
|
8843
8846
|
resizeOrientation: 'both',
|
|
8844
8847
|
'aria-label': null
|
|
@@ -859,7 +859,7 @@
|
|
|
859
859
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
|
|
860
860
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#success");
|
|
861
861
|
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#warning");
|
|
862
|
-
--pf-c-form-control--m-icon-sprite--
|
|
862
|
+
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#invalid");
|
|
863
863
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#select");
|
|
864
864
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#search");
|
|
865
865
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#calendar");
|
|
@@ -1005,7 +1005,7 @@
|
|
|
1005
1005
|
.pf-c-form-control.pf-m-icon-sprite {
|
|
1006
1006
|
--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
|
|
1007
1007
|
--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
|
|
1008
|
-
--pf-c-form-control--
|
|
1008
|
+
--pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
|
|
1009
1009
|
--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
|
|
1010
1010
|
--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
|
|
1011
1011
|
--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
|