dividerの色を変更&<Divider />を柔軟に #131
Conversation
|
memo: 破壊的変更( |
|
色の変更により変化のあるコンポーネント群
※ snapshotが変化したコンポーネントをピックアップしています。 |
|
@yutaro1031
これはそもそも影響受けてないかも？
線がぶっとくなってるｗ |
そうですね、dividerを用いていないので大丈夫でした！！
いい感じに戻しました!!w |
|
@yutaro1031 |
| </Typography> | ||
| <RowContainer> | ||
| <Divider variant="middle" /> | ||
| <Divider m={3} /> |
There was a problem hiding this comment.
margin加えたいときにSpacerで囲わないといけないの、微妙に不便なのでSpacerと同じpropsを入れられるようにしました。
| Override Color | ||
| </Typography> | ||
| <RowContainer> | ||
| <Divider color="red" m={3} /> |
There was a problem hiding this comment.
dividerの色、利用する箇所によって変えたい時が多い雰囲気を感じたので、ここも自由に入れられるようにしています。
|
|
||
| export const Divider = styled.hr<DividerProps>` | ||
| /* TODO: style.tsに書かれているものもutils/に移動せずに利用して良いのか相談 */ | ||
| ${spacer} |
There was a problem hiding this comment.
spacer()って、utils/とかに入れた方が良いですかねー？？
There was a problem hiding this comment.
そうね！他でも使うならSpacerUtils.tsとかに出すか！
| type Props = { | ||
| variant?: "fullWidth" | "middle"; | ||
| type Props = SpacerProps & { | ||
| color?: string; |
There was a problem hiding this comment.
これはpaletteのkeyで縛ったりせずに何でも入れられていいってことかな？
例えば type="danger" | "primary" | ... とかにしてそれぞれのmainを利用するとかはいらない？
There was a problem hiding this comment.
<Divider />の色を変えたいがためにpalette.dividerを変更- すると他の
borderが薄くなり視認性が落ちた - 薄くしたいのは、v2indexページと
<MenuList />の<hr /> - 場所によって色を変えたいニーズがあるのなら、
<Divider />が自由に色定義できれば良いのでは??
みたいな経緯なんですよね。
type="danger" | "primary" | ... とかにしてそれぞれのmainを利用する
type IconColor = IconType | "active" | string;みたいな形式でも良いんですけど、それだったら初めからstringにしておいた方が開発側も利用者側もわかりやすい気がしているんですよねぇ...
There was a problem hiding this comment.
なるほど！
たしかにそれだとstringの方がいいかも...
| @@ -95,7 +95,7 @@ export const palette: Palette = { | |||
| active: colors.blue[100], | |||
| hint: colors.blue[50] as string, // TODO | |||
| }, | |||
| divider: colors.basic[200], | |||
| divider: colors.basic[300], | |||
There was a problem hiding this comment.
お！ということは直打ちのやつほとんどなくなる？？？
There was a problem hiding this comment.
確かに。。
borderに関してはなくせますね！！
boxShadowやbackground-colorあたりにも使われているのですが、それらはまだ直打ちですね。。
There was a problem hiding this comment.
このPRでも別PRでも大丈夫！
boxShadowやbackground-colorあたりにも使われているのですが、それらはまだ直打ちですね。。
これgray.mainを300にした方がいい気がしてきた
今検索した感じだと3箇所でしかgray.main使われてなくて、内２箇所はopacity変えてるから何とかなる気がする
There was a problem hiding this comment.
borderの部分はpalette.dividerを使うようにしました!!
gray周りは頻繁に変えたりディスカッションしている気がするので、なんかもっと本質的な対応をガーデニングデーとかでやりたいよね。という話をnoroさんとしました。
#129 (comment)
ref: #129 (comment)