<Button />微調整 #28
<Button />微調整 #28
Conversation
youchann
commented
May 18, 2020
youchann
commented
- aタグとしても機能するように
- box-shadowを調整
src/components/Button/Button.tsx
Outdated
| as={href ? "a" : "button"} | ||
| href={href} | ||
| {...(href ? {} : rest)} |
There was a problem hiding this comment.
aタグにすると...restは入れないようにしています。(型がうまく通らない...)
なんかもっと良い方法ありそうなきが...
There was a problem hiding this comment.
next.jsのコードなのでちょっと違うけどinlineじゃなくて先に定義した方がいいと思う！
const isLink = href != null
let props: any
if (isLink && disabled) {
props = { "aria-disabled": disabled }
} else if (isLink) {
props = { href }
} else {
props = { type, disabled }
}
return isLink ? (
<Link href={href!} passHref>
<StyledBaseButton {...props} {...rest} />
</Link>
) : (
<StyledBaseButton {...props} {...rest} />
)There was a problem hiding this comment.
あ、prop先に定義します!!
aタグでbuttonタグを囲う感じですかね...??
There was a problem hiding this comment.
あ、そこがnextっぽいところ
ingred-uiではasで大丈夫！
src/components/Button/Button.tsx
Outdated
| const restProps = href ? {} : rest; | ||
|
|
||
| return ( | ||
| <Styled.ButtonContainer | ||
| as={href ? "a" : "button"} | ||
| href={href} | ||
| {...(href ? {} : rest)} | ||
| {...restProps} |
There was a problem hiding this comment.
@kinokoruumu
restに関しては先に定義しました。
書いてて思ったのですが、以前のcommentで言っていたことはこのような書き方ではなく「props全体を先に定義させる」みたいな意図でしたかね...?
src/components/Button/Button.tsx
Outdated
| let props: Styled.ContainerProps & { as?: "a" | "button" } = { | ||
| inline, | ||
| horizontalPadding: size === "small" ? `10px` : `${theme.spacing * 2}px`, | ||
| normal: { ...colorStyle.normal }, | ||
| hover: { ...colorStyle.hover }, | ||
| active: { ...colorStyle.active }, | ||
| fontWeight: color === "cancel" ? "normal" : "bold", | ||
| fontSize: size === "small" ? `${fontSize["xs"]}px` : `${fontSize["md"]}px`, | ||
| height: buttonSize[size].height, | ||
| minWidth: buttonSize[size].minWidth, | ||
| } | ||
|
|
||
| if (isLink) { | ||
| props.as = "a"; | ||
| props.href = href; | ||
| } |
There was a problem hiding this comment.
@kinokoruumu
hrefが存在するときだけ、asとhrefをpropsに入れるようにしました!!
src/components/Button/Button.tsx
Outdated
| size === "small" ? `10px` : `${theme.spacing * 2}px`; | ||
| const isLink = !!href; | ||
|
|
||
| let props: Styled.ContainerProps & { as?: "a" | "button" } = { |
There was a problem hiding this comment.
デフォルトが`buttonなので、入れなくても良いかと思ってました。
とりあえず入れときました!!
There was a problem hiding this comment.
それなら型定義にもなくていいんじゃないかな？
There was a problem hiding this comment.
BaseButton = styled.buttonなのでasをpropsに含めない場合は勝手に<button />タグになるという意味での
デフォルトが`button
でした！！
& { as?: "a" | "button" }の部分を消してしまうと、�props.as = "a";の部分で型エラーになってしまいます。
There was a problem hiding this comment.
そうそう
さっきのvcはそれを見越してのpropsはanyでもいいよ〜だったw
で、今のはasにbuttonを入れることがないのであれば | "button" が不要なのでは？という意味だったw
There was a problem hiding this comment.
なんと...w:bow:
let props: anyにして、asの型定義を外しました!!
There was a problem hiding this comment.
ごめん、なんども往復して申し訳ないんだけど、
let propsはhrefとasだけでいいと思う
ContainerPropsの内容も含めたいのであれば量が多いので型定義はあった方がいいかと
曖昧でごめん。。
There was a problem hiding this comment.
d991892
こんな感じの実装でどうでしょう！？
