playbook_ui 14.3.0.pre.rc.0 → 14.3.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4daa4bafdd35c3b83a98323eaa16e7edca9e4bb963f961663a5f2edeca3f7814
-  data.tar.gz: 36ea0641461016941eaced65696528dd29ec39976de03491359742ee34e0f29e
+  metadata.gz: f47148e7be42c7c8683dd6ba7b555e7d9f4461b285cbe9687888f3c4a79ed9f1
+  data.tar.gz: 88585a241ac13801752029b6c1d28eabd3fded78b711a4c749602d51e0286900
 SHA512:
-  metadata.gz: d37e0a7b3fc4d054b5ebebbbbe4f26d3866760ccbbffc771eebd6159e3dc87400b109195814c1a3144b82e682fec154166f69f167ef20d842eedab09c6967df8
-  data.tar.gz: 0e89c8c1158d343ff42e84c1a16f1c7093d220d0f126dd48d1226d6b869900e7d5f7f6c3e7b4b60e04524d9bf25847a34e61fea9b1150a4f2e07619105f5c8a4
+  metadata.gz: db96992d3c93a7b446613954d26fb36c1488eabbd9d47cead53950a3751053e05d473f495a23360cc34b580edb53f6c401c57492b7ad59e93fed4fab37155472
+  data.tar.gz: '0843c1e25291a8b97bab9bb61f7415f708cfa0b82e2cd93933fe0aeee9133c740d2c740821c20eca3b27182c44047aff843c02e108020805ce90489b78d70470'

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'

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -60,6 +60,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__flag {
+    background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
     border-radius: 1px;
   }
 
@@ -196,4 +197,10 @@ $flag-min-resolution: 192dpi;
       }
     }
   }
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
+    .iti__flag {
+      background-image: url("https://unpkg.com/playbook-ui@14.2.0-alpha.fixphonenumberinputflag3631/dist/assets/flags.png");
+    }
+  }
 }