playbook_ui 14.23.0.pre.alpha.play23129273 → 14.23.0.pre.rc.0

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

@@ -1,61 +1,47 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const dataWithLabels = [
   {
     name: 'Facebook',
-    y: 2498,
+    value: 2498,
   },
   {
     name: 'YouTube',
-    y: 2000,
+    value: 2000,
   },
   {
     name: 'WhatsApp',
-    y: 2000,
+    value: 2000,
   },
   {
     name: 'Facebook Messenger',
-    y: 1300,
+    value: 1300,
   },
   {
     name: 'WeChat',
-    y: 1165,
+    value: 1165,
   },
   {
     name: 'Instagram',
-    y: 1000,
+    value: 1000,
   },
   {
     name: 'Tik Tok',
-    y: 800,
+    value: 800,
   },
 ]
 
-const CircleChartWithLabels = () => {
-  const chartOptions = {
-    series: [{ data: dataWithLabels }],
-    plotOptions: {
-      pie: {
-        dataLabels: {
-          enabled: true,
-        }
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const CircleChartWithLabels = (props) => (
+  <div>
+    <CircleChart
+        chartData={dataWithLabels}
+        dataLabels
+        id="with-labels-example"
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartWithLabels
+export default CircleChartWithLabels

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

@@ -1,41 +1,32 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const dataWithLegend = [{
   name: 'Bugs',
-  y: 8,
+  value: 8,
+
 },
 {
   name: 'Chores',
-  y: 1,
+  value: 1,
+
 },
 {
   name: 'Stories',
-  y: 12,
-}]
-
-const CircleChartWithLegendKit = () => {
-  const chartOptions = {
-    series: [{ data: dataWithLegend }],
-    plotOptions: {
-      pie: {
-        showInLegend: true
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+  value: 12,
+},
+]
 
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const CircleChartWithLegendKit = (props) => (
+  <div>
+    <CircleChart
+        chartData={dataWithLegend}
+        id="with-legend-example"
+        legend
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartWithLegendKit
+export default CircleChartWithLegendKit

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

@@ -1,55 +1,47 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const dataWithTitle = [
   {
     name: 'Facebook',
-    y: 2498,
+    value: 2498,
   },
   {
     name: 'YouTube',
-    y: 2000,
+    value: 2000,
   },
   {
     name: 'WhatsApp',
-    y: 2000,
+    value: 2000,
   },
   {
     name: 'Facebook Messenger',
-    y: 1300,
+    value: 1300,
   },
   {
     name: 'WeChat',
-    y: 1165,
+    value: 1165,
   },
   {
     name: 'Instagram',
-    y: 1000,
+    value: 1000,
   },
   {
     name: 'Tik Tok',
-    y: 800,
+    value: 800,
   },
 ]
 
-const CircleChartWithTitle = () => {
-  const chartOptions = {
-    title: { text: "Active Users on Social Media" },
-    series: [{ data: dataWithTitle }],
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const CircleChartWithLegendKit = (props) => (
+  <div>
+    <CircleChart
+        chartData={dataWithTitle}
+        id="with-title-example"
+        title="Active Users on Social Media"
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartWithTitle
+export default CircleChartWithLegendKit

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

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

@@ -9,3 +9,4 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
 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 CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -3,7 +3,7 @@ import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
-  dragData: { id: "", initialGroup: "", originId: "" },
+  dragData: { id: "", initialGroup: "" },
   isDragging: "",
   activeContainer: ""
 };
@@ -60,8 +60,7 @@ export const DraggableProvider = ({
   onDragEnd,
   onDrop,
   onDragOver,
-  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -94,17 +93,15 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
-
     if (state.dragData.id !== id) {
       dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -112,7 +109,6 @@ export const DraggableProvider = ({
   const handleDragEnd = () => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
     if (onDragEnd) onDragEnd();
   };
 
@@ -121,8 +117,6 @@ export const DraggableProvider = ({
   };
 
   const handleDrop = (container: string) => {
-    if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
-
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
@@ -130,8 +124,6 @@ export const DraggableProvider = ({
   };
 
   const handleDragOver = (e: Event, container: string) => {
-     if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
-
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -6,16 +6,14 @@ export interface ItemType {
 
 export interface InitialStateType {
   items: ItemType[];
-  dragData: { id: string; initialGroup: string, originId?: string };
+  dragData: { id: string; initialGroup: string };
   isDragging: string;
   activeContainer: string;
 }
 
 export type ActionType =
   | { type: 'SET_ITEMS'; payload: ItemType[] }
-  | { type: 'SET_DRAG_DATA'; payload: {
-    originId: string; id: string; initialGroup: string 
-} }
+  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
@@ -37,5 +35,4 @@ export type ActionType =
     onDrop?: (container: string) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
-    providerId?: string;
   }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -8,7 +8,6 @@
 @import "../pb_textarea/textarea_mixin";
 
 @import "./scss_partials/dropdown_animation";
-@import "dropdown_mixin";
 
 [class*="pb_dropdown"] {
   .dropdown_wrapper {
@@ -99,23 +98,9 @@
           [class^="pb_title_kit"], a {
             color: $white !important;
           }
-          border-bottom: 1px solid $border_light;
           &:hover {
-            background-color: $product_1_background;
-          }
- 
-          // activeStyle font color map
-          @each $name, $color in $font-colors {
-            &.font-#{$name} {
-              @include apply-font-color($color);
-            }
+            background-color: $product_1_background !important;
           }
-          // activeStyle background color map (no difference between selected and selected+hover custom colors)
-          @each $name, $bg in $background-colors {
-            &.bg-#{$name} {
-              background-color: $bg;
-            }
-          }     
         }
       }
 
@@ -282,7 +267,6 @@
         }
         &[class*="selected"] {
           background-color: $primary;
-          border-bottom: rgba($white, 0.15);
         }
       }
     }

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -39,10 +39,6 @@ type DropdownProps = {
     options: GenericObject;
     separators?: boolean;
     variant?: "default" | "subtle";
-    activeStyle?: {
-      backgroundColor?: string;
-      fontColor?: string;
-    };
 };
 
 interface DropdownComponent
@@ -73,7 +69,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         options,
         separators = true,
         variant = "default",
-        activeStyle,
     } = props;
 
     const ariaProps = buildAriaProps(aria);
@@ -256,7 +251,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         >
             <DropdownContext.Provider
                 value={{
-                    activeStyle,
                     autocomplete,
                     dropdownContainerRef,
                     filteredOptions,

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx

@@ -18,7 +18,6 @@ const DropdownCustomRadioOptions = (props) => {
   return (
   <div>
       <Dropdown
-          activeStyle={{ backgroundColor: "bg_light", fontColor: "text_lt_default" }}
           label="Select Item"
           onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
           options={options}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md

@@ -1 +1 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown. Use the [activeStyle](https://playbook.powerapp.cloud/kits/dropdown/react#custom-active-style-options) `backgroundColor` and `fontColor` props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.
+Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

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

@@ -16,7 +16,7 @@ examples:
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_with_custom_icon_options: Custom Icon Options
-  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in the Rails follow up to [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -39,9 +39,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
-  - dropdown_with_custom_active_style_options: Custom Active Style Options
   - dropdown_with_custom_icon_options: Custom Icon Options
-  - dropdown_with_custom_radio_options: Custom Radio Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

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

@@ -21,5 +21,4 @@ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_mult
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
 export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
 export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
-export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
-export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'

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

@@ -369,28 +369,4 @@ test("defaultValue works with multiSelect", () => {
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
     expect(option2[0]).not.toHaveTextContent(firstOpt)
-  })
-
-test("applies activeStyle backgroundColor and fontColor when selected", () => {
-    render(
-      <Dropdown
-          activeStyle={{
-            backgroundColor: "bg_light",
-            fontColor: "primary",
-          }}
-          data={{ testid: testId }}
-          options={options}
-      />
-    )
-  
-    const kit = screen.getByTestId(testId)
-    const option = kit.querySelectorAll(".pb_dropdown_option_list")[1]
-  
-    fireEvent.click(option)
-  
-    const selected = kit.querySelector(".pb_dropdown_option_selected")
-
-    expect(selected).toBeInTheDocument()
-    expect(selected).toHaveClass("bg-bg_light")
-    expect(selected).toHaveClass("font-primary")
   })

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -41,7 +41,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = props;
 
   const {
-    activeStyle,
     filteredOptions,
     filterItem,
     focusedOptionIndex,
@@ -60,6 +59,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
    ? selected.some((item) => item.label === option?.label)
    : (selected as GenericObject)?.label === option?.label;
 
+  
   if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
     return null;
   }
@@ -70,14 +70,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
 
   const selectedClass = isSelected ? "selected" : "list";
 
-
-  const bgTokenClass = activeStyle?.backgroundColor
-      ? `bg-${activeStyle.backgroundColor}`
-      : "";
-  const fontTokenClass = activeStyle?.fontColor
-    ? `font-${activeStyle.fontColor}`
-    : "";
-
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -87,8 +79,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    bgTokenClass, 
-    fontTokenClass,
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,36 +1,19 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Name', value: 67 },
+]
 
-const data = [{ name: "Name", y: 67 }]
+const GaugeColors = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-colors"
+        {...props}
+        colors={['data-7']}
+    />
+  </div>
+)
 
-const baseOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_7,
-    }
-  },
-};
-
-const GaugeColors = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeColors;
+export default GaugeColors

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -2,44 +2,14 @@ import React from "react";
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Gauge from '../../pb_gauge/_gauge'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 10 }];
-
-const baseOptions = {
-  series: [{ data: data }],
-  chart: {
-    height: "150",
-  },
-  plotOptions: {
-    series: {
-      animation: false,
-    },
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span class="fix">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
-      },
-    },
-  },
-};
-
-const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+const data = [{ name: "Name", value: 10 }];
 
 const GaugeComplex = (props) => (
   <Flex
@@ -130,9 +100,13 @@ const GaugeComplex = (props) => (
                   shrink
                   {...props}
               >
-                <HighchartsReact
-                    highcharts={Highcharts}
-                    options={options}
+                <Gauge
+                    chartData={data}
+                    disableAnimation
+                    height="150"
+                    id="gauge-complex"
+                    suffix="%"
+                    {...props}
                 />
                </FlexItem>
             </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,30 +1,18 @@
 import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
+import Gauge from '../../pb_gauge/_gauge'
 
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
+const data = [
+  { name: 'Name', value: 45 },
+]
 
-const data = [{ name: "Name", y: 45 }]
+const GaugeDefault = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-default"
+        {...props}
+    />
+  </div>
+)
 
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugeDefault = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeDefault;
+export default GaugeDefault