playbook_ui_docs 14.24.0.pre.alpha.PLAY2360circleiconbuttonvariantdatabug9404 → 14.24.0.pre.alpha.PLAY2360circleiconbuttonvariantdatabug9438

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 849594f566f20e8e6c42f1b31d12c24e650aa872e1d9cb34ac3ee7f2e5650dad
-  data.tar.gz: 3852cade550c4888e99e49d8ededd7d737bf31e460b00368fc7abe4865d77b5c
+  metadata.gz: 8da6c8a9ce496ce47e50b9525264dcf9fad25020b1de10367c29d708a91506fc
+  data.tar.gz: 68c986eee1c356185ef13530c739bee3005fd82f6f6278f006956e47d4e40908
 SHA512:
-  metadata.gz: 8dc49b5d7ab27a319f21ff2cabcdd3bb89673c60583b4e74d7903bab73abc7a7ae6429bd71c3a461f7e73ab6f110b7ee0b351bcb15c1935690f99acb29a810cd
-  data.tar.gz: 9329b21f7cecfa342fce7fbef7ed225365c1f3fe79dead6b668036b265b6363cb4aa3cdb373e1a6cb88a582a228edff1e08631d58d9fc1ad918256ab3a570fd4
+  metadata.gz: 32b752849377518427de29f679659d72c236fc7b0d10bc66d4da47e8a0705c9886690e0d402e42931a51bc2917a58077dffdb2eb6c09eea909b86a7ec2a7b536
+  data.tar.gz: a1c29f8c74b06cc3edfc758499ab6f9b2118d051a843f04b03d198612d3c379c139e91632dc4ccb8385831fb032d79433e28ae6265a004df5dbed4d6ca4448a4

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

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>

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

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeadersVerticalBorder = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+  
+  const tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeadersVerticalBorder

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

@@ -13,6 +13,7 @@ examples:
   - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -53,6 +54,7 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows

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

@@ -21,6 +21,7 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("circle_icon_button", props: {
+  icon: "plus",
+  input_options: {
+    data: { "test-id": "add-button", remote: true },
+  }
+}) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "pen",
+  variant: "secondary",
+  input_options: {
+    data: { "test-id": "edit-button" },
+    classname: "custom-secondary-button-class"
+  }
+}) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "user",
+  variant: "link",
+  input_options: {
+    data: { "test-id": "user-button" },
+    id: "user-button-id"
+  }
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md

@@ -0,0 +1,3 @@
+Use the `input_options` prop to pass additional attributes directly to the internal Playbook Button component. While the wrapper div has access to the standard `data` prop from KitBase, `input_options` allows you to attach attributes specifically to the internal button element.
+
+This is particularly useful when you need data attributes or other HTML attributes to apply to the button itself.

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

@@ -5,6 +5,7 @@ examples:
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
   - circle_icon_button_size: Size
+  - circle_icon_button_input_options: Input Options
   
   react:
   - circle_icon_button_default: Default

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import FormattedDate from '../../pb_date/_date'
+
+const DateWithShowCurrentYear = (props) => {
+  return (
+    <>
+      <FormattedDate
+          showCurrentYear
+          value={new Date()}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DateWithShowCurrentYear

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -5,12 +5,14 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,3 +2,4 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
+export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'