Migrate ChevronScroll Component from SCSS to Tailwind CSS #602
Conversation
There was a problem hiding this comment.
Sorry for the long wait for this review. This PR is a really great start, thank you for your work Roja.
Just have a couple of requested changes, and it will be complete.
After this, we should easily be able to remove the _ChevronScroll.scss file, and move the
ChevronScroll.tsx component file to the /tw-components folder.
There was a problem hiding this comment.
Lets revert all the changes to the original ChevronScroll.tsx file. I'd like for it to remain untouched so we have something to compare to, and other pages might still be using this component.
Edit:
On second thought, after reviewing, I see how difficult this instruction realistically is. I didn't realize there would be so much Component functionality to migrate. Sorry about that. I am going to change the instructions so that we just modify the CSS classes directly in the original Component files.
For this PR, lets remove the ChevronScrollTailwind.tsx file and keep the changes within ChevronScroll.tsx.
Thank you for going with the original instruction anyway even though it was silly 😅
| const ChevronScroll = () => { | ||
| return ( | ||
| <div className="whitespace-nowrap flex w-[1088px] h-[47px]"> | ||
| <div className="scroll-snap-x mandatory overflow-auto flex items-center gap-4 scrollbar-none"> |
There was a problem hiding this comment.
- scroll-snap-x
- mandatory
- scrollbar-none
I don't think these are valid tailwind classes
| <button | ||
| className={combineClasses( | ||
| "chevron-scroll-left-btn", | ||
| "align-center", |
There was a problem hiding this comment.
We should convert this align-center class to tailwind. It can be found in the _alignment.scss file.
CSS:
align-items: center
| "chevron-scroll-left-btn", | ||
| "align-center", | ||
| "justify-center", | ||
| "row", |
There was a problem hiding this comment.
We should also convert this row class. Its definition is in _layout.scss
| "chevron-scroll-right-btn", | ||
| "align-center", | ||
| "row", | ||
| "bg-white px-[32px] py-0 cursor-pointer border-none justify-center", |
There was a problem hiding this comment.
px-[32px]
The chevron-scroll-right-btn class has a left padding of 15px and a right padding of 32px.
There was a problem hiding this comment.
Lets also keep the CSS for the above "align-center" and "row" classes.
| showRightChevron ? undefined : "hidden" | ||
| )} | ||
| onClick={() => scrollMove("right")} | ||
| aria-label="Scroll right" | ||
| > | ||
| <IconChevronRight /> | ||
| </button> | ||
| <button className="chevron-scroll-clear-btn">Clear all</button> | ||
| <button className="flex items-center underline font-bold text-lg text-gray-700 ml-4 bg-transparent p-0 border-none cursor-pointer">Clear all</button> |
There was a problem hiding this comment.
This line is perfect, very nice 👌
Please review and let me know if there are any issues!