feat: Allow specifying '1' for height in copyable text to fill the re…

…maining space #1823 (#1879)
h2oai · Mar 10, 2023 · 119a30e · 119a30e
1 parent 23e3d09
commit 119a30e
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 43 deletions.
diff --git a/py/examples/copyable_text.py b/py/examples/copyable_text.py
@@ -18,10 +18,11 @@
 Woohoo!'''
 page = site['/demo']
 
-page['hello'] = ui.form_card(box='1 1 3 6', items=[
+page['hello'] = ui.form_card(box='1 1 3 10', items=[
     ui.copyable_text(label='Copyable text', value='Hello world!'),
     ui.copyable_text(label='Multiline Copyable text', value=multiline_content, multiline=True),
     ui.copyable_text(label='Multiline Copyable text with height=200px', value=big_multiline_content, multiline=True, height='200px'),
+    ui.copyable_text(label='Multiline Copyable text filling remaining card space', value=big_multiline_content, multiline=True, height='1'),
 ])
 
 page.save()
diff --git a/py/h2o_lightwave/h2o_lightwave/types.py b/py/h2o_lightwave/h2o_lightwave/types.py
@@ -6870,7 +6870,7 @@ def __init__(
         self.multiline = multiline
         """True if the component should allow multi-line text entry."""
         self.height = height
-        """Custom height in px, e.g. '200px'. Requires `multiline` to be set."""
+        """Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires `multiline` to be set."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""

diff --git a/py/h2o_lightwave/h2o_lightwave/ui.py b/py/h2o_lightwave/h2o_lightwave/ui.py
@@ -2548,7 +2548,7 @@ def copyable_text(
         label: The text displayed above the textbox.
         name: An identifying name for this component.
         multiline: True if the component should allow multi-line text entry.
-        height: Custom height in px, e.g. '200px'. Requires `multiline` to be set.
+        height: Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires `multiline` to be set.
     Returns:
         A `h2o_wave.types.CopyableText` instance.
     """

diff --git a/py/h2o_wave/h2o_wave/types.py b/py/h2o_wave/h2o_wave/types.py
@@ -6870,7 +6870,7 @@ def __init__(
         self.multiline = multiline
         """True if the component should allow multi-line text entry."""
         self.height = height
-        """Custom height in px, e.g. '200px'. Requires `multiline` to be set."""
+        """Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires `multiline` to be set."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""

diff --git a/py/h2o_wave/h2o_wave/ui.py b/py/h2o_wave/h2o_wave/ui.py
@@ -2548,7 +2548,7 @@ def copyable_text(
         label: The text displayed above the textbox.
         name: An identifying name for this component.
         multiline: True if the component should allow multi-line text entry.
-        height: Custom height in px, e.g. '200px'. Requires `multiline` to be set.
+        height: Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires `multiline` to be set.
     Returns:
         A `h2o_wave.types.CopyableText` instance.
     """

diff --git a/r/R/ui.R b/r/R/ui.R
@@ -2956,7 +2956,7 @@ ui_facepile <- function(
 #' @param label The text displayed above the textbox.
 #' @param name An identifying name for this component.
 #' @param multiline True if the component should allow multi-line text entry.
-#' @param height Custom height in px, e.g. '200px'. Requires `multiline` to be set.
+#' @param height Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires `multiline` to be set.
 #' @return A CopyableText instance.
 #' @export
 ui_copyable_text <- function(

diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
@@ -4,39 +4,45 @@ import React from 'react'
 import { stylesheet } from 'typestyle'
 import { clas, cssVar, pc } from './theme'
 
-const css = stylesheet({
-  multiContainer: {
-    position: 'relative',
-    $nest: {
-      '&:hover > button': {
-        opacity: 1
+const
+  css = stylesheet({
+    multiContainer: {
+      position: 'relative',
+      $nest: {
+        '&:hover > button': {
+          opacity: 1
+        }
       }
-    }
-  },
-  compactContainer: {
-    position: 'relative',
-  },
-  btnMultiline: {
-    opacity: 0,
-    transition: 'opacity .5s'
-  },
-  btn: {
-    minWidth: 'initial',
-    position: 'absolute',
-    top: 31,
-    right: 4,
-    width: 24,
-    height: 24
-  },
-  copiedBtn: {
-    background: cssVar('$green'),
-    $nest: {
-      '&:hover': {
-        background: cssVar('$green'),
+    },
+    compactContainer: {
+      position: 'relative',
+    },
+    btnMultiline: {
+      opacity: 0,
+      transition: 'opacity .5s'
+    },
+    btn: {
+      minWidth: 'initial',
+      position: 'absolute',
+      top: 31,
+      right: 4,
+      width: 24,
+      height: 24
+    },
+    copiedBtn: {
+      background: cssVar('$green'),
+      $nest: {
+        '&:hover': {
+          background: cssVar('$green'),
+        }
       }
     }
+  }),
+  fullHeightStyle = {
+    display: 'flex',
+    flexGrow: 1,
+    flexDirection: 'column',
   }
-})
 
 /**
  * Create a copyable text component.
@@ -51,13 +57,14 @@ export interface CopyableText {
   name?: S
   /** True if the component should allow multi-line text entry. */
   multiline?: B
-  /** Custom height in px, e.g. '200px'. Requires `multiline` to be set. */
+  /** Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires `multiline` to be set. */
   height?: S
 }
 
 export const XCopyableText = ({ model }: { model: CopyableText }) => {
   const
     { name, multiline, label, value, height } = model,
+    heightStyle = multiline && height === '1' ? fullHeightStyle : undefined,
     ref = React.useRef<Fluent.ITextField>(null),
     timeoutRef = React.useRef<U>(),
     [copied, setCopied] = React.useState(false),
@@ -81,13 +88,22 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {
   React.useEffect(() => () => window.clearTimeout(timeoutRef.current), [])
 
   return (
-    <div data-test={name} className={multiline ? css.multiContainer : css.compactContainer}>
+    <div
+      data-test={name}
+      className={multiline ? css.multiContainer : css.compactContainer}
+      style={heightStyle as React.CSSProperties}
+    >
       <Fluent.TextField
         componentRef={ref}
         value={value}
         label={label}
         multiline={multiline}
-        styles={{ root: { width: pc(100) }, fieldGroup: multiline && height ? { minHeight: height } : undefined }}
+        styles={{
+          root: { ...heightStyle, width: pc(100) },
+          wrapper: heightStyle,
+          fieldGroup: heightStyle || { minHeight: height },
+          field: { ...heightStyle, height, resize: multiline ? 'vertical' : 'none', },
+        }}
         readOnly
       />
       <Fluent.PrimaryButton

diff --git a/website/widgets/form/copyable_text.md b/website/widgets/form/copyable_text.md
@@ -35,16 +35,19 @@ q.page['form'] = ui.form_card(
 
 ## Height of copyable text
 
-If you want to adjust the height of the copyable textbox, set the `height` attribute to your desired height in pixels, e.g. `'200px'`.
-Note: The set height will only take effect if `multiline` is set to `True`.
+If you want to adjust the height of the copyable textbox, set the `height` attribute to your desired height in pixels (e.g. `'200px'`) or use `1` to fill the remaining card space.
+The height will only take effect if `multiline` is set to `True`.
 
 ```py
 multiline_content = '''Wave is truly awesome.
 You should try all the features!
-Like setting the height to 200px!'''
+Like having a big textbox!'''
 
 q.page['form'] = ui.form_card(
-    box='1 1 2 4',
-    items=[ui.copyable_text(label='Copyable text', value=multiline_content, multiline=True, height='200px')]
+    box='1 1 2 8',
+    items=[
+        ui.copyable_text(label='Copyable text', value=multiline_content, multiline=True, height='200px'),
+        ui.copyable_text(label='Copyable text', value=multiline_content, multiline=True, height='1')
+    ]
 )
 ```