[Label Image] Modernize the label-image answer-choices controls (delete custom Link component)#3797
Conversation
…rnize the label-image answer-choices controls (delete custom Link component)
…mage answer-choices controls (delete custom Link component)
|
Size Change: -1.04 kB (-0.2%) Total Size: 512 kB 📦 View Changed
ℹ️ View Unchanged
|
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (8d093ef) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3797If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3797If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3797 |
|
Screenshot
|
| : styles.addAnswer | ||
| } | ||
| aria-disabled={editingDisabled || undefined} | ||
| <Clickable |
There was a problem hiding this comment.
Used Clickable here instead of Button or IconButton to make it more flexible with the proper alignment of the minus and add circle icon. Doing it in Button or IconButton will not align properly.
| className={styles.disabled} | ||
| title="Answer reordering is not implemented." | ||
| > | ||
| <DraggableGripIcon /> |
There was a problem hiding this comment.
Deleted this since this is not used or fully implemented.
There was a problem hiding this comment.
Amazing! Glad to get rid of this!
| Add an answer choice | ||
| </Link> | ||
| {() => ( | ||
| <span className={styles.addAnswerContent}> |
There was a problem hiding this comment.
Should this use a WB typography component here?
| <Icon icon={removeIcon} size={24} color="#D92916" /> | ||
| </Link> | ||
| {() => ( | ||
| <span className={styles.removeButtonContent}> |
There was a problem hiding this comment.
Same about WB typography?
There was a problem hiding this comment.
Good call, wrapped the label in BodyText and dropped the hand-rolled font CSS. Kept the outer though: it's the flex row laying out the icon next to the text BodyText can't take that role since it hard-codes display: block. And it stays a rather than
|
Screen shot based on latest changes 
|
| }: SelectImageProps): React.ReactElement => ( | ||
| <div> | ||
| <div className={styles.title}>Image</div> | ||
| <BodyText weight="bold" tag="span"> |
There was a problem hiding this comment.
Made this consistent so it would look nice.
2 participants
Summary:
Modernize the label-image answer-choices controls (delete custom Link component)
This is a follow-up PR based on this comment replacing old component with WB component. This PR also delete an unused "order" functionality that was not really implemented based on history:
Issue: LEMS-4131
Test plan: