@clickhouse/click-ui 0.0.151 → 0.0.152
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/click-ui.es.js
CHANGED
|
@@ -10094,16 +10094,20 @@ const Button = ({
|
|
|
10094
10094
|
label,
|
|
10095
10095
|
loading = false,
|
|
10096
10096
|
disabled,
|
|
10097
|
+
showLabelWithLoading = false,
|
|
10097
10098
|
...delegated
|
|
10098
10099
|
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledButton, { $styleType: type, $align: align, $fillWidth: fillWidth, disabled: disabled || loading, role: "button", ...delegated, children: [
|
|
10099
10100
|
iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
|
|
10100
10101
|
label ?? children,
|
|
10101
10102
|
iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" }),
|
|
10102
|
-
loading && /* @__PURE__ */ jsxRuntimeExports.
|
|
10103
|
+
loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingIconWrapper, { "data-testid": "click-ui-loading-icon-wrapper", children: [
|
|
10104
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", "data-testid": "click-ui-loading-icon", "aria-label": "loading" }),
|
|
10105
|
+
showLabelWithLoading ? label ?? children : ""
|
|
10106
|
+
] })
|
|
10103
10107
|
] });
|
|
10104
10108
|
const LoadingIconWrapper = styled.div.withConfig({
|
|
10105
10109
|
componentId: "sc-1k4tz4c-0"
|
|
10106
|
-
})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]);
|
|
10110
|
+
})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;align-items:center;gap:0.5rem;"]);
|
|
10107
10111
|
const StyledButton = styled(BaseButton).withConfig({
|
|
10108
10112
|
componentId: "sc-1k4tz4c-1"
|
|
10109
10113
|
})(["width:", ";color:", ";background-color:", ";border:", " solid ", ";font:", ";position:relative;display:flex;align-items:center;justify-content:", ";white-space:nowrap;&:hover{background-color:", ";border:", " solid ", ";transition:", ";font:", ";}&:active,&:focus{background-color:", ";border:1px solid ", ";font:", ";}&:disabled,&:disabled:hover,&:disabled:active{background-color:", ";color:", ";border:", " solid ", ";font:", ";}"], ({
|
package/dist/click-ui.umd.js
CHANGED
|
@@ -10111,16 +10111,20 @@ var __publicField = (obj, key, value) => {
|
|
|
10111
10111
|
label,
|
|
10112
10112
|
loading = false,
|
|
10113
10113
|
disabled,
|
|
10114
|
+
showLabelWithLoading = false,
|
|
10114
10115
|
...delegated
|
|
10115
10116
|
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledButton, { $styleType: type, $align: align, $fillWidth: fillWidth, disabled: disabled || loading, role: "button", ...delegated, children: [
|
|
10116
10117
|
iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
|
|
10117
10118
|
label ?? children,
|
|
10118
10119
|
iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" }),
|
|
10119
|
-
loading && /* @__PURE__ */ jsxRuntimeExports.
|
|
10120
|
+
loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingIconWrapper, { "data-testid": "click-ui-loading-icon-wrapper", children: [
|
|
10121
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", "data-testid": "click-ui-loading-icon", "aria-label": "loading" }),
|
|
10122
|
+
showLabelWithLoading ? label ?? children : ""
|
|
10123
|
+
] })
|
|
10120
10124
|
] });
|
|
10121
10125
|
const LoadingIconWrapper = styled.div.withConfig({
|
|
10122
10126
|
componentId: "sc-1k4tz4c-0"
|
|
10123
|
-
})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]);
|
|
10127
|
+
})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;align-items:center;gap:0.5rem;"]);
|
|
10124
10128
|
const StyledButton = styled(BaseButton).withConfig({
|
|
10125
10129
|
componentId: "sc-1k4tz4c-1"
|
|
10126
10130
|
})(["width:", ";color:", ";background-color:", ";border:", " solid ", ";font:", ";position:relative;display:flex;align-items:center;justify-content:", ";white-space:nowrap;&:hover{background-color:", ";border:", " solid ", ";transition:", ";font:", ";}&:active,&:focus{background-color:", ";border:1px solid ", ";font:", ";}&:disabled,&:disabled:hover,&:disabled:active{background-color:", ";color:", ";border:", " solid ", ";font:", ";}"], ({
|
|
@@ -13,6 +13,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
|
13
13
|
fillWidth?: boolean;
|
|
14
14
|
loading?: boolean;
|
|
15
15
|
autoFocus?: boolean;
|
|
16
|
+
showLabelWithLoading?: boolean;
|
|
16
17
|
}
|
|
17
|
-
export declare const Button: ({ type, iconLeft, iconRight, align, children, fillWidth, label, loading, disabled, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const Button: ({ type, iconLeft, iconRight, align, children, fillWidth, label, loading, disabled, showLabelWithLoading, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|