Merge pull request #691 from strapi/fix/TextButton-loading-state

[Fix] TextButton loading state
strapi · Sep 16, 2022 · b00351a · b00351a
2 parents 348a0ae + 421a600
commit b00351a
Show file tree

Hide file tree

Showing 5 changed files with 394 additions and 28 deletions.
diff --git a/packages/strapi-design-system/src/Button/Button.js b/packages/strapi-design-system/src/Button/Button.js
@@ -20,6 +20,7 @@ const rotation = keyframes`
 
 const LoadingWrapper = styled.div`
   animation: ${rotation} 2s infinite linear;
+  will-change: transform;
 `;
 
 const BoxFullHeight = styled(Box)`

diff --git a/packages/strapi-design-system/src/Loader/Loader.js b/packages/strapi-design-system/src/Loader/Loader.js
@@ -15,6 +15,7 @@ const rotation = keyframes`
 
 const LoaderImg = styled.img`
   animation: ${rotation} 1s infinite linear;
+  will-change: transform;
   ${({ small, theme }) => small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}
 `;
 

diff --git a/packages/strapi-design-system/src/TextButton/TextButton.js b/packages/strapi-design-system/src/TextButton/TextButton.js
@@ -1,11 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+import Loader from '@strapi/icons/Loader';
 import { Box } from '../Box';
 import { Typography } from '../Typography';
 import { Flex } from '../Flex';
 import { buttonFocusStyle } from '../themes/utils';
 
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+
+const LoadingWrapper = styled.div`
+  animation: ${rotation} 2s infinite linear;
+  will-change: transform;
+`;
+
 const TextButtonWrapper = styled(Flex)`
   background: transparent;
   border: none;
@@ -29,41 +44,59 @@ const TextButtonWrapper = styled(Flex)`
   ${buttonFocusStyle}
 `;
 
-export const TextButton = React.forwardRef(({ children, startIcon, endIcon, onClick, disabled, ...props }, ref) => {
-  const handleClick = onClick && !disabled ? onClick : undefined;
+export const TextButton = React.forwardRef(
+  ({ children, startIcon, endIcon, onClick, disabled, loading, ...props }, ref) => {
+    const handleClick = onClick && !disabled ? onClick : undefined;
+    const isDisabled = disabled || loading;
 
-  return (
-    <TextButtonWrapper ref={ref} aria-disabled={disabled} onClick={handleClick} as="button" type="button" {...props}>
-      {startIcon && (
-        <Box as="span" paddingRight={2} aria-hidden={true}>
-          {startIcon}
-        </Box>
-      )}
-      <Typography variant="pi" textColor={disabled ? 'neutral600' : 'primary600'}>
-        {children}
-      </Typography>
-      {endIcon && (
-        <Box as="span" paddingLeft={2} aria-hidden={true}>
-          {endIcon}
-        </Box>
-      )}
-    </TextButtonWrapper>
-  );
-});
+    return (
+      <TextButtonWrapper
+        ref={ref}
+        aria-disabled={isDisabled}
+        onClick={handleClick}
+        as="button"
+        type="button"
+        {...props}
+      >
+        {(startIcon || loading) && (
+          <Box as="span" paddingRight={2} aria-hidden={true}>
+            {loading ? (
+              <LoadingWrapper>
+                <Loader />
+              </LoadingWrapper>
+            ) : (
+              startIcon
+            )}
+          </Box>
+        )}
+        <Typography variant="pi" textColor={isDisabled ? 'neutral600' : 'primary600'}>
+          {children}
+        </Typography>
+        {endIcon && (
+          <Box as="span" paddingLeft={2} aria-hidden={true}>
+            {endIcon}
+          </Box>
+        )}
+      </TextButtonWrapper>
+    );
+  },
+);
 
 TextButton.displayName = 'TextButton';
 
 TextButton.defaultProps = {
   disabled: false,
   startIcon: undefined,
   endIcon: undefined,
+  loading: false,
   onClick: undefined,
 };
 
 TextButton.propTypes = {
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
   endIcon: PropTypes.element,
+  loading: PropTypes.bool,
   onClick: PropTypes.func,
   startIcon: PropTypes.element,
 };
diff --git a/packages/strapi-design-system/src/TextButton/TextButton.stories.mdx b/packages/strapi-design-system/src/TextButton/TextButton.stories.mdx
@@ -39,6 +39,13 @@ Depending on the permissions a user have or the status of an action, a TextButto
         Click on me
       </TextButton>
     </div>
+  </Story>
+</Canvas>
+
+## Disabled
+
+<Canvas>
+  <Story name="disabled">
     <div>
       <TextButton disabled startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
         Disabled TextButton
@@ -47,6 +54,18 @@ Depending on the permissions a user have or the status of an action, a TextButto
   </Story>
 </Canvas>
 
+## Loading
+
+<Canvas>
+  <Story name="loading">
+    <div>
+      <TextButton loading startIcon={<ArrowLeft />} endIcon={<ArrowRight />}>
+        Loading
+      </TextButton>
+    </div>
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={TextButton} />