h2oai / wave

Realtime Web Apps and Dashboards for Python and R
https://wave.h2o.ai
Apache License 2.0
3.9k stars 323 forks source link

feat: Numeric/tel keyboard for ui.textbox on mobile devices #2170 #2194

Closed marek-mihok closed 7 months ago

marek-mihok commented 7 months ago

The PR fulfills these requirements: (check all the apply)


Adds an option to specify keyboard type to be shown on mobile devices. One of 'text' | 'number' | 'tel'. Updated API:

export interface Textbox {
  /** An identifying name for this component. */
  name: Id
  /** The text displayed above the field. */
  label?: S
  /** A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. */
  placeholder?: S
  /** Text to be displayed inside the text box. */
  value?: S
  /** The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].*/
  mask?: S
  /** Icon displayed in the far right end of the text field. */
  icon?: S
  /** Text to be displayed before the text box contents. */
  prefix?: S
  /** Text to be displayed after the text box contents. */
  suffix?: S
  /** Text to be displayed as an error below the text box. */
  error?: S
  /** True if the text box is a required field. */
  required?: B
  /** True if the text box is disabled. */
  disabled?: B
  /** True if the text box is a read-only field. */
  readonly?: B
  /** True if the text box should allow multi-line text entry. */
  multiline?: B
  /** True if the text box should hide text content. */
  password?: B
  /** True if the form should be submitted when the text value changes. */
  trigger?: B
  /** The height of the text box, e.g. '100px'. Percentage values not supported. Applicable only if `multiline` is true. */
  height?: S
  /** The width of the text box, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** True if the text may be checked for spelling errors. Defaults to True. */
  spellcheck?: B
  /** Keyboard to be shown on mobile devices. Defaults to 'text'. */
  type?: 'text' | 'number' | 'tel'
}

https://github.com/h2oai/wave/assets/23740173/ff57a6fe-8c9a-4f15-a109-451a39f4b064

Closes #2170

mturoci commented 7 months ago

LGTM. @marek-mihok please resolve the conflicts so we can merge this in.