Skip to content

Commit

Permalink
chore(website): Update HoverableMenus example to not use TextArea
Browse files Browse the repository at this point in the history
The textarea made the mobile experience terrible since you'd have to
click inside the text area to close them menus causing the keyboard to
appear.
  • Loading branch information
mlaursen committed Jan 31, 2022
1 parent 1288be7 commit 5361825
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use 'react-md' as *;

.container {
display: grid;
grid-template: max-content 1fr / 1fr;
Expand All @@ -9,6 +11,13 @@
padding: 0 0.5rem;
}

.text {
@include rmd-typography-theme(max-width, line-width);

justify-self: center;
margin: 1rem;
}

.dialog {
width: 30rem;
}
40 changes: 23 additions & 17 deletions packages/documentation/src/components/Demos/Menu/HoverableMenus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
Form,
MenuItemCheckbox,
MenuItemRadio,
TextArea,
TextFieldWithMessage,
useNumberField,
} from "@react-md/form";
Expand Down Expand Up @@ -115,6 +114,8 @@ export default function HoverableMenus(): ReactElement {
id: "hoverable-menus-hover-timeout",
min: 0,
max: 3000,
step: 100,
fixOnBlur: false,
});

return (
Expand Down Expand Up @@ -254,21 +255,21 @@ export default function HoverableMenus(): ReactElement {
</DropdownMenu>
</MenuBar>
</AppBar>
<TextArea
aria-label="Text Sample"
id="hoverable-menus-textarea"
resize="none"
areaStyle={{
color: color === "" ? undefined : color,
fontFamily,
fontSize,
fontStyle: italic ? "italic" : undefined,
fontWeight: bold ? "bold" : undefined,
textAlign,
textDecoration,
}}
defaultValue={EXAMPLE_TEXT}
/>
<div className={styles.text}>
<Typography
style={{
color: color === "" ? undefined : color,
fontFamily,
fontSize,
fontStyle: italic ? "italic" : undefined,
fontWeight: bold ? "bold" : undefined,
textAlign,
textDecoration,
}}
>
{EXAMPLE_TEXT}
</Typography>
</div>
<Button
theme="warning"
floating="bottom-left"
Expand Down Expand Up @@ -322,7 +323,12 @@ export default function HoverableMenus(): ReactElement {
<Button form="configure-form" type="reset" theme="warning">
Reset
</Button>
<Button form="configure-form" type="submit" theme="primary">
<Button
form="configure-form"
type="submit"
theme="primary"
disabled={textFieldProps.error}
>
Confirm
</Button>
</DialogFooter>
Expand Down

0 comments on commit 5361825

Please sign in to comment.