From abbab7a4b46a3bf1faa53d2c9b96f8004e6db43e Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Mon, 23 Dec 2024 15:34:48 -0500 Subject: [PATCH 1/4] Add target prop --- .../playbook/pb_circle_icon_button/circle_icon_button.html.erb | 2 +- .../playbook/pb_circle_icon_button/circle_icon_button.rb | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb index 0707b59848..9f261a4ddc 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb @@ -1,5 +1,5 @@ <%= pb_content_tag do %> - <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %> + <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %> <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb index ce5a5e0f37..44d4676410 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb @@ -17,6 +17,7 @@ class CircleIconButton < Playbook::KitBase prop :link prop :new_window, type: Playbook::Props::Boolean, default: false + prop :target def classname generate_classname("pb_circle_icon_button_kit") end From 064d9c4b788068773fbd8e25f55d2022e6e3b384 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Mon, 23 Dec 2024 15:47:03 -0500 Subject: [PATCH 2/4] Add target prop for react --- .../playbook/pb_circle_icon_button/_circle_icon_button.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx b/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx index 38343f6535..5e0b4bd7f2 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx @@ -20,6 +20,7 @@ type CircleIconButtonProps = { onClick?: React.MouseEventHandler, newWindow?: boolean, type?: 'button' | 'submit' | 'reset' | undefined, + target?: string variant?: 'primary' | 'secondary' | 'link', } @@ -36,6 +37,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { loading = false, onClick = noop, type, + target, link, newWindow, variant, @@ -66,6 +68,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { loading={loading} newWindow={newWindow} onClick={onClick} + target={target} text={null} variant={variant} > From 679f4a05ffbd64d8873018c71a69e8472d76861b Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Thu, 26 Dec 2024 11:37:22 -0500 Subject: [PATCH 3/4] Add target to link doc example --- .../docs/_circle_icon_button_link.html.erb | 8 ++++++++ .../docs/_circle_icon_button_link.md | 1 + 2 files changed, 9 insertions(+) create mode 100644 playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb index 6c2b115bcd..81f46c88a6 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb @@ -10,3 +10,11 @@ link: "https://google.com", new_window: true }) %> +
+<%= pb_rails("circle_icon_button", props: { + icon: "info", + variant: "secondary", + aria: { label: "Link to Playbook in new window" }, + link: "https://playbook.powerapp.cloud/", + target: "child" +}) %> diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md new file mode 100644 index 0000000000..2a5b2fef41 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md @@ -0,0 +1 @@ +The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target. From 4252b18f6a464e92488c3e8721260ff464e02b2a Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Thu, 26 Dec 2024 12:54:03 -0500 Subject: [PATCH 4/4] Fix react doc example --- .../docs/_circle_icon_button_link.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx index 2d69907ea5..159b411511 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx @@ -21,6 +21,15 @@ const CircleIconButtonLink = (props) => ( {...props} /> +
+ + )