Sliderの修正 by touyou · Pull Request #137 · goodpatch/sparkle-design

touyou · 2025-08-26T09:13:06Z

概要

指摘事項と調整です

https://www.notion.so/goodpatch-design-div/Slider-4e3de10abcde47d5977ba734eeac4335?source=copy_link

変更内容

動作確認

pnpm lint を実行
pnpm build:package を実行してパッケージが正常にビルドされることを確認
pnpm test を実行してテストがすべて成功することを確認

備考

Figmaのプロパティとの対応をちゃんと取るのが難しかったのでFigma Connectは最低限です
そしてFigma側の入力内容表示もしや間違ってます...？間違ってそうならvalueを数字にしてもらってunitを実装同様にするみたいな対応をやってもらってもいいかもですね

- スライダーの初期値、最大値、増減単位、無効化、向き、スタイルに関する説明を削除 - スライダーの範囲の背景色を変更 - スライダーのトラックスタイルを更新

vercel · 2025-08-26T09:13:11Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
sparkle-design	Ready	Preview	Comment	Aug 29, 2025 4:59am

- スライダーの制御機能を追加し、状態管理を実装 - スライダーに単位表示を追加 - 不要なプロパティ「orientation」を削除 - スライダーのスタイルを改善

- スライダーコンポーネントの制御状態を管理するロジックを改善 - 非制御コンポーネントの内部状態管理を追加 - スライダーコンポーネントのテストケースを新規作成 - ユーザーインタラクションに関するテストを強化

- スライダーコンポーネントの説明をより具体的に修正 - Figmaとの接続設定を新規追加

- フォントの依存関係を追加

Copilot

Pull Request Overview

This PR implements improvements to the Slider component based on feedback, including disabled state fixes, value display, comprehensive test coverage, and Storybook adjustments.

Added value indicator display with optional unit support
Fixed disabled state styling for track, range, and thumb elements
Added comprehensive test coverage with 503 lines of tests
Enhanced Storybook with controlled mode and unit examples

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/test/setup.ts	Added ResizeObserver and MatchMedia polyfills for jsdom testing environment
src/components/ui/slider/item.json	Updated component description and added sparkle-font dependency
src/components/ui/slider/index.tsx	Major refactor with value display, improved disabled styling, and controlled/uncontrolled mode support
src/components/ui/slider/index.test.tsx	Added comprehensive test suite covering all component functionality
src/components/ui/slider/index.stories.tsx	Updated Storybook with new controlled and unit examples
src/components/ui/slider/index.figma.tsx	Added basic Figma Connect configuration

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-27T02:45:27Z

+    const [internalValue, setInternalValue] = React.useState<number[]>(
+      defaultValue || [0]


The fallback value [0] may not respect the component's min prop. If min is greater than 0, the initial state will be invalid. Consider using [min || 0] instead.

Suggested change

const [internalValue, setInternalValue] = React.useState<number[]>(

defaultValue || [0]

defaultValue || [props.min ?? 0]

- スライダーのデフォルト値を `defaultValue` または `props.min` に変更

ore0

ore0 · 2025-08-27T02:56:18Z

+    unit: "%",
+  },
+  render: ({ className, ...props }) => (
+    <div className="flex flex-col items-center justify-center w-[240px]">


240pxが指定されている影響でunitを指定すると単位が落ちちゃっていました

@ore0 shrink-0が必要でした🙏
修正しました！

対応ありがとうございます！
桁が変わるタイミングでslider本体が縮んでしまっていました😭
https://github.com/user-attachments/assets/cb9d8988-a035-42e0-b0f2-8625b6dec3d6

あーなるほど...

@ore0 今pushした状態で一応マルチバイト一文字＋数字3文字ならスライダーの伸び縮みなくできそうな感じになりました！
これ思ったんですけどガタガタするので数字をmonospaceにできたらいいかなぁと思い始めたんですがどうでしょう？

@ore0 🎉
モノスペース右揃えでならうまくいきました

やっぱり桁が変わるタイミングで絶妙にタブがズレちゃって惜しいんですよね...
Figmaでも表現できないポイントなので、方針自体をすり合わせた方が良さそうです。
別の方法で値を表示することも検討した方がいいかもしれないです。
https://github.com/user-attachments/assets/a807cc81-5261-489c-8a50-7a14ba5adfab

@ore0 これは自分が気づかなかった箇所なので最小幅を調整すれば防げるかなと思うのですがどうでしょう？
計算自体はvibe codingしたんでchなんてあるんだなーという気持ちで使ってたんですが以下見る感じ親要素の文字幅でやってるみたいなのでちょっとロジック調整するはやっても良さそうです

https://web.havincoffee.com/css/value/length/ch.html

あとそれでいうと挙動的にthumbの幅を想定できていないかも？です

@ore0 今pushしたバージョンであれば自分の目視したところ解消できていると思うのですがいかがでしょう？
Thumbの設定値を元に調整しているので計算としても意味のあるものになっているかと思います（あと--spacingを使うことで設定が変わったシステムでも動きます）

- スライダーコンポーネントの表示幅を240pxから300pxに変更

- スライダーコンポーネントの幅を300pxから240pxに変更 - スライダーのレンダリングに関連するスタイルを調整

- スライダーコンポーネントの状態を更新し、テスト結果を反映しました。

- スライダーコンポーネントの関数形式を変更 - 不要なコードを削除し、可読性を向上 - スライダーの内部状態管理を整理 - JSX構造を簡素化し、データ属性を追加

- スライダーのルートスタイルを変更し、最小幅を設定 - スライダーのスパン要素の最小幅を変更し、フレックスシンクを適用

- 値インディケーターのクラス名を "min-w-10" から "min-w-14" に変更

- スライダーコンポーネントのテキストアラインメントを左揃えから右揃えに変更

- 値インディケーターの最小幅を桁数と単位に基づいて計算する機能を追加 - スライダーコンポーネントのスタイルを改善 - ヘルパー関数を追加して、最小幅の計算を行う

- 値インディケーターの最小幅を計算式を用いて設定 - スライダーのユニットに応じた最小幅の調整を実施

ore0

LGTMです！
調整ありがとうございます🙇‍♂️🙇‍♂️🙇‍♂️

touyou self-assigned this Aug 26, 2025

Merge branch 'main' into fix/slider

9f31d10

vercel Bot deployed to Preview August 27, 2025 01:30 View deployment

vercel Bot deployed to Preview August 27, 2025 02:18 View deployment

vercel Bot deployed to Preview August 27, 2025 02:32 View deployment

✨ feat: スライダーコンポーネントの説明文を更新

a9e0d64

- スライダーコンポーネントの説明をより具体的に修正 - Figmaとの接続設定を新規追加

vercel Bot deployed to Preview August 27, 2025 02:41 View deployment

➕ 依存関係の追加: スライダーコンポーネントにフォントの依存関係を追加しました。

c523a63

- フォントの依存関係を追加

vercel Bot deployed to Preview August 27, 2025 02:43 View deployment

touyou requested a review from ore0 August 27, 2025 02:44

touyou marked this pull request as ready for review August 27, 2025 02:44

Copilot AI review requested due to automatic review settings August 27, 2025 02:44

Copilot AI reviewed Aug 27, 2025

View reviewed changes

✨ feat: スライダーコンポーネントのデフォルト値を最小値に基づいて設定

e532e2e

- スライダーのデフォルト値を `defaultValue` または `props.min` に変更

vercel Bot deployed to Preview August 27, 2025 02:50 View deployment

ore0 reviewed Aug 27, 2025

View reviewed changes

touyou added 2 commits August 27, 2025 14:03

💄 UIやスタイルファイルの追加や更新: スライダーコンポーネントの幅を300pxに変更

90d29ee

- スライダーコンポーネントの表示幅を240pxから300pxに変更

💄 UIやスタイルファイルの追加や更新: スライダーコンポーネントの幅を240pxに変更

392634c

- スライダーコンポーネントの幅を300pxから240pxに変更 - スライダーのレンダリングに関連するスタイルを調整

vercel Bot deployed to Preview August 27, 2025 05:06 View deployment

📝 ドキュメントの追加や更新: スライダーコンポーネントの状態を更新

1ef1ddf

- スライダーコンポーネントの状態を更新し、テスト結果を反映しました。

vercel Bot deployed to Preview August 27, 2025 05:47 View deployment

vercel Bot deployed to Preview August 27, 2025 05:51 View deployment

💄 UIやスタイルファイルの追加や更新: スライダーコンポーネントのスタイルを改善

0addca7

- スライダーのルートスタイルを変更し、最小幅を設定 - スライダーのスパン要素の最小幅を変更し、フレックスシンクを適用

vercel Bot deployed to Preview August 28, 2025 04:13 View deployment

💄 UIやスタイルファイルの追加や更新: 値インディケーターの最小幅を14に変更

a4ee4ce

- 値インディケーターのクラス名を "min-w-10" から "min-w-14" に変更

vercel Bot deployed to Preview August 28, 2025 04:41 View deployment

touyou added 2 commits August 29, 2025 10:15

💄 UIやスタイルファイルの追加や更新: スライダーコンポーネントのテキストアラインメントを右揃えに変更

eab5fec

- スライダーコンポーネントのテキストアラインメントを左揃えから右揃えに変更

touyou requested a review from ore0 August 29, 2025 01:32

vercel Bot deployed to Preview August 29, 2025 01:33 View deployment

vercel Bot deployed to Preview August 29, 2025 04:59 View deployment

ore0 approved these changes Sep 19, 2025

View reviewed changes

touyou merged commit 927239f into main Sep 19, 2025
3 checks passed

touyou deleted the fix/slider branch September 19, 2025 07:57

		const [internalValue, setInternalValue] = React.useState<number[]>(
		defaultValue \|\| [0]

	const [internalValue, setInternalValue] = React.useState<number[]>(
	defaultValue \|\| [0]
	defaultValue \|\| [props.min ?? 0]

Uh oh!

Conversation

touyou commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

変更内容

動作確認

備考

Uh oh!

vercel Bot commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ore0 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

touyou Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ore0 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

touyou commented Aug 26, 2025 •

edited

Loading

vercel Bot commented Aug 26, 2025 •

edited

Loading

touyou Aug 29, 2025 •

edited

Loading