Dance AI: handle RTL in header, footer, and effect/code toggle #54922
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* added comment (review fix)
bencodeorg
commented
Nov 14, 2023
| return <span key={index}>{part}</span>; | ||
| }); | ||
|
|
||
| const headerContent = [ |
There was a problem hiding this comment.
No functional change here, just a simplification
bencodeorg
changed the title
|
Tested in LTR and RTL and looks great. Just one thing we could fix: making sure there is space between the icon and the text in the |
breville
reviewed
Nov 14, 2023
apps/src/dance/ai/DanceAiModal.tsx
Outdated
| @@ -492,21 +492,21 @@ const DanceAiModal: React.FunctionComponent = () => { | |||
|
|
|||
| const headerValue = () => { | |||
| return ( | |||
| <div | |||
| <span | |||
There was a problem hiding this comment.
Do we need to use span or could we just use display: inline in the right place?
There was a problem hiding this comment.
Similar question for the other places we changed <div> to <span>...
There was a problem hiding this comment.
Isn't it more semantic HTML to use span for these? I didn't try display: inline (isn't that what span is for)? I was having some issues with the placeholder for the emojis showing up on a new line as I was working through this, possible I could rework though
There was a problem hiding this comment.
It sounds like a <span> shouldn't wrap a block element, so that means we shouldn't use them to wrap things like the emojis. From https://www.w3schools.com/tags/tag_span.asp's top-level summary, it feels like we should mostly use <span> to wrap text when we want to style it, though the spec is probably a bit more nuanced.
There was a problem hiding this comment.
Oh good call re: EmojiIcon. Lemme take another pass
There was a problem hiding this comment.
Looks fine with divs instead of spans I think, give it a look! ea78858
|
@breville updated to fix regenerate icon spacing, LMK what you think! |
breville
approved these changes
Nov 15, 2023
molly-moen
added a commit
that referenced
this pull request
Nov 15, 2023
* Tutorial explorer: preview mode on hourofcode.com * Updated test to account for flakiness. * Added comment * Re-enabled test * hoc2023: AI string updates * Use use_preview variable * Update schema cache dump after schema changes. * Require script_id for SingleSectionExperiment and TeacherBasedExperiment (#54843) * require script_id on SingleSectionExperiment and TeacherBasedExperiment * fix and improve unit tests * fix unit tests * revert stray schema changes * Update string and font size * Split lines for explanation text. * update injection options (#54818) * Handle pending and error states for rubric ai evaluation (#54860) * updated rubric for more useful error messages * updated rubric settings tests for new errors * undo debug changes to rubrics_controller * bug fixes * added messages for pending and running states * Dance AI: Add start over button (#54899) * Dance AI: Add start over button * don't show on explanation page, add tooltips * Updates to instructions in HoC progression (#54881) Updates to instructions in HoC progression * Allow setting workshop organizer permission (#54896) * Allow setting workshop organizer permission * Update Assignable Permissions * added categories and standards csv files (#54933) * levelbuilder content changes (-robo-commit) * staging content changes (-robo-commit) * * removed empty files on dashboard/public/fonts/gotham (#54906) * P20-522: Fix Express22 level (#54789) * P20-522: Translate `gamelab_ifVarEquals` block type NUM vsriables * P20-522: Translate `procedures_defnoreturn` block id attr * Revert "P20-522: Translate `procedures_defnoreturn` block id attr" This reverts commit e0f4280. * [DESign2-51] Add Chips component (#54064) * Created Chips component * created stories for Chips * created tests for Chips * created documentation for Chips * removed MultiSelectGroup * used Chips instead of MultiSelectGroup in the code * Teachers find course button goes to catalog (#54918) * Teachers find course button goes to catalog * update test * staging content changes (-) * HoC 2023 - Fix missing string on Educators How-to guide (#54932) * Add skinny banner to code.org/student/middle-high for AFE scholarships (#54907) * refactor middle-high.haml and remove stylesheet * add afe_scholarship_skinny_banner.haml view * update grade labels and add empty alt text to images * Dance AI: handle RTL in header, footer, and effect/code toggle (#54922) * * add focus state for toggle code/effect buttons * * dance ai - explanation area RTL support fixes * * dance party - song selector RTL support fix * * updated explanation button rtl languages positioning * added comment (review fix) * Center toggle in LTR/RTL, force LTR header even in RTL languages * RTL header * Handle RTL in footer buttons * Fix text/icon spacing in RTL * Undo spacing change * Use div instead of span --------- Co-authored-by: denyslevada <levada.denys@gmail.com> * standardize counting of events so all are right (#54927) * Update Neural Networks lesson text on code.org/ai/how-ai-works and hourofcode.com/ai (#54915) * Update code.org/hourofcode see all Hour of code tutorials section (#54931) * add see all activities section * update images and add responsive styles --------- Co-authored-by: breville <brendan@code.org> Co-authored-by: Jessica Kulwik <jessica@code.org> Co-authored-by: Dave Bailey <davidsbailey@users.noreply.github.com> Co-authored-by: Molly Moen <molly@code.org> Co-authored-by: Mark Barnes <mark.barnes@code.org> Co-authored-by: Sanchit Malhotra <85528507+sanchitmalhotra126@users.noreply.github.com> Co-authored-by: fisher-alice <107423305+fisher-alice@users.noreply.github.com> Co-authored-by: Brendan Reville <breville@users.noreply.github.com> Co-authored-by: Dani LaMarca <dani@code.org> Co-authored-by: levadadenys <levada.denys@gmail.com> Co-authored-by: Artem Vavilov <11708250+artem-vavilov@users.noreply.github.com> Co-authored-by: Kelby Hawn <9256643+kelbyhawn@users.noreply.github.com> Co-authored-by: bencodeorg <ben@code.org> Co-authored-by: Turner Riley <56283563+TurnerRiley@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes three RTL layout issues in the modal:
Links
Testing story
Tested manually in RTL (Hebrew) and LTR (English).