playbook_ui 14.3.0.pre.rc.1 → 14.3.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f6db1dde8cbc0520b9232aac926dd45d49152d977a5105fd717019d42e7c18a
-  data.tar.gz: 8d6a83da07074cea753a6367f0968edb5fbcdd62a3af1aec19c6b3d76257fd40
+  metadata.gz: 2b8f218ff050120771497a2c502a28af02702f8ba87b194e7b43899d7eb00472
+  data.tar.gz: 284ee3a3a30e173178e2dc63054999e314e8c34e4236374bff7765eb7a646998
 SHA512:
-  metadata.gz: 6a433022a63e782208530b3b831f6d6eddfada78103e5a645ff22b663fa138b5766bb61b29592374d795fb3d1b417ccba408c10f4e110eb45f690631e335c30c
-  data.tar.gz: 815301f27a81d6d1ec02b038db7d601cce656c07118b6a67f88502583630be3db987f0bbe75ecadb5bbdbfc97896d1d74b6566bb7848c8dd1f25e00611d0cca3
+  metadata.gz: 4fe44ccd3f6e1dd4904bdc2f01c9278954b087df9cbb9dc0e00d327058714dd762a55704c69d7d05334b618d10de5d3ca2e1b9573e90c08b66e4ca5ba2be4a2d
+  data.tar.gz: 1a717712508fe05d5b592db4be130880c9e52afe14e4b60af147a40b8546d41b08ae5926e37325ef740a10a681624eca1ceb58f2a2d8896a39a129310b90f723

data/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<HTMLElement>,
   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}

data/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 %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -12,6 +12,8 @@ module Playbook
       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

data/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(
+    <CircleIconButton
+        data={{ testid: 'loading-test' }}
+        icon="plus"
+        loading
+    />
+  )
+
+  const kit = screen.getByTestId('loading-test')
+  const button = kit.querySelector('.pb_button_kit_primary_inline_enabled_loading')
+  
+  expect(button).toBeInTheDocument()
+})

data/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
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "secondary",
+  icon: "pen",
+  loading: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  disabled: true,
+  icon: "times",
+  loading: true
+}) %>
+
+<br/>
+
+<%= pb_rails("circle_icon_button", props: {
+  variant: "link",
+  icon: "user",
+  loading: true
+}) %>

data/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) => (
+  <div>
+    <CircleIconButton
+        icon="plus"
+        loading
+        variant="primary"
+        {...props}
+    />
+
+    <br />
+
+    <CircleIconButton
+        icon="pen"
+        loading
+        variant="secondary"
+        {...props}
+    />
+
+    <br />
+
+    <CircleIconButton
+        disabled
+        icon="times"
+        loading
+        {...props}
+    />
+
+    <br />
+
+    <CircleIconButton
+        icon="user"
+        loading
+        variant="link"
+        {...props}
+    />
+  </div>
+)
+
+export default CircleIconButtonLoading

data/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

data/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'