voyagegroup / ingred-ui Goto Github PK

カンプだと

• font-size: 13px;
• color: #041c33 (Typographyの初期値)

実際

Dstでreact-tooltipで実装されているPopoverをreact-popperで再実装する。

https://github.com/voyagegroup/ingred-ui/tree/gh-pages においてあるがエラーになってうごいていない

現状は固定のイラストにしているが、これをclone先で自由に任意のイラストなどに差し替えられるようにしてください。

.a, .bなどに対してstyleが当たっているため他のsvgに影響が出ている
svgrに通してhash値を付与する

ref: storybookjs/storybook#8321

↑と全く同じ現象

故にRevertを行なっている状態。
#37

対応

• storybookjs/storybook#8321 (comment)
  • ↑事象は解決しなかった
• @storybook/addon-knobsのみバージョンをあげる
  • ↑解決した

ref: https://cartaholdings.slack.com/archives/CFB92AX5J/p1594104455228100

ref: https://github.com/voyagegroup/fluct_datastrap/issues/991

選択状態かつdisabledな時に文字がsecondaryになっていない

• <SwitchButton />
• <DatePicker /> ※単日選択

上記をingred-uiに導入する。

実際のプロダクトで利用すると意図通りに表示されないことがあるので、現状のユースケースをみつつ、最適な実装に修正する。

中にタイトルとpopoverを入れる際などにdomのvalidation errorが出るため

1. 使ってくれる人を増やす
2. 海外からのコントリビュートしてくれる人を増やす

両者のためには必要そう。

現状は背景となる部分のUIしか存在しないので<Backdrop />みたいな名前が妥当ではなかろうか。

https://material-ui.com/components/backdrop/

ref: https://cartaholdings.slack.com/archives/CFB92AX5J/p1595910530074100

Menu内などでTypographyを利用する

dist/から型を拾う形式にしないほうが、使う側に優しい気がする。

↓みたいな感じで、自由なレイアウトをingred-uiで実現したい。

https://cartaholdings.slack.com/archives/CFB92AX5J/p1593673811074300

https://docs.google.com/spreadsheets/d/1JDa9x0vnUnf-JrDO2V2yA7BdVYIcU8KDimHdM_Z8alY/edit#gid=1451064922&range=15:15

よく使う割にはpaletteに乗っていない。

基本的に全ての色はpalette経由で利用者がオーバーライドできるようにするのが良い。

ref: #126 (comment)

• Unionを取っているReact.ComponentPropsWithRef<"div"> のPropが title: string を持っているため、titleにstring以外を設定できなくなってしまっている
• titleの利用をやめてかわりに独自の content という要素を定義して置き換える

ref: #177

• .comのままになってる
• .orgに移す
• ついでにnodeのバージョン固定などでテスト通ってないのでなおす

利用する側(コンポーネント)でも「選択した行」をstateとして持っているので、stateの二重管理となる。
コードもそのせいで複雑になっている節があるので、propsで管理したい。

type Props = {
  component?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
}

component: Component = "button",

<Styled.ButtonContainer
  as={Component}

どこかしらでtext-decoration: noneを入れる(Linkが指定される場合があるので)

現状は文字列＆「必須」しか入れられない。

ライブラリなので、中身は自由にかけるようにしたい。

• thはspace-between;
• border-right: 1px solid #EFF1F2

こうする

自分の中ではDSTで利用されるコードをそのまま用いることにしたけれど、そこに到るまでの思考回路を残しておく。

Mediumのみ

現状だと一番左にあるsortable: true なカラムの降順で表示される。
そこを外部から指定可能にする

ちょっと上下がずれている

概要

• 現状react-datesとかを一緒にyarn addしないといけないのは、devDependenciesに書かれているから
• styled-componentsを含めてライブラリを公開する場合は特殊な設定が必要そう(参考2)
• 上記を踏まえてpackage.jsonを整理したい

対応

• ingred-uiの利用に必要となるライブラリはdevDependenciesに記述
• styled-components周りはbundle設定も含めて諸々対応(資料をもう少し読む)

備考

• ローカルで検証したい
• Revertできるようにしたい(センシティブな変更となる)
• この類の変更はメジャーアップデートかもしれない

という理由から、#40 がリリースされてからの対応が良さそう

参考

1. https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95
2. https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library
3. https://docs.npmjs.com/files/package.json#dependencies

だいたいここら辺を読むと対応できそう。

• #82 で<Button />が様々なタグとして表現できるようになった
• <ButtonGroup />は<button />に対してスタイルを当てるように実装している
• ↑をいろんなタグに対してスタイルを当てるようにすればイケるはず

イメージ↓

-   button:not(:last-of-type) {
+   & > *:not(:last-of-type) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

-   button:not(:first-of-type) {
+   & > *:not(:first-of-type) {
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

src/styles/radius.ts等の定数をTheme経由で利用できるようにしたい。

諸々の事情(詳細は省略)で残っていたarrow_doubleアイコンを消す。

arrow_double_leftアイコンが存在するので問題なし。

リリースの際は破壊的変更になるので、メジャーアップデートにする。

ref: https://cartaholdings.slack.com/archives/CKYAWNNLX/p1594644043305100

shrinkさせないようにしたい。

ref: https://github.com/voyagegroup/fluct_datastrap/pull/1824#issuecomment-664777632