@indico-data/design-system 2.45.4 → 2.45.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.45.4",
+  "version": "2.45.6",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.stories.tsx

@@ -126,8 +126,9 @@ const meta: Meta = {
         category: 'State Props',
       },
       defaultValue: { summary: false },
-      description:
-        'Disables the button and shows a load spinner on the left hand side of the button children',
+      description: `Disables the button and shows a load spinner on the left hand side of the button children by default.
+        If iconLeft is passed, the loading icon will be displayed on the left hand side of the iconLeft.
+        If iconRight is passed, the loading icon will be displayed on the right hand side of the iconRight.`,
     },
     isDisabled: {
       control: 'boolean',
@@ -416,8 +417,18 @@ export const Loading: Story = {
         </Button>
       </Col>
       <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <Button {...args} variant="action" iconRight="thumbs-up">
+          Icon Right
+        </Button>
+      </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <span className="mr-2">Icon Only (Left)</span>
         <Button {...args} variant="action" iconLeft="thumbs-up" />
       </Col>
+      <Col xs={6} sm={4} md={3} lg={2} className="mb-3">
+        <span className="mr-2">Icon Only (Right)</span>
+        <Button {...args} variant="action" iconRight="thumbs-up" />
+      </Col>
     </Row>
   ),
 };

package/src/components/button/Button.tsx

@@ -59,19 +59,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       onKeyDown={onKeyDown}
       {...rest}
     >
-      {/* Loading Icon */}
-      {isLoading && (
+      {/* Loading Icon on the left (default) */}
+      {isLoading && !iconRight && (
         <Icon
           name="indico-o"
           style={{ animation: 'spin 1s linear infinite' }}
-          className="mr-2"
+          className={children ? 'mr-2' : ''}
           ariaLabel="Loading..."
           size={size}
         />
       )}
 
       {/* Left Icon */}
-      {iconLeft && (
+      {iconLeft && !isLoading && (
         <Icon
           name={iconLeft}
           className={children ? 'mr-2' : ''}
@@ -84,7 +84,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
       {children}
 
       {/* Right Icon */}
-      {iconRight && (
+      {iconRight && !isLoading && (
         <Icon
           name={iconRight}
           className={children ? 'ml-2' : ''}
@@ -92,6 +92,17 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
           size={size}
         />
       )}
+
+      {/* Loading Icon on the right */}
+      {isLoading && iconRight && (
+        <Icon
+          name="indico-o"
+          style={{ animation: 'spin 1s linear infinite' }}
+          className={children ? 'ml-2' : ''}
+          ariaLabel="Loading..."
+          size={size}
+        />
+      )}
     </button>
   );
 });

package/src/components/button/__tests__/Button.test.tsx

@@ -45,7 +45,7 @@ describe('Button', () => {
       expect(button).toHaveClass('btn--pill');
     });
 
-    it('loads the corresponding loading class and shows loading icon', () => {
+    it('loads the corresponding loading class and shows loading icon when isLoading is true', () => {
       render(
         <Button isLoading onClick={onClick} ariaLabel="btn">
           Button
@@ -60,6 +60,43 @@ describe('Button', () => {
       expect(loadingIcon).toHaveClass('mr-2');
     });
 
+    it('displays the loading icon on the left when isLoading and iconLeft exists and hides the iconLeft', () => {
+      render(
+        <Button isLoading iconLeft="check" onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const loadingIcon = screen.getByLabelText('Loading...');
+      const iconLeft = screen.queryByLabelText('check Icon');
+
+      expect(loadingIcon).toHaveClass('mr-2');
+      expect(iconLeft).not.toBeInTheDocument();
+    });
+
+    it('displays the loading icon on the right when isLoading and iconRight exists and hides the iconRight', () => {
+      render(
+        <Button isLoading iconRight="check" onClick={onClick} ariaLabel="btn">
+          Button
+        </Button>,
+      );
+      const loadingIcon = screen.getByLabelText('Loading...');
+      const iconRight = screen.queryByLabelText('check Icon');
+
+      expect(loadingIcon).toHaveClass('ml-2');
+      expect(iconRight).not.toBeInTheDocument();
+    });
+
+    it('does not apply a margin to the loading icon when no children are present', () => {
+      render(<Button isLoading iconLeft="check" onClick={onClick} ariaLabel="btn" />);
+      const loadingIcon = screen.getByLabelText('Loading...');
+      expect(loadingIcon).not.toHaveClass('mr-2');
+      expect(loadingIcon).not.toHaveClass('ml-2');
+
+      render(<Button isLoading iconRight="check" onClick={onClick} ariaLabel="btn" />);
+      expect(loadingIcon).not.toHaveClass('mr-2');
+      expect(loadingIcon).not.toHaveClass('ml-2');
+    });
+
     it('does not apply the loading class when not loading', () => {
       render(
         <Button isLoading={false} onClick={onClick} ariaLabel="btn">

package/src/components/button/styles/_variables.scss

@@ -46,7 +46,7 @@
 
   // link
   --pf-button-link-color: var(--pf-primary-color);
-  --pf-button-link-hover-color: var(--pf-primary-color-600);
+  --pf-button-link-hover-color: var(--pf-primary-color-400);
   --pf-button-link-disabled-color: var(--pf-primary-color-300);
 
   // action
@@ -96,9 +96,9 @@
   --pf-button-outline-disabled-color: var(--pf-tertiary-color-450);
 
   // link colors
-  --pf-button-link-color: var(--pf-secondary-color-550);
-  --pf-button-link-hover-color: var(--pf-secondary-color-800);
-  --pf-button-link-disabled-color: var(--pf-primary-color-200);
+  --pf-button-link-color: var(--pf-secondary-color-300);
+  --pf-button-link-hover-color: var(--pf-secondary-color-200);
+  --pf-button-link-disabled-color: var(--pf-tertiary-color-450);
 
   // action colors
   --pf-button-action-color: var(--pf-secondary-color-300);