Browse Source

Set sizing of button

Use 100% for `<button>` element because it is auto-size by default.
tags/0.3.0
TheoryOfNekomata 4 years ago
parent
commit
bad7f4106f
1 changed files with 8 additions and 3 deletions
  1. +8
    -3
      lib/components/Button/Button.tsx

+ 8
- 3
lib/components/Button/Button.tsx View File

@@ -55,7 +55,10 @@ const disabledLinkButtonStyles: CSSObject = {
...disabledButtonStyles, ...disabledButtonStyles,
} }


const Base = styled('button')(buttonStyles)
const Base = styled('button')({
...buttonStyles,
width: '100%',
})


Base.displayName = 'button' Base.displayName = 'button'


@@ -170,6 +173,7 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
rel, rel,
type = 'button', type = 'button',
border = false, border = false,
...etcProps
}, },
ref, ref,
) => { ) => {
@@ -193,20 +197,21 @@ const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpan
switch (element) { switch (element) {
case 'button': case 'button':
return ( return (
<Base type={type!} ref={ref as React.Ref<HTMLButtonElement>} disabled={disabled!} style={commonButtonStyles}>
<Base {...etcProps} type={type!} ref={ref as React.Ref<HTMLButtonElement>} disabled={disabled!} style={commonButtonStyles}>
{buttonContent} {buttonContent}
</Base> </Base>
) )
case 'a': case 'a':
if (disabled) { if (disabled) {
return ( return (
<DisabledLinkBase ref={ref as React.Ref<HTMLSpanElement>} style={commonButtonStyles}>
<DisabledLinkBase {...etcProps} ref={ref as React.Ref<HTMLSpanElement>} style={commonButtonStyles}>
{buttonContent} {buttonContent}
</DisabledLinkBase> </DisabledLinkBase>
) )
} }
return ( return (
<LinkBase <LinkBase
{...etcProps}
href={href!} href={href!}
target={target!} target={target!}
rel={rel!} rel={rel!}


Loading…
Cancel
Save