playbook_ui 16.6.0.pre.alpha.revert5955revert5912PLAY2834mobilepagrails15822 → 16.6.0.pre.alpha.websitechagnespostcreate16068

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 790d11292ff2cdb06a14c2d450cc31c9dab1ef08d5d9508a752cf39cb1cde712
-  data.tar.gz: 42e8d5741eb5245ee477f9e948920f9466e809363270962f6bf7c64c50bb6d54
+  metadata.gz: 5d0aa68c0eefef724872184457def4c975ebe23f75a9c5a0814af17a9018c513
+  data.tar.gz: e7155ab7308b74c16e63657ab879200f2bf74abb959542ba90c943b94ffef9f2
 SHA512:
-  metadata.gz: 9d3df0e7679a6dbcb0750e996f6df1826fdb08616a46bb969148630e734c3776891beb1d2fbdaf33c9f5bfd02c0755598dbb0b366e3473486dc3d2e2fc0946a0
-  data.tar.gz: 6e26937f4ad61063caaede20f6a15d49e0ecf54b21882c4c56aa352709d2ea17359e2644ac288031ca889b31550da45fd6db1f4d27d29e8f9cf0d2a8d2aca7b0
+  metadata.gz: 10ed586b474c9eeab3ab235b116b58914c28b50d1b2e1de4719ff000bb4042bf5b73a3d13401df05ce7ecac81705a3e79de9529ef2c718d63332be9668de7c10
+  data.tar.gz: 03ff1c9c07228db1a6349530a73ec8e605f548e0c80107aa0d4dbe0e416a908ed17cb6e44771e67d4b32bb68fcef04fca426f9fa7260abe8688d6c03703e299c

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

@@ -9,7 +9,21 @@ 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"
-import COMPOSITION_MOCK_DATA from "./advanced_table_grouped_headers_composition_mock_data.json"
+
+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%" },
+]
 
 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 MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+import INFINITE_SCROLL_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={MOCK_DATA}
+          tableData={INFINITE_SCROLL_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 "./_mock_data_inline_loading"
-import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
+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"
 
 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 from "./advanced_table_mock_data_with_id.json"
+import MOCK_DATA_WITH_ID 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}
+          tableData={MOCK_DATA_WITH_ID}
           tableProps={{sticky: true}}
           {...props}
       >

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

@@ -0,0 +1,41 @@
+[
+  {
+    "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_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 Link = (props) => <BreadCrumbItem {...props} />
+const LinkSection = (props) => <BreadCrumbItem {...props} />
 const BreadCrumbsDefault = (props) => {
   return (
     <BreadCrumbs
@@ -35,7 +35,7 @@ const BreadCrumbsDefault = (props) => {
           size="1x"
           {...props}
       />
-      <Link
+      <LinkSection
           {...props}
           href="/users"
       >
@@ -46,20 +46,20 @@ const BreadCrumbsDefault = (props) => {
             text="Users"
             {...props}
         />
-      </Link>
+      </LinkSection>
       <Icon
           icon="user"
           size="1x"
           {...props}
       />
-      <Link {...props}>
+      <LinkSection {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
             {...props}
         />
-      </Link>
+      </LinkSection>
     </BreadCrumbs>
   )
 }

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

@@ -11,6 +11,13 @@ $pb_button_sizes: (
   "lg":   ($font_large - 2px),
 );
 
+// Icon-only: fixed square hit targets (not derived from font padding).
+$pb_button_icon_only_dimensions: (
+  "sm": 35px,
+  "md": 40px,
+  "lg": 45px,
+);
+
 // Base button class
 .pb_button_kit {
   @include pb_button;
@@ -113,32 +120,27 @@ $pb_button_sizes: (
     }
   }
 
-  // Icon-only button (icon prop set, no text) - square with equal padding
-  // Rails: uses .pb_button_icon_only class
-  // React: when pb_button_content is empty (no text). Do not match when content has
-  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
+  // Icon-only button (icon prop set, no text) — fixed squares; icon scales via font-size from size prop.
+  // 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;
-    min-width: auto;
-    width: auto;
-    height: auto;
-    padding: $pb_button_v_padding !important;
-    min-height: ($pb_button_v_padding * 2) + $font_small;
-    
-    &.pb_button_size_sm {
-      padding: $font_smaller !important;
-      min-height: ($font_smaller * 2) + $font_smaller;
-    }
-    
-    &.pb_button_size_md {
-      padding: $font_small !important;
-      min-height: ($font_small * 2) + $font_small;
-    }
-    
-    &.pb_button_size_lg {
-      padding: ($font_large - 2px) !important;
-      min-height: (($font_large - 2px) * 2) + ($font_large - 2px);
+    box-sizing: border-box;
+    $pb_button_icon_only_default: map-get($pb_button_icon_only_dimensions, "md");
+    width: $pb_button_icon_only_default;
+    min-width: $pb_button_icon_only_default;
+    height: $pb_button_icon_only_default;
+    min-height: $pb_button_icon_only_default;
+    padding: 0 !important;
+    @each $name, $dim in $pb_button_icon_only_dimensions {
+      &.pb_button_size_#{$name} {
+        width: $dim;
+        min-width: $dim;
+        height: $dim;
+        min-height: $dim;
+      }
     }
 
     // Remove margins from icons

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

@@ -73,8 +73,10 @@ 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? && variant != "reaction"
+        icon.present? && text.blank? && children.blank? && variant != "reaction"
       end
 
       def classname

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

@@ -310,4 +310,34 @@ 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,7 +16,12 @@ export default class PbDialog extends PbEnhancedElement {
     this.domContentLoadedHandler = () => this.setupDialog()
     this.turboFrameLoadHandler = () => this.setupDialog()
     
-    window.addEventListener("DOMContentLoaded", this.domContentLoadedHandler)
+    // 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("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,7 +22,12 @@ export default class PbDraggable extends PbEnhancedElement {
     this.dragZoneType  = "";
     this.dragZoneColor = "";
 
-    document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
+    // If DOM is already loaded, bind immediately; otherwise wait for DOMContentLoaded
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
+    } else {
+      this.bindEventListeners();
+    }
   }
 
   setState(newState) {

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

@@ -1,8 +1,8 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent } from "../utilities/test-utils"
+import { render, screen, fireEvent, waitFor } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
-
+import DateTime from "../pb_kit/dateTime.ts"
 
 const testId = 'dropdown'
 
@@ -778,3 +778,52 @@ 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)))
+  })
+})

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -281,17 +281,8 @@ export const getPreviousMonthStartDate = (newDate: Date | string): Date => {
 }
 
 export const getPreviousMonthEndDate = (newDate: Date | string): Date => {
-  const lastDayOfMonth = getMonthEndDate(newDate)
-  const lastDayOfPreviousMonth = new Date(
-    lastDayOfMonth.getFullYear(),
-    lastDayOfMonth.getMonth() - 1,
-    lastDayOfMonth.getDate(),
-    lastDayOfMonth.getHours(),
-    lastDayOfMonth.getMinutes(),
-    lastDayOfMonth.getSeconds()
-  )
-
-  return lastDayOfPreviousMonth
+  const date = formatDate(newDate)
+  return new Date(date.getFullYear(), date.getMonth(), 0, 23, 59, 59)
 }
 
 // Quarters
@@ -325,17 +316,8 @@ export const getPreviousQuarterStartDate = (newDate: Date | string): Date => {
 }
 
 export const getPreviousQuarterEndDate = (newDate: Date | string): Date => {
-  const endOfQuarter = getQuarterEndDate(newDate)
-  const lastDayOfPreviousQuarter = new Date(
-    endOfQuarter.getFullYear(),
-    endOfQuarter.getMonth() - 3,
-    endOfQuarter.getDate(),
-    endOfQuarter.getHours(),
-    endOfQuarter.getMinutes(),
-    endOfQuarter.getSeconds()
-  )
-
-  return lastDayOfPreviousQuarter
+  const startOfQuarter = getQuarterStartDate(newDate)
+  return new Date(startOfQuarter.getFullYear(), startOfQuarter.getMonth(), 0, 23, 59, 59)
 }
 
 // Years

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -4,7 +4,28 @@ import Pagination from '../../pb_pagination/_pagination'
 import Select from '../../pb_select/_select'
 import Table from '../../pb_table/_table'
 
-import { data } from "./data";
+const data = [
+    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+  ];
 
 const PaginationExternalControl = (props) => {
   const [totalItems, setTotalItems] = useState(20);

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -2,8 +2,28 @@ import React, { useState } from "react";
 import Table from '../../pb_table/_table'
 import Pagination from '../../pb_pagination/_pagination'
 
-
-import { data } from "./data";
+const data = [
+  ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+  ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+  ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+  ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+  ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+  ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+  ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+  ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+  ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+  ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+  ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+  ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+  ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+  ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+  ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+  ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+  ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+  ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+  ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+  ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+];
 
 const PaginationPageChange = (props) => {
 

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx

@@ -5,7 +5,82 @@ import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'
 
 import Select from '../../pb_select/_select'
-import { changelog, release } from './templates.js'
+
+const release = `
+  <div>
+    <div>
+      <strong>Story Background</strong>
+    </div>
+    <div>
+      Follow the{" "}
+      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
+        release process
+      </a>{" "}
+      to create a new version, create a gem, and package. Create a Ninja testing
+      plan, then update Nitro with the new version.
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Timeline / Due Date</strong>
+    </div>
+    <div>
+      <em>Release End of business Thursday</em>
+    </div>
+    <div>
+      <em>Testing on Nitro End of business Friday</em>
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Definition of done</strong>
+    </div>
+    <ol>
+      <li>Merge all PR’s</li>
+      <li>Update the final CHANGELOG</li>
+      <li>Version up and generate NPM, and RubyGem</li>
+      <li>Create next version branch and milestone</li>
+      <li>Update default branch and branch protection rules&nbsp;</li>
+      <li>Notify Everyone of new version</li>
+      <li>
+        Generate testing plan and pages to test for Ninjas (update runway
+        ticket)
+      </li>
+      <li>Update version on Nitro and get on Demo</li>
+      <li>Send Ninjas demo and runway ticket for testing</li>
+      <li>Ninja Approved + PR Approved</li>
+    </ol>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Stakeholders / Sign-off</strong>
+    </div>
+    <ul>
+      <li>Code Owners</li>
+    </ul>
+    <div>
+      <br />
+      <strong>Cadence</strong>
+      <br />
+      Jason, Jon, Stephen, Jasper, Brendan, Cole
+    </div>
+  </div>
+`
+
+const changelog = `
+  <div>
+    <strong>Changelog:<br></strong>
+    [INSERT LINK]<br><br>
+    You can test the normal spots of Playbook rails and react on
+    dev docs plus the following:
+  </div>
+  <div>
+    <br>
+  </div>
+`
 
 const RichTextEditorAdvancedTemplates = (props) => {
 

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -28,7 +28,7 @@ const SelectError = (props) => {
       <Select
           error={error}
           label="Favorite Food"
-          name="food"
+          name="food-error"
           options={options}
           value="2"
           {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -23,7 +23,7 @@ const SelectInline = (props) => {
       <Select
           inline
           label="Favorite Food"
-          name="food"
+          name="food-inline"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -24,7 +24,7 @@ const SelectInlineCompact = (props) => {
           compact
           inline
           label="Favorite Food"
-          name="food"
+          name="food-inline-compact"
           options={options}
           {...props}
       />

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -23,7 +23,7 @@ const SelectInlineShowArrow = (props) => {
       <Select
           inline
           label="Favorite Food"
-          name="food"
+          name="food-inline-show-arrow"
           options={options}
           showArrow
           {...props}

data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb

@@ -22,15 +22,15 @@
       value_text: "BBQ",
     },
     {
-      value: "4",
+      value: "5",
       value_text: "Sushi",
     },
     {
-      value: "4",
+      value: "6",
       value_text: "Chinese",
     },
     {
-      value: "4",
+      value: "7",
       value_text: "Hot Dogs",
     },
   ]