Feat/product comparison packages UI components #2594
Conversation
This reverts commit e283c08.
HiagoMoreiraCubos
requested review from
pedromtec and
renatomaurovtex
and removed request for
a team
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
There was a problem hiding this comment.
cc: @hellofanny
I don't see this component as a library option. Maybe it could be moved to faststore/core, what do you think?
packages/ui/src/components/organisms/ProductComparison/styles.scss
Outdated
Show resolved
Hide resolved
packages/components/src/organisms/ProductComparison/ProductComparisonToolbar.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/organisms/ProductComparison/ProductComparisonToolbar.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/organisms/ProductComparison/ProductComparisonToolbar.tsx
Show resolved
Hide resolved
packages/components/src/organisms/ProductComparison/ProductComparisonToolbar.tsx
Outdated
Show resolved
Hide resolved
packages/ui/src/components/organisms/ProductComparison/styles.scss
Outdated
Show resolved
Hide resolved
packages/ui/src/components/organisms/ProductComparison/styles.scss
Outdated
Show resolved
Hide resolved
packages/ui/src/components/organisms/ProductComparison/styles.scss
Outdated
Show resolved
Hide resolved
packages/components/src/organisms/ProductComparison/ProductComparisonToolbar.tsx
Outdated
Show resolved
Hide resolved
| <Button variant="tertiary" onClick={() => clearProducts()}> | ||
| {clearSelectionButtonLabel} | ||
| </Button> |
There was a problem hiding this comment.
This button is not properly working. It should clear all the selections.
| New comparison After "clear selection" |
|---|
 |
| // Design Tokens for Product Comparison Toolbar | ||
| // -------------------------------------------------------- | ||
|
|
||
| // Default properties |
There was a problem hiding this comment.
Add a gap between the buttons here, use var(--fs-spacing-2)
| bottom: 0; | ||
|
|
||
| padding: var(--fs-spacing-4) var(--fs-spacing-8); | ||
| border-top: var(--fs-border-width) solid var(--fs-border-color-light); |
There was a problem hiding this comment.
This is not on Figma, please use a box-shadow instead.
There was a problem hiding this comment.
Missing a border-top here, could you please add to [data-fs-product-listing-results]?
| Figma prototype |
|---|
 |
There was a problem hiding this comment.
The SlideOverHeader shouldn't change position on horizontal scroll:
| div { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| p { | ||
| font-size: var(--fs-text-size-2); | ||
| font-weight: var(--fs-product-comparison-text-weight); | ||
| margin-right: var(--fs-spacing-3); | ||
| } | ||
| } |
There was a problem hiding this comment.
You can remove this after change it to SelectField
| [data-fs-table-head] { | ||
| [data-fs-table-row] { | ||
| display: flex; | ||
| gap: 40px; |
There was a problem hiding this comment.
Avoid using absolute values, use the global tokens instead var(--fs-spacing-6)
| } | ||
| } | ||
|
|
||
| :first-child { |
| } | ||
| } | ||
|
|
||
| :first-child { |
There was a problem hiding this comment.
I don't think this is working either
This PR includes the construction of the Product Comparison components:
ProductComparison,ProductComparisonTrigger,ProductComparisonToolbar,ProductComparisonSidebar.In addition to the components, the PR also contains the
ProductComparisonProvider, which manages all the internal state of the ProductComparison. This provider contains the display condition of theProductComparisonToolbar, the open and close state of theSlideOverand the product data to be displayed in theProductComparisonSidebar. To use theProductComparisoncorrectly, it is necessary to involve the use of the smaller components previously mentioned with the provider, thus avoiding using them in isolation. There is a validation implemented in theuseProductComparisonhook.The
useProductComparisonhook is responsible for consuming theProductComparisonProviderand returning all the properties, so that the components in the chain can make use of them. The validation was implemented within this hook.Preview Link: https://starter-b4omfq9wh-vtex.vercel.app/
Printscreens