From 744ee4a0fd1759013f1cf3ffc394f47a27df240a Mon Sep 17 00:00:00 2001 From: Annie Gallagher Date: Tue, 22 Oct 2024 13:32:01 -0700 Subject: [PATCH 1/9] add ltr directionality in 2 widgets --- packages/math-input/src/components/keypad/keypad.tsx | 1 + packages/perseus/src/widgets/expression/expression.tsx | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/math-input/src/components/keypad/keypad.tsx b/packages/math-input/src/components/keypad/keypad.tsx index 4e21539b2e..31ff3b26df 100644 --- a/packages/math-input/src/components/keypad/keypad.tsx +++ b/packages/math-input/src/components/keypad/keypad.tsx @@ -203,6 +203,7 @@ const styles = StyleSheet.create({ keypadOuterContainer: { display: "flex", alignItems: "center", + direction: "ltr", }, wrapper: { background: color.white, diff --git a/packages/perseus/src/widgets/expression/expression.tsx b/packages/perseus/src/widgets/expression/expression.tsx index 8de7fa4a7b..99573e10b1 100644 --- a/packages/perseus/src/widgets/expression/expression.tsx +++ b/packages/perseus/src/widgets/expression/expression.tsx @@ -299,6 +299,7 @@ export class Expression )} Date: Tue, 22 Oct 2024 14:33:45 -0700 Subject: [PATCH 2/9] move styling to different container --- packages/math-input/src/components/keypad/keypad.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/math-input/src/components/keypad/keypad.tsx b/packages/math-input/src/components/keypad/keypad.tsx index 31ff3b26df..ad4d27fdd3 100644 --- a/packages/math-input/src/components/keypad/keypad.tsx +++ b/packages/math-input/src/components/keypad/keypad.tsx @@ -203,7 +203,7 @@ const styles = StyleSheet.create({ keypadOuterContainer: { display: "flex", alignItems: "center", - direction: "ltr", + }, wrapper: { background: color.white, @@ -218,6 +218,7 @@ const styles = StyleSheet.create({ display: "flex", flexDirection: "row", backgroundColor: "#DBDCDD", + direction: "ltr", }, keypadGrid: { display: "grid", From dca4c4294da902c44a3b8f1bb7d9728996912275 Mon Sep 17 00:00:00 2001 From: Annie Gallagher Date: Wed, 23 Oct 2024 10:16:27 -0700 Subject: [PATCH 3/9] update tabbar --- packages/math-input/src/components/tabbar/tabbar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/math-input/src/components/tabbar/tabbar.tsx b/packages/math-input/src/components/tabbar/tabbar.tsx index 5dcf0ebe66..c32c05a717 100644 --- a/packages/math-input/src/components/tabbar/tabbar.tsx +++ b/packages/math-input/src/components/tabbar/tabbar.tsx @@ -15,6 +15,7 @@ const styles = StyleSheet.create({ justifyContent: "space-between", paddingTop: 2, paddingBottom: 2, + direction: "ltr", }, pages: { display: "flex", From 28bc7528f98e72c315651ecceaa02ba6ed39a775 Mon Sep 17 00:00:00 2001 From: Annie Gallagher Date: Wed, 23 Oct 2024 10:18:51 -0700 Subject: [PATCH 4/9] add styles --- packages/perseus/src/components/math-input.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx index 995273ae3e..cefefa7b6d 100644 --- a/packages/perseus/src/components/math-input.tsx +++ b/packages/perseus/src/components/math-input.tsx @@ -327,6 +327,7 @@ class InnerMathInput extends React.Component { > (this.__mathFieldWrapperRef = ref)} onFocus={() => this.focus()} onBlur={() => this.blur()} @@ -547,6 +548,9 @@ const styles = StyleSheet.create({ paddingBottom: spacing.xxSmall_6, maxWidth: "initial", }, + ltr: { + direction: "ltr", + } }); export default MathInput; From 48da8ad0c36a4ce1bf85086d330c71fce5cdc259 Mon Sep 17 00:00:00 2001 From: Annie Gallagher Date: Wed, 23 Oct 2024 10:29:17 -0700 Subject: [PATCH 5/9] update where ltr is for math input --- packages/math-input/src/components/keypad/keypad.tsx | 1 - packages/perseus/src/components/math-input.tsx | 4 ---- packages/perseus/src/styles/perseus-renderer.less | 2 ++ 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/math-input/src/components/keypad/keypad.tsx b/packages/math-input/src/components/keypad/keypad.tsx index ad4d27fdd3..1e7bf94f86 100644 --- a/packages/math-input/src/components/keypad/keypad.tsx +++ b/packages/math-input/src/components/keypad/keypad.tsx @@ -203,7 +203,6 @@ const styles = StyleSheet.create({ keypadOuterContainer: { display: "flex", alignItems: "center", - }, wrapper: { background: color.white, diff --git a/packages/perseus/src/components/math-input.tsx b/packages/perseus/src/components/math-input.tsx index cefefa7b6d..995273ae3e 100644 --- a/packages/perseus/src/components/math-input.tsx +++ b/packages/perseus/src/components/math-input.tsx @@ -327,7 +327,6 @@ class InnerMathInput extends React.Component { > (this.__mathFieldWrapperRef = ref)} onFocus={() => this.focus()} onBlur={() => this.blur()} @@ -548,9 +547,6 @@ const styles = StyleSheet.create({ paddingBottom: spacing.xxSmall_6, maxWidth: "initial", }, - ltr: { - direction: "ltr", - } }); export default MathInput; diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less index 388c1a317c..14a215f800 100644 --- a/packages/perseus/src/styles/perseus-renderer.less +++ b/packages/perseus/src/styles/perseus-renderer.less @@ -576,6 +576,8 @@ border: unset; + direction: ltr; + &.mq-focused { box-shadow: unset; } From 73da3ee9279e949067412c6e0a4a745497ece177 Mon Sep 17 00:00:00 2001 From: Annie Gallagher Date: Wed, 23 Oct 2024 10:42:20 -0700 Subject: [PATCH 6/9] update snapshots --- .../keypad/__tests__/__snapshots__/keypad.test.tsx.snap | 8 ++++---- .../__tests__/__snapshots__/mobile-keypad.test.tsx.snap | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap index e149a9ebdc..e8f3dce6b3 100644 --- a/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap +++ b/packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap @@ -9,7 +9,7 @@ exports[`keypad should snapshot expanded: first render 1`] = ` class="default_xu2jcg-o_O-wrapper_144oaus-o_O-expandedWrapper_ykafj" >
Date: Wed, 23 Oct 2024 10:50:51 -0700 Subject: [PATCH 7/9] more updates to styling ltr --- packages/perseus/src/widgets/expression/expression.tsx | 8 ++++---- .../perseus/src/widgets/numeric-input/numeric-input.tsx | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/perseus/src/widgets/expression/expression.tsx b/packages/perseus/src/widgets/expression/expression.tsx index 99573e10b1..29b60e8046 100644 --- a/packages/perseus/src/widgets/expression/expression.tsx +++ b/packages/perseus/src/widgets/expression/expression.tsx @@ -299,7 +299,7 @@ export class Expression )} Date: Wed, 23 Oct 2024 11:04:06 -0700 Subject: [PATCH 8/9] add changeset --- .changeset/nervous-plants-guess.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/nervous-plants-guess.md diff --git a/.changeset/nervous-plants-guess.md b/.changeset/nervous-plants-guess.md new file mode 100644 index 0000000000..2ecf26e766 --- /dev/null +++ b/.changeset/nervous-plants-guess.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/math-input": minor +"@khanacademy/perseus": minor +--- + +Add styling to some math widgets to override rtl settings in rtl languages. From 72088445fe017a84110562980df85594a3e01943 Mon Sep 17 00:00:00 2001 From: Annie Gallagher Date: Wed, 23 Oct 2024 11:09:46 -0700 Subject: [PATCH 9/9] more jest snapshots --- .../__snapshots__/graded-group-set-jipt.test.ts.snap | 6 +++--- .../__snapshots__/graded-group-set.test.ts.snap | 2 +- .../src/widgets/group/__snapshots__/group.test.tsx.snap | 4 ++-- .../numeric-input/__snapshots__/numeric-input.test.ts.snap | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap index f1453a2201..add7bbec37 100644 --- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap +++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set-jipt.test.ts.snap @@ -68,7 +68,7 @@ exports[`graded-group-set should render all graded groups 1`] = ` autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAx" type="text" value="" @@ -297,7 +297,7 @@ exports[`graded-group-set should render all graded groups 1`] = ` autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAx" type="text" value="" @@ -526,7 +526,7 @@ exports[`graded-group-set should render all graded groups 1`] = ` autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAx" type="text" value="" diff --git a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap index ce69ebd6c0..02598a2299 100644 --- a/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap +++ b/packages/perseus/src/widgets/graded-group-set/__snapshots__/graded-group-set.test.ts.snap @@ -134,7 +134,7 @@ exports[`graded group widget should snapshot 1`] = ` autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAx" type="text" value="" diff --git a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap index 4ee90f354c..925e522195 100644 --- a/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap +++ b/packages/perseus/src/widgets/group/__snapshots__/group.test.tsx.snap @@ -751,7 +751,7 @@ exports[`group widget should snapshot: initial render 1`] = ` autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAx" type="text" value="" @@ -958,7 +958,7 @@ exports[`group widget should snapshot: initial render 1`] = ` autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAy" type="text" value="" diff --git a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap index 53e9f2f3e5..980ef70e85 100644 --- a/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap +++ b/packages/perseus/src/widgets/numeric-input/__snapshots__/numeric-input.test.ts.snap @@ -99,7 +99,7 @@ exports[`numeric-input widget Should render predictably: after interaction 1`] = autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-focused_1z0d9ul-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-focused_1z0d9ul-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAx" type="text" value="1252" @@ -303,7 +303,7 @@ exports[`numeric-input widget Should render predictably: first render 1`] = ` autocapitalize="off" autocomplete="off" autocorrect="off" - class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_19vw1dn" + class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_53h0n9-o_O-input_e1hk8y" id="input-with-examples-bnVtZXJpYy1pbnB1dCAx" type="text" value=""