playbook_ui_docs 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780 → 16.8.0.pre.alpha.PLAY2945selectformblankselection16424

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

@@ -1,68 +0,0 @@
-import React from "react"
-import AdvancedTable from "../../pb_advanced_table/_advanced_table"
-import Title from "../../pb_title/_title"
-
-const COLUMN_COUNT = 10
-const ROW_COUNT = 40
-
-const columnDefinitions = [
-  {
-    accessor: "region",
-    label: "Region",
-    id: "region",
-    columnStyling: { minWidth: 160 },
-  },
-  ...Array.from({ length: COLUMN_COUNT }, (_, index) => ({
-    accessor: `metric${index + 1}`,
-    label: `Metric ${index + 1}`,
-    id: `metric${index + 1}`,
-    columnStyling: { minWidth: 180 },
-  })),
-]
-
-const tableData = Array.from({ length: ROW_COUNT }, (_, row) => ({
-  region: `Region ${row + 1}`,
-  ...Object.fromEntries(
-    Array.from({ length: COLUMN_COUNT }, (_, col) => [
-      `metric${col + 1}`,
-      String((row + 1) * (col + 1)),
-    ])
-  ),
-}))
-
-const tableProps = { sticky: true }
-
-const AdvancedTableStickyScrollLimitation = (props) => (
-  <div>
-    <Title
-        size={4}
-        text="Without maxHeight"
-        {...props}
-    />
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        responsive="none"
-        stickyLeftColumn={["region"]}
-        tableData={tableData}
-        tableProps={tableProps}
-        {...props}
-    />
-    <Title
-        paddingTop="sm"
-        size={4}
-        text="With maxHeight"
-        {...props}
-    />
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        maxHeight="sm"
-        responsive="none"
-        stickyLeftColumn={["region"]}
-        tableData={tableData}
-        tableProps={tableProps}
-        {...props}
-    />
-  </div>
-)
-
-export default AdvancedTableStickyScrollLimitation

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

@@ -1,7 +0,0 @@
-`stickyLeftColumn` adds horizontal overflow to the table wrapper. Without `maxHeight`, the page scrolls vertically while the table scrolls horizontally — two scroll containers.
-
-Sticky columns work in that setup, but the sticky header cannot stick to the page. Scroll down on the page, then scroll the first table horizontally to see the conflict.
-
-The second table uses `maxHeight` so both axes share one scroll container. The header sticks to the top of the table box instead of the page.
-
-For a typical implementation with subrows, see [Sticky Columns with Sticky Header](#sticky-columns-with-sticky-header).

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb

@@ -1,90 +0,0 @@
-<% data = [
-  {
-    name: "EV",
-    y: 23.9,
-  },
-  {
-    name: "Hybrids",
-    y: 12.6,
-  },
-  {
-    name: "Diesel",
-    y: 37.0,
-  },
-  {
-    name: "Petrol",
-    y: 26.4,
-  },
-] %>
-
-<% total = data.sum { |point| point[:y] } %>
-<% subtitle_rows = data.map { |point| "#{point[:name]}: #{point[:y]}%" }.join("<br>") %>
-
-<% chart_options = {
-  chart: {
-    type: "pie",
-  },
-  accessibility: {
-    point: {
-      valueSuffix: "%",
-    },
-  },
-  title: {
-    text: "2023 Norway car registrations",
-    floating: true,
-    align: "center",
-    verticalAlign: "top",
-    y: 8,
-  },
-  subtitle: {
-    text: "Total<br><strong>#{total.round(1)}</strong><br><br>#{subtitle_rows}",
-    useHTML: true,
-    floating: true,
-    align: "center",
-    verticalAlign: "middle",
-    y: 8,
-    style: {
-      textAlign: "center",
-    },
-  },
-  tooltip: {
-    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
-  },
-  legend: {
-    enabled: false,
-  },
-  plotOptions: {
-    series: {
-      allowPointSelect: true,
-      cursor: "pointer",
-      borderRadius: 8,
-      dataLabels: [
-        {
-          enabled: true,
-          distance: 20,
-          format: "{point.name}",
-        },
-        {
-          enabled: true,
-          distance: -15,
-          format: "{point.percentage:.0f}%",
-          style: {
-            fontSize: "0.9em",
-          },
-        },
-      ],
-      showInLegend: true,
-    },
-  },
-  series: [
-    {
-      name: "Registrations",
-      colorByPoint: true,
-      center: ["50%", "50%"],
-      innerSize: "75%",
-      data: data,
-    },
-  ],
-} %>
-
-<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx

@@ -1,100 +0,0 @@
-import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
-
-const data = [
-  {
-    name: "EV",
-    y: 23.9,
-  },
-  {
-    name: "Hybrids",
-    y: 12.6,
-  },
-  {
-    name: "Diesel",
-    y: 37.0,
-  },
-  {
-    name: "Petrol",
-    y: 26.4,
-  },
-];
-
-const total = data.reduce((sum, point) => sum + point.y, 0);
-const subtitleRows = data.map((point) => `${point.name}: ${point.y}%`).join("<br>");
-
-const chartOptions = {
-  chart: {
-    type: "pie",
-  },
-  accessibility: {
-    point: {
-      valueSuffix: "%",
-    },
-  },
-  title: {
-    text: "2023 Norway car registrations",
-    floating: true,
-    align: "center",
-    verticalAlign: "top",
-    y: 8,
-  },
-  subtitle: {
-    text: `Total<br><strong>${total.toFixed(1)}</strong><br><br>${subtitleRows}`,
-    useHTML: true,
-    floating: true,
-    align: "center",
-    verticalAlign: "middle",
-    y: 8,
-    style: {
-      textAlign: "center",
-    },
-  },
-  tooltip: {
-    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
-  },
-  legend: {
-    enabled: false,
-  },
-  plotOptions: {
-    series: {
-      allowPointSelect: true,
-      cursor: "pointer",
-      borderRadius: 8,
-      dataLabels: [
-        {
-          enabled: true,
-          distance: 20,
-          format: "{point.name}",
-        },
-        {
-          enabled: true,
-          distance: -15,
-          format: "{point.percentage:.0f}%",
-          style: {
-            fontSize: "0.9em",
-          },
-        },
-      ],
-      showInLegend: true,
-    },
-  },
-  series: [
-    {
-      name: "Registrations",
-      colorByPoint: true,
-      center: ["50%", "50%"],
-      innerSize: "75%",
-      data,
-    },
-  ],
-};
-
-const PbCircleChartCenteredData = (props) => (
-  <PbCircleChart
-      options={chartOptions}
-      {...props}
-  />
-);
-
-export default PbCircleChartCenteredData;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md

@@ -1 +0,0 @@
-This example shows how to achieve centered data. This data will remain in the center of all screen sizes.