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 f940860f7d..38343f6535 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 @@ -16,6 +16,7 @@ type CircleIconButtonProps = { htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, id?: string, link?: string, + loading?: boolean, onClick?: React.MouseEventHandler, newWindow?: boolean, type?: 'button' | 'submit' | 'reset' | undefined, @@ -32,6 +33,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { htmlOptions = {}, icon, id, + loading = false, onClick = noop, type, link, @@ -61,6 +63,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => { disabled={disabled} htmlType={type} link={link} + loading={loading} newWindow={newWindow} onClick={onClick} text={null} 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 397809bb4d..0707b59848 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, 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, 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 4f512c4a9f..ce5a5e0f37 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 @@ -12,6 +12,8 @@ class CircleIconButton < Playbook::KitBase prop :disabled, type: Playbook::Props::Boolean, default: false prop :icon, required: true + prop :loading, type: Playbook::Props::Boolean, + default: false prop :link prop :new_window, type: Playbook::Props::Boolean, default: false diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js index 4c858d4f98..d67fb0c562 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js @@ -15,3 +15,18 @@ test('default test', () => { expect(kit).toHaveClass('pb_circle_icon_button_kit') }) + +test('passes loading prop to button', () => { + render( + + ) + + const kit = screen.getByTestId('loading-test') + const button = kit.querySelector('.pb_button_kit_primary_inline_enabled_loading') + + expect(button).toBeInTheDocument() +}) diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb new file mode 100644 index 0000000000..fd4a0bf492 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb @@ -0,0 +1,29 @@ +<%= pb_rails("circle_icon_button", props: { + variant: "primary", + icon: "plus", + loading: true +}) %> + +
+ +<%= pb_rails("circle_icon_button", props: { + variant: "secondary", + icon: "pen", + loading: true +}) %> + +
+ +<%= pb_rails("circle_icon_button", props: { + disabled: true, + icon: "times", + loading: true +}) %> + +
+ +<%= pb_rails("circle_icon_button", props: { + variant: "link", + icon: "user", + loading: true +}) %> diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx new file mode 100644 index 0000000000..22fb2234df --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx @@ -0,0 +1,43 @@ +import React from 'react' + +import CircleIconButton from '../_circle_icon_button' + +const CircleIconButtonLoading = (props) => ( +
+ + +
+ + + +
+ + + +
+ + +
+) + +export default CircleIconButtonLoading diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml index f0635bb749..7b0c29358e 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml @@ -3,8 +3,10 @@ examples: rails: - circle_icon_button_default: Default - circle_icon_button_link: Link + - circle_icon_button_loading: Loading react: - circle_icon_button_default: Default - circle_icon_button_click: Click Handler - circle_icon_button_link: Link + - circle_icon_button_loading: Loading diff --git a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js index bbe895987d..95c31412f7 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js @@ -1,3 +1,4 @@ export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx' export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx' export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx' +export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx' diff --git a/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb b/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb index c1d1dba3cc..4a56c4530e 100644 --- a/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb +++ b/playbook/spec/pb_kits/playbook/kits/circle_icon_button_spec.rb @@ -13,6 +13,7 @@ it { is_expected.to define_boolean_prop(:dark).with_default(false) } it { is_expected.to define_boolean_prop(:disabled).with_default(false) } it { is_expected.to define_prop(:icon).that_is_required } + it { is_expected.to define_boolean_prop(:loading).with_default(false) } it { is_expected.to define_boolean_prop(:new_window).with_default(false) } it { is_expected.to define_prop(:link) } describe "#classname" do