playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0

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

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

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

@@ -1,3 +0,0 @@
-The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

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

@@ -1,33 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      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: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>

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

@@ -1,3 +0,0 @@
-The `table_props` prop can also be used to render a sticky header for the Advanced Table.
-
-This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -1,97 +0,0 @@
-@mixin advanced-table-sticky-mixin(
-  $border-color,
-  $bg-main,
-  $bg-secondary,
-  $highlight: $info_subtle
-) {
-  border-radius: 4px;
-  box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
-  display: block;
-  [class^="pb_table"].table-sm.table-card thead tr th:first-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card
-    tbody
-    tr
-    td:first-child {
-    border-left-width: 0px !important;
-  }
-  [class^="pb_table"].table-sm.table-card thead tr th:last-child,
-  [class^="pb_table"].table-sm:not(.no-hover).table-card
-    tbody
-    tr
-    td:last-child {
-    border-right-width: 0px;
-  }
-  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
-  [class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
-    border-radius: 0 0 0 0;
-  }
-  .table-header-cells:first-child,
-  td:first-child,
-  .pb_table_td:first-child,
-  .checkbox-cell.checkbox-cell-header:first-child,
-  .table-header-cells.sticky-left,
-  [class*="pinned-left"] {
-    background-color: $bg-main;
-    box-shadow: $shadow_deep !important;
-    position: sticky !important;
-    left: 0;
-    z-index: 2;
-  }
-
-  .bg-silver {
-    td:first-child,
-    .sticky-left {
-      background-color: $bg-secondary;
-    }
-  }
-  .bg-row-selection {
-    td:first-child,
-    .sticky-left {
-      background-color: $highlight;
-    }
-  }
-
-  .bg-white {
-    td:first-child,
-    .sticky-left {
-      background-color: $bg-main;
-    }
-  }
-
-  .virtualized-table-row {
-    &.bg-silver td:first-child {
-      background-color: $bg-secondary;
-    }
-    &.bg-white td:first-child {
-      background-color: $bg-main;
-    }
-    &.bg-row-selection td:first-child {
-      background-color: $highlight;
-    }
-  }
-
-  .row-selection-actions-card {
-    border-right-width: 0px;
-    border-left-width: 0px;
-    position: sticky;
-    top: 0;
-    left: 0;
-    border-radius: unset;
-  }
-
-  .checkbox-cell {
-    display: table-cell !important;
-  }
-
-  .sticky-header {
-    thead {
-      th:first-child {
-        box-shadow: 1px 0 10px -2px $border-color !important;
-      }
-    }
-
-    .pb_advanced_table_header {
-      box-shadow: none !important;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts

@@ -1,53 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const circleChartTheme = {
-  title: { text: "" },
-  chart: {
-    type: "pie",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    pointFormat:
-      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-      "<b>{point.y}</b>",
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    pie: {
-      dataLabels: {
-        enabled: false,
-      },
-      innerSize: '50%',
-      borderColor: "",
-      borderWidth: null as number | null,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-    },
-  },
-  credits: { enabled: false }
-}
-
-export default circleChartTheme;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [
-  {
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-]
-
-const baseOptions = {
-  series: [{ data: data }],
-}
-
-const CircleChartPbStyles = () => {
-  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

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

@@ -1,28 +0,0 @@
-<%= pb_rails("flex", props: { orientation: "column", gap: "sm" }) do %>
-  <%= pb_rails("circle_icon_button", props: {
-    icon: "plus",
-    size: "sm",
-    variant: "primary"
-  }) %>
-
-  <%= pb_rails("circle_icon_button", props: {
-    icon: "pen",
-    loading: true,
-    size: "sm",
-    variant: "secondary"
-  }) %>
-
-  <%= pb_rails("circle_icon_button", props: {
-    disabled: true,
-    icon: "times",
-    size: "sm"
-  }) %>
-
-  <%= pb_rails("circle_icon_button", props: {
-    icon: "info",
-    link: "https://playbook.powerapp.cloud/",
-    size: "sm",
-    target: "child",
-    variant: "link"
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-
-import CircleIconButton from '../_circle_icon_button'
-import Flex from '../../pb_flex/_flex'
-
-const CircleIconButtonSize = (props) => (
-  <>
-    <Flex gap="sm"
-        orientation="column"
-    >
-        <CircleIconButton
-            icon="plus"
-            size="sm"
-            variant="primary"
-            {...props}
-        />
-        <CircleIconButton
-            icon="pen"
-            loading
-            size="sm"
-            variant="secondary"
-            {...props}
-        />
-        <CircleIconButton
-            disabled
-            icon="times"
-            size="sm"
-            {...props}
-        />
-        <CircleIconButton
-            icon="info"
-            link="https://playbook.powerapp.cloud/"
-            size="sm"
-            target="child"
-            variant="link"
-            {...props}
-        />
-    </Flex>
-  </>
-)
-
-export default CircleIconButtonSize

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

@@ -1 +0,0 @@
-The `size` prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import usePBCopy from '../../pb_copy_button/usePBCopy'
-import Body from '../../pb_body/_body'
-import Textarea from '../../pb_textarea/_textarea'
-import Tooltip from '../../pb_tooltip/_tooltip'
-
-const CopyButtonHook = ({...props}) => {
-  // This is how you can use the copy button hook to copy text to the clipboard
-  // eslint-disable-next-line no-unused-vars
-  const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
-  // I added a tooltip so it looks better in the ui
-  const [showTooltip, setShowTooltip] = useState(false)
-
-  const handleCopy = () => {
-    copyToClipboard()
-    setShowTooltip(true)
-    setTimeout(() => setShowTooltip(false), 1500)
-  }
-
-  useEffect(() => {
-    const el = document.getElementById('hookbody')
-    if (!el) return
-
-    el.addEventListener('click', handleCopy)
-    return () => {
-      el.removeEventListener('click', handleCopy)
-    }
-  }, [copyToClipboard])
-
-  return (
-    <div>
-      <Tooltip
-          delay={{ close: 1000 }}
-          forceOpenTooltip={showTooltip}
-          placement="top"
-          showTooltip={false}
-          text="Copied!"
-      >
-        <Body
-            cursor="pointer"
-            id="hookbody"
-            text="I'm a custom copy hook! Click this body to copy this text!"
-        />
-      </Tooltip>
-
-      <Textarea
-          {...props}
-          placeholder="Paste here"
-      />
-    </div>
-  )
-}
-
-export default CopyButtonHook

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md

@@ -1,3 +0,0 @@
-We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
-
-`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb

@@ -1,14 +0,0 @@
-<%= pb_rails("body", props: { cursor: "pointer", data: { "external-copy-from": "hookbody"} }) do %>
-  <span id="hookbody">I'm a custom copy hook! Click this body to copy this text!</span>
-<% end %>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_selector: "#hookbody",
-  tooltip_id: "hookbody_tooltip",
-  position: 'top',
-  trigger_method: "click"
-}) do %>
-  Copied!
-<% end %>
-
-<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md

@@ -1,3 +0,0 @@
-You can use any external control (like the text itself or an icon) to copy. To use this hook, set the `data-external-copy-from` attribute on the external control to the copying ID. This will grab the `innerText` from `your_id` element, or `value` if it is an input element. Alternatively, you can set a `data-external-copy-value` attribute and copy custom text.
-
-See the code example for details. 

data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts

@@ -1,45 +0,0 @@
-import { useState, useRef, useEffect } from 'react'
-
-type UsePBCopyProps = {
-  value?: string
-  from?: string
-  timeout?: number
-}
-
-export default function usePBCopy({
-  value = '',
-  from = '',
-  timeout = 0,
-}: UsePBCopyProps) {
-  const [copied, setCopied] = useState(false)
-  const timerRef = useRef<number>()
-
-  const copy = () => {
-    if (!value && !from) return
-
-    if (value) {
-      navigator.clipboard.writeText(value)
-    } else {
-      const el = document.getElementById(from)
-      let text = el?.innerText
-      if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
-        text = el.value
-      }
-      if (text) navigator.clipboard.writeText(text)
-    }
-
-    setCopied(true)
-    window.clearTimeout(timerRef.current)
-    timerRef.current = window.setTimeout(() => {
-      setCopied(false)
-    }, timeout)
-  }
-
-  useEffect(() => {
-    return () => {
-      window.clearTimeout(timerRef.current)
-    }
-  }, [])
-
-  return [copied, copy] as const
-}

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx

@@ -1,34 +0,0 @@
-import React from "react";
-import DatePicker from "../_date_picker";
-
-const DatePickerRangePattern = (props) => {
-  return (
-    <>
-      <DatePicker
-          controlsEndId="end-date-picker"
-          controlsStartId="start-date-picker"
-          mode="range"
-          pickerId="quickpick-for-range"
-          placeholder="Select a Range"
-          selectionType="quickpick"
-          {...props}
-      />
-
-      <DatePicker
-          pickerId="start-date-picker"
-          placeholder="Select a Start Date"
-          syncStartWith="quickpick-for-range"
-          {...props}
-      />
-
-      <DatePicker
-          pickerId="end-date-picker"
-          placeholder="Select a End Date"
-          syncEndWith="quickpick-for-range"
-          {...props}
-      />
-    </>
-  );
-};
-
-export default DatePickerRangePattern;

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md

@@ -1,14 +0,0 @@
-You can link a Quickpick DatePicker to standard DatePickers using the following props:
-
-**For the Quickpick DatePicker**:
-`controlsStartId`: ID of the DatePicker that should receive the start date.
-
-`controlsEndId`: ID of the DatePicker that should receive the end date.
-
-When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
-
-**For the Start/End DatePickers**:
-`syncStartWith`: ID of the quickpick this start date is synced to.
-`syncEndWith`: ID of the quickpick this end date is synced to.
-
-When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

@@ -1,20 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  mode: "range",
-  picker_id: "quick-pick-date-range",
-  placeholder: "Select a Date Range",
-  selection_type: "quickpick",
-  controls_end_id: "quick-pick-date-range-end",
-  controls_start_id: "quick-pick-date-range-start",
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  picker_id: "quick-pick-date-range-start",
-  placeholder: "Select a Start Date",
-  sync_start_with:"quick-pick-date-range",
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  picker_id: "quick-pick-date-range-end",
-  placeholder: "Select an End Date",
-  sync_end_with:"quick-pick-date-range",
-}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md

@@ -1,14 +0,0 @@
-You can link a Quickpick DatePicker to standard DatePickers using the following props:
-
-**For the Quickpick DatePicker**:
-`controls_start_id`: ID of the DatePicker that should receive the start date.
-
-`controls_end_id`: ID of the DatePicker that should receive the end date.
-
-When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
-
-**For the Start/End DatePickers**:
-`sync_start_with`: ID of the quickpick this start date is synced to.
-`sync_end_with`: ID of the quickpick this end date is synced to.
-
-When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.