@ichicraft/widgets-widget-base 1.9.1 → 1.9.2

package/README.md

@@ -9,6 +9,14 @@ All notable changes to this project will be documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.9.2 - 2024-03-21
+
+-   Added `CommandBarIcon` interface, to allow rendering a `CustomCommandBarItem` as a single icon or an icon button.
+-   Added `CommandBarLink` interface, to allow rendering a `CustomCommandBarItem` as a clickable link.
+-   Added `CommandBarItemBase` interface, to act as a base for different types of `CustomCommandBarItem`.
+-   Added `elementBorderRadius` property to the `WidgetContext` interface, to allow styling widgets according to the configured design preferences.
+-   Changed `CustomCommandBarItemProps` type to accept either a `CommandBarIcon` or a `CommandBarLink`.
+
 ## 1.9.1 - 2023-10-20
 
 -   Added `WidgetInstanceContext` interface, to allow typing the `instance` property of the `WidgetContext` interface.

package/lib/types/index.d.ts

@@ -127,6 +127,10 @@ export interface WidgetContext {
          */
         isCurrent?: boolean;
     }[];
+    /**
+     * Preferred border radius of UI elements as configured in Widget Board configuration
+     */
+    elementBorderRadius: number;
     /**
      * MS Graph Client Factory class as provided by the WebPartContext object.
      */
@@ -550,49 +554,86 @@ export declare enum CustomCommandBarItemSeverity {
     Warning = 1
 }
 /**
- * Properties to pass to the generateCommandBarItem function, resulting in the
- * rendering of a command bar item, which could either be a single Icon or an Icon Button
+ * Tells how to render the command bar item, e.g. as an icon button or as a link.
+ */
+export declare enum CommandBarItemType {
+    /** Normal severity, displays just like all the other command bar items */
+    Icon = "icon",
+    /** Warning severity, displays the item with a more noticable warning color */
+    Link = "link"
+}
+/**
+ * Properties to pass to the registerCommandBarItems function, resulting in the
+ * rendering of a command bar item.
+ */
+export declare type CustomCommandBarItemProps = CommandBarIcon | CommandBarLink;
+/**
+ * Base properties of a custom CommandBarItem.
  */
-export interface CustomCommandBarItemProps {
+export interface CommandBarItemBase {
     /**
      * Optional identifier for the icon.
      */
     id?: string;
     /**
-     * Name of the icon, as specified and available in Fluent UI Iconography:
-     * https://developer.microsoft.com/en-us/fluentui#/styles/web/icons
+     * Type of item, (e.g. 'icon' or 'link')
      */
-    iconName: string;
+    itemType: CommandBarItemType;
     /**
-     * Optional content to show as a tooltip above the item
+     * Optional content to show as a tooltip above the item.
      */
     tooltipContent?: string;
     /**
-     * Optionally tells the tooltip to be shown automatically
+     * Optionally tells the tooltip to be shown automatically.
      */
     showTooltipAutomatically?: boolean;
     /**
-     * Optional severity to specify how the item should render
+     * Optionally tells the Widget Header that this item should always be visible, even when not hovering.
      */
-    severity?: CustomCommandBarItemSeverity;
+    pinned?: boolean;
+}
+/**
+ * Properties to render a custom CommandBarItem either as a single Icon or an Icon Button.
+ */
+export interface CommandBarIcon extends CommandBarItemBase {
+    itemType: CommandBarItemType.Icon;
     /**
-     * Optionally tells the Widget Header that this icon should always be visible, even when not hovering
+     * Name of the icon, as specified and available in Fluent UI Iconography:
+     * https://developer.microsoft.com/en-us/fluentui#/styles/web/icons
      */
-    pinned?: boolean;
+    iconName: string;
     /**
      * Optionally display a red notification icon badge in the top-right corner of the button.
      */
     showNotificationBadge?: boolean;
+    /**
+     * Optional severity to specify how the item should render
+     */
+    severity?: CustomCommandBarItemSeverity;
     /**
      * Optionally provide an order in which this button should appear, when registering multiple custom buttons.
      */
     order?: number;
     /**
      * Optional onClick event, which is triggered on user click and makes the command
-     * bar item render as a button instead of a non-clickable icon
+     * bar item render as a button instead of a non-clickable icon.
      */
     onClick?: () => void;
 }
+/**
+ * Properties to render a custom CommandBarItem as a Link Button.
+ */
+export interface CommandBarLink extends CommandBarItemBase {
+    itemType: CommandBarItemType.Link;
+    /**
+     * Required label to display the clickable link.
+     */
+    label: string;
+    /**
+     * Required onClick event, which is triggered on user click.
+     */
+    onClick: () => void;
+}
 /**
  * Options to pass to the openIFrameDialog function. Use this to configure how the dialog is rendered, and to handle events (e.g. onDismissed)
  */

package/lib/types/index.js

@@ -30,3 +30,13 @@ var CustomCommandBarItemSeverity;
     /** Warning severity, displays the item with a more noticable warning color */
     CustomCommandBarItemSeverity[CustomCommandBarItemSeverity["Warning"] = 1] = "Warning";
 })(CustomCommandBarItemSeverity = exports.CustomCommandBarItemSeverity || (exports.CustomCommandBarItemSeverity = {}));
+/**
+ * Tells how to render the command bar item, e.g. as an icon button or as a link.
+ */
+var CommandBarItemType;
+(function (CommandBarItemType) {
+    /** Normal severity, displays just like all the other command bar items */
+    CommandBarItemType["Icon"] = "icon";
+    /** Warning severity, displays the item with a more noticable warning color */
+    CommandBarItemType["Link"] = "link";
+})(CommandBarItemType = exports.CommandBarItemType || (exports.CommandBarItemType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ichicraft/widgets-widget-base",
-    "version": "1.9.1",
+    "version": "1.9.2",
     "description": "Part of the Widget Development Kit for building widgets for Ichicraft Boards",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",