fix: reduce cognitive complexity from button also use output instead …

…of the status role on spinner
darioegb · Feb 6, 2024 · 596ffbd · 596ffbd
1 parent a19ac73
commit 596ffbd
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/packages/components/button/src/button.tsx b/packages/components/button/src/button.tsx
@@ -73,6 +73,27 @@ const renderContent = (
   )
 }
 
+const generateButtonAttributes = (
+  variant: string,
+  className: string,
+  disabled: boolean,
+  isBusy: boolean,
+  colorScheme?: DefaultColorPalette | keyof CustomColorPalette,
+  size?: Size,
+  shape?: ButtonShape,
+): Record<string, string> => {
+  const color = (colorScheme && getMergedConfig().colors[colorScheme]) || '#d3d3d3'
+  const contrastColor = getContrastColor(color)
+  const sizeClass = size && (size !== 'md' || variant === 'unstyled') ? styles[size] : ''
+  const shapeClass = shape && (shape !== 'rounded' || variant === 'unstyled') ? styles[shape] : ''
+  const variantClass = variant !== 'unstyled' ? styles[variant] : ''
+  const disabledClass = disabled || isBusy ? styles.disabled : ''
+  const buttonClassNames = `${sizeClass} ${shapeClass} ${variantClass} 
+    ${disabledClass} ${className}`.trim()
+
+  return { color, contrastColor, buttonClassNames }
+}
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -92,16 +113,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     }: ButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
-    const { size = variant !== 'unstyled' && 'md', shape = variant !== 'unstyled' && 'rounded' } =
-      rest
-    const color = (colorScheme && getMergedConfig().colors[colorScheme]) || '#d3d3d3'
-    const contrastColor = getContrastColor(color)
-    const sizeClass = size && (size !== 'md' || variant === 'unstyled') ? styles[size] : ''
-    const shapeClass = shape && (shape !== 'rounded' || variant === 'unstyled') ? styles[shape] : ''
-    const variantClass = variant !== 'unstyled' ? styles[variant] : ''
-    const disabledClass = disabled || isBusy ? styles.disabled : ''
-    const buttonClassNames = `${sizeClass} ${shapeClass} ${variantClass} 
-    ${disabledClass} ${className}`.trim()
+    const {
+      size = variant !== 'unstyled' ? 'md' : undefined,
+      shape = variant !== 'unstyled' ? 'rounded' : undefined,
+    } = rest
+    const { color, contrastColor, buttonClassNames } = generateButtonAttributes(
+      variant,
+      className,
+      disabled,
+      isBusy,
+      colorScheme,
+      size,
+      shape as ButtonShape | undefined,
+    )
 
     return (
       <button

diff --git a/packages/components/spinner/src/spinner.tsx b/packages/components/spinner/src/spinner.tsx
@@ -35,7 +35,7 @@ const createSpinnerStyles = ({
   ...(style ?? {}),
 })
 
-export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
+export const Spinner = forwardRef<HTMLOutputElement, SpinnerProps>(
   (
     {
       style,
@@ -67,11 +67,10 @@ export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
     `.trim()
 
     return (
-      <span
+      <output
         aria-label="loading"
         className={spinnerClass}
         ref={ref}
-        role="status"
         style={spinnerStyles}
         {...rest}
       />