@indico-data/design-system 2.32.0 → 2.32.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/lib/index.css +8 -0
- package/lib/index.esm.css +8 -0
- package/lib/index.esm.js +2 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.tsx +5 -3
- package/src/components/button/styles/Button.scss +9 -0
package/lib/index.css
CHANGED
|
@@ -526,6 +526,14 @@ a:hover, .link:hover {
|
|
|
526
526
|
font-size: var(--pf-font-size-h2);
|
|
527
527
|
}
|
|
528
528
|
|
|
529
|
+
.btn--icon-only {
|
|
530
|
+
padding-left: var(--pf-padding-2);
|
|
531
|
+
padding-right: var(--pf-padding-2);
|
|
532
|
+
}
|
|
533
|
+
.btn--icon-only.btn--md {
|
|
534
|
+
height: 32px;
|
|
535
|
+
}
|
|
536
|
+
|
|
529
537
|
.btn--primary {
|
|
530
538
|
background: var(--pf-button-primary-color);
|
|
531
539
|
color: var(--pf-button-primary-text-color);
|
package/lib/index.esm.css
CHANGED
|
@@ -526,6 +526,14 @@ a:hover, .link:hover {
|
|
|
526
526
|
font-size: var(--pf-font-size-h2);
|
|
527
527
|
}
|
|
528
528
|
|
|
529
|
+
.btn--icon-only {
|
|
530
|
+
padding-left: var(--pf-padding-2);
|
|
531
|
+
padding-right: var(--pf-padding-2);
|
|
532
|
+
}
|
|
533
|
+
.btn--icon-only.btn--md {
|
|
534
|
+
height: 32px;
|
|
535
|
+
}
|
|
536
|
+
|
|
529
537
|
.btn--primary {
|
|
530
538
|
background: var(--pf-button-primary-color);
|
|
531
539
|
color: var(--pf-button-primary-text-color);
|
package/lib/index.esm.js
CHANGED
|
@@ -5518,6 +5518,7 @@ const Button$2 = forwardRef((props, ref) => {
|
|
|
5518
5518
|
[`btn--${color}`]: color,
|
|
5519
5519
|
[`btn--${variant}`]: variant,
|
|
5520
5520
|
[`btn--${size}`]: size,
|
|
5521
|
+
'btn--icon-only': !children && iconName,
|
|
5521
5522
|
'btn--loading': isLoading,
|
|
5522
5523
|
}, className);
|
|
5523
5524
|
const handleOnClick = (event) => {
|
|
@@ -5525,7 +5526,7 @@ const Button$2 = forwardRef((props, ref) => {
|
|
|
5525
5526
|
onClick(event);
|
|
5526
5527
|
}
|
|
5527
5528
|
};
|
|
5528
|
-
return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseEnter: onMouseEnter, onMouseLeave: onMouseExit, onKeyDown: onKeyDown }, rest, { children: [isLoading && (jsx(Icon, { name: "fa-circle-notch", style: { animation: 'spin 1s linear infinite' }, className: "mr-2", ariaLabel: "Loading..." })), !children && iconName && jsx(Icon, { name: iconName, ariaLabel: `${iconName} Icon
|
|
5529
|
+
return (jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseEnter: onMouseEnter, onMouseLeave: onMouseExit, onKeyDown: onKeyDown }, rest, { children: [isLoading && (jsx(Icon, { name: "fa-circle-notch", style: { animation: 'spin 1s linear infinite' }, className: "mr-2", ariaLabel: "Loading...", size: size })), !children && iconName && jsx(Icon, { name: iconName, ariaLabel: `${iconName} Icon`, size: size }), children && iconPosition === 'left' && iconName && (jsx(Icon, { name: iconName, className: "mr-2", ariaLabel: `${iconName} Icon`, size: size })), children, children && iconPosition === 'right' && iconName && (jsx(Icon, { name: iconName, className: "ml-2", ariaLabel: `${iconName} Icon`, size: size }))] })));
|
|
5529
5530
|
});
|
|
5530
5531
|
|
|
5531
5532
|
function ownKeys$2(object, enumerableOnly) {
|