fix(Button): add new snapshot

toptal · Sep 4, 2020 · 6e1496e · 6e1496e
1 parent 43b99cc
commit 6e1496e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/packages/picasso/src/Button/Button.tsx b/packages/picasso/src/Button/Button.tsx
@@ -172,6 +172,8 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
     rootClass
   )
 
+  const renderAsSpan = disabled && as === 'button'
+
   return (
     <ButtonBase
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -188,7 +190,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
       title={title}
       value={value}
       type={type}
-      component={disabled && as === 'button' ? 'span' : as!} // eslint-disable-line @typescript-eslint/no-non-null-assertion
+      component={renderAsSpan ? 'span' : as!} // eslint-disable-line @typescript-eslint/no-non-null-assertion
     >
       <Container
         as='span'

diff --git a/...es/picasso/src/Button/__image_snapshots__/button-disabled-with-tooltip-snap.png b/...es/picasso/src/Button/__image_snapshots__/button-disabled-with-tooltip-snap.png
diff --git a/packages/picasso/src/Button/story/DisabledWithTooltip.example.tsx b/packages/picasso/src/Button/story/DisabledWithTooltip.example.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Container, Button, Tooltip } from '@toptal/picasso'
+import { Container, Button, Tooltip, Typography } from '@toptal/picasso'
 import { useNotifications } from '@toptal/picasso/utils'
 
 const Example = () => {
@@ -8,7 +8,10 @@ const Example = () => {
 
   return (
     <div>
-      <Container>
+      <Typography variant='heading' size='small'>
+        Disabled button with the tooltip:
+      </Typography>
+      <Container top='small' bottom='large'>
         <Button onClick={handleClick}>Enabled</Button>
         <Tooltip content='Action is disabled'>
           <Button disabled onClick={handleClick}>
@@ -17,6 +20,9 @@ const Example = () => {
         </Tooltip>
       </Container>
 
+      <Typography variant='heading' size='small'>
+        Disabled button with the tooltip inside the button group:
+      </Typography>
       <Container top='small'>
         <Button.Group>
           <Button onClick={handleClick}>Enabled</Button>

diff --git a/packages/shared/src/styles/withClasses/withClasses.tsx b/packages/shared/src/styles/withClasses/withClasses.tsx
@@ -15,41 +15,52 @@ export interface WithClassesProps {
   childrenClasses?: Classes
 }
 
+const injectClassesToReactNode = (
+  childNode: ReactNode,
+  configItem: ConfigItem
+) => {
+  // eslint-disable-line complexity
+  if (!React.isValidElement(childNode)) {
+    return childNode
+  }
+
+  const { componentType, classes, childrenClasses } = configItem
+  const isMatchingChild = !componentType || childNode.type === componentType
+
+  if (!isMatchingChild) return childNode
+
+  if (classes && childrenClasses) {
+    return React.cloneElement(childNode, { classes, childrenClasses })
+  }
+
+  if (classes) {
+    return React.cloneElement(childNode, { classes })
+  }
+
+  if (childrenClasses) {
+    return React.cloneElement(childNode, { childrenClasses })
+  }
+
+  return childNode
+}
+
+// Modifies children react nodes by injecting additional `classes` or `childrenClasses` props
+// based on the provided configuration object.
+// Iterates over children and injects classes if they match the configuration.
 export default (config: Config) => {
   const withClasses = <T extends WithClassesProps>(
     Component: ComponentType<T>
   ) => {
     const Wrapper = (props: T) => {
       const { children, classes, childrenClasses } = props
 
-      const modifiedChildren = React.Children.map(children, childNode => {
-        if (!React.isValidElement(childNode)) {
-          return childNode
-        }
-
-        let childResult = childNode
-
-        config(classes, childrenClasses).forEach(
-          ({
-            componentType,
-            classes: configClasses,
-            childrenClasses: configChildrenClasses
-          }) => {
-            if (!componentType || childNode.type === componentType) {
-              childResult = configChildrenClasses
-                ? React.cloneElement(childNode, {
-                    classes: configClasses,
-                    childrenClasses: configChildrenClasses
-                  })
-                : configClasses
-                ? React.cloneElement(childNode, { classes: configClasses })
-                : childNode
-            }
-          }
-        )
-
-        return childResult
-      })
+      const configItems = config(classes, childrenClasses)
+      const childNodeWithClasses = (childNode: ReactNode) =>
+        configItems.reduce(injectClassesToReactNode, childNode)
+      const modifiedChildren = React.Children.map(
+        children,
+        childNodeWithClasses
+      )
 
       return (
         // eslint-disable-next-line react/jsx-props-no-spreading