playbook_ui 11.10.0 → 11.11.0.pre.alpha.dialog2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0cae07073769e635a2939918a0073c3b64119f9ded3a1390688945395ecbd9df
-  data.tar.gz: 38d8898737006ea27c5bcf4c2b65734dd1df5ef004a351638dc00015ca6bcbaa
+  metadata.gz: 6aefa801028f30170ea5d693cc2062bb8898282475fcc32c5437ac6e23a7a9cb
+  data.tar.gz: 8460114464053ed808a1c32d8d11a0adb458bddf5e5c12e35c0bf1b5b5db4408
 SHA512:
-  metadata.gz: 787832d4132fb8a9373f06a684645f0945998476c5d5b2ab44718b0078eae552995cfe1d550a758a57f79d9a03267ffafee6882a5330fdf016d5c3a16f6a6ae2
-  data.tar.gz: a675526b2eec32a03c1f2409919a30deba79dfcd8bf3c06970c7153d35e4d37db4f665b0d66e05dc117e1937b2cbbb7a68b17b1e67f8555b7926c4c4c7cc7107
+  metadata.gz: 0e44b3ebdbe70354baf021f710b215b757ad39c179d3c7548909f51af6387f0a95adf4058c058afe4247e696d32a692a9b417f780992abfa3cbdb9433bcbaf54
+  data.tar.gz: 92fcfdd0bf79e370b8aabeb42a1ef3f52502d05bee52e8f7ecd62a5db02f3e555e491ce7a73e3e2704e68a73d7a42c58b6cc2abae308fdc77894bd39d1fdd91b

data/app/pb_kits/playbook/index.js

@@ -121,3 +121,4 @@ export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'
 export { default as PbTooltip } from './pb_tooltip'
 export { default as PbTypeahead } from './pb_typeahead'
+export { default as dialogHelper } from './pb_dialog/dialogHelper'

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -68,7 +68,7 @@
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
 
-	@include pb_card;
+	// @include pb_card;
 	background-color: $white;
 	box-shadow: $shadow_deepest;
 	border: 0;
@@ -167,4 +167,33 @@
 			} 
 		}
 	}
+
+	.dialog-button-class {
+		background-color: unset;
+		border: none;
+		cursor: pointer;
+	}
+	
+}
+
+.pb_dialog_wrapper_rails {
+	.pb_dialog_rails {
+		top: 0 !important;
+		padding: unset !important;
+		margin: auto;
+	
+	}
+	dialog::backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba($bg_dark, $opacity_4);
+		animation-name: overlayFade;
+		animation-duration: 0.2s;	
+	}
 }

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -0,0 +1,28 @@
+<div class="pb_dialog_wrapper_rails">
+    <%= content_tag(:dialog,
+        aria: object.aria,
+        data: object.data,
+        id: object.id,
+        class: object.classname) do %>
+            <% if object.title %>
+                <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
+            <% end %>
+            <% if object.text %>
+                <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
+            <% end %>
+            <% if object.cancel_button && object.confirm_button %>
+                <%= pb_rails("dialog/dialog_footer", props: {
+                    cancel_button: object.cancel_button, 
+                    confirm_button: object.confirm_button,
+                    id: object.id
+                }) %>
+            <% end %>
+            <%= content %>
+    <% end %>
+</div>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {      
+        dialogHelper()
+    })
+  <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -2,45 +2,17 @@
 
 module Playbook
   module PbDialog
-    class Dialog
-      include Playbook::Props
-
-      partial "pb_dialog/dialog"
-
-      prop :ref
-      prop :cancel_button
-      prop :closeable, type: Playbook::Props::Boolean, default: true
-      prop :confirm_button
-      prop :oncancel
-      prop :onchange
-      prop :onclose
-      prop :onconfirm
-      prop :opened, type: Playbook::Props::Boolean, default: false
+    class Dialog < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg content],
+                  values: %w[sm md lg xl status_size content],
                   default: "md"
-      prop :text
       prop :title
-      prop :trigger
+      prop :text
+      prop :confirm_button
+      prop :cancel_button
 
-      def dialog_options
-        {
-          id: id,
-          ref: ref,
-          trigger: trigger,
-          className: classname,
-          cancelButton: cancel_button,
-          closeable: closeable,
-          confirmButton: confirm_button,
-          onCancel: oncancel,
-          onChange: onchange,
-          onClose: onclose,
-          onConfirm: onconfirm,
-          opened: opened,
-          size: size,
-          text: text,
-          title: title,
-        }
+      def classname
+        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -0,0 +1,21 @@
+const dialogHelper = () => {
+  const openTrigger = document.querySelectorAll("[data-open-dialog]");
+  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+
+  openTrigger.forEach((open) => {
+    open.addEventListener("click", () => {
+      var openTriggerData = open.dataset.openDialog;
+      if (document.getElementById(openTriggerData).open) return;
+      document.getElementById(openTriggerData).showModal();
+    });
+  });
+
+  closeTrigger.forEach((close) => {
+    close.addEventListener("click", () => {
+      var closeTriggerData = close.dataset.closeDialog;
+      document.getElementById(closeTriggerData).close();
+    });
+  });
+};
+
+export default dialogHelper;

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria) do %>
+        <%= content.presence || object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDialog
+    class DialogBody < Playbook::KitBase
+      prop :text
+
+      def classname
+        generate_classname("dialog_body p_sm")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria) do %>
+    <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
+        <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
+            <%= object.confirm_button %>
+        <% end %>
+        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
+            <%= object.cancel_button %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDialog
+    class DialogFooter < Playbook::KitBase
+      prop :cancel_button
+      prop :confirm_button
+      prop :confirm_button_id
+      prop :cancel_button_id
+
+      def classname
+        generate_classname("dialog_footer")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria) do %>
+        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
+            <%= content.presence || object.title %>
+            
+            <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
+                <%= pb_rails("icon", props:{icon: "times"}) %>
+            </button>
+        <% end %>
+        <%= pb_rails("section_separator") %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -2,28 +2,11 @@
 
 module Playbook
   module PbDialog
-    class DialogHeader
-      include Playbook::Props
-
-      partial "pb_dialog/child_kits/dialog_header"
-
-      prop :closeable, type: Playbook::Props::Boolean, default: true
-      prop :padding
-      prop :separator, type: Playbook::Props::Boolean, default: true
-      prop :spacing
-      prop :text
+    class DialogHeader < Playbook::KitBase
       prop :title
 
-      def dialog_header_options
-        {
-          id: id,
-          closeable: closeable,
-          padding: padding,
-          separator: separator,
-          spacing: spacing,
-          text: text,
-          title: title,
-        }
+      def classname
+        generate_classname("dialog_header")
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
+
+<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
+        <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "This is a header", 
+    text: "This is a dialog.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-sm", 
+    size: "sm", 
+    title: "This is a header",
+    text: "I am a small dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+   }) %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-md", 
+    size: "md",
+    title: "This is a header",
+    text: "I am a medium dialog",
+    cancel_button: "Cancel", confirm_button: "Confirm", 
+     })  %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-lg", size: "lg",
+    title: "This is a header",
+    text: "I am a large dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm"
+     }) %>

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

@@ -1,6 +1,9 @@
 examples:
 
   rails:
+  - dialog_default: Simple
+  - dialog_compound_components: Complex
+  - dialog_sizes: Sizes
 
   react:
   - dialog_default: Simple

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -21,6 +20,7 @@ type UserProps = {
   name?: string,
   orientation?: "horiztonal" | "vertical",
   size?: "sm" | "md" | "lg",
+  subtitle?: string | Array<Node> | Node,
   territory?: string,
   title?: string,
 } & GlobalProps
@@ -38,6 +38,7 @@ const User = (props: UserProps) => {
     name,
     orientation = 'horizontal',
     size = 'sm',
+    subtitle,
     territory = '',
     title = '',
   } = props
@@ -81,6 +82,19 @@ const User = (props: UserProps) => {
         >
           {territory === '' ? title : `${territory} • ${title}`}
         </Body>
+        { typeof(subtitle) === 'string' &&
+          <Body
+              color="light"
+              dark={dark}
+              text={subtitle}
+              variant={null}
+          />
+        }
+        { typeof(subtitle) !== 'string' &&
+          <>
+            {subtitle}
+          </>
+        }
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb

@@ -0,0 +1,36 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) do %>
+    <%= pb_rails("flex", props: { align: "center" }) do %>
+      <%= pb_rails("icon", props: { icon: "users" }) %>
+      <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+  }) do %>
+    <%= pb_rails("contact", props: {
+      contact_type: "cell",
+      contact_value: "349-185-9988"
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_value: 5555555555
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md

@@ -0,0 +1 @@
+The kit accepts block content and whatever is passed as block content will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { Caption, Contact, Flex, Icon, User } from "../.."
+
+const MentorSubtitle = (
+  <Flex>
+    <Icon icon="users" />
+    <Caption
+        paddingLeft="xs"
+        text="Admin"
+    />
+  </Flex>
+)
+
+const ContactSubtitle = (
+  <>
+    <Contact
+        contactType="cell"
+        contactValue="349-185-9988"
+    />
+    <Contact
+        contactValue="5555555555"
+    />
+    <Contact
+        contactType="email"
+        contactValue="email@example.com"
+    />
+  </>
+)
+
+const UserBlockContentSubtitleReact = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={MentorSubtitle}
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={ContactSubtitle}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserBlockContentSubtitleReact

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md

@@ -0,0 +1 @@
+The `subtitle` prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb

@@ -0,0 +1,23 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "center",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "vertical",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { User } from "../../"
+
+const UserSubtitle = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="lg"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserSubtitle

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

@@ -6,9 +6,8 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
-
-
-
+  - user_subtitle: Subtitle
+  - user_block_content_subtitle_rails: Block Content Subtitle
 
   react:
   - user_default: Default
@@ -16,3 +15,5 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
+  - user_subtitle: Subtitle
+  - user_block_content_subtitle_react: Block Content Subtitle

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

@@ -3,3 +3,5 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
+export { default as UserSubtitle } from './_user_subtitle.jsx'
+export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -10,13 +10,21 @@
       image_url: object.avatar_url
     }) %>
   <% end %>
-  <%= content_tag(:div,
-      class: "content_wrapper") do %>
+  <%= content_tag(:div, class: "content_wrapper") do %>
     <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
       text: "#{object.details}",
       dark: object.dark,
       color: "light"
     }) %>
+    <% if content %>
+      <%= content.presence %>
+    <% else %>
+      <%= pb_rails("body", props: {
+        text: "#{object.subtitle}",
+        dark: object.dark,
+        color: "light"
+      }) %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -16,6 +16,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm],
                   default: "sm"
+      prop :subtitle
       prop :title
       prop :territory
 

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import User from './_user'
+import Caption from "../pb_caption/_caption"
+
+test('subtitle prop adds subtitle text', () => {
+  render(
+    <User
+        data={{ testid: 'test-subtitle' }}
+        subtitle='test subtitle'
+    />
+  )
+
+  expect(screen.getByTestId('test-subtitle')).toHaveTextContent('test subtitle')
+})
+
+test('subtitle prop accepts a node', () => {
+  const TestCaption = <Caption text='test caption' />
+
+  render(
+    <User
+        data={{ testid: 'test-subtitle-block' }}
+        subtitle={TestCaption}
+    />
+  )
+
+  expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
+})

data/app/pb_kits/playbook/playbook-rails.js

@@ -9,6 +9,10 @@ import './pb_form/pb_form_validation'
 import datePickerHelper from './pb_date_picker/date_picker_helper'
 window.datePickerHelper = datePickerHelper
 
+// Dialog
+import dialogHelper from './pb_dialog/dialogHelper'
+window.dialogHelper = dialogHelper
+
 // Lazy image loading
 import 'lazysizes'
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.9.0"
-  VERSION = "11.10.0"
+  PREVIOUS_VERSION = "11.11.0"
+  VERSION = "11.11.0.pre.alpha.dialog2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.10.0
+  version: 11.11.0.pre.alpha.dialog2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-25 00:00:00.000000000 Z
+date: 2022-11-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -808,18 +808,26 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
 - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
-- app/pb_kits/playbook/pb_dialog/_dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/_dialog.scss
 - app/pb_kits/playbook/pb_dialog/_dialog.tsx
 - app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
+- app/pb_kits/playbook/pb_dialog/dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog.rb
 - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
+- app/pb_kits/playbook/pb_dialog/dialogHelper.js
+- app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
+- app/pb_kits/playbook/pb_dialog/dialog_body.rb
+- app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
+- app/pb_kits/playbook/pb_dialog/dialog_footer.rb
+- app/pb_kits/playbook/pb_dialog/dialog_header.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog_header.rb
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
@@ -831,6 +839,7 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
@@ -2130,10 +2139,16 @@ files:
 - app/pb_kits/playbook/pb_user/_user.tsx
 - app/pb_kits/playbook/pb_user/docs/_description.md
 - app/pb_kits/playbook/pb_user/docs/_footer.md
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md
 - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_size.jsx
+- app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb
@@ -2144,6 +2159,7 @@ files:
 - app/pb_kits/playbook/pb_user/docs/index.js
 - app/pb_kits/playbook/pb_user/user.html.erb
 - app/pb_kits/playbook/pb_user/user.rb
+- app/pb_kits/playbook/pb_user/user.test.js
 - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
 - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
 - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg
@@ -2321,9 +2337,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb

@@ -1,10 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    dark: object.dark) do %>
-  <% if object.children %>
-    <%= pb_rails("dialog/dialog_header", props: { children: object.children }) %>
-  <% end %>
-<% end %>