docs: StackのStoryを見直し

[misako0927]

関連URL

https://smarthr.atlassian.net/browse/SHRUI-1082

概要

#4949 の方針に沿って、Stack コンポーネントの Story を見直しました。

変更内容

• Stack の Story を見直し
• Stack の VRT 用 Story を pict を利用して書き直し
  • 一部pictを使っていない部分もあるので、その辺りも見ていただきたい

確認方法

Storybook や Chromatic で確認してください。

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@5017

commit: f4201e8

[uknmr]

gap を変えるとどう変わるのかが認識できる Story にしたいです!

以下のようなイメージ（疑似コード）。縦に並べることで違いがわかるかなぁ、と。

<Cluster>
  {[0, 0.25, 0.5, 0.75, ... , 4, 8].map((gap) => (
    <Stack {...args} gap={gap}>
      {[...Array(5)].map((_) => <ColorBox />)}
    </Stack>
  )}
</Cluster>

[misako0927]

以下で直しました！
34b7304

なお、codeを処していないのでmap使わない方がいいかな〜と思い、ベタ書きしております

[uknmr]

code の確認は Docs に寄せていき最終的には消す予定なので、過渡期として気にしすぎなくても思っています。後からメンテナンスすることも考えにくいので、綺麗にできるなら今のうちにしておきたい。

[uknmr]

幅に依って変わる振る舞いは持っていないので、なくてよさそう。

[uknmr]

Stack.stories.tsx の Gap.render をそのまま使っても良さそうに見えました!

[uknmr]

code の確認は Docs に寄せていき最終的には消す予定なので、過渡期として気にしすぎなくても思っています。後からメンテナンスすることも考えにくいので、綺麗にできるなら今のうちにしておきたい。

[uknmr]

以下のような感じであれば、違いを視覚的に表せないかしら。

<Stack>
  {['stretch', 'baseline', 'flex-start', 'flex-end'].map((align) => (
    <Stack {...args} align={align}>
      <ColorBox />
      <ColorBox />
    </Stack>
  )}
</Stack>