@patternfly/react-core 4.203.1 → 4.203.2
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 +8 -0
- package/dist/esm/components/Form/Form.d.ts +3 -1
- package/dist/esm/components/Form/Form.d.ts.map +1 -1
- package/dist/esm/components/Form/Form.js +4 -2
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Switch/Switch.d.ts +7 -5
- package/dist/esm/components/Switch/Switch.d.ts.map +1 -1
- package/dist/esm/components/Switch/Switch.js +3 -1
- package/dist/esm/components/Switch/Switch.js.map +1 -1
- package/dist/js/components/Form/Form.d.ts +3 -1
- package/dist/js/components/Form/Form.d.ts.map +1 -1
- package/dist/js/components/Form/Form.js +4 -2
- package/dist/js/components/Form/Form.js.map +1 -1
- package/dist/js/components/Switch/Switch.d.ts +7 -5
- package/dist/js/components/Switch/Switch.d.ts.map +1 -1
- package/dist/js/components/Switch/Switch.js +3 -1
- package/dist/js/components/Switch/Switch.js.map +1 -1
- package/dist/umd/react-core.css +102 -14
- package/dist/umd/react-core.js +12 -3
- package/dist/umd/react-core.min.css +102 -14
- package/dist/umd/react-core.min.js +1 -1
- package/package.json +6 -6
- package/src/components/Form/Form.tsx +11 -2
- package/src/components/Switch/Switch.tsx +13 -5
- package/src/components/Switch/examples/Switch.md +64 -5
- package/src/components/Toolbar/examples/Toolbar.md +7 -39
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 4.203.2 (2022-04-18)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## 4.203.1 (2022-04-18)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @patternfly/react-core
|
|
@@ -6,8 +6,10 @@ export interface FormProps extends React.HTMLProps<HTMLFormElement> {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
/** Sets the Form to horizontal. */
|
|
8
8
|
isHorizontal?: boolean;
|
|
9
|
-
/**
|
|
9
|
+
/** Limits the max-width of the form. */
|
|
10
10
|
isWidthLimited?: boolean;
|
|
11
|
+
/** Sets a custom max-width for the form. */
|
|
12
|
+
maxWidth?: string;
|
|
11
13
|
}
|
|
12
14
|
export declare const Form: React.FunctionComponent<FormProps>;
|
|
13
15
|
//# sourceMappingURL=Form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACjE,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACjE,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CA0BnD,CAAC"}
|
|
@@ -3,8 +3,10 @@ import * as React from 'react';
|
|
|
3
3
|
import styles from '@patternfly/react-styles/css/components/Form/form';
|
|
4
4
|
import { css } from '@patternfly/react-styles';
|
|
5
5
|
export const Form = (_a) => {
|
|
6
|
-
var { children = null, className = '', isHorizontal = false, isWidthLimited = false } = _a, props = __rest(_a, ["children", "className", "isHorizontal", "isWidthLimited"]);
|
|
7
|
-
return (React.createElement("form", Object.assign({ noValidate: true },
|
|
6
|
+
var { children = null, className = '', isHorizontal = false, isWidthLimited = false, maxWidth = '' } = _a, props = __rest(_a, ["children", "className", "isHorizontal", "isWidthLimited", "maxWidth"]);
|
|
7
|
+
return (React.createElement("form", Object.assign({ noValidate: true }, (maxWidth && {
|
|
8
|
+
style: Object.assign({ '--pf-c-form--m-limit-width--MaxWidth': maxWidth }, props.style)
|
|
9
|
+
}), props, { className: css(styles.form, isHorizontal && styles.modifiers.horizontal, (isWidthLimited || maxWidth) && styles.modifiers.limitWidth, className) }), children));
|
|
8
10
|
};
|
|
9
11
|
Form.displayName = 'Form';
|
|
10
12
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAe/C,MAAM,CAAC,MAAM,IAAI,GAAuC,CAAC,EAO7C,EAAE,EAAE;QAPyC,EACvD,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,EAAE,EACd,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,QAAQ,GAAG,EAAE,OAEH,EADP,KAAK,cAN+C,uEAOxD,CADS;IACO,OAAA,CACf,4CACE,UAAU,UACN,CAAC,QAAQ,IAAI;QACf,KAAK,EAAE,gBACL,sCAAsC,EAAE,QAAQ,IAC7C,KAAK,CAAC,KAAK,CACQ;KACzB,CAAC,EACE,KAAK,IACT,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,IAAI,EACX,YAAY,IAAI,MAAM,CAAC,SAAS,CAAC,UAAU,EAC3C,CAAC,cAAc,IAAI,QAAQ,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC,UAAU,EAC3D,SAAS,CACV,KAEA,QAAQ,CACJ,CACR,CAAA;CAAA,CAAC;AACF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
|
|
@@ -3,19 +3,21 @@ import { OUIAProps } from '../../helpers';
|
|
|
3
3
|
export interface SwitchProps extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
|
|
4
4
|
/** id for the label. */
|
|
5
5
|
id?: string;
|
|
6
|
-
/** Additional classes added to the
|
|
6
|
+
/** Additional classes added to the switch */
|
|
7
7
|
className?: string;
|
|
8
8
|
/** Text value for the label when on */
|
|
9
9
|
label?: React.ReactNode;
|
|
10
10
|
/** Text value for the label when off */
|
|
11
11
|
labelOff?: React.ReactNode;
|
|
12
|
-
/** Flag to show if the
|
|
12
|
+
/** Flag to show if the switch is checked. */
|
|
13
13
|
isChecked?: boolean;
|
|
14
|
-
/** Flag to show if the
|
|
14
|
+
/** Flag to show if the switch has a check icon. */
|
|
15
|
+
hasCheckIcon?: boolean;
|
|
16
|
+
/** Flag to show if the switch is disabled. */
|
|
15
17
|
isDisabled?: boolean;
|
|
16
|
-
/** A callback for when the
|
|
18
|
+
/** A callback for when the switch selection changes. (isChecked, event) => {} */
|
|
17
19
|
onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
|
|
18
|
-
/** Adds accessible text to the
|
|
20
|
+
/** Adds accessible text to the switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
|
|
19
21
|
'aria-label'?: string;
|
|
20
22
|
/** Flag to reverse the layout of toggle and label (toggle on right). */
|
|
21
23
|
isReversed?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAE1E,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzF,SAAS;IACX,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,qMAAqM;IACrM,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IAC3F,MAAM,CAAC,WAAW,SAAY;IAC9B,EAAE,EAAE,MAAM,CAAC;IAEX,MAAM,CAAC,YAAY,EAAE,WAAW,CAM9B;gBAEU,KAAK,EAAE,WAAW,GAAG,SAAS;IAa1C,MAAM;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAE1E,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzF,SAAS;IACX,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,qMAAqM;IACrM,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IAC3F,MAAM,CAAC,WAAW,SAAY;IAC9B,EAAE,EAAE,MAAM,CAAC;IAEX,MAAM,CAAC,YAAY,EAAE,WAAW,CAM9B;gBAEU,KAAK,EAAE,WAAW,GAAG,SAAS;IAa1C,MAAM;CAmEP"}
|
|
@@ -20,13 +20,15 @@ export class Switch extends React.Component {
|
|
|
20
20
|
render() {
|
|
21
21
|
const _a = this.props, {
|
|
22
22
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
23
|
-
id, className, label, labelOff, isChecked, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest(_a, ["id", "className", "label", "labelOff", "isChecked", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
|
|
23
|
+
id, className, label, labelOff, isChecked, hasCheckIcon, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest(_a, ["id", "className", "label", "labelOff", "isChecked", "hasCheckIcon", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
|
|
24
24
|
const isAriaLabelledBy = props['aria-label'] === '';
|
|
25
25
|
return (React.createElement("label", Object.assign({ className: css(styles.switch, isReversed && styles.modifiers.reverse, className), htmlFor: this.id }, getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
|
|
26
26
|
React.createElement("input", Object.assign({ id: this.id, className: css(styles.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event), checked: isChecked, disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
|
|
27
27
|
label !== undefined ? (React.createElement(React.Fragment, null,
|
|
28
28
|
React.createElement("span", { className: css(styles.switchToggle) }),
|
|
29
29
|
React.createElement("span", { className: css(styles.switchLabel, styles.modifiers.on), id: isAriaLabelledBy ? `${this.id}-on` : null, "aria-hidden": "true" }, label),
|
|
30
|
+
hasCheckIcon && (React.createElement("div", { className: css(styles.switchToggleIcon), "aria-hidden": "true" },
|
|
31
|
+
React.createElement(CheckIcon, { noVerticalAlign: true }))),
|
|
30
32
|
React.createElement("span", { className: css(styles.switchLabel, styles.modifiers.off), id: isAriaLabelledBy ? `${this.id}-off` : null, "aria-hidden": "true" }, labelOff !== undefined ? labelOff : label))) : (React.createElement("span", { className: css(styles.switchToggle) },
|
|
31
33
|
React.createElement("div", { className: css(styles.switchToggleIcon), "aria-hidden": "true" },
|
|
32
34
|
React.createElement(CheckIcon, { noVerticalAlign: true }))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,uDAAuD,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,SAAS,MAAM,mDAAmD,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAa,gBAAgB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,8 +6,10 @@ export interface FormProps extends React.HTMLProps<HTMLFormElement> {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
/** Sets the Form to horizontal. */
|
|
8
8
|
isHorizontal?: boolean;
|
|
9
|
-
/**
|
|
9
|
+
/** Limits the max-width of the form. */
|
|
10
10
|
isWidthLimited?: boolean;
|
|
11
|
+
/** Sets a custom max-width for the form. */
|
|
12
|
+
maxWidth?: string;
|
|
11
13
|
}
|
|
12
14
|
export declare const Form: React.FunctionComponent<FormProps>;
|
|
13
15
|
//# sourceMappingURL=Form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACjE,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACjE,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CA0BnD,CAAC"}
|
|
@@ -6,8 +6,10 @@ const React = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
const form_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Form/form"));
|
|
7
7
|
const react_styles_1 = require("@patternfly/react-styles");
|
|
8
8
|
const Form = (_a) => {
|
|
9
|
-
var { children = null, className = '', isHorizontal = false, isWidthLimited = false } = _a, props = tslib_1.__rest(_a, ["children", "className", "isHorizontal", "isWidthLimited"]);
|
|
10
|
-
return (React.createElement("form", Object.assign({ noValidate: true },
|
|
9
|
+
var { children = null, className = '', isHorizontal = false, isWidthLimited = false, maxWidth = '' } = _a, props = tslib_1.__rest(_a, ["children", "className", "isHorizontal", "isWidthLimited", "maxWidth"]);
|
|
10
|
+
return (React.createElement("form", Object.assign({ noValidate: true }, (maxWidth && {
|
|
11
|
+
style: Object.assign({ '--pf-c-form--m-limit-width--MaxWidth': maxWidth }, props.style)
|
|
12
|
+
}), props, { className: react_styles_1.css(form_1.default.form, isHorizontal && form_1.default.modifiers.horizontal, (isWidthLimited || maxWidth) && form_1.default.modifiers.limitWidth, className) }), children));
|
|
11
13
|
};
|
|
12
14
|
exports.Form = Form;
|
|
13
15
|
exports.Form.displayName = 'Form';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/Form/Form.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AAexC,MAAM,IAAI,GAAuC,CAAC,EAO7C,EAAE,EAAE;QAPyC,EACvD,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,EAAE,EACd,YAAY,GAAG,KAAK,EACpB,cAAc,GAAG,KAAK,EACtB,QAAQ,GAAG,EAAE,OAEH,EADP,KAAK,sBAN+C,uEAOxD,CADS;IACO,OAAA,CACf,4CACE,UAAU,UACN,CAAC,QAAQ,IAAI;QACf,KAAK,EAAE,gBACL,sCAAsC,EAAE,QAAQ,IAC7C,KAAK,CAAC,KAAK,CACQ;KACzB,CAAC,EACE,KAAK,IACT,SAAS,EAAE,kBAAG,CACZ,cAAM,CAAC,IAAI,EACX,YAAY,IAAI,cAAM,CAAC,SAAS,CAAC,UAAU,EAC3C,CAAC,cAAc,IAAI,QAAQ,CAAC,IAAI,cAAM,CAAC,SAAS,CAAC,UAAU,EAC3D,SAAS,CACV,KAEA,QAAQ,CACJ,CACR,CAAA;CAAA,CAAC;AA1BW,QAAA,IAAI,QA0Bf;AACF,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
|
|
@@ -3,19 +3,21 @@ import { OUIAProps } from '../../helpers';
|
|
|
3
3
|
export interface SwitchProps extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
|
|
4
4
|
/** id for the label. */
|
|
5
5
|
id?: string;
|
|
6
|
-
/** Additional classes added to the
|
|
6
|
+
/** Additional classes added to the switch */
|
|
7
7
|
className?: string;
|
|
8
8
|
/** Text value for the label when on */
|
|
9
9
|
label?: React.ReactNode;
|
|
10
10
|
/** Text value for the label when off */
|
|
11
11
|
labelOff?: React.ReactNode;
|
|
12
|
-
/** Flag to show if the
|
|
12
|
+
/** Flag to show if the switch is checked. */
|
|
13
13
|
isChecked?: boolean;
|
|
14
|
-
/** Flag to show if the
|
|
14
|
+
/** Flag to show if the switch has a check icon. */
|
|
15
|
+
hasCheckIcon?: boolean;
|
|
16
|
+
/** Flag to show if the switch is disabled. */
|
|
15
17
|
isDisabled?: boolean;
|
|
16
|
-
/** A callback for when the
|
|
18
|
+
/** A callback for when the switch selection changes. (isChecked, event) => {} */
|
|
17
19
|
onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
|
|
18
|
-
/** Adds accessible text to the
|
|
20
|
+
/** Adds accessible text to the switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true. */
|
|
19
21
|
'aria-label'?: string;
|
|
20
22
|
/** Flag to reverse the layout of toggle and label (toggle on right). */
|
|
21
23
|
isReversed?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAE1E,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzF,SAAS;IACX,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,qMAAqM;IACrM,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IAC3F,MAAM,CAAC,WAAW,SAAY;IAC9B,EAAE,EAAE,MAAM,CAAC;IAEX,MAAM,CAAC,YAAY,EAAE,WAAW,CAM9B;gBAEU,KAAK,EAAE,WAAW,GAAG,SAAS;IAa1C,MAAM;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAE1E,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzF,SAAS;IACX,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,qMAAqM;IACrM,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IAC3F,MAAM,CAAC,WAAW,SAAY;IAC9B,EAAE,EAAE,MAAM,CAAC;IAEX,MAAM,CAAC,YAAY,EAAE,WAAW,CAM9B;gBAEU,KAAK,EAAE,WAAW,GAAG,SAAS;IAa1C,MAAM;CAmEP"}
|
|
@@ -23,13 +23,15 @@ class Switch extends React.Component {
|
|
|
23
23
|
render() {
|
|
24
24
|
const _a = this.props, {
|
|
25
25
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
26
|
-
id, className, label, labelOff, isChecked, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = tslib_1.__rest(_a, ["id", "className", "label", "labelOff", "isChecked", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
|
|
26
|
+
id, className, label, labelOff, isChecked, hasCheckIcon, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = tslib_1.__rest(_a, ["id", "className", "label", "labelOff", "isChecked", "hasCheckIcon", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
|
|
27
27
|
const isAriaLabelledBy = props['aria-label'] === '';
|
|
28
28
|
return (React.createElement("label", Object.assign({ className: react_styles_1.css(switch_1.default.switch, isReversed && switch_1.default.modifiers.reverse, className), htmlFor: this.id }, helpers_1.getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
|
|
29
29
|
React.createElement("input", Object.assign({ id: this.id, className: react_styles_1.css(switch_1.default.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event), checked: isChecked, disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
|
|
30
30
|
label !== undefined ? (React.createElement(React.Fragment, null,
|
|
31
31
|
React.createElement("span", { className: react_styles_1.css(switch_1.default.switchToggle) }),
|
|
32
32
|
React.createElement("span", { className: react_styles_1.css(switch_1.default.switchLabel, switch_1.default.modifiers.on), id: isAriaLabelledBy ? `${this.id}-on` : null, "aria-hidden": "true" }, label),
|
|
33
|
+
hasCheckIcon && (React.createElement("div", { className: react_styles_1.css(switch_1.default.switchToggleIcon), "aria-hidden": "true" },
|
|
34
|
+
React.createElement(check_icon_1.default, { noVerticalAlign: true }))),
|
|
33
35
|
React.createElement("span", { className: react_styles_1.css(switch_1.default.switchLabel, switch_1.default.modifiers.off), id: isAriaLabelledBy ? `${this.id}-off` : null, "aria-hidden": "true" }, labelOff !== undefined ? labelOff : label))) : (React.createElement("span", { className: react_styles_1.css(switch_1.default.switchToggle) },
|
|
34
36
|
React.createElement("div", { className: react_styles_1.css(switch_1.default.switchToggleIcon), "aria-hidden": "true" },
|
|
35
37
|
React.createElement(check_icon_1.default, { noVerticalAlign: true }))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,2GAA2E;AAC3E,2DAA+C;AAC/C,0GAA0E;AAC1E,6CAAiD;AACjD,2CAA0E;
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
package/dist/umd/react-core.css
CHANGED
|
@@ -10335,17 +10335,24 @@ ul.pf-c-list {
|
|
|
10335
10335
|
grid-template-columns: 1fr auto;
|
|
10336
10336
|
}
|
|
10337
10337
|
}
|
|
10338
|
+
.pf-c-login__main-header-utilities,
|
|
10338
10339
|
.pf-c-login__main-header .pf-c-dropdown {
|
|
10339
10340
|
grid-column: auto;
|
|
10340
10341
|
grid-row: auto;
|
|
10341
10342
|
}
|
|
10342
10343
|
|
|
10343
10344
|
@media (min-width: 768px) {
|
|
10344
|
-
.pf-c-login__main-header
|
|
10345
|
+
.pf-c-login__main-header-utilities,
|
|
10346
|
+
.pf-c-login__main-header .pf-c-dropdown {
|
|
10345
10347
|
grid-column: 2/3;
|
|
10346
10348
|
grid-row: 1;
|
|
10347
10349
|
}
|
|
10348
10350
|
}
|
|
10351
|
+
.pf-c-login__main-header-utilities .pf-c-dropdown {
|
|
10352
|
+
grid-column: auto;
|
|
10353
|
+
grid-row: auto;
|
|
10354
|
+
}
|
|
10355
|
+
|
|
10349
10356
|
.pf-c-login__main-header-desc {
|
|
10350
10357
|
margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
|
|
10351
10358
|
font-size: var(--pf-c-login__main-header-desc--FontSize);
|
|
@@ -18037,6 +18044,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18037
18044
|
--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
|
|
18038
18045
|
--pf-c-tabs__list--Display: flex;
|
|
18039
18046
|
--pf-c-tabs__list--Visibility: visible;
|
|
18047
|
+
--pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
|
|
18048
|
+
--pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
|
|
18040
18049
|
--pf-c-tabs__link--Color: var(--pf-global--Color--200);
|
|
18041
18050
|
--pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
|
|
18042
18051
|
--pf-c-tabs__link--BackgroundColor: transparent;
|
|
@@ -18052,11 +18061,14 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18052
18061
|
--pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
|
|
18053
18062
|
--pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
18054
18063
|
--pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
|
|
18064
|
+
--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
|
|
18055
18065
|
--pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
|
|
18056
18066
|
--pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
|
|
18067
|
+
--pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
|
|
18068
|
+
--pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
18057
18069
|
--pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
18058
18070
|
--pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
18059
|
-
--pf-c-tabs__link--before--
|
|
18071
|
+
--pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
18060
18072
|
--pf-c-tabs__link--before--BorderTopWidth: 0;
|
|
18061
18073
|
--pf-c-tabs__link--before--BorderRightWidth: 0;
|
|
18062
18074
|
--pf-c-tabs__link--before--BorderBottomWidth: 0;
|
|
@@ -18114,6 +18126,19 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18114
18126
|
--pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
|
|
18115
18127
|
--pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
|
|
18116
18128
|
--pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
|
|
18129
|
+
--pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
|
|
18130
|
+
--pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
|
|
18131
|
+
--pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
|
|
18132
|
+
--pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
|
|
18133
|
+
--pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
|
|
18134
|
+
--pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
|
|
18135
|
+
--pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
|
|
18136
|
+
--pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
|
|
18137
|
+
--pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
|
|
18138
|
+
--pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
|
|
18139
|
+
--pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
|
|
18140
|
+
--pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
|
|
18141
|
+
--pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
|
|
18117
18142
|
position: relative;
|
|
18118
18143
|
display: flex;
|
|
18119
18144
|
width: var(--pf-c-tabs--Width);
|
|
@@ -18235,6 +18260,10 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18235
18260
|
--pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
|
|
18236
18261
|
}
|
|
18237
18262
|
|
|
18263
|
+
.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
|
|
18264
|
+
--pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
|
|
18265
|
+
}
|
|
18266
|
+
|
|
18238
18267
|
.pf-c-tabs.pf-m-vertical {
|
|
18239
18268
|
--pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
|
|
18240
18269
|
--pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
|
|
@@ -18430,6 +18459,8 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18430
18459
|
|
|
18431
18460
|
.pf-c-tabs.pf-m-secondary {
|
|
18432
18461
|
--pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
|
|
18462
|
+
--pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
|
|
18463
|
+
--pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
|
|
18433
18464
|
}
|
|
18434
18465
|
|
|
18435
18466
|
.pf-c-tabs.pf-m-page-insets {
|
|
@@ -18498,11 +18529,28 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18498
18529
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
|
|
18499
18530
|
}
|
|
18500
18531
|
|
|
18532
|
+
.pf-c-tabs__item.pf-m-action {
|
|
18533
|
+
--pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
|
|
18534
|
+
position: relative;
|
|
18535
|
+
}
|
|
18536
|
+
|
|
18537
|
+
.pf-c-tabs__item.pf-m-action::before {
|
|
18538
|
+
z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
|
|
18539
|
+
}
|
|
18540
|
+
|
|
18541
|
+
.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
|
|
18542
|
+
.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
|
|
18543
|
+
content: revert;
|
|
18544
|
+
}
|
|
18545
|
+
|
|
18501
18546
|
.pf-c-tabs::before,
|
|
18502
18547
|
.pf-c-tabs__list::before,
|
|
18503
18548
|
.pf-c-tabs__link::before,
|
|
18504
18549
|
.pf-c-tabs__link::after,
|
|
18505
|
-
.pf-c-
|
|
18550
|
+
.pf-c-tabs__item.pf-m-action::before,
|
|
18551
|
+
.pf-c-tabs__item.pf-m-action::after,
|
|
18552
|
+
.pf-c-tabs__scroll-button::before,
|
|
18553
|
+
.pf-c-tabs__add::before {
|
|
18506
18554
|
position: absolute;
|
|
18507
18555
|
right: 0;
|
|
18508
18556
|
bottom: 0;
|
|
@@ -18514,18 +18562,21 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18514
18562
|
.pf-c-tabs__list::before,
|
|
18515
18563
|
.pf-c-tabs__link::before,
|
|
18516
18564
|
.pf-c-tabs__link::after,
|
|
18517
|
-
.pf-c-
|
|
18565
|
+
.pf-c-tabs__item.pf-m-action::before,
|
|
18566
|
+
.pf-c-tabs__item.pf-m-action::after,
|
|
18567
|
+
.pf-c-tabs__scroll-button::before,
|
|
18568
|
+
.pf-c-tabs__add::before {
|
|
18518
18569
|
top: 0;
|
|
18519
18570
|
}
|
|
18520
18571
|
|
|
18521
18572
|
.pf-c-tabs__link,
|
|
18522
18573
|
.pf-c-tabs__scroll-button,
|
|
18523
|
-
.pf-c-tabs__list::before
|
|
18574
|
+
.pf-c-tabs__list::before,
|
|
18575
|
+
.pf-c-tabs__add::before {
|
|
18524
18576
|
border: 0;
|
|
18525
18577
|
}
|
|
18526
18578
|
|
|
18527
18579
|
.pf-c-tabs__link {
|
|
18528
|
-
--pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
|
|
18529
18580
|
position: relative;
|
|
18530
18581
|
display: flex;
|
|
18531
18582
|
flex: 1;
|
|
@@ -18533,19 +18584,24 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18533
18584
|
font-size: var(--pf-c-tabs__link--FontSize);
|
|
18534
18585
|
color: var(--pf-c-tabs__link--Color);
|
|
18535
18586
|
text-decoration: none;
|
|
18536
|
-
background-color: var(--pf-c-tabs__link--BackgroundColor);
|
|
18537
18587
|
outline-offset: var(--pf-c-tabs__link--OutlineOffset);
|
|
18538
18588
|
}
|
|
18539
18589
|
|
|
18540
|
-
.pf-c-tabs__link
|
|
18590
|
+
.pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
|
|
18591
|
+
--pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
|
|
18592
|
+
background-color: var(--pf-c-tabs__link--BackgroundColor);
|
|
18593
|
+
}
|
|
18594
|
+
|
|
18595
|
+
.pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
|
|
18541
18596
|
pointer-events: none;
|
|
18542
|
-
border-color: var(--pf-c-tabs__link--before--border-color--base);
|
|
18543
18597
|
border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
|
|
18598
|
+
border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
|
|
18544
18599
|
border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
|
|
18545
18600
|
border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
|
|
18601
|
+
border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
|
|
18546
18602
|
}
|
|
18547
18603
|
|
|
18548
|
-
.pf-c-tabs__link::after {
|
|
18604
|
+
.pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
|
|
18549
18605
|
top: var(--pf-c-tabs__link--after--Top);
|
|
18550
18606
|
right: var(--pf-c-tabs__link--after--Right);
|
|
18551
18607
|
bottom: var(--pf-c-tabs__link--after--Bottom);
|
|
@@ -18554,15 +18610,15 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18554
18610
|
border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
|
|
18555
18611
|
}
|
|
18556
18612
|
|
|
18557
|
-
.pf-c-tabs__link:hover {
|
|
18613
|
+
.pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
|
|
18558
18614
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
|
|
18559
18615
|
}
|
|
18560
18616
|
|
|
18561
|
-
.pf-c-tabs__link:focus {
|
|
18617
|
+
.pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
|
|
18562
18618
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
|
|
18563
18619
|
}
|
|
18564
18620
|
|
|
18565
|
-
.pf-c-tabs__link:active {
|
|
18621
|
+
.pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
|
|
18566
18622
|
--pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
|
|
18567
18623
|
}
|
|
18568
18624
|
|
|
@@ -18570,7 +18626,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18570
18626
|
pointer-events: none;
|
|
18571
18627
|
}
|
|
18572
18628
|
|
|
18573
|
-
.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
|
|
18629
|
+
.pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
|
|
18574
18630
|
--pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
|
|
18575
18631
|
--pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
|
|
18576
18632
|
--pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
|
|
@@ -18592,6 +18648,23 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18592
18648
|
--pf-c-tabs__link--child--MarginRight: 0;
|
|
18593
18649
|
}
|
|
18594
18650
|
|
|
18651
|
+
.pf-c-tabs__item-close {
|
|
18652
|
+
display: flex;
|
|
18653
|
+
}
|
|
18654
|
+
|
|
18655
|
+
.pf-c-tabs__item-close .pf-c-button {
|
|
18656
|
+
--pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
|
|
18657
|
+
--pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
|
|
18658
|
+
--pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
|
|
18659
|
+
--pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
|
|
18660
|
+
outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
|
|
18661
|
+
}
|
|
18662
|
+
|
|
18663
|
+
.pf-c-tabs__item-close-icon {
|
|
18664
|
+
display: inline-block;
|
|
18665
|
+
margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
|
|
18666
|
+
}
|
|
18667
|
+
|
|
18595
18668
|
.pf-c-tabs__scroll-button {
|
|
18596
18669
|
flex: none;
|
|
18597
18670
|
width: var(--pf-c-tabs__scroll-button--Width);
|
|
@@ -18629,6 +18702,21 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
18629
18702
|
pointer-events: none;
|
|
18630
18703
|
}
|
|
18631
18704
|
|
|
18705
|
+
.pf-c-tabs__add {
|
|
18706
|
+
position: relative;
|
|
18707
|
+
display: flex;
|
|
18708
|
+
}
|
|
18709
|
+
|
|
18710
|
+
.pf-c-tabs__add::before {
|
|
18711
|
+
border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
|
|
18712
|
+
}
|
|
18713
|
+
|
|
18714
|
+
.pf-c-tabs__add .pf-c-button {
|
|
18715
|
+
--pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
|
|
18716
|
+
--pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
|
|
18717
|
+
--pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
|
|
18718
|
+
}
|
|
18719
|
+
|
|
18632
18720
|
.pf-c-tabs.pf-m-inset-none {
|
|
18633
18721
|
--pf-c-tabs--inset: 0;
|
|
18634
18722
|
--pf-c-tabs--m-vertical--inset: 0;
|
package/dist/umd/react-core.js
CHANGED
|
@@ -13306,8 +13306,10 @@
|
|
|
13306
13306
|
ActionGroup.displayName = 'ActionGroup';
|
|
13307
13307
|
|
|
13308
13308
|
const Form = (_a) => {
|
|
13309
|
-
var { children = null, className = '', isHorizontal = false, isWidthLimited = false } = _a, props = __rest$1(_a, ["children", "className", "isHorizontal", "isWidthLimited"]);
|
|
13310
|
-
return (React__namespace.createElement("form", Object.assign({ noValidate: true },
|
|
13309
|
+
var { children = null, className = '', isHorizontal = false, isWidthLimited = false, maxWidth = '' } = _a, props = __rest$1(_a, ["children", "className", "isHorizontal", "isWidthLimited", "maxWidth"]);
|
|
13310
|
+
return (React__namespace.createElement("form", Object.assign({ noValidate: true }, (maxWidth && {
|
|
13311
|
+
style: Object.assign({ '--pf-c-form--m-limit-width--MaxWidth': maxWidth }, props.style)
|
|
13312
|
+
}), props, { className: css(styles$Z.form, isHorizontal && styles$Z.modifiers.horizontal, (isWidthLimited || maxWidth) && styles$Z.modifiers.limitWidth, className) }), children));
|
|
13311
13313
|
};
|
|
13312
13314
|
Form.displayName = 'Form';
|
|
13313
13315
|
|
|
@@ -14106,6 +14108,7 @@
|
|
|
14106
14108
|
"loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
|
|
14107
14109
|
"loginMainHeader": "pf-c-login__main-header",
|
|
14108
14110
|
"loginMainHeaderDesc": "pf-c-login__main-header-desc",
|
|
14111
|
+
"loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
|
|
14109
14112
|
"title": "pf-c-title"
|
|
14110
14113
|
};
|
|
14111
14114
|
|
|
@@ -18112,13 +18115,15 @@
|
|
|
18112
18115
|
render() {
|
|
18113
18116
|
const _a = this.props, {
|
|
18114
18117
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
18115
|
-
id, className, label, labelOff, isChecked, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "className", "label", "labelOff", "isChecked", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
|
|
18118
|
+
id, className, label, labelOff, isChecked, hasCheckIcon, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "className", "label", "labelOff", "isChecked", "hasCheckIcon", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
|
|
18116
18119
|
const isAriaLabelledBy = props['aria-label'] === '';
|
|
18117
18120
|
return (React__namespace.createElement("label", Object.assign({ className: css(styles$i.switch, isReversed && styles$i.modifiers.reverse, className), htmlFor: this.id }, getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
|
|
18118
18121
|
React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$i.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event), checked: isChecked, disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
|
|
18119
18122
|
label !== undefined ? (React__namespace.createElement(React__namespace.Fragment, null,
|
|
18120
18123
|
React__namespace.createElement("span", { className: css(styles$i.switchToggle) }),
|
|
18121
18124
|
React__namespace.createElement("span", { className: css(styles$i.switchLabel, styles$i.modifiers.on), id: isAriaLabelledBy ? `${this.id}-on` : null, "aria-hidden": "true" }, label),
|
|
18125
|
+
hasCheckIcon && (React__namespace.createElement("div", { className: css(styles$i.switchToggleIcon), "aria-hidden": "true" },
|
|
18126
|
+
React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true }))),
|
|
18122
18127
|
React__namespace.createElement("span", { className: css(styles$i.switchLabel, styles$i.modifiers.off), id: isAriaLabelledBy ? `${this.id}-off` : null, "aria-hidden": "true" }, labelOff !== undefined ? labelOff : label))) : (React__namespace.createElement("span", { className: css(styles$i.switchToggle) },
|
|
18123
18128
|
React__namespace.createElement("div", { className: css(styles$i.switchToggleIcon), "aria-hidden": "true" },
|
|
18124
18129
|
React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true }))))));
|
|
@@ -18160,6 +18165,7 @@
|
|
|
18160
18165
|
"nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
|
|
18161
18166
|
"expanded": "pf-m-expanded",
|
|
18162
18167
|
"pageInsets": "pf-m-page-insets",
|
|
18168
|
+
"action": "pf-m-action",
|
|
18163
18169
|
"disabled": "pf-m-disabled",
|
|
18164
18170
|
"ariaDisabled": "pf-m-aria-disabled",
|
|
18165
18171
|
"insetNone": "pf-m-inset-none",
|
|
@@ -18200,7 +18206,10 @@
|
|
|
18200
18206
|
"inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
|
|
18201
18207
|
},
|
|
18202
18208
|
"tabs": "pf-c-tabs",
|
|
18209
|
+
"tabsAdd": "pf-c-tabs__add",
|
|
18203
18210
|
"tabsItem": "pf-c-tabs__item",
|
|
18211
|
+
"tabsItemClose": "pf-c-tabs__item-close",
|
|
18212
|
+
"tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
|
|
18204
18213
|
"tabsItemIcon": "pf-c-tabs__item-icon",
|
|
18205
18214
|
"tabsItemText": "pf-c-tabs__item-text",
|
|
18206
18215
|
"tabsLink": "pf-c-tabs__link",
|