icon button

primer · Oct 11, 2023 · 72a0247 · 72a0247
1 parent fae28dd
commit 72a0247
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git a/src/Button/Button.features.stories.tsx b/src/Button/Button.features.stories.tsx
@@ -95,6 +95,9 @@ export const LoadingTrigger = () => {
 
   const handleClick = () => {
     setIsLoading(true)
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 3000)
   }
 
   return (

diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
@@ -75,9 +75,14 @@ const ButtonBase = forwardRef(
           data-size={size === 'small' || size === 'large' ? size : undefined}
           data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
           aria-disabled={loading ? true : undefined}
+          aria-describedby={loading ? 'loading-message' : undefined}
         >
           {Icon ? (
-            <Icon />
+            loading ? (
+              <Spinner size="small" />
+            ) : (
+              <Icon />
+            )
           ) : (
             <>
               <Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
@@ -108,7 +113,9 @@ const ButtonBase = forwardRef(
         </StyledButton>
         {loading && (
           <VisuallyHidden>
-            <span aria-live="polite">Loading</span>
+            <span aria-live="polite" aria-busy="true" id="loading-message">
+              Loading
+            </span>
           </VisuallyHidden>
         )}
       </>

diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx
@@ -1,5 +1,5 @@
-import {HeartIcon} from '@primer/octicons-react'
-import React from 'react'
+import {HeartIcon, DownloadIcon} from '@primer/octicons-react'
+import React, {useState} from 'react'
 import {IconButton} from '.'
 
 export default {
@@ -19,3 +19,18 @@ export const Small = () => <IconButton size="small" icon={HeartIcon} aria-label=
 export const Medium = () => <IconButton size="medium" icon={HeartIcon} aria-label="Default" />
 
 export const Large = () => <IconButton size="large" icon={HeartIcon} aria-label="Default" />
+
+export const Loading = () => <IconButton loading icon={HeartIcon} variant="primary" aria-label="Primary" />
+
+export const LoadingTrigger = () => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleClick = () => {
+    setIsLoading(true)
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 3000)
+  }
+
+  return <IconButton loading={isLoading} onClick={handleClick} icon={DownloadIcon} aria-label="Download" />
+}