Skip to content

Commit e8abe23

Browse files
ivyolamitivyolamit
committed
[LEMS-3361/use-wb-tab-in-expression] use IconButton for close button instead of popover close button
1 parent e704633 commit e8abe23

File tree

11 files changed

+2079
-2020
lines changed

11 files changed

+2079
-2020
lines changed

‎packages/math-input/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"@khanacademy/mathjax-renderer": "catalog:devDeps",
4949
"@khanacademy/wonder-blocks-clickable": "catalog:devDeps",
5050
"@khanacademy/wonder-blocks-core": "catalog:devDeps",
51+
"@khanacademy/wonder-blocks-icon-button": "catalog:devDeps",
5152
"@khanacademy/wonder-blocks-popover": "catalog:devDeps",
5253
"@khanacademy/wonder-blocks-tabs": "catalog:devDeps",
5354
"@khanacademy/wonder-blocks-timing": "catalog:devDeps",
@@ -67,6 +68,7 @@
6768
"@khanacademy/mathjax-renderer": "catalog:peerDeps",
6869
"@khanacademy/wonder-blocks-clickable": "catalog:peerDeps",
6970
"@khanacademy/wonder-blocks-core": "catalog:peerDeps",
71+
"@khanacademy/wonder-blocks-icon-button": "catalog:peerDeps",
7072
"@khanacademy/wonder-blocks-popover": "catalog:peerDeps",
7173
"@khanacademy/wonder-blocks-tabs": "catalog:peerDeps",
7274
"@khanacademy/wonder-blocks-timing": "catalog:peerDeps",

‎packages/math-input/src/components/keypad/__tests__/__snapshots__/keypad.test.tsx.snap‎

Lines changed: 1556 additions & 1548 deletions
Large diffs are not rendered by default.

‎packages/math-input/src/components/keypad/__tests__/__snapshots__/mobile-keypad.test.tsx.snap‎

Lines changed: 424 additions & 429 deletions
Large diffs are not rendered by default.

‎packages/math-input/src/components/keypad/keypad-fractions-only.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {View} from "@khanacademy/wonder-blocks-core";
2+
import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
23
import * as React from "react";
34

45
import FractionsPage from "./keypad-pages/fractions-page";
@@ -18,6 +19,18 @@ export type KeypadFractionsOnlyProps = Pick<
1819
| "expandedView"
1920
>;
2021

22+
// Inline styles needed because CSS modules don't have enough specificity
23+
// to override Wonder Blocks View default styles
24+
const keypadInnerContainerStyle = {
25+
display: "flex",
26+
flexDirection: "row",
27+
flexWrap: "nowrap",
28+
backgroundColor: semanticColor.core.background.disabled.strong,
29+
// Even in RTL languages, math is LTR.
30+
// So we force this component to always render LTR
31+
direction: "ltr",
32+
} as const;
33+
2134
export function KeypadFractionsOnly(props: KeypadFractionsOnlyProps) {
2235
const {onClickKey, cursorContext, expandedView} = props;
2336
const selectedPage: KeypadPageType = "Fractions";
@@ -27,18 +40,13 @@ export function KeypadFractionsOnly(props: KeypadFractionsOnlyProps) {
2740
<View
2841
className={`${styles.wrapper} ${expandedView ? styles.expandedWrapper : ""}`}
2942
>
30-
<View className={styles.keypadInnerContainer}>
31-
<View aria-label="Keypad">
32-
<RenderKeyPadPanel
33-
{...props}
34-
selectedPage={selectedPage}
35-
>
36-
<FractionsPage
37-
onClickKey={onClickKey}
38-
cursorContext={cursorContext}
39-
/>
40-
</RenderKeyPadPanel>
41-
</View>
43+
<View style={keypadInnerContainerStyle}>
44+
<RenderKeyPadPanel {...props} selectedPage={selectedPage}>
45+
<FractionsPage
46+
onClickKey={onClickKey}
47+
cursorContext={cursorContext}
48+
/>
49+
</RenderKeyPadPanel>
4250
</View>
4351
</View>
4452
</View>

‎packages/math-input/src/components/keypad/keypad.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
.keypad-inner-container {
1919
display: flex;
2020
flex-direction: row;
21+
flex-wrap: nowrap;
2122
background-color: var(--wb-semanticColor-core-background-disabled-strong);
2223
/* Even in RTL languages, math is LTR, So we force this component to always render LTR. */
2324
direction: ltr;

‎packages/math-input/src/components/keypad/keypad.tsx‎

Lines changed: 65 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {View} from "@khanacademy/wonder-blocks-core";
2+
import IconButton from "@khanacademy/wonder-blocks-icon-button";
23
import {Tabs} from "@khanacademy/wonder-blocks-tabs";
34
import {semanticColor, sizing} from "@khanacademy/wonder-blocks-tokens";
5+
import xBold from "@phosphor-icons/core/bold/x-bold.svg";
46
import * as React from "react";
57
import {useEffect} from "react";
68

@@ -40,7 +42,13 @@ export interface KeypadProps {
4042
// The main (v2) Keypad. Use this component to present an accessible, onscreen
4143
// keypad to learners for entering math expressions.
4244
export default function Keypad({extraKeys = [], ...props}: KeypadProps) {
43-
const {onAnalyticsEvent, fractionsOnly, expandedView} = props;
45+
const {
46+
onAnalyticsEvent,
47+
fractionsOnly,
48+
expandedView,
49+
showDismiss,
50+
onClickKey,
51+
} = props;
4452
// If we're using the Fractions keypad, we want to default select that page
4553
// Otherwise, we want to default to the Numbers page
4654
const defaultSelectedPage = fractionsOnly ? "Fractions" : "Numbers";
@@ -83,31 +91,62 @@ export default function Keypad({extraKeys = [], ...props}: KeypadProps) {
8391

8492
return (
8593
<View className={expandedView ? styles.keypadOuterContainer : ""}>
86-
<Tabs
87-
aria-label="Keypad"
88-
tabs={availableTabs}
89-
selectedTabId={selectedPage}
90-
onTabSelected={(newSelectedPage: string) => {
91-
setSelectedPage(newSelectedPage as KeypadPageType);
92-
}}
93-
styles={{
94-
tab: {
95-
marginBlockStart: sizing.size_080,
96-
marginBlockEnd: sizing.size_080,
97-
},
98-
tablist: {
99-
gap: sizing.size_080,
100-
paddingInline: sizing.size_080,
101-
},
102-
tabPanel: {
103-
display: "flex",
104-
flexDirection: "row",
105-
backgroundColor:
106-
semanticColor.core.background.disabled.strong,
107-
direction: "ltr",
108-
},
109-
}}
110-
/>
94+
<View
95+
className={`${styles.wrapper} ${expandedView ? styles.expandedWrapper : ""}`}
96+
style={{position: "relative"}}
97+
>
98+
{showDismiss && (
99+
<View
100+
style={{
101+
position: "absolute",
102+
top: sizing.size_120,
103+
right: sizing.size_080,
104+
zIndex: 10,
105+
}}
106+
>
107+
<IconButton
108+
icon={xBold}
109+
kind="tertiary"
110+
aria-label="Dismiss"
111+
onClick={() => onClickKey("DISMISS")}
112+
size="xsmall"
113+
tabIndex={0}
114+
style={{
115+
color: semanticColor.core.foreground.neutral
116+
.default,
117+
}}
118+
/>
119+
</View>
120+
)}
121+
<Tabs
122+
aria-label="Keypad"
123+
tabs={availableTabs}
124+
selectedTabId={selectedPage}
125+
onTabSelected={(newSelectedPage: string) => {
126+
setSelectedPage(newSelectedPage as KeypadPageType);
127+
}}
128+
styles={{
129+
tab: {
130+
marginBlockStart: sizing.size_080,
131+
marginBlockEnd: sizing.size_080,
132+
},
133+
tablist: {
134+
gap: sizing.size_080,
135+
paddingInline: sizing.size_080,
136+
},
137+
tabPanel: {
138+
display: "flex",
139+
flexDirection: "row",
140+
flexWrap: "nowrap",
141+
backgroundColor:
142+
semanticColor.core.background.disabled.strong,
143+
// Even in RTL languages, math is LTR.
144+
// So we force this component to always render LTR
145+
direction: "ltr",
146+
},
147+
}}
148+
/>
149+
</View>
111150
</View>
112151
);
113152
}

‎packages/math-input/src/components/keypad/render-keypad-panel.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.keypad-inner-container {
22
display: flex;
33
flex-direction: row;
4+
flex-wrap: nowrap;
45
background-color: var(--wb-semanticColor-core-background-disabled-strong);
56
direction: ltr;
67
}

‎packages/math-input/src/components/keypad/utils/get-available-tabs.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,6 @@ export function getAvailableTabs(
110110
if (props.extraKeys?.length) {
111111
tabIds.push("Extras");
112112
}
113-
if (props?.showDismiss) {
114-
tabIds.push("Dismiss");
115-
}
116113

117114
return tabPanels.filter((tab) => tabIds.includes(tab.id as KeypadPageType));
118115
}

‎packages/math-input/src/full-mobile-input.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const Basic = ({keypadElement, setKeypadElement}) => {
5353
}, [keypadElement, expression, times]);
5454

5555
return (
56-
<div style={{padding: "1rem 2rem"}}>
56+
<div style={{padding: "1rem 2rem", minHeight: "400px"}}>
5757
<div>
5858
<div>
5959
NOTE: To properly test the input interaction, you will need

‎packages/perseus/src/components/math-input/math-input.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,12 @@ class InnerMathInput extends React.Component<InnerProps, State> {
278278
blur: () => void = () => this.setState({focused: false});
279279

280280
handleKeypadPress: (key: KeypadKey, e: any) => void = (key, e) => {
281+
// Handle dismiss key to close the keypad
282+
if (key === "DISMISS") {
283+
this.closeKeypad();
284+
return;
285+
}
286+
281287
const {locale} = this.context;
282288
const translator = getKeyTranslator(locale, this.context.strings)[key];
283289
const mathField = this.mathField();
@@ -370,7 +376,6 @@ class InnerMathInput extends React.Component<InnerProps, State> {
370376
</HeadingMedium>
371377
<PopoverContentCore
372378
style={styles.popoverContent}
373-
closeButtonVisible={true}
374379
>
375380
<DesktopKeypad
376381
onAnalyticsEvent={

0 commit comments

Comments
 (0)