voyagegroup / ingred-ui

https://ingred-ui.netlify.app
MIT License
53 stars 10 forks source link

🥷 DualListBox で規定の Checkbox を使わないケースを実現する #1595

Closed deatiger closed 6 months ago

deatiger commented 6 months ago

Overview

Pub Con で以下のようなデザインを実現したい。 https://www.figma.com/file/0n9zyTQSyitYzM052ch4WR/branch/Ap0srf48gimH4aI7Yip8dW/Main?type=design&node-id=8353-18815&mode=design&t=yCxrdNlkI26SNE4j-0

Changed points

Preview URL

https://deploy-preview-1595--ingred-ui.netlify.app/?path=/docs/components-data-display-duallistbox--docs

Consideration

INGRED UI 内で使われている close アイコンを統一する対応は別途実施予定

例) AsIs スクリーンショット 2024-04-11 10 49 48

ToBe image

Check List (If️ you added new component in this PR)

changeset-bot[bot] commented 6 months ago

🦋 Changeset detected

Latest commit: 0ad11c81f237fe1bd9488ea82bb903f9653e8cb1

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 | Major |

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[bot] commented 6 months ago

Deploy Preview for ingred-ui ready!

Name Link
Latest commit 0ad11c81f237fe1bd9488ea82bb903f9653e8cb1
Latest deploy log https://app.netlify.com/sites/ingred-ui/deploys/661757789e59ad0008035bba
Deploy Preview https://deploy-preview-1595--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.

youchann commented 6 months ago

@deatiger PRのDescriptionのスクショのような例はStorybookにない感じですかね....?:thinking:(あるとよいかも

deatiger commented 6 months ago

@youchann

@deatiger PRのDescriptionのスクショのような例はStorybookにない感じですかね....?:thinking:(あるとよいかも

Storybook の WithoutCheckbox を汎用的な例として作ってみたんですが、 Pub Con の実際のユースケースに合わせて作ってみますね!