Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IWidgetLink improvements #1813

Merged
merged 3 commits into from
Aug 16, 2024
Merged

IWidgetLink improvements #1813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f605365
Added more customization to the IWidgetLink
GuidoZam May 1, 2024
f3c126a
Updated docs
GuidoZam May 1, 2024
5b511ed
Various updates to resolve GitHub conversations.
GuidoZam Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion docs/documentation/docs/controls/Dashboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -71,7 +77,7 @@ const calloutItemsExample = [
{
title: "Card 2",
size: WidgetSize.Single,
link: linkExample,
link: customizedLinkExample,
},
{
title: "Card 3",
Expand Down Expand Up @@ -142,6 +148,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" 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). |
michaelmaillot marked this conversation as resolved.
Show resolved Hide resolved
| target | string | no | The target property value for the generated anchor tag, if not provided, the default target will be *_blank*. |

Enum `WidgetSize`

Expand Down
15 changes: 15 additions & 0 deletions src/controls/dashboard/widget/IWidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,5 +96,20 @@ export interface IWidgetBodyContent {
* Widget link
*/
export interface IWidgetLink {
/**
* Link to be opened
*/
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 "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;
/**
* The target for the generated anchor tag, if not provided, the default target will be _blank
*/
target?: "_blank" | "_self" | "_parent" | "_top" | "framename";
}
6 changes: 3 additions & 3 deletions src/controls/dashboard/widget/WidgetFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ export const WidgetFooter = ({ widget }: { widget: IWidget }): JSX.Element => (
<Text
as="a"
href={widget.link.href}
target="_blank"
content={strings.ViewMore}
target={widget.link.target ?? "_blank"}
content={widget.link.title ?? strings.ViewMore}
size="small"
color="brand"
color={widget.link.color ?? "default"}
style={{ textDecoration: "none" }}
/>
</Flex>
Expand Down
10 changes: 8 additions & 2 deletions src/webparts/controlsTest/components/ControlsTest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -903,6 +903,12 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
}];

const linkExample = { href: "#" };
const customizedLinkExample = {
GuidoZam marked this conversation as resolved.
Show resolved Hide resolved
href: "#",
title: "This is a customized link!",
color: "red",
target: "_top"
};
const calloutItemsExample = [
{
id: "action_1",
Expand Down Expand Up @@ -2034,7 +2040,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
{
title: "Card 2",
size: WidgetSize.Single,
link: linkExample,
link: customizedLinkExample,
michaelmaillot marked this conversation as resolved.
Show resolved Hide resolved
},
{
title: "Card 3",
Expand All @@ -2044,7 +2050,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
{
title: "Card 4",
size: WidgetSize.Single,
link: linkExample,
link: customizedLinkExample,
},
{
title: "Card 5",
Expand Down