playbook_ui 16.4.0.pre.alpha.testingmetadata15413 → 16.4.0.pre.alpha.testingmetadata15451

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7ad106d09640e4bc94cbbca0010eadf35beadbadbd60082fbdb503064d0a705a
-  data.tar.gz: f2ff748c85103836acec1d9b2137e5c067b624adf3b48bbfdbf530fc3970e15b
+  metadata.gz: ad7665b0e0228f1fdc181e63385f1c9753a1622228b52ac9e971db17ec738ea3
+  data.tar.gz: b79b48a87f203827fcf6498fd60fdcc52621fdae015fc96568afdb22a7983393
 SHA512:
-  metadata.gz: 3ab469f3903ec4dfaacd620b292159c86b860f672def1f7c3feed6ab5cebf11ba7bfecc903e7c29f81be0d2507b657fb36e8e4ddfc88c1550283336e89475484
-  data.tar.gz: 6313817507b70b0b40bfa9aca1f06881829ebae83c7c49c7b90b17498a9a305a4d5866b2ec40faafd42c3fc7231898487667b00308576c87df3355de84dd3027
+  metadata.gz: 86ff2ff126d9de6a01d8bb9066098a578ae88a38d33f6f757b70f52215d48f34e56628e47096c3d2deea8cd114ffdd936a13310850012343c909188e63dd7890
+  data.tar.gz: 861382f43f67421bc4a54418a41ffe8e8cd36e56c8dbf415f6af4918fd184b62b2b3bd9fc073073fb10d9c6d071066f1d0e1495118429d1dd2903365212a74ff

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -33,7 +33,8 @@ export const AdvancedTableProvider = ({ children, ...props }: {
 
   const measureHeights = useCallback(() => {
     if (headerRef.current) {
-      const headerRect = headerRef.current.getBoundingClientRect();
+      const headerElement = headerRef.current as HTMLElement;
+      const headerRect = headerElement.getBoundingClientRect();
       if (headerRect.height > 0) {
         setHeaderHeight(headerRect.height);
       }
@@ -67,9 +68,11 @@ export const AdvancedTableProvider = ({ children, ...props }: {
     };
   }, [measureHeights]);
 
+  const headerGroupCount = table?.getHeaderGroups()?.length ?? 0;
+
   useEffect(() => {
     measureHeights();
-  }, [table?.getRowModel().rows.length, measureHeights]);
+  }, [table?.getRowModel().rows.length, headerGroupCount, measureHeights]);
 
 
   // Create a flattened data array that includes ALL components for virtualization

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -64,14 +64,12 @@ export const TableHeader = ({
   );
 
   const renderRegularTableHeader = () => (
-    <thead className={classes} 
+    <thead className={classes}
         id={id}
+        ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <tr 
-            key={`${headerGroup.id}-headerGroup`}
-            ref={index === 0 ? headerRef : null}
-        >
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr key={`${headerGroup.id}-headerGroup`}>
           {!hasAnySubRows && selectableRows && (
             <th className={customCellClassnames}>
               <Checkbox
@@ -105,16 +103,16 @@ export const TableHeader = ({
   );
 
   const renderVirtualizedTableHeader = () => (
-    <thead 
-        className={classes} 
+    <thead
+        className={classes}
         data-virtualized="true"
         id={id}
+        ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, index: number) => (
-        <tr 
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
+        <tr
             className="virtualized-header-row-header"
             key={`${headerGroup.id}-headerGroup-virtualized`}
-            ref={index === 0 ? headerRef : null}
         >
           {!hasAnySubRows && selectableRows && (
             <th className={classnames(customCellClassnames, "virtualized-header-cell")}>

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

@@ -0,0 +1,235 @@
+/* eslint-disable react/no-multi-comp, react/prop-types */
+import React, { useCallback, useState } from "react"
+
+import AdvancedTable from "../_advanced_table"
+import Flex from "../../pb_flex/_flex"
+import Icon from "../../pb_icon/_icon"
+import List from "../../pb_list/_list"
+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 LEAF_COUNT = "newEnrollments"
+const LEAF_SCHEDULED = "scheduledMeetings"
+
+const ICON_UNSORTED = "arrow-up-arrow-down"
+const iconSorted = (desc) => (desc ? "arrow-up-wide-short" : "arrow-down-short-wide")
+
+const STAR_MENU = [
+  { id: LEAF_COUNT, label: "Count" },
+  { id: LEAF_SCHEDULED, label: "Scheduled" },
+]
+
+const MENU_BTN = {
+  alignItems: "center",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  font: "inherit",
+  gap: 12,
+  justifyContent: "space-between",
+  padding: "8px 14px",
+  textAlign: "left",
+  width: "100%",
+}
+
+const labelStyle = (active) => ({
+  color: active ? "#0056cf" : "#242930",
+  flex: 1,
+  fontSize: 14,
+  fontWeight: active ? 600 : 400,
+})
+
+/** Hooks + popover; `header` callback cannot use hooks directly. */
+const StarMetricGroupHeader = ({ table }) => {
+  const [open, setOpen] = useState(false)
+  const menuId = "playbook-star-metric-sort-menu"
+
+  const sort0 = table.getState().sorting[0]
+  const groupActive =
+    sort0?.id === LEAF_COUNT || sort0?.id === LEAF_SCHEDULED
+
+  const close = useCallback((shouldClose) => setOpen(!shouldClose), [])
+  const toggle = useCallback((e) => {
+    e.stopPropagation()
+    setOpen((v) => !v)
+  }, [])
+
+  const applySort = useCallback(
+    (columnId, e) => {
+      e.stopPropagation()
+      const cur = table.getState().sorting[0]
+      const nextDesc = cur?.id === columnId ? !cur.desc : true
+      table.setSorting([{ desc: nextDesc, id: columnId }])
+      setOpen(false)
+    },
+    [table]
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        padding="none"
+        placement="bottom-start"
+        reference={
+          <button
+              aria-controls={menuId}
+              aria-expanded={open}
+              aria-haspopup="menu"
+              aria-label="Sort by Count or Scheduled"
+              onClick={toggle}
+              style={{
+                background: open ? "rgba(115, 134, 169, 0.14)" : "transparent",
+                border: "none",
+                borderRadius: 6,
+                cursor: "pointer",
+                font: "inherit",
+                margin: 0,
+                padding: "2px 4px",
+              }}
+              title="Open menu to sort by Count or Scheduled"
+              type="button"
+          >
+            <Flex alignItems="center"
+                gap="xs"
+                justifyContent="center"
+            >
+              <StarRating
+                  backgroundType="outline"
+                  colorOption="primary"
+                  justifyContent="center"
+                  maxWidth="102px"
+                  rating={5}
+              />
+              <Icon
+                  color={groupActive ? "primary" : "default"}
+                  fixedWidth
+                  icon={
+                    groupActive
+                      ? iconSorted(Boolean(sort0?.desc))
+                      : ICON_UNSORTED
+                  }
+                  size="md"
+              />
+            </Flex>
+          </button>
+        }
+        shouldClosePopover={close}
+        show={open}
+        zIndex={1200}
+    >
+      <Flex id={menuId}
+          minWidth="220px"
+          orientation="column"
+      >
+        <List borderless
+            padding="none"
+        >
+          {STAR_MENU.map(({ id, label }, i) => {
+            const active = sort0?.id === id
+            return (
+              <React.Fragment key={id}>
+                {i > 0 ? <SectionSeparator margin="none" /> : null}
+                <ListItem padding="none">
+                  <button
+                      onClick={(e) => applySort(id, e)}
+                      style={MENU_BTN}
+                      type="button"
+                  >
+                    <span style={labelStyle(active)}>{label}</span>
+                    <Icon
+                        color={active ? "primary" : "default"}
+                        fixedWidth
+                        icon={
+                          active
+                            ? iconSorted(Boolean(sort0?.desc))
+                            : ICON_UNSORTED
+                        }
+                        size="md"
+                    />
+                  </button>
+                </ListItem>
+              </React.Fragment>
+            )
+          })}
+        </List>
+      </Flex>
+    </PbReactPopover>
+  )
+}
+
+const AdvancedTableGroupedHeadersComposition = (props) => {
+  const [pinnedRows, setPinnedRows] = useState({ top: ["12"] })
+
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      cellAccessors: ["quarter", "month", "day"],
+      label: "Year",
+    },
+    {
+      columns: [
+        {
+          columns: [
+            {
+              accessor: "newEnrollments",
+              enableSort: true,
+              id: LEAF_COUNT,
+              label: "Count",
+            },
+            {
+              accessor: "scheduledMeetings",
+              enableSort: true,
+              id: LEAF_SCHEDULED,
+              label: "Scheduled",
+            },
+          ],
+          id: "starLeafPair",
+          label: "Metrics",
+        },
+      ],
+      header: ({ table }) => (
+        <Flex justify="center">
+          <StarMetricGroupHeader table={table} />
+        </Flex>
+      ),
+      id: "starMetricGroup",
+      label: "Rating group (custom header)",
+    },
+    {
+      columns: [
+        { accessor: "attendanceRate", label: "Attendance" },
+        {
+          accessor: "classCompletionRate",
+          enableSort: true,
+          id: "classCompletionRate",
+          label: "Completion %",
+        },
+      ],
+      label: "Performance",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableSortingRemoval
+          maxHeight="md"
+          pinnedRows={{ onChange: setPinnedRows, value: pinnedRows }}
+          tableData={COMPOSITION_MOCK_DATA}
+          tableProps={{ sticky: true }}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableGroupedHeadersComposition

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

@@ -0,0 +1,17 @@
+### Grouped headers, custom UI, sort, and pinned rows
+
+This example combines patterns that often show up together in product tables:
+
+1. **Multi-level headers** — nested `columns` in `columnDefinitions`.
+2. **Custom group header** — a `header` function returning React (here: `StarRating`, sort icon, `PbReactPopover` menu). Parent groups are not sort targets; **only leaf columns** use `enableSort: true` (see **Enable Sort By Column (Multi-Column)**).
+3. **Programmatic sort** — the group `header` receives TanStack’s **`table`**. Call **`table.setSorting([{ id: "<leafColumnId>", desc: boolean }])`** using the same **`id`** values as your leaf columns. Match **direction icons** to the built-in kit (`arrow-up-arrow-down` unsorted; `arrow-up-wide-short` / `arrow-down-short-wide` when sorted).
+4. **Pinned row + sticky header** — `pinnedRows` with row **`id`**s and `tableProps={{ sticky: true }}` (see **Pinned Rows**).
+
+**Implementation notes**
+
+- **`header` must be a child component** if you need hooks (e.g. popover open state). Render it from `header: ({ table }) => <YourHeader table={table} />`.
+- **Avoid wrapping the primary control in `Tooltip`** — it can steal the first tap/click. Use a **`title`** on the button or copy in the doc instead.
+- **Popover rows:** use a plain **`<button>`** as `reference`, `closeOnClick="outside"`. Picking the **same** metric again should **toggle** `desc`; switching to another leaf column often defaults to **`desc: true`** to align with **`sortDescFirst`**.
+- **Data:** **`advanced_table_grouped_headers_composition_mock_data.json`** — twelve flat rows (2015–2026) with **varied** Count / Scheduled / % values so sorting is obvious; **`id` `"12"`** is **2026** and is pinned by default.
+
+Other building blocks on this kit: **Custom Header with Multiple Headers**, **Sticky Header**.

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_advanced_table/docs/example.yml

@@ -75,6 +75,7 @@ examples:
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_grouped_headers_composition: Grouped headers, custom headers, sort, and pinned rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling

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

@@ -42,6 +42,7 @@ export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinit
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
 export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
 export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
+export { default as AdvancedTableGroupedHeadersComposition } from './_advanced_table_grouped_headers_composition.jsx'
 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'

data/app/pb_kits/playbook/pb_avatar/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Avatar",
-  "description": "Avatar displays a user's picture. This helps aid easy recognition",
+  "description": "Avatar component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_background/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Background",
-  "description": "The background kit is used for adding a background to a page or to",
+  "description": "Background component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_badge/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Badge",
-  "description": "Badges can be used for notification, tags, and status. They are used",
+  "description": "Badge component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_body/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Body",
-  "description": "Default text style for paragraphs. Follow hiearchy when using \"light\"",
+  "description": "Body component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_bread_crumbs/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "BreadCrumbs",
-  "description": "BreadCrumbs can be used for keeping a user aware of their route location.",
+  "description": "BreadCrumbs component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_button/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Button",
-  "description": "Interactive element for triggering actions. Primary variant for main CTAs, secondary for less prominent actions, danger for destructive actions.",
+  "description": "Button component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_button_toolbar/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "ButtonToolbar",
-  "description": "This kit should primarily hold the most commonly used buttons.",
+  "description": "ButtonToolbar component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_caption/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Caption",
-  "description": "Use to provide supplementary context. Default size is best when providing",
+  "description": "Caption component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_card/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Card",
-  "description": "Content container with optional header, body sections, and various styling options.",
+  "description": "Card component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_checkbox/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Checkbox",
-  "description": "Checkbox is used for a list of selections that are meant to have",
+  "description": "Checkbox component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_circle_icon_button/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "CircleIconButton",
-  "description": "When using Icon Circle Button, the icon must be clear a clear indication",
+  "description": "CircleIconButton component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_collapsible/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Collapsible",
-  "description": "Collapsible content that can be expanded or collapsed.",
+  "description": "Collapsible component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_contact/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Contact",
-  "description": "Use to display customer's or user's contact information.",
+  "description": "Contact component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_copy_button/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "CopyButton",
-  "description": "Button that copies text to clipboard with visual feedback.",
+  "description": "CopyButton component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_currency/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Currency",
-  "description": "Use to display monetary amounts, typically on dashboards or other",
+  "description": "Currency component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_dashboard_value/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DashboardValue",
-  "description": "Use in dashboards to give the viewer a quick overview of important",
+  "description": "DashboardValue component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_date/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Date",
-  "description": "Use to display the date. Year will not display if it is the current",
+  "description": "Date component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_date_picker/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DatePicker",
-  "description": "Playbook's date picker is built using flatpickr, a vanilla js library.",
+  "description": "DatePicker component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_date_range_inline/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DateRangeInline",
-  "description": "Use to display a date range. Year will not show if it is the current",
+  "description": "DateRangeInline component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_date_range_stacked/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DateRangeStacked",
-  "description": "Displays a date range in a vertical stacked format.",
+  "description": "DateRangeStacked component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_date_stacked/kit.schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DateStacked",
-  "description": "Use to display the date, stacking month and day. Year will not show",
+  "description": "DateStacked component",
   "platforms": [
     "react",
     "rails"