playbook_ui 16.6.0.pre.alpha.PLAY2923updateviewcomponentsdep16128 → 16.6.0.pre.alpha.PLAY2927squareicons15991

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a3cb727572169956c63fbc33eab1ca1228a72fe9fe42f75ab60fdb062850707
-  data.tar.gz: 87d7ce98ae019e7fd5c9df8700a6605d97d54ba0b0835e5dac7530d898c670b3
+  metadata.gz: 92b56a0ef7f60bd56ddc1eb30758013dd9cc676479d907176395b2d73e668191
+  data.tar.gz: 2a1e67ad3bfc36adf61187c09c8bedea8118b7237aec9f345867617d6e1e2b6d
 SHA512:
-  metadata.gz: 5a3db26741f0b527b59a569e2c3d73d8728d9432b0dcc01665603d8db0d0137684ff74fe598dc5be46f90e71a178107dbf1e6a68107c4e1df0a34c67c0100d19
-  data.tar.gz: c26be091fe4fb33ccc4b0005d81d8eb72aaff3fb4481fa6481430f5ba4d41cfcdf7d3a96531e4b5f6a2393ba8572a5f778c4d669c914d6c4630af1f56bfba51f
+  metadata.gz: 907276831a6bf4d98eabf5f7004f05e385dce8f3aac36cac0218a9a4bd06749669ca859bd1aab4712c3dd7a85f05fc897f6316208c5d48f3a2ae2dd1a4a4ee41
+  data.tar.gz: 18fa54ca88e50d89b0b6cb2ef9f39ec3a058b4cfcc97755f1bdcf8b31d1a97ed7dabd1799a77d35cd17e8097be4ffd09677cbdf25fe3c1cbcf574139d0c8ac33

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

@@ -9,21 +9,7 @@ import ListItem from "../../pb_list/_list_item"
 import PbReactPopover from "../../pb_popover/_popover"
 import SectionSeparator from "../../pb_section_separator/_section_separator"
 import StarRating from "../../pb_star_rating/_star_rating"
-
-const COMPOSITION_MOCK_DATA = [
-  { id: "1", year: "2015", newEnrollments: "12", scheduledMeetings: "40", attendanceRate: "62%", classCompletionRate: "28%" },
-  { id: "2", year: "2016", newEnrollments: "88", scheduledMeetings: "12", attendanceRate: "71%", classCompletionRate: "55%" },
-  { id: "3", year: "2017", newEnrollments: "34", scheduledMeetings: "67", attendanceRate: "58%", classCompletionRate: "41%" },
-  { id: "4", year: "2018", newEnrollments: "05", scheduledMeetings: "91", attendanceRate: "44%", classCompletionRate: "73%" },
-  { id: "5", year: "2019", newEnrollments: "61", scheduledMeetings: "19", attendanceRate: "83%", classCompletionRate: "36%" },
-  { id: "6", year: "2020", newEnrollments: "19", scheduledMeetings: "54", attendanceRate: "67%", classCompletionRate: "62%" },
-  { id: "7", year: "2021", newEnrollments: "73", scheduledMeetings: "08", attendanceRate: "52%", classCompletionRate: "49%" },
-  { id: "8", year: "2022", newEnrollments: "50", scheduledMeetings: "50", attendanceRate: "75%", classCompletionRate: "45%" },
-  { id: "9", year: "2023", newEnrollments: "95", scheduledMeetings: "03", attendanceRate: "69%", classCompletionRate: "81%" },
-  { id: "10", year: "2024", newEnrollments: "27", scheduledMeetings: "76", attendanceRate: "91%", classCompletionRate: "22%" },
-  { id: "11", year: "2025", newEnrollments: "41", scheduledMeetings: "33", attendanceRate: "48%", classCompletionRate: "94%" },
-  { id: "12", year: "2026", newEnrollments: "66", scheduledMeetings: "66", attendanceRate: "55%", classCompletionRate: "58%" },
-]
+import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
 
 const LEAF_COUNT = "newEnrollments"
 const LEAF_SCHEDULED = "scheduledMeetings"

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

@@ -1,6 +1,6 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
-import INFINITE_SCROLL_MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {
   const columnDefinitions = [
@@ -39,7 +39,7 @@ const AdvancedTableInfiniteScroll = (props) => {
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
-          tableData={INFINITE_SCROLL_MOCK_DATA}
+          tableData={MOCK_DATA}
           virtualizedRows
           {...props}
       />

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

@@ -1,8 +1,8 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import Caption from '../../pb_caption/_caption'
-import MOCK_DATA_INLINE_LOADING from "./advanced_table_mock_data_inline_loading.json"
-import MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN from "./advanced_table_mock_data_inline_loading_empty_children.json"
+import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
+import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
-import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -43,7 +43,7 @@ const AdvancedTableRowPinning = (props) => {
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
           pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
-          tableData={MOCK_DATA_WITH_ID}
+          tableData={MOCK_DATA}
           tableProps={{sticky: true}}
           {...props}
       >

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

@@ -0,0 +1,200 @@
+export const MOCK_DATA_INLINE_LOADING = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      year: "2022",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "25",
+      scheduledMeetings: "17",
+      attendanceRate: "75%",
+      completedClasses: "5",
+      classCompletionRate: "45%",
+      graduatedStudents: "32",
+      children: [
+        {
+          year: "2022",
+          quarter: "Q1",
+          month: null,
+          day: null,
+          newEnrollments: "2",
+          scheduledMeetings: "35",
+          attendanceRate: "32%",
+          completedClasses: "15",
+          classCompletionRate: "52%",
+          graduatedStudents: "36",
+          children: [
+            {
+              year: "2022",
+              quarter: "Q1",
+              month: "January",
+              day: null,
+              newEnrollments: "16",
+              scheduledMeetings: "20",
+              attendanceRate: "11%",
+              completedClasses: "13",
+              classCompletionRate: "47%",
+              graduatedStudents: "28",
+              children: [
+                {
+                  year: "2022",
+                  quarter: "Q1",
+                  month: "January",
+                  day: "15",
+                  newEnrollments: "34",
+                  scheduledMeetings: "28",
+                  attendanceRate: "97%",
+                  completedClasses: "20",
+                  classCompletionRate: "15%",
+                  graduatedStudents: "17",
+                },
+                {
+                  year: "2022",
+                  quarter: "Q1",
+                  month: "January",
+                  day: "25",
+                  newEnrollments: "43",
+                  scheduledMeetings: "23",
+                  attendanceRate: "66%",
+                  completedClasses: "26",
+                  classCompletionRate: "47%",
+                  graduatedStudents: "9",
+                },
+              ],
+            },
+            {
+              year: "2022",
+              quarter: "Q1",
+              month: "May",
+              day: null,
+              newEnrollments: "20",
+              scheduledMeetings: "41",
+              attendanceRate: "95%",
+              completedClasses: "26",
+              classCompletionRate: "83%",
+              graduatedStudents: "43",
+              children: [
+                {
+                  year: "2011",
+                  quarter: "Q1",
+                  month: "May",
+                  day: "2",
+                  newEnrollments: "19",
+                  scheduledMeetings: "35",
+                  attendanceRate: "69%",
+                  completedClasses: "8",
+                  classCompletionRate: "75%",
+                  graduatedStudents: "23",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [
+        {
+          year: "2023",
+          quarter: "Q1",
+          month: null,
+          day: null,
+          newEnrollments: "2",
+          scheduledMeetings: "35",
+          attendanceRate: "32%",
+          completedClasses: "15",
+          classCompletionRate: "52%",
+          graduatedStudents: "36",
+          children: [
+            {
+              year: "2023",
+              quarter: "Q1",
+              month: "March",
+              day: null,
+              newEnrollments: "16",
+              scheduledMeetings: "20",
+              attendanceRate: "11%",
+              completedClasses: "13",
+              classCompletionRate: "47%",
+              graduatedStudents: "28",
+              children: [
+                {
+                  year: "2023",
+                  quarter: "Q1",
+                  month: "March",
+                  day: "10",
+                  newEnrollments: "34",
+                  scheduledMeetings: "28",
+                  attendanceRate: "97%",
+                  completedClasses: "20",
+                  classCompletionRate: "15%",
+                  graduatedStudents: "17",
+                },
+                {
+                  year: "2023",
+                  quarter: "Q1",
+                  month: "March",
+                  day: "11",
+                  newEnrollments: "43",
+                  scheduledMeetings: "23",
+                  attendanceRate: "66%",
+                  completedClasses: "26",
+                  classCompletionRate: "47%",
+                  graduatedStudents: "9",
+                },
+              ],
+            },
+            {
+              year: "2023",
+              quarter: "Q1",
+              month: "April",
+              day: null,
+              newEnrollments: "20",
+              scheduledMeetings: "41",
+              attendanceRate: "95%",
+              completedClasses: "26",
+              classCompletionRate: "83%",
+              graduatedStudents: "43",
+              children: [
+                {
+                  year: "2023",
+                  quarter: "Q1",
+                  month: "April",
+                  day: "15",
+                  newEnrollments: "19",
+                  scheduledMeetings: "35",
+                  attendanceRate: "69%",
+                  completedClasses: "8",
+                  classCompletionRate: "75%",
+                  graduatedStudents: "23",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ]
+  

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

@@ -0,0 +1,42 @@
+export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      year: "2022",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "25",
+      scheduledMeetings: "17",
+      attendanceRate: "75%",
+      completedClasses: "5",
+      classCompletionRate: "45%",
+      graduatedStudents: "32",
+      children: [],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [],
+    },
+  ]
+  

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_grouped_headers_composition_mock_data.json

@@ -0,0 +1,98 @@
+[
+  {
+    "id": "1",
+    "year": "2015",
+    "newEnrollments": "12",
+    "scheduledMeetings": "40",
+    "attendanceRate": "62%",
+    "classCompletionRate": "28%"
+  },
+  {
+    "id": "2",
+    "year": "2016",
+    "newEnrollments": "88",
+    "scheduledMeetings": "12",
+    "attendanceRate": "71%",
+    "classCompletionRate": "55%"
+  },
+  {
+    "id": "3",
+    "year": "2017",
+    "newEnrollments": "34",
+    "scheduledMeetings": "67",
+    "attendanceRate": "58%",
+    "classCompletionRate": "41%"
+  },
+  {
+    "id": "4",
+    "year": "2018",
+    "newEnrollments": "05",
+    "scheduledMeetings": "91",
+    "attendanceRate": "44%",
+    "classCompletionRate": "73%"
+  },
+  {
+    "id": "5",
+    "year": "2019",
+    "newEnrollments": "61",
+    "scheduledMeetings": "19",
+    "attendanceRate": "83%",
+    "classCompletionRate": "36%"
+  },
+  {
+    "id": "6",
+    "year": "2020",
+    "newEnrollments": "19",
+    "scheduledMeetings": "54",
+    "attendanceRate": "67%",
+    "classCompletionRate": "62%"
+  },
+  {
+    "id": "7",
+    "year": "2021",
+    "newEnrollments": "73",
+    "scheduledMeetings": "08",
+    "attendanceRate": "52%",
+    "classCompletionRate": "49%"
+  },
+  {
+    "id": "8",
+    "year": "2022",
+    "newEnrollments": "50",
+    "scheduledMeetings": "50",
+    "attendanceRate": "75%",
+    "classCompletionRate": "45%"
+  },
+  {
+    "id": "9",
+    "year": "2023",
+    "newEnrollments": "95",
+    "scheduledMeetings": "03",
+    "attendanceRate": "69%",
+    "classCompletionRate": "81%"
+  },
+  {
+    "id": "10",
+    "year": "2024",
+    "newEnrollments": "27",
+    "scheduledMeetings": "76",
+    "attendanceRate": "91%",
+    "classCompletionRate": "22%"
+  },
+  {
+    "id": "11",
+    "year": "2025",
+    "newEnrollments": "41",
+    "scheduledMeetings": "33",
+    "attendanceRate": "48%",
+    "classCompletionRate": "94%"
+  },
+  {
+    "id": "12",
+    "year": "2026",
+    "newEnrollments": "66",
+    "scheduledMeetings": "66",
+    "attendanceRate": "55%",
+    "classCompletionRate": "58%"
+  }
+]

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -4,7 +4,7 @@ import Icon from "../../pb_icon/_icon"
 import Title from "../../pb_title/_title"
 import BreadCrumbItem from '../_bread_crumb_item'
 
-const LinkSection = (props) => <BreadCrumbItem {...props} />
+const Link = (props) => <BreadCrumbItem {...props} />
 const BreadCrumbsDefault = (props) => {
   return (
     <BreadCrumbs
@@ -35,7 +35,7 @@ const BreadCrumbsDefault = (props) => {
           size="1x"
           {...props}
       />
-      <LinkSection
+      <Link
           {...props}
           href="/users"
       >
@@ -46,20 +46,20 @@ const BreadCrumbsDefault = (props) => {
             text="Users"
             {...props}
         />
-      </LinkSection>
+      </Link>
       <Icon
           icon="user"
           size="1x"
           {...props}
       />
-      <LinkSection {...props}>
+      <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
             {...props}
         />
-      </LinkSection>
+      </Link>
     </BreadCrumbs>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -124,7 +124,8 @@ $pb_button_icon_only_dimensions: (
   // Rails: .pb_button_icon_only; React: class or :has(...) when label is empty.
   // Rails uses a truly empty .pb_button_content; React wraps text in a child span (may be empty).
   &.pb_button_icon_only,
-  &:has(.pb_button_content:empty) {
+  &:has(.pb_button_content:empty),
+  &:has(.pb_button_content > span:empty) {
     aspect-ratio: 1;
     box-sizing: border-box;
     $pb_button_icon_only_default: map-get($pb_button_icon_only_dimensions, "md");

data/app/pb_kits/playbook/pb_button/button.rb

@@ -73,10 +73,8 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
-      # Icon-only = icon with no label. Label may come from `text` or from a block (e.g. CopyButton);
-      # block content must not be treated as icon-only when `text` is unset.
       def icon_only?
-        icon.present? && text.blank? && children.blank? && variant != "reaction"
+        icon.present? && text.blank? && variant != "reaction"
       end
 
       def classname

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -310,34 +310,4 @@ describe('DatePicker Kit', () => {
     expect(label).toBeInTheDocument()
     expect(kit).not.toHaveTextContent("*")
   })
-
-  test('Last month quickpick includes the correct last day of previous month', async () => {
-    const testId = 'datepicker-last-month'
-    render(
-      <DatePicker
-          allowInput
-          data={{ testid: testId }}
-          mode="range"
-          pickerId="date-picker-last-month"
-          placeholder="mm/dd/yyyy to mm/dd/yyyy"
-          selectionType="quickpick"
-      />
-    )
-  
-    const kit = screen.getByTestId(testId)
-    const input = within(kit).getByPlaceholderText('mm/dd/yyyy to mm/dd/yyyy')
-  
-    fireEvent(input, new MouseEvent('click', { bubbles: true, cancelable: true }))
-  
-    const lastMonth = within(kit).getByText('Last month')
-    fireEvent(lastMonth, new MouseEvent('click', { bubbles: true, cancelable: true }))
-  
-    await waitFor(() => {
-      expect(input).toHaveValue(
-        DateTime.getPreviousMonthStartDate(new Date()).formatDate() +
-        " to " +
-        DateTime.getPreviousMonthEndDate(new Date()).formatDate()
-      )
-    })
-  })
 })

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

@@ -16,12 +16,7 @@ export default class PbDialog extends PbEnhancedElement {
     this.domContentLoadedHandler = () => this.setupDialog()
     this.turboFrameLoadHandler = () => this.setupDialog()
     
-    // If DOM is already loaded, setup immediately; otherwise wait for DOMContentLoaded
-    if (document.readyState === "loading") {
-      window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
-    } else {
-      this.setupDialog()
-    }
+    window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
     window.addEventListener("turbo:frame-load", this.turboFrameLoadHandler)
 
     // Code for custom_event_type setup (can take multiple events in a string separated by commas)

data/app/pb_kits/playbook/pb_draggable/index.js

@@ -22,12 +22,7 @@ export default class PbDraggable extends PbEnhancedElement {
     this.dragZoneType  = "";
     this.dragZoneColor = "";
 
-    // If DOM is already loaded, bind immediately; otherwise wait for DOMContentLoaded
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
-    } else {
-      this.bindEventListeners();
-    }
+    document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
 
   setState(newState) {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx

@@ -26,24 +26,6 @@ const DropdownWithConstrainHeight = (props) => {
           options={options}
           {...props}
       />
-
-    <br />
-
-      <Dropdown
-          label="Subcomponent With Constrain Height"
-          options={options}
-          {...props}
-      >
-        <Dropdown.Trigger />
-        <Dropdown.Container constrainHeight>
-          {options.map((option) => (
-            <Dropdown.Option
-                key={option.id}
-                option={option}
-            />
-          ))}
-        </Dropdown.Container>
-      </Dropdown>
     </>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb

@@ -18,14 +18,3 @@
   constrain_height: true,
   label: "With Constrain Height"
 }) %>
-
-<br>
-
-<%= pb_rails("dropdown", props: {options: options, label: "Subcomponent With Constrain Height"}) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container", props: { constrain_height: true }) do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent, waitFor } from "../utilities/test-utils"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
-import DateTime from "../pb_kit/dateTime.ts"
+
 
 const testId = 'dropdown'
 
@@ -778,52 +778,3 @@ test("requiredIndicator prop renders asterisk when true", () => {
   expect(label).toBeInTheDocument();
   expect(kit).toHaveTextContent("*");
 });
-
-describe("quickpick Last Month range when current month is shorter than the previous month", () => {
-  const quickpickTestId = "dropdown-quickpick-last-month-march"
-
-  const formatDate = (date) => {
-    const month = (date.getMonth() + 1).toString().padStart(2, "0")
-    const day = date.getDate().toString().padStart(2, "0")
-    const year = date.getFullYear()
-    return `${month}/${day}/${year}`
-  }
-
-  beforeEach(() => {
-    jest.setSystemTime(new Date(2026, 3, 15, 12, 0, 0))
-  })
-
-  afterEach(() => {
-    jest.setSystemTime()
-  })
-
-  test("selecting Last Month matches DateTime previous-month range (full March when today is in April)", async () => {
-    const onSelect = jest.fn()
-    const now = new Date()
-
-    render(
-      <Dropdown
-          data={{ testid: quickpickTestId }}
-          onSelect={onSelect}
-          variant="quickpick"
-      />
-    )
-
-    const kit = screen.getByTestId(quickpickTestId)
-    const lastMonthOption = Array.from(kit.querySelectorAll(".pb_dropdown_option_list")).find(
-      (el) => el.textContent === "Last Month"
-    )
-
-    expect(lastMonthOption).toBeTruthy()
-    fireEvent.click(lastMonthOption)
-
-    await waitFor(() => {
-      expect(onSelect).toHaveBeenCalled()
-    })
-
-    const [startDate, endDate] = onSelect.mock.calls[0][0].value
-
-    expect(formatDate(startDate)).toBe(formatDate(DateTime.getPreviousMonthStartDate(now)))
-    expect(formatDate(endDate)).toBe(formatDate(DateTime.getPreviousMonthEndDate(now)))
-  })
-})