From f605365847cfeeea865eb9460fc882eede8252b1 Mon Sep 17 00:00:00 2001 From: guidozam Date: Wed, 1 May 2024 10:46:20 +0200 Subject: [PATCH 1/3] Added more customization to the IWidgetLink --- src/controls/dashboard/widget/IWidget.ts | 15 +++++++++++++++ src/controls/dashboard/widget/WidgetFooter.tsx | 6 +++--- .../controlsTest/components/ControlsTest.tsx | 10 ++++++++-- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/controls/dashboard/widget/IWidget.ts b/src/controls/dashboard/widget/IWidget.ts index 5023dd36c..a0e1c1c5d 100644 --- a/src/controls/dashboard/widget/IWidget.ts +++ b/src/controls/dashboard/widget/IWidget.ts @@ -96,5 +96,20 @@ export interface IWidgetBodyContent { * Widget link */ export interface IWidgetLink { + /** + * Link href + */ href: string; + /** + * The text to display for the link, if not provided, the default text will be used + */ + title?: string; + /** + * The color of the link, if not provided, the default color will be used + */ + color?: string; + /** + * The target for the generated anchor tag, if not provided, the default target will be _blank + */ + target?: "_blank" | "_self" | "_parent" | "_top" | "framename"; } diff --git a/src/controls/dashboard/widget/WidgetFooter.tsx b/src/controls/dashboard/widget/WidgetFooter.tsx index 6260b4172..ce85620a0 100644 --- a/src/controls/dashboard/widget/WidgetFooter.tsx +++ b/src/controls/dashboard/widget/WidgetFooter.tsx @@ -9,10 +9,10 @@ export const WidgetFooter = ({ widget }: { widget: IWidget }): JSX.Element => ( diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index f2c3dc4c5..c7fdd14ef 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -903,6 +903,12 @@ export default class ControlsTest extends React.Component Date: Wed, 1 May 2024 10:50:51 +0200 Subject: [PATCH 2/3] Updated docs --- docs/documentation/docs/controls/Dashboard.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md index 83b2b50b1..069090bd6 100644 --- a/docs/documentation/docs/controls/Dashboard.md +++ b/docs/documentation/docs/controls/Dashboard.md @@ -142,6 +142,9 @@ Provides Widget link properties | Property | Type | Required | Description | | ---- | ---- | ---- | ---- | | href | string | yes | Link to be opened. | +| title | string | no | The text to display for the link, if not provided, the default text will be used. | +| color | string | no | The color of the link, if not provided, the default brand color will be used. | +| target | string | no | The target property value for the generated anchor tag, if not provided, the default target will be *_blank*. | Enum `WidgetSize` From 5b511ed40600f741f0ac44371deeca9dafbd486f Mon Sep 17 00:00:00 2001 From: guidozam Date: Wed, 14 Aug 2024 08:56:27 +0200 Subject: [PATCH 3/3] Various updates to resolve GitHub conversations. --- docs/documentation/docs/controls/Dashboard.md | 10 ++++++++-- src/controls/dashboard/widget/IWidget.ts | 4 ++-- src/controls/dashboard/widget/WidgetFooter.tsx | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md index 069090bd6..eac26fdd5 100644 --- a/docs/documentation/docs/controls/Dashboard.md +++ b/docs/documentation/docs/controls/Dashboard.md @@ -22,6 +22,12 @@ import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard'; ```TypeScript const linkExample = { href: "#" }; +const customizedLinkExample = { + href: "#", + title: "This is a customized link!", + color: "red", + target: "_top" + }; const calloutItemsExample = [ { id: "action_1", @@ -71,7 +77,7 @@ const calloutItemsExample = [ { title: "Card 2", size: WidgetSize.Single, - link: linkExample, + link: customizedLinkExample, }, { title: "Card 3", @@ -143,7 +149,7 @@ Provides Widget link properties | ---- | ---- | ---- | ---- | | href | string | yes | Link to be opened. | | title | string | no | The text to display for the link, if not provided, the default text will be used. | -| color | string | no | The color of the link, if not provided, the default brand color will be used. | +| color | string | no | The color of the link, if not provided, the "default" color will be used. The available colors can be found on the [official Fluent UI documentation of the Text control](https://fluentsite.z22.web.core.windows.net/0.66.2/components/text/definition#variations-color). | | target | string | no | The target property value for the generated anchor tag, if not provided, the default target will be *_blank*. | Enum `WidgetSize` diff --git a/src/controls/dashboard/widget/IWidget.ts b/src/controls/dashboard/widget/IWidget.ts index a0e1c1c5d..b25d59e67 100644 --- a/src/controls/dashboard/widget/IWidget.ts +++ b/src/controls/dashboard/widget/IWidget.ts @@ -97,7 +97,7 @@ export interface IWidgetBodyContent { */ export interface IWidgetLink { /** - * Link href + * Link to be opened */ href: string; /** @@ -105,7 +105,7 @@ export interface IWidgetLink { */ title?: string; /** - * The color of the link, if not provided, the default color will be used + * The color of the link, if not provided, the "brand" color will be used. The available colors can be found on the [official Fluent UI documentation of the Text control](https://fluentsite.z22.web.core.windows.net/0.66.2/components/text/definition#variations-color) */ color?: string; /** diff --git a/src/controls/dashboard/widget/WidgetFooter.tsx b/src/controls/dashboard/widget/WidgetFooter.tsx index ce85620a0..6b210753d 100644 --- a/src/controls/dashboard/widget/WidgetFooter.tsx +++ b/src/controls/dashboard/widget/WidgetFooter.tsx @@ -12,7 +12,7 @@ export const WidgetFooter = ({ widget }: { widget: IWidget }): JSX.Element => ( target={widget.link.target ?? "_blank"} content={widget.link.title ?? strings.ViewMore} size="small" - color={widget.link.color ?? "brand"} + color={widget.link.color ?? "default"} style={{ textDecoration: "none" }} />