feat: rework captions

- introduce new options to configure placeholder text and empty caption
- show placeholder when widget is not open and empty
- split emptySelectionCaption and emptyOptionCaption

Author: r0b1n

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss

@@ -281,7 +281,7 @@ $root: ".widget-dropdown-filter";
         width: initial;
     }
 
-    &:not(:focus-within) {
+    &:not(:focus-within):not([data-empty]) {
         #{$root}-input {
             opacity: 0;
             flex-shrink: 1;

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts

@@ -20,6 +20,8 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
     if (values.filterable) {
         hidePropertyIn(defaultProperties, values, "clearable");
         hidePropertyIn(defaultProperties, values, "emptyOptionCaption");
+    } else {
+        hidePropertyIn(defaultProperties, values, "filterInputPlaceholderCaption");
     }
 
     if (!showSelectedItemsStyle) {
@@ -54,7 +56,7 @@ export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMod
                             text({
                                 fontColor: palette.text.secondary,
                                 italic: true
-                            })(values.emptyOptionCaption || " ")
+                            })(values.emptySelectionCaption || " ")
                         ],
                         grow: 1
                     } as ContainerProps,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx

@@ -26,11 +26,7 @@ const noop = (): void => {};
 
 function getPreviewValue(props: DatagridDropdownFilterPreviewProps): string {
     let value = props.defaultValue;
-    if (!props.filterable) {
-        value ||= props.emptyOptionCaption || "Select";
-    } else {
-        value ||= "Search";
-    }
+    value ||= props.emptySelectionCaption || (props.filterable ? "Search" : "Select");
     return value;
 }
 

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx

@@ -16,7 +16,9 @@ function Container(props: DatagridDropdownFilterContainerProps & Select_FilterAP
         parentChannelName: props.parentChannelName,
         name: props.name,
         multiselect: props.multiSelect,
-        emptyCaption: props.emptyOptionCaption?.value,
+        emptySelectionCaption: props.emptySelectionCaption?.value ?? "",
+        emptyOptionCaption: props.emptyOptionCaption?.value ?? "",
+        placeholder: props.filterInputPlaceholderCaption?.value ?? "",
         defaultValue: props.defaultValue?.value,
         filterable: props.filterable,
         selectionMethod: props.selectionMethod,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml

@@ -83,13 +83,23 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
-        <propertyGroup caption="Accessibility">
+        <propertyGroup caption="Advanced">
             <propertyGroup caption="Accessibility">
                 <property key="ariaLabel" type="textTemplate" required="false">
                     <caption>Input caption</caption>
                     <description>Assistive technology will read this upon reaching the input element.</description>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Texts">
+                <property key="emptySelectionCaption" type="textTemplate" required="false">
+                    <caption>Empty selection caption</caption>
+                    <description>This text is shown if no options are selected. For example 'No options are selected' or 'Select color'.</description>
+                </property>
+                <property key="filterInputPlaceholderCaption" type="textTemplate" required="false">
+                    <caption>Filter input placeholder</caption>
+                    <description>This text is shown as placeholder for filterable filters. For example 'type to search'.</description>
+                </property>
+            </propertyGroup>
         </propertyGroup>
     </properties>
 </widget>

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx

@@ -18,7 +18,9 @@ export interface RefFilterContainerProps {
     ariaLabel?: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterStore: RefFilterStore;
     multiselect: boolean;
     name: string;
@@ -80,6 +82,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContaine
         <Combobox
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
+            emptyCaption={ctrl2.emptyCaption}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -109,6 +112,7 @@ const TagPickerWidget = observer(function TagPickerWidget(props: RefFilterContai
             onFocus={ctrl3.handleFocus}
             onMenuScroll={handleMenuScroll}
             inputPlaceholder={ctrl3.inputPlaceholder}
+            emptyCaption={ctrl3.emptyCaption}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/StaticFilterContainer.tsx

@@ -22,7 +22,9 @@ export interface StaticFilterContainerProps {
     ariaLabel?: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterOptions: FilterOptionsType[];
     filterStore: StaticSelectFilterStore;
     multiselect: boolean;
@@ -81,6 +83,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: StaticFilterConta
         <Combobox
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
+            emptyCaption={ctrl2.emptyCaption}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -106,6 +109,7 @@ const TagPickerWidget = observer(function TagPickerWidget(props: StaticFilterCon
             onClear={ctrl3.handleClear}
             onBlur={ctrl3.handleBlur}
             inputPlaceholder={ctrl3.inputPlaceholder}
+            emptyCaption={ctrl3.emptyCaption}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}

packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts

@@ -37,6 +37,8 @@ export interface DatagridDropdownFilterContainerProps {
     valueAttribute?: EditableValue<string>;
     onChange?: ActionValue;
     ariaLabel?: DynamicValue<string>;
+    emptySelectionCaption?: DynamicValue<string>;
+    filterInputPlaceholderCaption?: DynamicValue<string>;
 }
 
 export interface DatagridDropdownFilterPreviewProps {
@@ -62,4 +64,6 @@ export interface DatagridDropdownFilterPreviewProps {
     valueAttribute: string;
     onChange: {} | null;
     ariaLabel: string;
+    emptySelectionCaption: string;
+    filterInputPlaceholderCaption: string;
 }

packages/shared/widget-plugin-filtering/src/controllers/picker/PickerBaseController.ts

@@ -58,5 +58,6 @@ export interface PickerBaseControllerProps<S extends FilterStore> {
     multiselect: boolean;
     onChange?: ActionValue;
     valueAttribute?: EditableValue<string>;
-    emptyCaption?: string;
+    emptyOptionCaption?: string;
+    emptySelectionCaption?: string;
 }

packages/shared/widget-plugin-filtering/src/controllers/picker/RefBaseController.ts

@@ -35,6 +35,7 @@ export interface RefBaseControllerProps {
     multiselect: boolean;
     onChange?: ActionValue;
     valueAttribute?: EditableValue<string>;
-    emptyCaption?: string;
-    placeholder?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
 }