[ShadCN] Migrate Quiz Components to ShadCN/Tailwind #13876
Conversation
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
TylerAPfledderer
changed the title
TylerAPfledderer
changed the title
|
Hey @TylerAPfledderer wanted to double check if this PR is still in draft mode or is ready for a review. |
@pettinarip still working on it. 😁 |
TylerAPfledderer
requested review from
pettinarip and
minimalsm
as code owners
| id={radioInputProps.value} | ||
| data-testid="quiz-question-answer" | ||
| data-group | ||
| data-answer-visible={isAnswerVisible || undefined} |
There was a problem hiding this comment.
An alternative approach instead of rendering data-* attributes for dynamic styling would be dynamically assigned CSS vars at a parent level to be called when hover or data-checked
|
|
||
| const Stack = forwardRef<FlexElement, StackProps>( | ||
| ({ className, separator, children, ...props }, ref) => { | ||
| const cloneChildren = useMemo(() => { |
There was a problem hiding this comment.
Applied approach similar to the stack component from Chakra to still allow for some separator component to be passed in and rendered internally for repetition. This is needed for the Quiz Summary stats. This should not be a breaking change for other renders.
src/components/Quiz/QuizzesModal.tsx
Outdated
| if (quizStatus === "neutral") { | ||
| return "background.base" | ||
| return "!bg-background" |
There was a problem hiding this comment.
Forcing the styling because these utilities currently compete with Chakra style props from Modal
| render: (args) => <QuizzesListComponent {...args} />, | ||
| } | ||
|
|
||
| export const OneCompletedQuiz: StoryObj<typeof meta> = { |
There was a problem hiding this comment.
Provide UI confirmation that the checkmark will render on a completed quiz set.
There was a problem hiding this comment.
Found some bugs with the colors where we were replicating some bg color styles. Added some commits to clean this up, accounting for both the stand-alone versions (where we style the bg color of the inner container) vs the ones in the modal on the quizzes pages, where the bg color is with the modal.
Patched a few other little color bugs I spotted, and re-deprecated the -neutral color tokens.
Looks ready from my standpoint. Thanks @TylerAPfledderer!
There was a problem hiding this comment.
Awesome @TylerAPfledderer
Left one question about the removed icons from the story but the rest is working perfectly 🏆
| @@ -32,20 +31,15 @@ import { | |||
| AuditedIcon, | |||
| AvadoGlyphIcon, | |||
| BattleTestedIcon, | |||
| BedrockGlyphIcon, | |||
There was a problem hiding this comment.
Why are we taking these icons out of the story? is it a cleanup for something?
There was a problem hiding this comment.
@pettinarip not sure why they were removed. I'll review it as soon as possible!
There was a problem hiding this comment.
Added back those missing icons. Still don't know why they were removed.
| listStyleType="none" | ||
| sx={{ counterReset: "list-counter" }} | ||
| > | ||
| <OrderedList className="m-0 list-none [counter-reset:_list-counter]"> |
Description
Migrates the QuizWidget and related components to Tailwind.
This does not touch the logic for the custom radio components (
useRadioanduseRadioGroupfrom Chakra). Due to the size in scope of this PR, the logic and structure update should be handled in a follow-up PR.Does not have an updated
Modalcomponent forQuizModal.Takes an approach using
data-*attributes inquizRadioGroupto handle style changes from boolean checks (i.e. change background color is answer is displayed and/or is correct). Some of this approach might be temporary upon removal of the above mentioned radio hooks.Related Issue