playbook_ui 14.18.0.pre.rc.4 → 14.18.1.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbb4292478c72d434ee753aec73a3f805c891f91ec56e473fc218235f7db6838
-  data.tar.gz: 9e07e43e6d9da0149a3472a74539b092d6743a425905377ab55938667e745984
+  metadata.gz: 676d756bcd1eb62b676282c0e74441ffade83e9b25d10e796a50bdbe822d84aa
+  data.tar.gz: 389e14aff56bbe684b8ecda79b54db9e4903142ebf20ab6a9227a36b6b12879d
 SHA512:
-  metadata.gz: a3f6051e964012be59826c377cd47aac04f6e14330026b2f7daee6dfa4c0798ebc6fb2a0d866411fdbc2a6ed02876fb6f505b4026664b0719b4d725570db72ec
-  data.tar.gz: 5e1bbb99105ed4d85d434f7381d2e6f8670bd46d5a5209219d55ce163524b8bbdf03d5fc9e4e6f27723c482921907e817cf38b4a410ab050dac749c6621113a0
+  metadata.gz: cf48871b90e1b69e6b52380b9af3228843758e70d1889744044bfccb80e12f2dfeb590b552489a838c13d8b04157c6ed20b84fcd50d648472fad7197c12e4b45
+  data.tar.gz: 591f7a30be8318184e0b1fe2679b04758666464a1fc3e705172530389bb6c81327b7f60083ea1607225f280b477545d3ec274f82d8eb5e978158deba63903668

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from '../utilities/object' 
+import { merge } from '../utilities/object'
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -28,7 +28,7 @@ test('uses exact classname', () => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ]
@@ -39,7 +39,7 @@ test('uses exact classname', () => {
         id='circlechartid'
     />
   );
- 
+
   const kit = screen.getByTestId(testId);
   expect(kit).toHaveClass('pb_circle_chart');
 });

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

@@ -0,0 +1,53 @@
+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_block.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>
@@ -18,7 +18,7 @@
     chart_data: data_51,
     id: "with-a-block-2",
     rounded: true,
-}) do %> 
+}) do %>
     <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
 <% end %>
 

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

@@ -13,7 +13,7 @@ const dataWithABlock = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

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

@@ -12,7 +12,7 @@ const dataWithColors = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

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

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

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

@@ -12,7 +12,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

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

@@ -14,7 +14,7 @@ const data = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

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

@@ -14,7 +14,7 @@ const CircleChartLiveData = (props) => {
       value: 49,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 10,
     },
   ])
@@ -29,7 +29,7 @@ const CircleChartLiveData = (props) => {
       value: 12,
     },
     {
-      name: 'After call',
+      name: 'After Call',
       value: 140,
     },
   ]

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1 @@
+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_chart/docs/_circle_chart_rounded.html.erb

@@ -7,7 +7,7 @@
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   }
 ] %>

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

@@ -12,7 +12,7 @@ const dataRounded = [
     value: 49,
   },
   {
-    name: 'After call',
+    name: 'After Call',
     value: 10,
   },
 ]

data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml

@@ -14,6 +14,7 @@ examples:
 
   react:
   - circle_chart_default: Default Style
+  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block
@@ -22,7 +23,5 @@ examples:
   - circle_chart_with_legend_kit: Legend
   - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
+  - circle_chart_inner_sizes: Inner Circle Size Options
   - circle_chart_custom_tooltip: Tooltip Customization
-
-

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

@@ -8,4 +8,5 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
 export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
-export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
+export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -53,4 +53,42 @@ $pb_button_styles: (
       }
     }
   }
-}
+  &.size_small {
+    @each $style in $pb_button_styles {
+      [class^=pb_button_kit][class*=_#{$style}] {
+        width: 20px;
+        height: 20px;
+        min-height: 20px;
+        border-radius: 10px;
+        line-height: 20px;
+        flex-basis: 20px;
+        min-width: 20px;
+        padding: 0;
+      }
+    }
+    // centering small icon svg
+    .pb_button_content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // rails
+      svg.pb_custom_icon {
+        height: 14px;
+        width: 14px;
+        vertical-align: middle;
+      }
+      // react (nested within an additional span)
+      > span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        > svg.pb_custom_icon {
+          height: 14px;
+          width: 14px;
+          vertical-align: middle;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -22,6 +22,7 @@ type CircleIconButtonProps = {
   type?: 'button' | 'submit' | 'reset' | undefined,
   target?: string
   variant?: 'primary' | 'secondary' | 'link',
+  size?: 'default' | 'sm',
 }
 
 const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
@@ -41,13 +42,16 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     link,
     newWindow,
     variant,
+    size = 'default',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const sizeClass = size === 'sm' ? 'size_small' : ''
   const classes = classnames(
     buildCss('pb_circle_icon_button_kit'),
+    sizeClass,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -18,8 +18,16 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :target
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[default sm],
+                  default: "default"
+
       def classname
-        generate_classname("pb_circle_icon_button_kit")
+        generate_classname("pb_circle_icon_button_kit") + size_class
+      end
+
+      def size_class
+        size == "sm" ? " size_small" : ""
       end
     end
   end

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -30,3 +30,17 @@ test('passes loading prop to button', () => {
   
   expect(button).toBeInTheDocument()
 })
+
+test('adds size_small class when size is sm', () => {
+  render(
+    <CircleIconButton
+        data={{ testid: 'small-size-test' }}
+        icon="plus"
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('small-size-test')
+  
+  expect(kit).toHaveClass('pb_circle_icon_button_kit size_small')
+})

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

@@ -0,0 +1,28 @@
+<%= 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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1 @@
+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_circle_icon_button/docs/example.yml

@@ -4,9 +4,11 @@ examples:
   - circle_icon_button_default: Default
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size

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

@@ -2,3 +2,4 @@ export { default as CircleIconButtonDefault } from './_circle_icon_button_defaul
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
 export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
+export { default as CircleIconButtonSize } from './_circle_icon_button_size.jsx'

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

@@ -0,0 +1,14 @@
+<%= 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

@@ -0,0 +1,3 @@
+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/docs/example.yml

@@ -2,6 +2,7 @@ examples:
   rails:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default

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

@@ -1,6 +1,33 @@
 import PbEnhancedElement from "../pb_enhanced_element"
 
-export default class PbCopyButton extends PbEnhancedElement {
+function getTextFromElement(element) {
+  if (!element) return ''
+  return element.tagName.toLowerCase() === 'input'
+    ? element.value
+    : element.innerText
+}
+
+function copyTextToClipboard(text) {
+  if (!text) return
+  navigator.clipboard.writeText(text)
+    .catch(err => console.error('Failed to copy text:', err))
+}
+
+function handleExternalControlCopyClick(element) {
+  const value = element.getAttribute('data-external-copy-value')
+  const fromId = element.getAttribute('data-external-copy-from')
+
+  if (value) {
+    copyTextToClipboard(value)
+  } else if (fromId) {
+    const fromElement = document.querySelector(`#${fromId}`)
+    copyTextToClipboard(getTextFromElement(fromElement))
+  } else {
+    console.warn('Failed to copy:', element)
+  }
+}
+
+export class PbCopyButton extends PbEnhancedElement {
   static get selector() {
     return '.pb_copy_button_kit'
   }
@@ -20,28 +47,27 @@ export default class PbCopyButton extends PbEnhancedElement {
   }
 
   handleClick() {
+    const value = this.element.getAttribute('data-copy-value')
     const fromId = this.element.getAttribute('data-from')
-    if (fromId) {
-      const fromElement = document.querySelector(`#${fromId}`)
-      if (fromElement) {
-        let contentToCopy = ''
-        if (fromElement.tagName.toLowerCase() === 'input') {
-          contentToCopy = fromElement.value
-        } else {
-          contentToCopy = fromElement.innerText
-        }
-        navigator.clipboard.writeText(contentToCopy)
-          .catch(err => console.error('Failed to copy text', err))
-        return
-      }
-    }
 
-    const textToCopy = this.element.getAttribute('data-copy-value')
-    if (textToCopy) {
-      navigator.clipboard.writeText(textToCopy)
-        .catch(err => console.error('Failed to copy text', err))
+    if (value) {
+      copyTextToClipboard(value)
+    } else if (fromId) {
+      const fromElement = document.querySelector(`#${fromId}`)
+      copyTextToClipboard(getTextFromElement(fromElement))
     } else {
-      console.warn('No data-copy-value attribute found or data-from element')
+      console.warn('No data-copy-value or data-from attribute found')
     }
   }
 }
+
+export function addCopyEventListeners() {
+  const externalCopyElements = [
+    ...document.querySelectorAll('div[data-external-copy-value]'),
+    ...document.querySelectorAll('div[data-external-copy-from]')
+  ]
+
+  externalCopyElements.forEach(element => {
+    element.addEventListener('click', () => handleExternalControlCopyClick(element))
+  })
+}

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -50,6 +50,10 @@ type DatePickerProps = {
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
+  controlsStartId?: string,
+    controlsEndId?: string,
+    syncStartWith?: string,
+    syncEndWith?: string,
 } & GlobalProps
 
 const DatePicker = (props: DatePickerProps): React.ReactElement => {
@@ -98,6 +102,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     staticPosition = true,
     thisRangesEndToday = false,
     yearRange = [1900, 2100],
+    controlsStartId,
+    controlsEndId,
+    syncStartWith,
+    syncEndWith,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -134,6 +142,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       staticPosition,
       thisRangesEndToday,
       yearRange,
+      controlsStartId,
+      controlsEndId,
+      syncStartWith,
+      syncEndWith,
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)