Merge pull request #66 from ensdomains/fuses-udpates-three

Fuses udpates three

components/src/components/atoms/Button/Button.tsx

@@ -47,6 +47,8 @@ type BaseProps = {
   shadowless?: boolean
   /** If true, adds an outline to the button */
   outlined?: boolean
+  /** If true, makes inner div full width*/
+  fullWidthContent?: boolean
   /** The handler for click events. */
   onClick?: NativeButtonProps['onClick']
 } & Omit<NativeButtonProps, 'prefix' | 'size'>
@@ -318,11 +320,14 @@ const PrefixContainer = styled.div<GetCenterProps>(
 
 const LoadingContainer = styled.div(() => css``)
 
-const LabelContainer = styled(Typography)(
-  ({ theme }) => css`
+const LabelContainer = styled(Typography)<{
+  $fullWidthContent: boolean
+}>(
+  ({ theme, $fullWidthContent }) => css`
     color: inherit;
     font-size: inherit;
     font-weight: ${theme.fontWeights['semiBold']};
+    ${$fullWidthContent && `width: 100%;`}
   `,
 )
 
@@ -353,12 +358,17 @@ export const Button = React.forwardRef(
       pressed = false,
       shadowless = false,
       outlined = false,
+      fullWidthContent = false,
       as: asProp,
       ...props
     }: Props,
     ref: React.Ref<HTMLButtonElement>,
   ) => {
-    const labelContent = <LabelContainer ellipsis>{children}</LabelContainer>
+    const labelContent = (
+      <LabelContainer $fullWidthContent={fullWidthContent} ellipsis>
+        {children}
+      </LabelContainer>
+    )
     let childContent: ReactNodeNoStrings
     if (shape) {
       childContent = loading ? <Spinner color="background" /> : labelContent
@@ -371,7 +381,6 @@ export const Button = React.forwardRef(
             </PrefixContainer>
           )}
           {labelContent}
-
           {(loading || suffix) && (
             <LoadingContainer {...{ center, size, side: 'right' }}>
               {loading ? <Spinner color="background" /> : suffix}
@@ -385,6 +394,7 @@ export const Button = React.forwardRef(
       <ButtonElement
         {...props}
         $center={center}
+        $fullWidthContent={fullWidthContent}
         $outlined={outlined}
         $pressed={pressed}
         $shadowless={shadowless}

components/src/icons/index.tsx

@@ -24,6 +24,8 @@ export { ReactComponent as EthTransparentInvertedSVG } from './EthTransparentInv
 export { ReactComponent as ExclamationSVG } from './Exclamation.svg'
 export { ReactComponent as ExitSVG } from './Exit.svg'
 export { ReactComponent as FlagSVG } from './Flag.svg'
+export { ReactComponent as FlameSVG } from './Flame.svg'
+export { ReactComponent as FlameBurnedSVG } from './FlameBurned.svg'
 export { ReactComponent as GradientSVG } from './Gradient.svg'
 export { ReactComponent as GridSVG } from './Grid.svg'
 export { ReactComponent as GridSolidSVG } from './GridSolid.svg'

components/src/index.test.ts

@@ -73,6 +73,8 @@ const expectedExportedKeys = [
   'ExclamationSVG',
   'ExitSVG',
   'FlagSVG',
+  'FlameSVG',
+  'FlameBurnedSVG',
   'GradientSVG',
   'GridSVG',
   'GridSolidSVG',

docs/src/components/CodeBlock.tsx

@@ -12,6 +12,7 @@ import { Colors } from '@ensdomains/thorin'
 
 import { useIsMounted } from '~/utils/isMounted'
 import { PlayroomStateProvider } from '~/playroom/PlayroomState'
+
 import { CopyButton } from './CopyButton'
 import type { Props as CodePreviewProps } from './CodePreview'