playbook_ui_docs 15.7.0.pre.rc.1 → 15.7.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36ac9ddb221a32d5d396218a4ce18b98ceef1df64122da0078bc35a88064e3e2
-  data.tar.gz: ce783ac3ec36544323cffc819496775abf6ac9bca48d6b69d69c3ba78442982f
+  metadata.gz: 39318022ac52187d638e009ef528f900f31188ef406833afb88319beaa4ee9db
+  data.tar.gz: 98272e6d84b4e73e5dbcc8c9eded97fbd6aa0dd7f3a34a69d79f61a1bccace24
 SHA512:
-  metadata.gz: e8c19d8f3a0e03a0bf0b55d5b0fc42f092c90654e74edec664ddaacf1424738d7548b938debdca61406e35031f10286dbaf94cd6c666e3be83606ca2bc2ba6cb
-  data.tar.gz: 86ae085b474dc80a95abf7f8fe4183d3304bbd07864694c7b891b63c2845aa643be026f8555c5feca17c0ef0217c6636949fcddbe8885d50645b25560bbeac3b
+  metadata.gz: ff7f84555817e8624527737bf9b4a2dfdb6b9a408d610d1f2f3c09d159434f7e212ce1994dd7589b4f95f4162f1fe9d6a5b1bda06e26aab3a85415f4a770a159
+  data.tar.gz: 854dedd7ce2a2afb5945fb01b7e032924c3a7b15a16ef68dc667833a2b63c914d4769eb8c739cecfc8553b9b57e6f5f6b7efa205c07c38c2707f85700d62b1bd

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb

@@ -0,0 +1,43 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling: { 
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+      }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.md

@@ -0,0 +1 @@
+`column_styling` can also be used to control the background color on individual cells in a given column as shown here. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -8,16 +8,26 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+        cell_background_color: "error_subtle",
+        header_background_color: "error_subtle"
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
+      column_styling: { 
+        cell_background_color: "info_subtle",
+      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
+      column_styling: { 
+        cell_background_color: "info",
+        header_background_color: "info",
+        header_font_color: "white",
+        font_color: "white"
+      }
     },
     {
       accessor: "completedClasses",
@@ -26,10 +36,6 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      column_styling: { 
-        cell_background_color: "category_1",
-        font_color: "white"
-      }
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md

@@ -1 +1,7 @@
-`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.
+`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
+
+1)  `cell_background_color`:  use this to control the background color of all cells in the given column
+2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
+3) `header_background_color`: use this to control the background color of the column header
+4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
+

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+
+const AdvancedTableColumnStylingBackground = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{cellBackgroundColor: colors.info_subtle},
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStylingBackground

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md

@@ -0,0 +1,9 @@
+The `columnStyling` prop can also be used to set background color for entire columns.As stated above, `columnStyling` is an object that has several optional key/value pairs, here are the options highlighted in this doc:
+
+1) `cellBackgroundColor`: use this to control the background color of all cells in the given column
+2) `headerBackgroundColor`: use this to control the background color of the column header
+3) `fontColor`: use this to control font color for all cells in the given column if needed, for example if using a darker background color.
+4) `headerFontColor`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
+
+
+

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx

@@ -0,0 +1,80 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+
+const AdvancedTableColumnStylingBackgroundMulti = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+              columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+              columnStyling:{cellBackgroundColor: colors.info_subtle},
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStylingBackgroundMulti

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md

@@ -0,0 +1,3 @@
+The `columnStyling` prop can also be used to set background color for entire columns for the multi header variant as well. 
+
+It should be noted that `headerFontColor` and `headerBackgroundColor` in the multi header variant will only apply to the immediate header for the given column as shown here.

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

@@ -26,7 +26,8 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Background Control using Column Styling
+  - advanced_table_background_control_rails: Column Styling Background Color
+  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -75,6 +76,8 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_column_styling_background: Column Styling Background Color
+  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

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

@@ -45,4 +45,6 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("body", props: { color: "default" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_value: "2125551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+
+<%= pb_rails("body", props: { color: "light" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_value: "12125551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+
+<%= pb_rails("body", props: { color: "lighter" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_value: "4155551234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+
+<%= pb_rails("body", props: { color: "default" }) do %>
+  <%= pb_rails("contact", props: { 
+        contact_type: "extension",
+        contact_value: "1234",
+        icon_enabled: false,
+        unstyled: true
+  }) %>
+<% end %>
+

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import Contact from "../../pb_contact/_contact"
+import Body from "../../pb_body/_body"
+
+const ContactUnstyled = (props) => {
+  return (
+    <div>
+      <Body color="default">
+        <Contact
+            contactValue="2125551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="light">
+        <Contact
+            contactValue="12125551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="lighter">
+        <Contact
+            contactValue="4155551234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+      <Body color="default">
+        <Contact
+            contactType="extension"
+            contactValue="1234"
+            iconEnabled={false}
+            unstyled
+            {...props}
+        />
+      </Body>
+    </div>
+  )
+}
+
+export default ContactUnstyled
+

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md

@@ -0,0 +1,2 @@
+Use the Contact kit with `icon_enabled: false` and `unstyled: true` to display phone numbers with full typography control. When `unstyled: true`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
+

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md

@@ -0,0 +1,2 @@
+Use the Contact kit with `iconEnabled={false}` and `unstyled` to display phone numbers with full typography control. With `unstyled`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
+

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

@@ -3,11 +3,13 @@ examples:
   rails:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
 
 
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
 
 
   swift:

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

@@ -1,2 +1,3 @@
 export { default as ContactDefault } from './_contact_default.jsx'
 export { default as ContactWithDetail } from './_contact_with_detail.jsx'
+export { default as ContactUnstyled } from './_contact_unstyled.jsx'

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

@@ -0,0 +1,24 @@
+<%= pb_rails("flex", props:{wrap:true}) do %>
+<%= pb_rails("button", props: { text: "Open Simple Dialog", data: {"open-dialog": "dialog-simple"}, margin_right:"md" }) %>
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data: {"open-dialog": "dialog-complex2"} }) %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-simple", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    closeable: false,
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-simple"
+}) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-complex2", 
+    size: "sm"
+}) do %>
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex2", title:"Header Title inside Dialog Header", closeable: false } ) %>
+    <%= pb_rails("dialog/dialog_body", props:{text: "Hello Body Text, Nice to meet ya."}) %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel Button", confirm_button: "Okay", confirm_button_id:"confirm-complex2", id: "dialog-complex2"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+
+
+const DialogCloseable = () => {
+  // Simple example 
+  const [isOpenSimple, setIsOpenSimple] = useState(false)
+  const closeSimple = () => setIsOpenSimple(false)
+  const openSimple = () => setIsOpenSimple(true)
+
+    // Complex example
+  const [isOpenComplex, setIsOpenComplex] = useState(false)
+  const closeComplex = () => setIsOpenComplex(false)
+  const openComplex = () => setIsOpenComplex(true)
+
+  return (
+    <>
+      <Button 
+          marginRight='md'
+          onClick={openSimple}
+      >
+        {'Open Simple Dialog'}
+      </Button>
+      <Button onClick={openComplex}>{'Open Complex Dialog'}</Button>
+
+      <Dialog
+          cancelButton="Cancel Button"
+          closeable={false}
+          confirmButton="Okay"
+          onCancel={closeSimple}
+          onClose={closeSimple}
+          onConfirm={closeSimple}
+          opened={isOpenSimple}
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
+          title="Header Title is the Title Prop"
+      />
+      <Dialog
+          onClose={closeComplex}
+          opened={isOpenComplex}
+          size="sm"
+      >
+        <Dialog.Header closeable={false}>{'Header Title inside Dialog.Header'}</Dialog.Header>
+        <Dialog.Body>{'Hello Body Text, Nice to meet ya.'}</Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={closeComplex}>{'Okay'}</Button>
+          <Button
+              onClick={closeComplex}
+              variant="link"
+          >
+            {'Cancel Button'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+
+export default DialogCloseable

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md

@@ -0,0 +1,3 @@
+The `closeable` prop can be set to false to optionally render the Dialog header without the close “X” button. `closeable` is set to true by default. 
+
+This prop can be used with the simple as well as the complex version of the Dialog as can be seen here.

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

@@ -12,6 +12,7 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
+  - dialog_closeable: Close Button in Header
 
 
   react:
@@ -25,6 +26,7 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_closeable: Close Button in Header
 
   swift:
   - dialog_default_swift: Simple

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

@@ -8,4 +8,5 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
-export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogCloseable } from './_dialog_closeable.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.7.0.pre.rc.1
+  version: 15.7.0.pre.rc.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-11 00:00:00.000000000 Z
+date: 2025-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -33,6 +33,8 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
@@ -60,6 +62,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb
@@ -528,6 +534,10 @@ files:
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md
+- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb
+- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx
+- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md
+- app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md
@@ -787,6 +797,9 @@ files:
 - app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
 - app/pb_kits/playbook/pb_detail/docs/example.yml
 - app/pb_kits/playbook/pb_detail/docs/index.js
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md
 - 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