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} > 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 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.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} /> +
+ + ) 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.