Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix <DateRangePicker /> style #1371

Merged
merged 2 commits into from
Aug 17, 2023
Merged

Conversation

takurinton
Copy link
Contributor

#975 (comment)

ちょっと style が崩れていたので修正。
Actions を CalendarRange コンポーネント側に移した。

@changeset-bot
Copy link

changeset-bot bot commented Aug 16, 2023

🦋 Changeset detected

Latest commit: d66773e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
ingred-ui Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Aug 16, 2023

Deploy Preview for ingred-ui ready!

Name Link
🔨 Latest commit d66773e
🔍 Latest deploy log https://app.netlify.com/sites/ingred-ui/deploys/64dc9896c3a51400087f8227
😎 Deploy Preview https://deploy-preview-1371--ingred-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Comment on lines -84 to -91
<Actions actions={actions} />
<CalendarRange
startDate={startDate}
endDate={endDate}
onClose={handleClose}
onClickCloseButton={handleClickCloseButton}
onDatesChange={onDatesChange}
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actions はここで定義する必要がないので削除
props 越しで floating-ui の style を渡して、CalendarRange 側でレンダリングするように

@takurinton
Copy link
Contributor Author

before
元々、actions を表示するときにカレンダーが重なってしまっていた。
image

after

<DatePicker /> と同様の表示になるようにした。 
image

Copy link
Contributor

@Yutan0423 Yutan0423 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM🚀

このPRのスコープ外で1点気になったこととして、

  • カレンダーを2回選択すると、強制的にCloseすること(これは想定内な気が)
  • 先にendDate側を選択しようとすると、UI上おかしくなる?(おそらくstartDate側が先に選択されることを想定している)
スクリーンショット 2023-08-17 9 39 44

既出であれば問題ないですmmm

@takurinton
Copy link
Contributor Author

@Yutan0423

おそらくstartDate側が先に選択されることを想定している

これです

@takurinton
Copy link
Contributor Author

takurinton commented Aug 17, 2023

なんかここらへんはもう少しユーザーに直感的な挙動にしたいなー(どちらの日付を選択しようとしているかを示すとか)

@takurinton takurinton merged commit 128c401 into master Aug 17, 2023
1 check passed
@takurinton takurinton deleted the fix-date-range-picker-style branch August 17, 2023 00:41
@Yutan0423
Copy link
Contributor

選択している範囲より日付が早ければ、startDate側を選択、
選択している範囲より日付が遅ければ、endDate側を選択
するような挙動とかってどうでしょう?🤔

でも2回クリックでCloseする前提であれば、ユーザー体験上よろしくない気もしますね。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants