From bdf82ac09b3473e0915db4fc290de3e4224e9e84 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Thu, 7 Nov 2024 22:48:29 -0500 Subject: [PATCH 1/7] feat: ui.search_field --- .../src/deephaven/ui/components/__init__.py | 2 + .../deephaven/ui/components/search_field.py | 277 ++++++++++++++++++ .../ui/src/js/src/elements/SearchField.tsx | 85 ++++++ plugins/ui/src/js/src/elements/hooks/index.ts | 1 + plugins/ui/src/js/src/elements/index.ts | 1 + .../js/src/elements/model/ElementConstants.ts | 1 + plugins/ui/src/js/src/widget/WidgetUtils.tsx | 2 + 7 files changed, 369 insertions(+) create mode 100644 plugins/ui/src/deephaven/ui/components/search_field.py create mode 100644 plugins/ui/src/js/src/elements/SearchField.tsx diff --git a/plugins/ui/src/deephaven/ui/components/__init__.py b/plugins/ui/src/deephaven/ui/components/__init__.py index 4abc99dcc..6c18ca192 100644 --- a/plugins/ui/src/deephaven/ui/components/__init__.py +++ b/plugins/ui/src/deephaven/ui/components/__init__.py @@ -44,6 +44,7 @@ from .range_calendar import range_calendar from .range_slider import range_slider from .row import row +from .search_field import search_field from .section import section from .slider import slider from .stack import stack @@ -109,6 +110,7 @@ "range_calendar", "range_slider", "row", + "search_field", "section", "slider", "stack", diff --git a/plugins/ui/src/deephaven/ui/components/search_field.py b/plugins/ui/src/deephaven/ui/components/search_field.py new file mode 100644 index 000000000..a1ff0bda1 --- /dev/null +++ b/plugins/ui/src/deephaven/ui/components/search_field.py @@ -0,0 +1,277 @@ +from __future__ import annotations +from typing import Any, Callable +from .types import ( + AriaHasPopup, + AriaAutoComplete, + FocusEventCallable, + KeyboardEventCallable, + AlignSelf, + CSSProperties, + DimensionValue, + JustifySelf, + LayoutFlex, + Position, + LabelPosition, + Alignment, + TextFieldType, + TextFieldInputMode, + TextFieldValidationState, + NecessityIndicator, +) +from .basic import component_element +from ..elements import Element + + +def search_field( + is_disabled: bool | None = None, + is_read_only: bool | None = None, + is_required: bool | None = None, + description: Any | None = None, + error_message: Any | None = None, + auto_focus: bool | None = None, + value: str | None = None, + default_value: str | None = None, + label: Any | None = None, + auto_complete: str | None = None, + max_length: int | None = None, + min_length: int | None = None, + pattern: str | None = None, + type: TextFieldType | None = "search", + input_mode: TextFieldInputMode | None = None, + name: str | None = None, + icon: Element | None = None, + is_quiet: bool | None = None, + validation_state: TextFieldValidationState | None = None, + label_position: LabelPosition = "top", + label_align: Alignment | None = None, + necessity_indicator: NecessityIndicator | None = None, + contextual_help: Any | None = None, + on_clear: Callable[[], None] | None = None, + on_submit: Callable[[dict[str, str]], None] | None = None, + on_focus: FocusEventCallable | None = None, + on_blur: FocusEventCallable | None = None, + on_focus_change: Callable[[bool], None] | None = None, + on_key_down: KeyboardEventCallable | None = None, + on_key_up: KeyboardEventCallable | None = None, + on_change: Callable[[str], None] | None = None, + flex: LayoutFlex | None = None, + flex_grow: float | None = None, + flex_shrink: float | None = None, + flex_basis: DimensionValue | None = None, + align_self: AlignSelf | None = None, + justify_self: JustifySelf | None = None, + order: int | None = None, + grid_area: str | None = None, + grid_row: str | None = None, + grid_row_start: str | None = None, + grid_row_end: str | None = None, + grid_column: str | None = None, + grid_column_start: str | None = None, + grid_column_end: str | None = None, + margin: DimensionValue | None = None, + margin_top: DimensionValue | None = None, + margin_bottom: DimensionValue | None = None, + margin_start: DimensionValue | None = None, + margin_end: DimensionValue | None = None, + margin_x: DimensionValue | None = None, + margin_y: DimensionValue | None = None, + width: DimensionValue | None = None, + height: DimensionValue | None = None, + min_width: DimensionValue | None = None, + min_height: DimensionValue | None = None, + max_width: DimensionValue | None = None, + max_height: DimensionValue | None = None, + position: Position | None = None, + top: DimensionValue | None = None, + bottom: DimensionValue | None = None, + start: DimensionValue | None = None, + end: DimensionValue | None = None, + left: DimensionValue | None = None, + right: DimensionValue | None = None, + z_index: int | None = None, + is_hidden: bool | None = None, + id: str | None = None, + exclude_from_tab_order: bool | None = None, + aria_active_descendant: str | None = None, + aria_auto_complete: AriaAutoComplete | None = None, + aria_haspopup: AriaHasPopup | None = None, + aria_label: str | None = None, + aria_labelledby: str | None = None, + aria_describedby: str | None = None, + aria_details: str | None = None, + aria_errormessage: str | None = None, + UNSAFE_class_name: str | None = None, + UNSAFE_style: CSSProperties | None = None, + key: str | None = None, +) -> Element: + """ + SearchFields are specialized text inputs designed for searching. + + Args: + icon: An icon to display at the start of the input. + is_quiet: Whether the input should be displayed with a quiet style. + is_disabled: Whether the input should be disabled. + is_read_only: Whether the input can be selected but not changed by the user. + is_required: Whether the input is required before form submission. + description: A description for the field. Provides a hint such as specific requirements for what to choose. + error_message: An error message to display when the field is invalid. + auto_focus: Whether the input should be focused on page load. + value: The current value of the input. + default_value: The default value of the input. + label: The label for the input. + auto_complete: Describes the type of autocomplete functionality the input should provide. + max_length: The maximum number of characters the input can accept. + min_length: The minimum number of characters the input can accept. + pattern: A regular expression that the input's value must match to be valid. + type: The type of input to display (defaults to "search"). + input_mode: Hints at the type of data that might be entered by the user while editing the element or its contents. + name: The name of the input, used when submitting an HTML form. + validation_state: Whether the input should display its "valid" or "invalid" state. + label_position: The position of the label relative to the input. + label_align: The alignment of the label relative to the input. + necessity_indicator: Whether the required state should be shown as an icon or text. + contextual_help: A ContextualHelp element to place next to the label. + on_clear: Function called when the clear button is pressed. + on_submit: Function called when the search is submitted. + on_focus: Function called when the input receives focus. + on_blur: Function called when the input loses focus. + on_focus_change: Function called when the focus state changes. + on_key_down: Function called when a key is pressed. + on_key_up: Function called when a key is released. + on_change: Function called when the input value changes. + flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available. + flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available. + flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available. + flex_basis: When used in a flex layout, specifies the initial main size of the element. + align_self: Overrides the alignItems property of a flex or grid container. + justify_self: Species how the element is justified inside a flex or grid container. + order: The layout order for the element within a flex or grid container. + grid_area: When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid. + grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid. + grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid. + grid_row_start: When used in a grid layout, specifies the starting row to span within the grid. + grid_row_end: When used in a grid layout, specifies the ending row to span within the grid. + grid_column_start: When used in a grid layout, specifies the starting column to span within the grid. + grid_column_end: When used in a grid layout, specifies the ending column to span within the grid. + margin: The margin for all four sides of the element. + margin_top: The margin for the top side of the element. + margin_bottom: The margin for the bottom side of the element. + margin_start: The margin for the logical start side of the element, depending on layout direction. + margin_end: The margin for the logical end side of the element, depending on layout direction. + margin_x: The margin for the left and right sides of the element. + margin_y: The margin for the top and bottom sides of the element. + width: The width of the element. + min_width: The minimum width of the element. + max_width: The maximum width of the element. + height: The height of the element. + min_height: The minimum height of the element. + max_height: The maximum height of the element. + position: The position of the element. + top: The distance from the top of the containing element. + bottom: The distance from the bottom of the containing element. + left: The distance from the left of the containing element. + right: The distance from the right of the containing element. + start: The distance from the start of the containing element, depending on layout direction. + end: The distance from the end of the containing element, depending on layout direction. + z_index: The stack order of the element. + is_hidden: Whether the element is hidden. + id: The unique identifier of the element. + exclude_from_tab_order: Whether the element should be excluded from the tab order. + aria_active_descendant: Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. + aria_auto_complete: Indicates whether inputting text could trigger display of one or more predictions of the user's intended value. + aria_haspopup: Indicates whether the element has a popup. + aria_label: The label for the element. + aria_labelledby: The id of the element that labels the current element. + aria_describedby: The id of the element that describes the current element. + aria_details: The id of the element that provides additional information about the current element. + aria_errormessage: The id of the element that provides an error message for the current element. + UNSAFE_class_name: A CSS class to apply to the element. + UNSAFE_style: A CSS style to apply to the element. + key: A unique identifier used by React to render elements in a list. + + Returns: + The rendered search field element. + """ + return component_element( + "SearchField", + icon=icon, + is_quiet=is_quiet, + is_disabled=is_disabled, + is_read_only=is_read_only, + is_required=is_required, + description=description, + error_message=error_message, + auto_focus=auto_focus, + value=value, + default_value=default_value, + label=label, + auto_complete=auto_complete, + max_length=max_length, + min_length=min_length, + pattern=pattern, + type=type, + input_mode=input_mode, + name=name, + validation_state=validation_state, + label_position=label_position, + label_align=label_align, + necessity_indicator=necessity_indicator, + contextual_help=contextual_help, + on_clear=on_clear, + on_submit=on_submit, + on_focus=on_focus, + on_blur=on_blur, + on_focus_change=on_focus_change, + on_key_down=on_key_down, + on_key_up=on_key_up, + on_change=on_change, + flex=flex, + flex_grow=flex_grow, + flex_shrink=flex_shrink, + flex_basis=flex_basis, + align_self=align_self, + justify_self=justify_self, + order=order, + grid_area=grid_area, + grid_row=grid_row, + grid_row_start=grid_row_start, + grid_row_end=grid_row_end, + grid_column=grid_column, + grid_column_start=grid_column_start, + grid_column_end=grid_column_end, + margin=margin, + margin_top=margin_top, + margin_bottom=margin_bottom, + margin_start=margin_start, + margin_end=margin_end, + margin_x=margin_x, + margin_y=margin_y, + width=width, + height=height, + min_width=min_width, + min_height=min_height, + max_width=max_width, + max_height=max_height, + position=position, + top=top, + bottom=bottom, + start=start, + end=end, + left=left, + right=right, + z_index=z_index, + is_hidden=is_hidden, + id=id, + exclude_from_tab_order=exclude_from_tab_order, + aria_active_descendant=aria_active_descendant, + aria_auto_complete=aria_auto_complete, + aria_haspopup=aria_haspopup, + aria_label=aria_label, + aria_labelledby=aria_labelledby, + aria_describedby=aria_describedby, + aria_details=aria_details, + aria_errormessage=aria_errormessage, + UNSAFE_class_name=UNSAFE_class_name, + UNSAFE_style=UNSAFE_style, + key=key, + ) diff --git a/plugins/ui/src/js/src/elements/SearchField.tsx b/plugins/ui/src/js/src/elements/SearchField.tsx new file mode 100644 index 000000000..c7e344db1 --- /dev/null +++ b/plugins/ui/src/js/src/elements/SearchField.tsx @@ -0,0 +1,85 @@ +import { + SearchField as DHCSearchField, + SearchFieldProps as DHCSearchFieldProps, +} from '@deephaven/components'; +import { + useConditionalCallback, + useFocusEventCallback, + useKeyboardEventCallback, +} from './hooks'; + +export function SearchField( + props: DHCSearchFieldProps & { + onSubmit?: (value: string) => void; + onClear?: () => void; + } +): JSX.Element { + const { + onSubmit: propOnSubmit, + onClear: propOnClear, + onFocus: propOnFocus, + onBlur: propOnBlur, + onFocusChange: propOnFocusChange, + onKeyDown: propOnKeyDown, + onKeyUp: propOnKeyUp, + onChange: propOnChange, + ...otherProps + } = props; + + const onSubmit = useConditionalCallback( + propOnSubmit != null, + (value: string) => { + propOnSubmit?.(value); + }, + [propOnSubmit] + ); + + const onClear = useConditionalCallback( + propOnClear != null, + () => { + propOnClear?.(); + }, + [propOnClear] + ); + + const onFocusChange = useConditionalCallback( + propOnFocusChange != null, + (isFocused: boolean) => { + propOnFocusChange?.(isFocused); + }, + [propOnFocusChange] + ); + + const onChange = useConditionalCallback( + propOnChange != null, + (value: string) => { + propOnChange?.(value); + }, + [propOnChange] + ); + + const onFocus = useFocusEventCallback(propOnFocus); + const onBlur = useFocusEventCallback(propOnBlur); + + const onKeyDown = useKeyboardEventCallback(propOnKeyDown); + const onKeyUp = useKeyboardEventCallback(propOnKeyUp); + + return ( + + ); +} + +SearchField.displayName = 'SearchField'; + +export default SearchField; diff --git a/plugins/ui/src/js/src/elements/hooks/index.ts b/plugins/ui/src/js/src/elements/hooks/index.ts index 035e577bc..b1cb8fed1 100644 --- a/plugins/ui/src/js/src/elements/hooks/index.ts +++ b/plugins/ui/src/js/src/elements/hooks/index.ts @@ -12,3 +12,4 @@ export * from './useSelectionProps'; export * from './useTimeComponentProps'; export * from './useTimeValueMemo'; export * from './useDebouncedOnChange'; +export * from './useConditionalCallback'; diff --git a/plugins/ui/src/js/src/elements/index.ts b/plugins/ui/src/js/src/elements/index.ts index bc6712560..30c34b299 100644 --- a/plugins/ui/src/js/src/elements/index.ts +++ b/plugins/ui/src/js/src/elements/index.ts @@ -26,6 +26,7 @@ export * from './Radio'; export * from './RadioGroup'; export * from './RangeCalendar'; export * from './RangeSlider'; +export * from './SearchField'; export * from './Slider'; export * from './Tabs'; export * from './TabPanels'; diff --git a/plugins/ui/src/js/src/elements/model/ElementConstants.ts b/plugins/ui/src/js/src/elements/model/ElementConstants.ts index 2afbf437c..cba64b65e 100644 --- a/plugins/ui/src/js/src/elements/model/ElementConstants.ts +++ b/plugins/ui/src/js/src/elements/model/ElementConstants.ts @@ -59,6 +59,7 @@ export const ELEMENT_NAME = { radioGroup: uiComponentName('RadioGroup'), rangeCalendar: uiComponentName('RangeCalendar'), rangeSlider: uiComponentName('RangeSlider'), + searchField: uiComponentName('SearchField'), section: uiComponentName('Section'), slider: uiComponentName('Slider'), switch: uiComponentName('Switch'), diff --git a/plugins/ui/src/js/src/widget/WidgetUtils.tsx b/plugins/ui/src/js/src/widget/WidgetUtils.tsx index 462a57b60..63e9cf6cb 100644 --- a/plugins/ui/src/js/src/widget/WidgetUtils.tsx +++ b/plugins/ui/src/js/src/widget/WidgetUtils.tsx @@ -70,6 +70,7 @@ import { RadioGroup, RangeCalendar, RangeSlider, + SearchField, Slider, TabPanels, TextField, @@ -143,6 +144,7 @@ export const elementComponentMap = { [ELEMENT_NAME.radioGroup]: RadioGroup, [ELEMENT_NAME.rangeCalendar]: RangeCalendar, [ELEMENT_NAME.rangeSlider]: RangeSlider, + [ELEMENT_NAME.searchField]: SearchField, [ELEMENT_NAME.section]: Section, [ELEMENT_NAME.slider]: Slider, [ELEMENT_NAME.switch]: Switch, From 39c119f2e04562625b1cc98f52b6c6a631a37e52 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Wed, 13 Nov 2024 23:14:03 -0500 Subject: [PATCH 2/7] PR comments --- plugins/ui/src/js/src/elements/SearchField.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/plugins/ui/src/js/src/elements/SearchField.tsx b/plugins/ui/src/js/src/elements/SearchField.tsx index c7e344db1..4f58dd796 100644 --- a/plugins/ui/src/js/src/elements/SearchField.tsx +++ b/plugins/ui/src/js/src/elements/SearchField.tsx @@ -7,6 +7,7 @@ import { useFocusEventCallback, useKeyboardEventCallback, } from './hooks'; +import useDebouncedOnChange from './hooks/useDebouncedOnChange'; export function SearchField( props: DHCSearchFieldProps & { @@ -15,6 +16,8 @@ export function SearchField( } ): JSX.Element { const { + defaultValue = '', + value: propValue, onSubmit: propOnSubmit, onClear: propOnClear, onFocus: propOnFocus, @@ -50,12 +53,9 @@ export function SearchField( [propOnFocusChange] ); - const onChange = useConditionalCallback( - propOnChange != null, - (value: string) => { - propOnChange?.(value); - }, - [propOnChange] + const [value, onChange] = useDebouncedOnChange( + propValue ?? defaultValue, + propOnChange ); const onFocus = useFocusEventCallback(propOnFocus); @@ -66,6 +66,8 @@ export function SearchField( return ( Date: Mon, 18 Nov 2024 09:43:32 -0500 Subject: [PATCH 3/7] search field docs --- plugins/ui/docs/components/search_field.md | 291 +++++++++++++++++++++ 1 file changed, 291 insertions(+) create mode 100644 plugins/ui/docs/components/search_field.md diff --git a/plugins/ui/docs/components/search_field.md b/plugins/ui/docs/components/search_field.md new file mode 100644 index 000000000..e0451b646 --- /dev/null +++ b/plugins/ui/docs/components/search_field.md @@ -0,0 +1,291 @@ +# Search Field + +Search fields are specialized text fields designed for searching. + +## Example + +```python +from deephaven import ui + + +my_search_field_basic = ui.search_field( + label="Description", on_change=lambda value: print(f"Search changed to {value}") +) +``` + +## Value + +A search field's value is empty by default, but the `default_value` prop can set an initial, uncontrolled value, or a controlled value can be set via the `value` prop. + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_value_examples(): + value, set_value = ui.use_state("Aardvark") + return [ + ui.search_field(label="Search (Uncontrolled)", default_value="Aardvark"), + ui.search_field(label="Search (controlled)", value=value, on_change=set_value), + ] + + +my_search_field_value_examples = ui_search_field_value_examples() +``` + +## HTML Forms + +Search fields can support a `name` prop for integration with HTML forms, allowing for easy identification of a value on form submission. + +```python +from deephaven import ui + + +my_search_field_name_example = ui.form( + ui.search_field(label="Email", name="email", type="email") +) +``` + +## Labeling + +To provide a visual label for the search field, use the `label` prop. To indicate that the search field is mandatory, use the `is_required` prop. + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_is_required_examples(): + return [ + ui.search_field(label="Search"), + ui.search_field(label="Search", is_required=True), + ] + + +my_search_field_is_required_example = ui_search_field_is_required_examples() +``` + +By setting `is_required` to True, the `necessity_indicator` is set to "icon" by default, but this can be changed. The `necessity_indicator` can also be used independently to indicate that the search field is optional. + +When the `necessity_indicator` prop is set to "label", a localized string will be generated for "(required)" or "(optional)" automatically. + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_necessity_indicator_examples(): + return [ + ui.search_field(label="Search", is_required=True, necessity_indicator="label"), + ui.search_field(label="Search", necessity_indicator="label"), + ] + + +my_search_field_necessity_indicator_examples = ( + ui_search_field_necessity_indicator_examples() +) +``` + +## Events + +The `on_change` property is triggered whenever the value in the search field is edited. + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_on_change(): + value, set_value = ui.use_state("") + return [ + ui.search_field(label="Your search", value=value, on_change=set_value), + ui.text(f"Search has been changed to: {value}"), + ] + + +my_search_field_on_change = ui_search_field_on_change() +``` + +The `on_submit` property is triggered whenever the value in the search field is edited. + +```python +from deephaven import ui + +my_search_field_on_submit = ui.search_field( + on_submit=lambda e: print(f"Submitted value: {e}") +) +``` + +The `on_clear` property is triggered whenever the value in the search field is edited. + +```python +from deephaven import ui + +my_search_field_on_clear = ui.search_field(on_clear=lambda: print("Input cleared")) +``` + +## Input Types + +The `type` prop changes the type of search field that is rendered to suit different input requirements. + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_input_types(): + return ui.form( + ui.search_field(label="Name", type="text", is_required=True), + ui.search_field(label="Personal Website", type="url", is_required=True), + ui.search_field(label="Phone", type="tel", is_required=True), + ui.search_field(label="Email", type="email", is_required=True), + ) + + +my_search_field_input_types = ui_search_field_input_types() +``` + +## Quiet State + +The `is_quiet` prop makes search fields "quiet". This can be useful when the text area and its corresponding styling should not distract users from surrounding content. + +```python +from deephaven import ui + + +my_search_field_is_quiet_example = ui.search_field(label="Animal", is_quiet=True) +``` + +## Disabled State + +The `is_disabled` prop disables search fields to prevent user interaction. This is useful when the search field should be visible but not available for input. + +```python +from deephaven import ui + + +my_search_field_is_quiet_example = ui.search_field(label="Animal", is_disabled=True) +``` + +## Read only + +The `is_read_only` prop makes search fields read-only to prevent user interaction. This is different than setting the `is_disabled` prop since the search field remains focusable, and the contents of the search field remain visible. + +```python +from deephaven import ui + + +my_search_field_is_quiet_example = ui.search_field( + label="Animal", default_value="Panda", is_read_only=True +) +``` + +## Label position + +By default, the position of a search field's label is above the search field, but it can be changed to the side using the `label_position` prop. + +While labels can be placed either on top or on the side of the search field, top labels are the default recommendation. Top labels work better with longer copy, localization, and responsive layouts. Side labels are more useful when vertical space is limited. + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_label_position_examples(): + return [ + ui.search_field(label="Sample Label"), + ui.search_field( + label="Sample Label", label_position="side", label_align="start" + ), + ] + + +my_search_field_label_position_examples = ui_search_field_label_position_examples() +``` + +## Help text + +A search field can have both a `description` and an `error_message`. The description remains visible at all times, except when the `validation_state` is set to "invalid" and an error message is present. Use the error message to offer specific guidance on how to correct the input. + + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_help_text_examples(): + return [ + ui.search_field( + label="Search", + default_value="Sushi", + validation_state="valid", + description="Enter a query", + ), + ui.search_field( + label="Search", + validation_state="invalid", + error_message="Empty input is not allowed.", + ), + ] + + +my_search_field_help_text_examples = ui_search_field_help_text_examples() +``` + +## Contextual Help + +Using the `contextual_help` prop, a `ui.contextual_help` can be placed next to the label to provide additional information about the search field. + + +```python +from deephaven import ui + + +my_search_field_contextual_help_example = ui.search_field( + label="Animal", + contextual_help=ui.contextual_help( + ui.heading("Information about animals"), + ui.content( + "Animals are classified into two main categories – the vertebrates and the invertebrates." + ), + ), +) +``` + +## Custom width + +The `width` prop adjusts the width of a search field, and the `max_width` prop enforces a maximum width. + + +```python +from deephaven import ui + + +@ui.component +def ui_search_field_width_examples(): + return [ + ui.search_field(label="Animal", width="size-3600"), + ui.search_field(label="Animal", width="size-3600", max_width="100%"), + ] + + +my_search_field_width_examples = ui_search_field_width_examples() +``` + +## Custom icon + +The `icon` prop changes the icon within the search field. This can quickly indicate to the user what the field is for. The complete list of icons can be found in [`icon`](./icon.md) + + +```python +from deephaven import ui + + +my_search_field_icon = ui.search_field(label="User", icon=ui.icon("account")) +``` + + +## API Reference +```{eval-rst} +.. dhautofunction:: deephaven.ui.search_field +``` From b82b2bc4dc6cc9200be8ebc6a272b4258cac4b0a Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Mon, 18 Nov 2024 09:44:56 -0500 Subject: [PATCH 4/7] sidebar doc --- plugins/ui/docs/sidebar.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index 366075be2..ababee5b7 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -117,6 +117,10 @@ "label": "range_slider", "path": "components/range_slider.md" }, + { + "label": "search_field", + "path": "components/search_field.md" + }, { "label": "slider", "path": "components/slider.md" From 1306e4640fcce5c86786799e8b2d059b11e2b9f0 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Wed, 20 Nov 2024 15:16:04 -0500 Subject: [PATCH 5/7] PR comments --- plugins/ui/docs/components/search_field.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/plugins/ui/docs/components/search_field.md b/plugins/ui/docs/components/search_field.md index e0451b646..7407528f6 100644 --- a/plugins/ui/docs/components/search_field.md +++ b/plugins/ui/docs/components/search_field.md @@ -42,7 +42,9 @@ from deephaven import ui my_search_field_name_example = ui.form( - ui.search_field(label="Email", name="email", type="email") + ui.search_field(label="Email", name="email", type="email"), + ui.button("Submit", type="submit"), + on_submit=print, ) ``` @@ -116,7 +118,7 @@ my_search_field_on_submit = ui.search_field( ) ``` -The `on_clear` property is triggered whenever the value in the search field is edited. +The `on_clear` property is triggered whenever the value in the search field is cleared. ```python from deephaven import ui @@ -234,7 +236,7 @@ my_search_field_help_text_examples = ui_search_field_help_text_examples() ## Contextual Help -Using the `contextual_help` prop, a `ui.contextual_help` can be placed next to the label to provide additional information about the search field. +The `contextual_help` prop places a `ui.contextual_help` next to the label to provide additional information about the search field. ```python From d605e83c3bbf12f1fadd5c9ef2cde57c256f860c Mon Sep 17 00:00:00 2001 From: ethanalvizo <55671206+ethanalvizo@users.noreply.github.com> Date: Thu, 21 Nov 2024 22:38:46 -0500 Subject: [PATCH 6/7] Grammar fixes Co-authored-by: margaretkennedy <82049573+margaretkennedy@users.noreply.github.com> --- plugins/ui/docs/components/search_field.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/ui/docs/components/search_field.md b/plugins/ui/docs/components/search_field.md index 7407528f6..6a375207d 100644 --- a/plugins/ui/docs/components/search_field.md +++ b/plugins/ui/docs/components/search_field.md @@ -67,9 +67,9 @@ def ui_search_field_is_required_examples(): my_search_field_is_required_example = ui_search_field_is_required_examples() ``` -By setting `is_required` to True, the `necessity_indicator` is set to "icon" by default, but this can be changed. The `necessity_indicator` can also be used independently to indicate that the search field is optional. +By setting `is_required` to True, the `necessity_indicator` is set to "icon" by default. This can be changed with the `necessity_indicator` prop, which can be used independently to indicate that the search field is optional. -When the `necessity_indicator` prop is set to "label", a localized string will be generated for "(required)" or "(optional)" automatically. +When `necessity_indicator` is set to "label," a localized string will be automatically generated for "(required)" or "(optional)." ```python from deephaven import ui @@ -276,7 +276,7 @@ my_search_field_width_examples = ui_search_field_width_examples() ## Custom icon -The `icon` prop changes the icon within the search field. This can quickly indicate to the user what the field is for. The complete list of icons can be found in [`icon`](./icon.md) +The `icon` prop changes the icon within the search field. This can quickly indicate to the user what the field is for. The complete list of icons can be found in [`icon`](./icon.md). ```python From 5833671510a6f1ad1ce24bd2ab3317d1c4b26013 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Fri, 22 Nov 2024 12:15:03 -0500 Subject: [PATCH 7/7] docs fix --- plugins/ui/docs/components/search_field.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui/docs/components/search_field.md b/plugins/ui/docs/components/search_field.md index 6a375207d..d024f51b1 100644 --- a/plugins/ui/docs/components/search_field.md +++ b/plugins/ui/docs/components/search_field.md @@ -108,7 +108,7 @@ def ui_search_field_on_change(): my_search_field_on_change = ui_search_field_on_change() ``` -The `on_submit` property is triggered whenever the value in the search field is edited. +The `on_submit` property is triggered whenever the value in the search field is submitted. ```python from deephaven import ui