chore: add escape hatch

kufu · Apr 26, 2022 · e45bb55 · e45bb55
1 parent be5ede3
commit e45bb55
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/components/Button/AnchorButton.tsx b/src/components/Button/AnchorButton.tsx
@@ -1,6 +1,7 @@
 import React, { AnchorHTMLAttributes, VFC } from 'react'
 
 import { BaseProps } from './types'
+import { useClassNames } from './useClassNames'
 import { ButtonWrapper } from './ButtonWrapper'
 import { ButtonInner } from './ButtonInner'
 
@@ -17,14 +18,16 @@ export const AnchorButton: VFC<BaseProps & ElementProps> = ({
   children,
   ...props
 }) => {
+  const classNames = useClassNames().anchorButton
+
   return (
     <ButtonWrapper
       {...props}
       size={size}
       square={square}
       wide={wide}
       variant={variant}
-      className={className}
+      className={`${className} ${classNames.wrapper}`}
       isAnchor
     >
       <ButtonInner prefix={prefix} suffix={suffix}>

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,6 +1,7 @@
 import React, { ButtonHTMLAttributes, VFC } from 'react'
 
 import { BaseProps } from './types'
+import { useClassNames } from './useClassNames'
 import { ButtonWrapper } from './ButtonWrapper'
 import { ButtonInner } from './ButtonInner'
 
@@ -17,14 +18,16 @@ export const Button: VFC<BaseProps & ElementProps> = ({
   children,
   ...props
 }) => {
+  const classNames = useClassNames().button
+
   return (
     <ButtonWrapper
       {...props}
       size={size}
       square={square}
       wide={wide}
       variant={variant}
-      className={className}
+      className={`${className} ${classNames.wrapper}`}
     >
       <ButtonInner prefix={prefix} suffix={suffix}>
         {children}

diff --git a/src/components/Button/useClassNames.ts b/src/components/Button/useClassNames.ts
@@ -1,13 +1,16 @@
 import { useMemo } from 'react'
 
 import { useClassNameGenerator } from '../../hooks/useClassNameGenerator'
+import { AnchorButton, Button } from './'
 import { PrimaryButton, PrimaryButtonAnchor } from './PrimaryButton'
 import { SecondaryButton, SecondaryButtonAnchor } from './SecondaryButton'
 import { DangerButton, DangerButtonAnchor } from './DangerButton'
 import { SkeletonButton, SkeletonButtonAnchor } from './SkeletonButton'
 import { TextButton, TextButtonAnchor } from './TextButton'
 
 export const useClassNames = () => {
+  const generateButotn = useClassNameGenerator(Button.displayName || 'Button')
+  const generateAnchorButotn = useClassNameGenerator(AnchorButton.displayName || 'AnchorButton')
   const generatePrimaryButton = useClassNameGenerator(PrimaryButton.displayName || 'PrimaryButton')
   const generatePrimaryButtonAnchor = useClassNameGenerator(
     PrimaryButtonAnchor.displayName || 'PrimaryButtonAnchor',
@@ -35,6 +38,12 @@ export const useClassNames = () => {
 
   return useMemo(
     () => ({
+      button: {
+        wrapper: generateButotn(),
+      },
+      anchorButton: {
+        wrapper: generateAnchorButotn(),
+      },
       primaryButton: {
         wrapper: generatePrimaryButton(),
       },
@@ -67,6 +76,8 @@ export const useClassNames = () => {
       },
     }),
     [
+      generateAnchorButotn,
+      generateButotn,
       generateDangerButton,
       generateDangerButtonAnchor,
       generatePrimaryButton,