feat(calendar-web): custom button tooltip and styling per toolbar item

Author: rahmanunver

packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts

@@ -48,6 +48,9 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
     }
 
     values.toolbarItems?.forEach((item, index) => {
+        if (item.itemType === "title") {
+            hideNestedPropertiesIn(defaultProperties, values, "toolbarItems", index, ["buttonTooltip", "buttonStyle"]);
+        }
         // Hide all format properties for non-view items (navigation buttons, title)
         if (!["day", "month", "agenda", "week", "work_week"].includes(item.itemType)) {
             hideNestedPropertiesIn(defaultProperties, values, "toolbarItems", index, [

packages/pluggableWidgets/calendar-web/src/Calendar.xml

@@ -170,11 +170,6 @@
                             <category>Appearance</category>
                             <description>Optional text for the button or title. If empty, a default localized label is used.</description>
                         </property>
-                        <property key="tooltip" type="textTemplate" required="false">
-                            <caption>Tooltip</caption>
-                            <category>Appearance</category>
-                            <description>Optional hover text for the button.</description>
-                        </property>
                         <property key="renderMode" type="enumeration" defaultValue="button">
                             <caption>Render mode</caption>
                             <category>Appearance</category>
@@ -184,6 +179,24 @@
                                 <enumerationValue key="link">Link</enumerationValue>
                             </enumerationValues>
                         </property>
+                        <property key="buttonTooltip" type="textTemplate" required="false">
+                            <caption>Button tooltip</caption>
+                            <category>Appearance</category>
+                            <description>Tooltip for the button.</description>
+                        </property>
+                        <property key="buttonStyle" type="enumeration" defaultValue="default">
+                            <caption>Button style</caption>
+                            <category>Appearance</category>
+                            <description>Style of the button.</description>
+                            <enumerationValues>
+                                <enumerationValue key="default">Default</enumerationValue>
+                                <enumerationValue key="primary">Primary</enumerationValue>
+                                <enumerationValue key="success">Success</enumerationValue>
+                                <enumerationValue key="info">Info</enumerationValue>
+                                <enumerationValue key="warning">Warning</enumerationValue>
+                                <enumerationValue key="danger">Danger</enumerationValue>
+                            </enumerationValues>
+                        </property>
                         <property key="customViewHeaderDayFormat" type="textTemplate" required="false">
                             <caption>Header day format</caption>
                             <category>Custom formats</category>

packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx

@@ -51,7 +51,6 @@ export type ResolvedToolbarItem = {
     itemType: "previous" | "today" | "next" | "title" | "month" | "week" | "work_week" | "day" | "agenda";
     position: "left" | "center" | "right";
     caption?: string;
-    tooltip?: string;
     renderMode: "button" | "link";
     // Custom formatting/text options for Custom view
     customViewHeaderDayFormat?: string;
@@ -62,6 +61,9 @@ export type ResolvedToolbarItem = {
     customViewTextHeaderDate?: string;
     customViewTextHeaderTime?: string;
     customViewTextHeaderEvent?: string;
+    // Custom button presentation
+    customButtonTooltip?: string;
+    customButtonStyle?: "default" | "primary" | "success" | "info" | "warning" | "danger";
 };
 
 export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props: ToolbarProps) => ReactElement {
@@ -72,18 +74,28 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
             onClick: () => void,
             active = false,
             renderMode: "button" | "link" = "button",
-            tooltip?: string
+            tooltip?: string,
+            styleClass?: string
         ): ReactElement => (
             <Button
                 key={key}
-                className={classNames("btn", renderMode === "link" ? "btn-link" : "btn-default", { active })}
+                className={classNames("btn", styleClass ?? (renderMode === "link" ? "btn-link" : "btn-default"), {
+                    active
+                })}
                 onClick={onClick}
                 title={tooltip}
             >
                 {content}
             </Button>
         );
 
+        const resolveStyleClass = (item: ResolvedToolbarItem): string => {
+            if (item.renderMode === "link") {
+                return "btn-link";
+            }
+            return `btn-${item.customButtonStyle ?? "default"}`;
+        };
+
         const groups: Record<"left" | "center" | "right", ResolvedToolbarItem[]> = {
             left: [],
             center: [],
@@ -102,7 +114,8 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
                         () => onNavigate(Navigate.PREVIOUS),
                         false,
                         item.renderMode,
-                        item.tooltip
+                        item.customButtonTooltip,
+                        resolveStyleClass(item)
                     );
                 case "today":
                     // Always provide a default caption for 'today' button
@@ -112,7 +125,8 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
                         () => onNavigate(Navigate.TODAY),
                         false,
                         item.renderMode,
-                        item.tooltip
+                        item.customButtonTooltip,
+                        resolveStyleClass(item)
                     );
                 case "next":
                     return renderButton(
@@ -121,12 +135,13 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
                         () => onNavigate(Navigate.NEXT),
                         false,
                         item.renderMode,
-                        item.tooltip
+                        item.customButtonTooltip,
+                        resolveStyleClass(item)
                     );
                 case "title":
                     // Title always shows the formatted label, regardless of caption
                     return (
-                        <span key="title" className="calendar-label" title={item.tooltip}>
+                        <span key="title" className="calendar-label" title={item.customButtonTooltip}>
                             {label}
                         </span>
                     );
@@ -144,7 +159,8 @@ export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props:
                         () => onView(name),
                         view === name,
                         item.renderMode,
-                        item.tooltip
+                        item.customButtonTooltip,
+                        resolveStyleClass(item)
                     );
                 }
                 default:

packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts

@@ -313,8 +313,9 @@ export class CalendarPropsBuilder {
             itemType: i.itemType,
             position: i.position,
             caption: i.caption?.value,
-            tooltip: i.tooltip?.value,
             renderMode: i.renderMode,
+            customButtonTooltip: i.buttonTooltip?.value,
+            customButtonStyle: i.buttonStyle,
             customViewHeaderDayFormat: i.customViewHeaderDayFormat?.value,
             customViewCellDateFormat: i.customViewCellDateFormat?.value,
             customViewGutterTimeFormat: i.customViewGutterTimeFormat?.value,

packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts

@@ -20,12 +20,15 @@ export type PositionEnum = "left" | "center" | "right";
 
 export type RenderModeEnum = "button" | "link";
 
+export type ButtonStyleEnum = "default" | "primary" | "success" | "info" | "warning" | "danger";
+
 export interface ToolbarItemsType {
     itemType: ItemTypeEnum;
     position: PositionEnum;
     caption?: DynamicValue<string>;
-    tooltip?: DynamicValue<string>;
     renderMode: RenderModeEnum;
+    buttonTooltip?: DynamicValue<string>;
+    buttonStyle: ButtonStyleEnum;
     customViewHeaderDayFormat?: DynamicValue<string>;
     customViewCellDateFormat?: DynamicValue<string>;
     customViewGutterTimeFormat?: DynamicValue<string>;
@@ -50,8 +53,9 @@ export interface ToolbarItemsPreviewType {
     itemType: ItemTypeEnum;
     position: PositionEnum;
     caption: string;
-    tooltip: string;
     renderMode: RenderModeEnum;
+    buttonTooltip: string;
+    buttonStyle: ButtonStyleEnum;
     customViewHeaderDayFormat: string;
     customViewCellDateFormat: string;
     customViewGutterTimeFormat: string;