playbook_ui 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12816

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/item.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,10 +1,4 @@
-<%= content_tag(:li,
-                aria: object.aria,
-                class: object.classname,
-                data: object.data,
-                id: object.id,
-                tabindex: object.tabindex,
-                **combined_html_options
-  ) do %>
+<%= pb_content_tag(:li,
+                   tabindex: object.tabindex) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,13 +1,7 @@
 <%= content_tag(:div, class: object.list_classname) do %>
-  <%= content_tag(:"#{object.ordered_class}",
-                  aria: object.aria,
-                  class: object.classname,
-                  data: object.data,
-                  id: object.id,
+  <%= pb_content_tag(:"#{object.ordered_class}",
                   role: object.role,
-                  tabindex: object.tabindex,
-                  **combined_html_options
-    ) do %>
+                  tabindex: object.tabindex) do %>
       <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -14,6 +14,7 @@ type LoadingInlineProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  text?: string,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -24,6 +25,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     data = {},
     htmlOptions = {},
     id,
+    text = ' Loading',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -50,7 +52,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
             icon="spinner"
             pulse
         />
-        {' Loading'}
+        {text}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("loading_inline", props: {
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "center",
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "right",
+    text: "Saving",
+}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineCustom = (props) => {
+  return (
+    <div>
+      <LoadingInline
+          text=' Saving'
+          {...props}
+      />
+      <LoadingInline
+          align="center"
+          text=' Saving'      
+          {...props}
+      />
+      <LoadingInline
+          align="right"
+          text=' Saving'
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineCustom

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb}

@@ -1,9 +1,9 @@
 <%= pb_rails("loading_inline") %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "center"
+    align: "center"
 }) %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "right"
+    align: "right"
 }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import LoadingInline from '../_loading_inline'
 
-const LoadingInlineLight = (props) => {
+const LoadingInlineDefault = (props) => {
   return (
     <div>
       <LoadingInline
@@ -20,4 +20,4 @@ const LoadingInlineLight = (props) => {
   )
 }
 
-export default LoadingInlineLight
+export default LoadingInlineDefault

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -1,9 +1,11 @@
 examples:
   
   rails:
-  - loading_inline_light: Light
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text
 
   
   
   react:
-  - loading_inline_light: Default
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js

@@ -1 +1,2 @@
-export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
+export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
+export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,10 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
-
+<%= pb_content_tag do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -7,6 +7,7 @@ module Playbook
                    values: %w[left center right],
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :text, type: Playbook::Props::String, default: "Loading"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js

@@ -39,3 +39,17 @@ test('should render aria-label', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
 })
+
+
+test('displays custom text content', () => {
+    render(
+        <LoadingInline
+            aria={{ label: testId }}
+            data={{ testid: testId }}
+            text=' Saving'
+        />
+    )
+  
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Saving')
+})

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  aria: object.aria,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
-      **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,16 +1,11 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= content_tag(object.tag,
-          aria: object.aria,
-          class: object.classname,
-          data: object.data,
+        <%= pb_content_tag(object.tag,
           dark: object.dark,
-          id: object.id,
           href: object.link && object.link,
           target: object.link && object.target,
-          **combined_html_options
-          ) do %>
+         ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
@@ -27,13 +22,7 @@
       <% end %>
     <% end %>
   <% else %>
-    <%= content_tag(object.tag,
-      aria: object.aria,
-      class: object.classname,
-      **combined_html_options,
-      data: object.data,
-      dark: object.dark,
-      id: object.id,
+    <%= pb_content_tag(object.tag,
       href: object.link && object.link,
       target: object.link && object.target
       ) do %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
   <% if object.title %>
     <%= content_tag(:div, class: "pb_nav_list_title") do %>
       <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria.merge!(label: object.status),
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    aria: object.aria.merge!(label: object.status)) do %>
 <% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1 +1 @@
-  <%= react_component('Passphrase', object.passphrase_options, class: object.classname, **combined_html_options) %>
+  <%= react_component('Passphrase', object.passphrase_options, class: object.classname) %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -1,13 +1,8 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
-      <%= pb_rails("body", props: {
-        tag: "span",
-        classname: "pb_person_first" }) { object.first_name } %>
-      <%= pb_rails("title", props: {
-        text: object.last_name,
-        size: 4 }) if object.last_name %>
+<%= pb_content_tag do %>
+  <%= pb_rails("body", props: {
+    tag: "span",
+    classname: "pb_person_first" }) { object.first_name } %>
+  <%= pb_rails("title", props: {
+    text: object.last_name,
+    size: 4 }) if object.last_name %>
 <% end %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-    aria: object.aria_attributes,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    aria: object.aria_attributes) do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("flex") do %>
+ <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Flex, ProgressSimple } from '../..'
+
+const ProgressSimpleFlex = () => {
+  return (
+    <Flex>
+      <ProgressSimple
+          align="left"
+          flex="1"
+          percent={68}
+      />
+    </Flex>
+  )
+}
+
+export default ProgressSimpleFlex

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md

@@ -0,0 +1 @@
+When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space

data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml

@@ -3,6 +3,7 @@ examples:
   rails:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted
@@ -12,6 +13,7 @@ examples:
   react:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted

data/app/pb_kits/playbook/pb_progress_simple/docs/index.js

@@ -2,6 +2,7 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
 export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
 export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
 export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
+export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
 export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
 export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
 

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,10 +1,7 @@
 <%= content_tag(:div, class: object.wrapper_classname) do %>
-  <%= content_tag(:div,
-  id: object.id,
-  data: object.data_values,
-  class: object.classname,
-  style: object.style,
-  **combined_html_options) do %>
+  <%= pb_content_tag(:div,
+    data: object.data_values,
+    style: object.style) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -48,7 +48,7 @@ module Playbook
       end
 
       def wrapper_classname
-        "pb_progress_simple_wrapper_#{align}"
+        generate_classname("pb_progress_simple_wrapper_#{align}")
       end
 
       def classname

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:ul,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:ul) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:li,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(:li) do %>
   <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
     <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -40,6 +40,23 @@
         border: 6px solid $primary;
       }
     }
+
+    &:disabled + .pb_radio_button {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 5%);
+      border-color: $border_light;
+
+      & ~ .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+    }
+
+    &:disabled:checked + .pb_radio_button{
+      cursor: not-allowed;
+      background-color: $white;
+      border: 6px solid $neutral;
+    }
   }
 
   &[class*=vertical] {
@@ -66,6 +83,24 @@
           border: 6px solid $primary;
         }
       }
+
+      &:disabled + .pb_radio_button {
+        cursor: not-allowed;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+      }
+
+      &:disabled:checked {
+        & ~ .pb_radio_button {
+          background-color: mix($charcoal, $white, 80%);
+          border: 6px solid $border_dark;
+        }
+      }
     }
 
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -14,6 +14,7 @@ type RadioProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -31,6 +32,7 @@ const Radio = ({
   className,
   dark = false,
   data = {},
+  disabled = false,
   error = false,
   htmlOptions = {},
   id,
@@ -56,6 +58,7 @@ const Radio = ({
     else
     return (
     <input
+        disabled={disabled}
         id={id}
         name={name}
         onChange={onChange}

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, Radio } from '../../'
 
-const RadioAlignment = () => {
+const RadioAlignment = (props) => {
   return (
     <Flex>
       <Radio
@@ -11,6 +11,7 @@ const RadioAlignment = () => {
           name="Group2"
           tabIndex={0}
           value="Power"
+          {...props}
       />
       <br />
       <Radio
@@ -20,6 +21,7 @@ const RadioAlignment = () => {
           marginRight="sm"
           name="Group2"
           value="Nitro"
+          {...props}
       />
       <br />
       <Radio
@@ -28,6 +30,7 @@ const RadioAlignment = () => {
           label="Google"
           name="Group2"
           value="Google"
+          {...props}
       />
     </Flex>
   )