feat(spindle-ui): add form components

[herablog]

認証プロジェクトを参考にForm関連要素のText Field, Label, Checkbox, Radio, InavalidMessageコンポーネントを作成しました。いくつか気になるところ、相談したいところがあるので、それぞれ個別にコメントします。

Storybook

TODO

• font-familyの指定方法が決まったら、e2b3bfe をそのコミットと取り替える ref: chore(spindle-ui): set base font family #8

別のPRで対応

• font-sizeを相対値に変更
• アイコンを追加する ref: feat(spindle-ui): convert SVG icon to React component #7
• レイアウト調整

[herablog]

outline用の1つめのbox-shadow色が、親要素の背景色(認証だと--app-surface-color)を入れるようになっているのだけど、いろんなアプリケーションで使うUIだと毎回指定ちと大変かなと思いつつ、いい方法あるかな？

1. カスタムプロパティにして指定できるようにする
2. outlineの実装方法を変更する (同時にスタイルも変わってしまう可能性もある)

[tokimari]

たしかにレイアウトによっては、Surface Colorを2枚以上重ねたり、Surface Colorに半透明の色（gray alpha 5とか）を使っている（※）要素の上にこういったComponentを配置した場合、今の outline用の1つめのbox-shadow色 が必要な実装だと、必ずしもこのoutline用の1つめのbox-shadow色 がSurface Colorと同色にならないんですよね。

（※この図のSecondary, Tertiaryを使う時）
（認証の場合偶然white 100だったので問題なかったですが。）

1. カスタムプロパティにして指定できるようにする

こっちなら配置する場所のSurface Colorに合わせて色を近づけることはできそうです。（Surface Colorが半透明色の場合、厳密に同じ色ではないですが、大きな問題にはならなそう？）

2. outlineの実装方法を変更する (同時にスタイルも変わってしまう可能性もある)

オブジェクトの形に沿ったアウトライン形状にしたいというオーダーでbox-shadowを選択したので、outlineプロパティでは難しそう・・:thinking:

1が良さそうかなと思いつつ、他に実現方法を @hiloki 先生が知っていたりしないかな・・:eyes:ﾁﾗｯ

[hiloki]

@herablog

アウトラインの内側に2pxのoffsetがあればいいってことですよね？
かつアウトライン用のspanがあるということであれば、

.spui-Checkbox-outline {
  border-radius: 2px;
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  /* ~padding: 2px;~ さっき書いたけどこれは不要だった */
}

.spui-Checkbox-input:focus ~ .spui-Checkbox-outline {
  box-shadow: 0 0 0 2px var(--color-focus-clarity);
}

Sample: https://jsbin.com/beraqof/1/edit?html,css,output

こういう感じで実現できる予感。

[herablog]

おっ、たしかにきれいにスタイル当たる!! (背景違いでも)

[herablog]

こちらで適用しました〜 @hiloki ありがとう:clap:
53da7b7

[hiloki]

@herablog 複数のCheckboxやRadioで、tab操作のときにフォーカス順がおかしいのってなんでだろ？
（e.g: 1つ目のradioにfocusした後、radioのグループに遷移してしまう）

[herablog]

@hiloki むむ、こりはTabのみで遷移した場合ってことですかな!?

[hiloki]

@herablog そうです！っておもったけど、radioだとその挙動がデフォルトだった...なんでもないです！

[herablog]

@hiloki ダヨネ。確認ありがとです！

[hiloki]

アイコンを含めた装飾やレイアウトはまだ未確定のところがあるので、本PRはApproveます