feat: rework captions

r0b1n · r0b1n · commit 18aa0913bc77 · 2025-07-02T13:55:07.000+02:00
- introduce new options to configure placeholder text and empty caption
- show placeholder when widget is not open and empty
- split emptySelectionCaption and emptyOptionCaption
diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss b/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;
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts
@@ -22,6 +22,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) {
@@ -71,7 +73,7 @@ export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMod
                             text({
                                 fontColor: palette.text.secondary,
                                 italic: true
-                            })(values.emptyOptionCaption || " ")
+                            })(values.emptySelectionCaption || " ")
                         ],
                         grow: 1
                     } as ContainerProps,
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx b/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;
 }
 
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml
@@ -142,13 +142,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>
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/AttrFilter.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/AttrFilter.tsx
@@ -27,7 +27,9 @@ function Connector(props: DatagridDropdownFilterContainerProps & EnumFilterProps
             ariaLabel={props.ariaLabel?.value}
             className={props.class}
             styles={props.style}
-            emptyCaption={props.emptyOptionCaption?.value}
+            emptyOptionCaption={props.emptyOptionCaption?.value ?? ""}
+            emptySelectionCaption={props.emptySelectionCaption?.value ?? ""}
+            placeholder={props.filterInputPlaceholderCaption?.value ?? ""}
             defaultValue={props.defaultValue?.value}
             parentChannelName={props.parentChannelName}
         />
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilter.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilter.tsx
@@ -13,7 +13,9 @@ function Connector(props: DatagridDropdownFilterContainerProps & RefFilterProps)
             ariaLabel={props.ariaLabel?.value}
             className={props.class}
             styles={props.style}
-            emptyCaption={props.emptyOptionCaption?.value}
+            emptyOptionCaption={props.emptyOptionCaption?.value ?? ""}
+            emptySelectionCaption={props.emptySelectionCaption?.value ?? ""}
+            placeholder={props.filterInputPlaceholderCaption?.value ?? ""}
             defaultValue={props.defaultValue?.value}
             parentChannelName={props.parentChannelName}
         />
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts b/packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts
@@ -48,6 +48,8 @@ export interface DatagridDropdownFilterContainerProps {
     valueAttribute?: EditableValue<string>;
     onChange?: ActionValue;
     ariaLabel?: DynamicValue<string>;
+    emptySelectionCaption?: DynamicValue<string>;
+    filterInputPlaceholderCaption?: DynamicValue<string>;
 }
 
 export interface DatagridDropdownFilterPreviewProps {
@@ -80,4 +82,6 @@ export interface DatagridDropdownFilterPreviewProps {
     valueAttribute: string;
     onChange: {} | null;
     ariaLabel: string;
+    emptySelectionCaption: string;
+    filterInputPlaceholderCaption: string;
 }
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/containers/EnumFilterContainer.tsx b/packages/shared/widget-plugin-dropdown-filter/src/containers/EnumFilterContainer.tsx
@@ -21,7 +21,9 @@ export interface EnumFilterContainerProps {
     ariaLabel?: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterOptions: FilterOptionsType[];
     filterStore: EnumFilterStore;
     multiselect: boolean;
@@ -82,6 +84,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: EnumFilterContain
         <Combobox
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
+            emptyCaption={ctrl2.emptyCaption}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -108,6 +111,7 @@ const TagPickerWidget = observer(function TagPickerWidget(props: EnumFilterConta
             onClear={ctrl3.handleClear}
             onBlur={ctrl3.handleBlur}
             inputPlaceholder={ctrl3.inputPlaceholder}
+            emptyCaption={ctrl3.emptyCaption}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/containers/RefFilterContainer.tsx b/packages/shared/widget-plugin-dropdown-filter/src/containers/RefFilterContainer.tsx
@@ -22,7 +22,9 @@ export interface RefFilterContainerProps {
     ariaLabel?: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterStore: RefFilterStore;
     multiselect: boolean;
     name: string;
@@ -86,6 +88,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}
@@ -116,6 +119,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}
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumBaseController.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumBaseController.ts
@@ -53,8 +53,9 @@ export interface EnumBaseControllerProps {
     multiselect: boolean;
     onChange?: ActionValue;
     valueAttribute?: EditableValue<string>;
-    emptyCaption?: string;
-    placeholder?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
 }
 
 export interface CustomOption<T> {
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumSelectController.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/EnumSelectController.ts
@@ -5,7 +5,7 @@ import { SelectControllerMixin } from "./mixins/SelectControllerMixin";
 export class EnumSelectController extends SelectControllerMixin(EnumBaseController) {
     constructor({ gate }: { gate: DerivedPropsGate<EnumBaseControllerProps> }) {
         super({ gate, multiselect: gate.props.multiselect });
-        this.emptyOption.caption = gate.props.emptyCaption || "None";
-        this.placeholder = gate.props.emptyCaption || "Select";
+        this.emptyOption.caption = gate.props.emptyOptionCaption;
+        this.emptyCaption = gate.props.emptySelectionCaption;
     }
 }
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefBaseController.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefBaseController.ts
@@ -28,6 +28,7 @@ export interface RefBaseControllerProps {
     multiselect: boolean;
     onChange?: ActionValue;
     valueAttribute?: EditableValue<string>;
-    emptyCaption?: string;
-    placeholder?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
 }
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefComboboxController.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefComboboxController.ts
@@ -5,7 +5,8 @@ import { RefBaseController, RefBaseControllerProps } from "./RefBaseController";
 export class RefComboboxController extends ComboboxControllerMixin(RefBaseController) {
     constructor({ gate }: { gate: DerivedPropsGate<RefBaseControllerProps> }) {
         super({ gate, multiselect: false });
-        this.inputPlaceholder = gate.props.placeholder ?? "Search";
+        this.inputPlaceholder = gate.props.placeholder;
+        this.emptyCaption = gate.props.emptySelectionCaption;
     }
 
     handleFocus = (event: React.FocusEvent<HTMLInputElement>): void => {
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefSelectController.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefSelectController.ts
@@ -5,8 +5,8 @@ import { SelectControllerMixin } from "./mixins/SelectControllerMixin";
 export class RefSelectController extends SelectControllerMixin(RefBaseController) {
     constructor({ gate }: { gate: DerivedPropsGate<RefBaseControllerProps> }) {
         super({ gate, multiselect: gate.props.multiselect });
-        this.emptyOption.caption = gate.props.emptyCaption || "None";
-        this.placeholder = gate.props.placeholder || "Search";
+        this.emptyOption.caption = gate.props.emptyOptionCaption;
+        this.emptyCaption = gate.props.emptySelectionCaption;
     }
 
     handleFocus = (): void => {
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefTagPickerController.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/RefTagPickerController.ts
@@ -16,7 +16,8 @@ export class RefTagPickerController extends TagPickerControllerMixin(RefBaseCont
 
     constructor({ gate }: { gate: DerivedPropsGate<Props> }) {
         super({ gate, multiselect: gate.props.multiselect });
-        this.inputPlaceholder = gate.props.placeholder ?? "Search";
+        this.inputPlaceholder = gate.props.placeholder;
+        this.emptyCaption = gate.props.emptySelectionCaption;
         this.filterSelectedOptions = gate.props.selectionMethod === "rowClick";
         this.selectedStyle = gate.props.selectedItemsStyle;
         this.selectionMethod = this.selectedStyle === "boxes" ? gate.props.selectionMethod : "checkbox";
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/ComboboxControllerMixin.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/ComboboxControllerMixin.ts
@@ -26,6 +26,7 @@ export function ComboboxControllerMixin<TBase extends BaseController>(Base: TBas
         touched = false;
         inputValue = "";
         inputPlaceholder = "";
+        emptyCaption = "";
 
         constructor(...args: any[]) {
             super(...args);
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/SelectControllerMixin.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/SelectControllerMixin.ts
@@ -22,11 +22,11 @@ const none = "[[__none__]]" as const;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function SelectControllerMixin<TBase extends BaseController>(Base: TBase) {
     return class SelectControllerMixin extends Base {
-        placeholder = "Select";
+        emptyCaption = "";
 
         readonly emptyOption = {
             value: none,
-            caption: "None",
+            caption: "",
             selected: false
         };
 
@@ -55,7 +55,7 @@ export function SelectControllerMixin<TBase extends BaseController>(Base: TBase)
             const selected = this.filterStore.selectedOptions;
 
             if (selected.length < 1) {
-                return this.placeholder;
+                return this.emptyCaption;
             }
 
             return selected.map(option => option.caption).join(", ");
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/TagPickerControllerMixin.ts b/packages/shared/widget-plugin-dropdown-filter/src/controllers/mixins/TagPickerControllerMixin.ts
@@ -27,6 +27,7 @@ export function TagPickerControllerMixin<TBase extends BaseController>(Base: TBa
         touched = false;
         inputValue = "";
         inputPlaceholder = "";
+        emptyCaption = "";
         filterSelectedOptions = false;
 
         constructor(...args: any[]) {
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controls/base/OptionsWrapper.tsx b/packages/shared/widget-plugin-dropdown-filter/src/controls/base/OptionsWrapper.tsx
@@ -61,7 +61,7 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
                                         />
                                     </span>
                                 )}
-                                {item.caption}
+                                {item.caption || "\u00A0"}
                             </li>
                         ))}
                 </ul>
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx b/packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx
@@ -11,6 +11,7 @@ import { Arrow, classes } from "../picker-primitives";
 interface ComboboxProps {
     options: OptionWithState[];
     inputPlaceholder: string;
+    emptyCaption: string;
     empty: boolean;
     className?: string;
     style?: React.CSSProperties;
@@ -46,7 +47,7 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
                     ref: inputRef,
                     onBlur: props.onBlur,
                     onFocus: props.onFocus,
-                    placeholder: props.inputPlaceholder
+                    placeholder: props.empty ? (isOpen ? props.inputPlaceholder : props.emptyCaption) : undefined
                 })}
             />
             <ClearButton cls={cls} onClick={props.onClear} visible={!props.empty} />
diff --git a/packages/shared/widget-plugin-dropdown-filter/src/controls/tag-picker/TagPicker.tsx b/packages/shared/widget-plugin-dropdown-filter/src/controls/tag-picker/TagPicker.tsx
@@ -13,6 +13,7 @@ interface TagPickerProps {
     options: OptionWithState[];
     empty: boolean;
     inputPlaceholder: string;
+    emptyCaption: string;
     showCheckboxes: boolean;
     selectedStyle?: "boxes" | "text";
     ariaLabel?: string;
@@ -101,7 +102,7 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                         "aria-label": inputLabel,
                         onBlur: props.onBlur,
                         onFocus: props.onFocus,
-                        placeholder: props.empty ? props.inputPlaceholder : undefined,
+                        placeholder: props.empty ? (isOpen ? props.inputPlaceholder : props.emptyCaption) : undefined,
                         ...getDropdownProps(),
                         "aria-describedby": props.empty ? undefined : `${helperText1} ${inputContainerId}`
                     })}

Original file line number	Diff line number	Diff line change
`@@ -281,7 +281,7 @@ $root: ".widget-dropdown-filter";`
`281`	`281`	`width: initial;`
`282`	`282`	`}`
`283`	`283`
`284`		`- &:not(:focus-within) {`
	`284`	`+ &:not(:focus-within):not([data-empty]) {`
`285`	`285`	`#{$root}-input {`
`286`	`286`	`opacity: 0;`
`287`	`287`	`flex-shrink: 1;`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,8 @@ export interface DatagridDropdownFilterContainerProps {`
`48`	`48`	`valueAttribute?: EditableValue<string>;`
`49`	`49`	`onChange?: ActionValue;`
`50`	`50`	`ariaLabel?: DynamicValue<string>;`
	`51`	`+ emptySelectionCaption?: DynamicValue<string>;`
	`52`	`+ filterInputPlaceholderCaption?: DynamicValue<string>;`
`51`	`53`	`}`
`52`	`54`
`53`	`55`	`export interface DatagridDropdownFilterPreviewProps {`
`@@ -80,4 +82,6 @@ export interface DatagridDropdownFilterPreviewProps {`
`80`	`82`	`valueAttribute: string;`
`81`	`83`	`onChange: {} \| null;`
`82`	`84`	`ariaLabel: string;`
	`85`	`+ emptySelectionCaption: string;`
	`86`	`+ filterInputPlaceholderCaption: string;`
`83`	`87`	`}`