Merge pull request #442 from ClickHouse/label_next_to_loading

Showing button label next to loading icon
ClickHouse · Jul 3, 2024 · 131d2c7 · 131d2c7
2 parents 31ac76a + a52747d
commit 131d2c7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts
@@ -24,5 +24,6 @@ export const Playground = {
     align: "center",
     fillWidth: false,
     loading: false,
+    showLabelWithLoading: false,
   },
 };
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -34,6 +34,18 @@ describe("Button", () => {
     expect(loadingButton.length).toEqual(1);
   });
 
+  it("given a loading button and showLabelWithLoading, it should render the loading icon and the label", async () => {
+    const { getAllByTestId, getByTestId } = renderButton({
+      label: "Button",
+      loading: true,
+      showLabelWithLoading: true
+    });
+
+    const loadingButton = getAllByTestId("click-ui-loading-icon");
+    expect(loadingButton.length).toEqual(1);
+    expect(getByTestId("click-ui-loading-icon-wrapper")).toHaveTextContent("Button");
+  });
+
   it("given a non-loading button, it should not render the loading icon", async () => {
     const { queryAllByTestId } = renderButton({
       label: "Button",

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -16,6 +16,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   fillWidth?: boolean;
   loading?: boolean;
   autoFocus?: boolean;
+  showLabelWithLoading?: boolean;
 }
 
 export const Button = ({
@@ -28,6 +29,7 @@ export const Button = ({
   label,
   loading = false,
   disabled,
+  showLabelWithLoading = false,
   ...delegated
 }: ButtonProps) => (
   <StyledButton
@@ -56,12 +58,13 @@ export const Button = ({
       />
     )}
     {loading && (
-      <LoadingIconWrapper>
+      <LoadingIconWrapper data-testid="click-ui-loading-icon-wrapper">
         <Icon
           name="loading-animated"
           data-testid="click-ui-loading-icon"
           aria-label="loading"
-        />
+        ></Icon>
+        {showLabelWithLoading? label ?? children : ""}
       </LoadingIconWrapper>
     )}
   </StyledButton>
@@ -77,6 +80,8 @@ const LoadingIconWrapper = styled.div`
   display: flex;
   align-content: center;
   justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
 `;
 
 const StyledButton = styled(BaseButton)<{