chore(website): Update HoverableMenus example to not use TextArea

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.
mlaursen · Jan 31, 2022 · 5361825 · 5361825
1 parent 1288be7
commit 5361825
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/packages/documentation/src/components/Demos/Menu/HoverableMenus.module.scss b/packages/documentation/src/components/Demos/Menu/HoverableMenus.module.scss
@@ -1,3 +1,5 @@
+@use 'react-md' as *;
+
 .container {
   display: grid;
   grid-template: max-content 1fr / 1fr;
@@ -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;
 }
diff --git a/packages/documentation/src/components/Demos/Menu/HoverableMenus.tsx b/packages/documentation/src/components/Demos/Menu/HoverableMenus.tsx
@@ -14,7 +14,6 @@ import {
   Form,
   MenuItemCheckbox,
   MenuItemRadio,
-  TextArea,
   TextFieldWithMessage,
   useNumberField,
 } from "@react-md/form";
@@ -115,6 +114,8 @@ export default function HoverableMenus(): ReactElement {
     id: "hoverable-menus-hover-timeout",
     min: 0,
     max: 3000,
+    step: 100,
+    fixOnBlur: false,
   });
 
   return (
@@ -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"
@@ -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>