@clickhouse/click-ui 0.0.151 → 0.0.153

package/dist/click-ui.es.js

@@ -10094,16 +10094,22 @@ const Button = ({
   label,
   loading = false,
   disabled,
+  showLabelWithLoading = false,
   ...delegated
 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledButton, { $styleType: type, $align: align, $fillWidth: fillWidth, disabled: disabled || loading, role: "button", ...delegated, children: [
-  iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
-  label ?? children,
-  iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" }),
-  loading && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", "data-testid": "click-ui-loading-icon", "aria-label": "loading" }) })
+  !loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
+    label ?? children,
+    iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" })
+  ] }),
+  loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingIconWrapper, { "data-testid": "click-ui-loading-icon-wrapper", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", "data-testid": "click-ui-loading-icon", "aria-label": "loading" }),
+    showLabelWithLoading ? label ?? children : ""
+  ] })
 ] });
 const LoadingIconWrapper = styled.div.withConfig({
   componentId: "sc-1k4tz4c-0"
-})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]);
+})(["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;"]);
 const StyledButton = styled(BaseButton).withConfig({
   componentId: "sc-1k4tz4c-1"
 })(["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:", ";}"], ({
@@ -10244,10 +10250,12 @@ const CustomIcon = styled.img.withConfig({
 }) => theme2.click.image.lg.size.width);
 const InfoLink = styled.a.withConfig({
   componentId: "sc-1drx130-4"
-})(["display:flex;align-items:center;color:", ";text-decoration:none;"], ({
+})(["display:flex;align-items:center;color:", ";gap:", ";text-decoration:none;"], ({
   theme: theme2
-}) => theme2.click.card.secondary.color.link.default);
-const ArrowContainer = styled(SvgImage).withConfig({
+}) => theme2.click.card.secondary.color.link.default, ({
+  theme: theme2
+}) => theme2.click.card.secondary.space.link.gap);
+const LinkIconContainer = styled(SvgImage).withConfig({
   componentId: "sc-1drx130-5"
 })(["color:", ";height:", ";width:", ";"], ({
   theme: theme2
@@ -10259,7 +10267,7 @@ const ArrowContainer = styled(SvgImage).withConfig({
 const LinkText = styled(Text).withConfig({
   componentId: "sc-1drx130-6"
 })([""]);
-const LinkArrow = styled(ArrowContainer).withConfig({
+const LinkIcon = styled(LinkIconContainer).withConfig({
   componentId: "sc-1drx130-7"
 })([""]);
 const Wrapper$a = styled.div.withConfig({
@@ -10279,7 +10287,7 @@ const Wrapper$a = styled.div.withConfig({
   theme: theme2
 }) => $hasShadow ? theme2.shadow[1] : "none", ({
   theme: theme2
-}) => theme2.click.card.secondary.color.background.hover, LinkText, LinkArrow, ({
+}) => theme2.click.card.secondary.color.background.hover, LinkText, LinkIcon, ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.hover, ({
   theme: theme2
@@ -10290,7 +10298,7 @@ const Wrapper$a = styled.div.withConfig({
       cursor: not-allowed;
 
       ${LinkText},
-      ${LinkArrow} {
+      ${LinkIcon} {
         color: ${theme2.click.card.secondary.color.link.disabled};
       }
     `);
@@ -10305,6 +10313,8 @@ const CardSecondary = ({
   description,
   infoUrl,
   infoText,
+  infoIcon = "chevron-right",
+  infoIconSize = "md",
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
@@ -10318,7 +10328,7 @@ const CardSecondary = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(Content$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "muted", children: description }) }),
     (infoUrl || infoText) && /* @__PURE__ */ jsxRuntimeExports.jsxs(InfoLink, { href: disabled ? void 0 : infoUrl, as: disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(LinkText, { children: infoText }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(LinkArrow, { name: "chevron-right" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(LinkIcon, { size: infoIconSize, name: infoIcon })
     ] })
   ] });
 };
@@ -45596,7 +45606,10 @@ const click = {
     secondary: {
       space: {
         all: "1rem",
-        gap: "1rem"
+        gap: "1rem",
+        link: {
+          gap: "0.5rem"
+        }
       },
       radii: {
         all: "0.25rem"

package/dist/click-ui.umd.js

@@ -10111,16 +10111,22 @@ var __publicField = (obj, key, value) => {
     label,
     loading = false,
     disabled,
+    showLabelWithLoading = false,
     ...delegated
   }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledButton, { $styleType: type, $align: align, $fillWidth: fillWidth, disabled: disabled || loading, role: "button", ...delegated, children: [
-    iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
-    label ?? children,
-    iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" }),
-    loading && /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", "data-testid": "click-ui-loading-icon", "aria-label": "loading" }) })
+    !loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
+      label ?? children,
+      iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" })
+    ] }),
+    loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingIconWrapper, { "data-testid": "click-ui-loading-icon-wrapper", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", "data-testid": "click-ui-loading-icon", "aria-label": "loading" }),
+      showLabelWithLoading ? label ?? children : ""
+    ] })
   ] });
   const LoadingIconWrapper = styled.div.withConfig({
     componentId: "sc-1k4tz4c-0"
-  })(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]);
+  })(["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;"]);
   const StyledButton = styled(BaseButton).withConfig({
     componentId: "sc-1k4tz4c-1"
   })(["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:", ";}"], ({
@@ -10261,10 +10267,12 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.image.lg.size.width);
   const InfoLink = styled.a.withConfig({
     componentId: "sc-1drx130-4"
-  })(["display:flex;align-items:center;color:", ";text-decoration:none;"], ({
+  })(["display:flex;align-items:center;color:", ";gap:", ";text-decoration:none;"], ({
     theme: theme2
-  }) => theme2.click.card.secondary.color.link.default);
-  const ArrowContainer = styled(SvgImage).withConfig({
+  }) => theme2.click.card.secondary.color.link.default, ({
+    theme: theme2
+  }) => theme2.click.card.secondary.space.link.gap);
+  const LinkIconContainer = styled(SvgImage).withConfig({
     componentId: "sc-1drx130-5"
   })(["color:", ";height:", ";width:", ";"], ({
     theme: theme2
@@ -10276,7 +10284,7 @@ var __publicField = (obj, key, value) => {
   const LinkText = styled(Text).withConfig({
     componentId: "sc-1drx130-6"
   })([""]);
-  const LinkArrow = styled(ArrowContainer).withConfig({
+  const LinkIcon = styled(LinkIconContainer).withConfig({
     componentId: "sc-1drx130-7"
   })([""]);
   const Wrapper$a = styled.div.withConfig({
@@ -10296,7 +10304,7 @@ var __publicField = (obj, key, value) => {
     theme: theme2
   }) => $hasShadow ? theme2.shadow[1] : "none", ({
     theme: theme2
-  }) => theme2.click.card.secondary.color.background.hover, LinkText, LinkArrow, ({
+  }) => theme2.click.card.secondary.color.background.hover, LinkText, LinkIcon, ({
     theme: theme2
   }) => theme2.click.card.secondary.color.link.hover, ({
     theme: theme2
@@ -10307,7 +10315,7 @@ var __publicField = (obj, key, value) => {
       cursor: not-allowed;
 
       ${LinkText},
-      ${LinkArrow} {
+      ${LinkIcon} {
         color: ${theme2.click.card.secondary.color.link.disabled};
       }
     `);
@@ -10322,6 +10330,8 @@ var __publicField = (obj, key, value) => {
     description,
     infoUrl,
     infoText,
+    infoIcon = "chevron-right",
+    infoIconSize = "md",
     ...props
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
@@ -10335,7 +10345,7 @@ var __publicField = (obj, key, value) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(Content$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "muted", children: description }) }),
       (infoUrl || infoText) && /* @__PURE__ */ jsxRuntimeExports.jsxs(InfoLink, { href: disabled ? void 0 : infoUrl, as: disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(LinkText, { children: infoText }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(LinkArrow, { name: "chevron-right" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(LinkIcon, { size: infoIconSize, name: infoIcon })
       ] })
     ] });
   };
@@ -45613,7 +45623,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       secondary: {
         space: {
           all: "1rem",
-          gap: "1rem"
+          gap: "1rem",
+          link: {
+            gap: "0.5rem"
+          }
         },
         radii: {
           all: "0.25rem"

package/dist/components/Button/Button.d.ts

@@ -13,6 +13,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     fillWidth?: boolean;
     loading?: boolean;
     autoFocus?: boolean;
+    showLabelWithLoading?: boolean;
 }
-export declare const Button: ({ type, iconLeft, iconRight, align, children, fillWidth, label, loading, disabled, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ type, iconLeft, iconRight, align, children, fillWidth, label, loading, disabled, showLabelWithLoading, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CardSecondary/CardSecondary.d.ts

@@ -1,4 +1,5 @@
 import { IconName } from '..';
+import { IconSize } from '../Icon/types';
 import { HTMLAttributes, ReactNode } from 'react';
 
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
@@ -13,5 +14,7 @@ export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     description: ReactNode;
     infoUrl?: string;
     infoText?: string;
+    infoIcon?: IconName;
+    infoIconSize?: IconSize;
 }
-export declare const CardSecondary: ({ title, icon, iconUrl, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardSecondary: ({ title, icon, iconUrl, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, infoIcon, infoIconSize, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/styles/types.d.ts

@@ -786,6 +786,9 @@ export interface Theme {
                 "space": {
                     "all": string;
                     "gap": string;
+                    "link": {
+                        "gap": string;
+                    };
                 };
                 "radii": {
                     "all": string;

package/dist/styles/variables.json.d.ts

@@ -785,7 +785,10 @@ declare const _default: {
       "secondary": {
         "space": {
           "all": "1rem",
-          "gap": "1rem"
+          "gap": "1rem",
+          "link": {
+            "gap": "0.5rem"
+          }
         },
         "radii": {
           "all": "0.25rem"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.151",
+  "version": "0.0.153",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",