playbook_ui 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335 → 14.23.0.pre.alpha.PLAY2303optD9000

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -6,8 +6,6 @@ module Playbook
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
       prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
-      prop :indeterminate_main_labels, type: Playbook::Props::Array,
-                                       default: []
       prop :indeterminate_parent
       prop :text
       prop :value
@@ -51,19 +49,10 @@ module Playbook
       end
 
       def data
-        base_data = Hash(prop(:data)).merge(
+        Hash(prop(:data)).merge(
           pb_checkbox_indeterminate_main: indeterminate_main,
           pb_checkbox_indeterminate_parent: indeterminate_parent
         )
-
-        if indeterminate_main && indeterminate_main_labels.size == 2
-          base_data.merge!(
-            pb_checkbox_indeterminate_main_label_check: indeterminate_main_labels[0],
-            pb_checkbox_indeterminate_main_label_uncheck: indeterminate_main_labels[1]
-          )
-        end
-
-        base_data
       end
 
     private

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
+          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
-          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1,2 +1 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
-If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.

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

@@ -10,239 +10,47 @@ export default class PbCheckbox extends PbEnhancedElement {
   connect() {
     const mainCheckboxWrapper = this.element;
     const mainCheckbox = mainCheckboxWrapper.querySelector('input')
-    const directChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
+    const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
 
-    // Helper function to get all descendant checkboxes
-    const getAllDescendantCheckboxes = () => {
-      const descendants = [];
-      const queue = [...directChildCheckboxes];
-      
-      // Breadth-first search to find all nested descendants
-      while (queue.length > 0) {
-        const checkbox = queue.shift();
-        descendants.push(checkbox);
-        
-        // Find children of this checkbox
-        const checkboxWrapper = checkbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
-        if (checkboxWrapper) {
-          const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${checkboxWrapper.id}"] input[type="checkbox"]`);
-          queue.push(...childCheckboxes);
-        }
-      }
-      
-      // Also include any non-"main" checkboxes that have this as a parent
-      const nonMainChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
-      nonMainChildCheckboxes.forEach(cb => {
-        if (!descendants.includes(cb)) {
-          descendants.push(cb);
-        }
-      });
-      
-      return descendants;
-    };
-
-    // Helper function to determine checkbox state
-    const getCheckboxState = (checkboxes) => {
-      const checkedCount = checkboxes.filter(cb => cb.checked).length;
-      const totalCount = checkboxes.length;
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
       
-      return {
-        allChecked: checkedCount === totalCount,
-        noneChecked: checkedCount === 0,
-        indeterminate: !(checkedCount === totalCount || checkedCount === 0),
-        checkedCount,
-        totalCount
-      };
-    };
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
 
-    // Helper function to update checkbox visual state
-    const updateCheckboxVisualState = (checkbox, isIndeterminate, isChecked) => {
-      checkbox.indeterminate = isIndeterminate;
-      checkbox.checked = isChecked;
-    };
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
 
-    // Helper function to update checkbox label and icons
-    const updateCheckboxLabelAndIcons = (wrapper, isIndeterminate, checkedCount) => {
-      const checkAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All';
-      const uncheckAllLabel = wrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All';
-      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
 
-      // Update label
-      const bodyKitElement = wrapper.getElementsByClassName('pb_body_kit')[0];
-      if (bodyKitElement) {
-        bodyKitElement.textContent = text;
-      }
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
       
-      // Update icons
-      const iconSpan = wrapper.querySelector('[data-pb-checkbox-icon-span]');
-      if (iconSpan) {
-        const iconClassToAdd = isIndeterminate ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-        const iconClassToRemove = isIndeterminate ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-        iconSpan.classList.add(iconClassToAdd);
-        iconSpan.classList.remove(iconClassToRemove);
-      }
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
       
-      // Toggle icon visibility
-      const indeterminateIcon = wrapper.getElementsByClassName("indeterminate_icon")[0];
-      const checkIcon = wrapper.getElementsByClassName("check_icon")[0];
-      
-      if (indeterminateIcon) {
-        indeterminateIcon.classList.toggle('hidden', !isIndeterminate);
-      }
-      if (checkIcon) {
-        checkIcon.classList.toggle('hidden', isIndeterminate);
-      }
-    };
-
-    // Main function to update this checkbox's state
-    const updateMainCheckbox = () => {
-      const allDescendantCheckboxes = getAllDescendantCheckboxes();
-      const state = getCheckboxState(allDescendantCheckboxes);
-      
-      updateCheckboxVisualState(mainCheckbox, state.indeterminate, state.allChecked);
-      updateCheckboxLabelAndIcons(mainCheckboxWrapper, state.indeterminate, state.checkedCount);
-    };
-
-    // Function to update parent checkboxes recursively
-    const updateParentCheckboxes = () => {
-      const parentId = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateParent;
-      if (parentId) {
-        const parentCheckbox = document.getElementById(parentId);
-        if (parentCheckbox) {
-          const parentWrapper = parentCheckbox.closest('[data-pb-checkbox-indeterminate-main="true"]');
-          if (parentWrapper) {
-            const parentInstance = parentWrapper.pbCheckboxInstance;
-            if (parentInstance && parentInstance.updateMainCheckbox) {
-              parentInstance.updateMainCheckbox();
-              parentInstance.updateParentCheckboxes();
-            }
-          }
-        }
-      }
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
     };
 
-    // Function to update non-main checkboxes when their children change
-    const setupNonMainCheckboxUpdates = () => {
-      const allCheckboxesWithChildren = document.querySelectorAll('input[type="checkbox"]');
-      allCheckboxesWithChildren.forEach(cb => {
-        const checkboxWrapper = cb.closest('[data-pb-checkbox-indeterminate-main="true"]');
-        if (checkboxWrapper && checkboxWrapper !== mainCheckboxWrapper) {
-          return; // Skip different "main" checkboxes
-        }
-        
-        const childCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${cb.id}"] input[type="checkbox"]`);
-        if (childCheckboxes.length > 0) {
-          childCheckboxes.forEach(childCb => {
-            childCb.addEventListener('change', () => {
-              const state = getCheckboxState(Array.from(childCheckboxes));
-              updateCheckboxVisualState(cb, state.indeterminate, state.allChecked);
-              
-              // Trigger updates on all main checkboxes that might be affected
-              const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
-              mainCheckboxes.forEach(mainCb => {
-                const mainInstance = mainCb.pbCheckboxInstance;
-                if (mainInstance && mainInstance.updateMainCheckbox) {
-                  setTimeout(() => {
-                    mainInstance.updateMainCheckbox();
-                  }, 0);
-                }
-              });
-            });
-          });
-        }
-      });
-    };
-
-
-
-    // Initialize checkbox state
+    // Set indeterminate icon on main checkbox if initial children checkboxes are checked
     updateMainCheckbox();
 
-    // Handle main checkbox change - propagate to all descendants
-    mainCheckbox.addEventListener('change', function() {
-      const allDescendantCheckboxes = getAllDescendantCheckboxes();
-      const state = getCheckboxState(allDescendantCheckboxes);
-      
-      if (state.indeterminate) {
-        // If indeterminate, uncheck all descendants and the parent
-        allDescendantCheckboxes.forEach(cb => {
-          cb.checked = false;
-          // Dispatch custom event for programmatic changes- change styles in advanced table
-          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
-        });
-        this.checked = false;
-      } else {
-        // Otherwise, set all descendants to the same state as this checkbox
-        allDescendantCheckboxes.forEach(cb => {
-          cb.checked = this.checked;
-          // Dispatch custom event for programmatic changes- change styles in advanced table
-          cb.dispatchEvent(new Event('checkbox-programmatic-change', { bubbles: true }));
-        });
-      }
-      
-      // Update this checkbox first, then parents after a delay
+    this.element.querySelector('input').addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
       updateMainCheckbox();
-      setTimeout(() => {
-        updateParentCheckboxes();
-      }, 0);
-      
-      // Also trigger updates on all main checkboxes to ensure proper state propagation
-      triggerAllMainCheckboxUpdates();
     });
 
-    // Handle child checkbox changes
-    directChildCheckboxes.forEach(cb => {
+    childCheckboxes.forEach(cb => {
       cb.addEventListener('change', updateMainCheckbox);
     });
-
-    // Handle deeper descendant changes
-    const allDescendantCheckboxes = getAllDescendantCheckboxes();
-    allDescendantCheckboxes.forEach(cb => {
-      if (!Array.from(directChildCheckboxes).includes(cb)) {
-        cb.addEventListener('change', updateMainCheckbox);
-      }
-    });
-
-    // Handle non-main child checkboxes
-    const allChildCheckboxes = document.querySelectorAll(`[data-pb-checkbox-indeterminate-parent="${this.element.id}"] input[type="checkbox"]`);
-    allChildCheckboxes.forEach(cb => {
-      if (!allDescendantCheckboxes.includes(cb)) {
-        cb.addEventListener('change', updateMainCheckbox);
-      }
-    });
-    
-    // Also trigger updates on all main checkboxes when any checkbox changes
-    let updateTimeout = null;
-    const triggerAllMainCheckboxUpdates = () => {
-      // Debounce the updates to prevent excessive calls
-      if (updateTimeout) {
-        clearTimeout(updateTimeout);
-      }
-      updateTimeout = setTimeout(() => {
-        const mainCheckboxes = document.querySelectorAll('[data-pb-checkbox-indeterminate-main="true"]');
-        mainCheckboxes.forEach(mainCb => {
-          const mainInstance = mainCb.pbCheckboxInstance;
-          if (mainInstance && mainInstance.updateMainCheckbox) {
-            mainInstance.updateMainCheckbox();
-          }
-        });
-      }, 10); // Small delay to batch updates
-    };
-    
-    // Store the original updateMainCheckbox function and create a new one that also triggers updates
-    const originalUpdateMainCheckbox = updateMainCheckbox;
-    const enhancedUpdateMainCheckbox = () => {
-      originalUpdateMainCheckbox();
-      triggerAllMainCheckboxUpdates();
-    };
-    
-    // Replace the updateMainCheckbox function
-    mainCheckboxWrapper.pbCheckboxInstance = {
-      updateMainCheckbox: enhancedUpdateMainCheckbox,
-      updateParentCheckboxes
-    };
-
-    // Setup updates for non-main checkboxes with children
-    setupNonMainCheckboxUpdates();
   }
 }

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

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

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